Brand

The mark & logo — “System”

Hollow journey nodes climbing left→right to one solid orange destination node. Roundel (badge), glyph (favicon), and the wordmark lockup.

G8N•AIroundel · default
G8N•AIroundel · navy
G8N•AIroundel · orange
G8N•AIglyph · reversed
G8N•AIG8NAIG8N•AIG8NAI
Brand

Wordmark & the accent word

Verdana bold, tracked, orange middle dot. One orange word inside an otherwise-ink headline; underline is a clean rule (default) or one smooth curve (emphasis). The wavy squiggle and ✦ spark are retired.

G8NAI

The barrier to building has collapsed.

Build what matters

Brand

Quote-card pattern

The social post-image: a slab statement with one orange word over navy / charcoal / cream, wordmark in the corner. 4:5 for LinkedIn, 16:9 for Substack.

The barrier to building has collapsed.

G8NAI

AI writes the volume. What ships is your judgment.

G8NAI

They felt faster with AI. They were 19% slower.

Source: METR study
G8NAI
Colors

One accent, two surfaces, ink & status

Orange #d97706 is the only accent — on the single thing to notice. Everything else is surface + ink. Status colors are for product UI only, never marketing.

Accent — orange
--g8n-orange · the one
Accent hover
--g8n-orange-hover
Tint (bg only)
--tint-orange
Cream (paper)
--g8n-cream
Navy (ink)
--g8n-navy
Charcoal (board)
--g8n-charcoal

Ink scale

ink-900
--g8n-ink-900
ink-700
--g8n-ink-700
ink-500 · muted
--g8n-ink-500
ink-300 · faint
--g8n-ink-300

Status — system UI only

success
--status-success
warning
--status-warning
danger
--status-danger
info
--status-info
Type

Email-safe system stack

Georgia headlines, Verdana body + wordmark. Renders natively everywhere — no webfonts.

72 · hero stat / quoteGeneration AI
48 · H1 / slide titleGeneration AI
36Generation AI
28Generation AI
22Generation AI
18 · leadGeneration AI
16 · bodyGeneration AI
Spacing

Scale, radii, shadow & glow

A 4px base scale — generous, calm rhythm. Soft warm shadows; the one expressive shadow is the orange focal glow.

--space-14px
--space-28px
--space-312px
--space-416px
--space-524px
--space-632px
--space-748px
--space-864px
--radius-sm
--radius-md
--radius-lg
--radius-pill
--shadow-sm
--shadow-md
--shadow-lg
--shadow-glow
Components

Core — buttons, badges, fields, cards

Calm, confident, content-first. Interaction lives in CSS (hover / active / focus-visible), so it works for keyboard, touch, and forced-colors. WCAG AA throughout.

AccentSolidInkMuted
We never share it.
1,000+
commits
in 60 days
Product UI

Forms, feedback, overlays & navigation

The product-UI tier for the SaaS, app, and bot surfaces — WCAG 2.2 AA, keyboard-complete, and mirror-able in Hotwire/Stimulus via docs/aria-contracts.md.

Forms

Brand voice
Used for new conversations.
Shown to reviewers before they approve the rollout.

Feedback

Tokens published

The design system is now on v1.1 — orange stays the single accent.
Loading workspaceLoading workspaceLoading workspace

Media

G8N•AI

Navigation & disclosure

Turn scattered notes into a calm, content-first system of record.
How does request routing work?
Each request is matched to the best model by latency, cost, and capability.
Do I bring my own keys?
Yes. Connect your provider keys once; G8N•AI orchestrates the rest.
Can I cap spend per project?
Set per-project budgets and hard spend caps from the dashboard.

Overlays

Publish run summary

This sends the generated summary to everyone on the list. You can still edit it afterward.