One system, every surface.
Tokens, type, space, elevation and motion — the layer every ai.com surface consumes. Marketing, product, docs, desktop and mobile, in light and dark, from one source.
The ai.com design system, extracted from the brand's two canonical artifacts — landing.html (v4 "quiet sky") and strategy-deck.html (identity slides) — and extended to cover the whole platform: product UI, marketing, docs, desktop and mobile, in light and dark.
This page is its own proof. Everything on it is built from the semantic tokens defined below — flip the theme toggle in the sidebar and the entire system re-renders. Components marked Canonical come directly from the source files; components marked Extended are new, derived strictly from the system's rules to cover product needs the marketing pages never had (forms, toasts, navigation shells, mobile).
night-muted standardized to #9DA1B2 (landing used #A7A9BC), danger on dark standardized to #FF7A87 (landing used #FF8A96), and glass opacity standardized to 0.72 (landing hero 0.55, deck 0.75). The mint "verified" green existed only as raw rgba values in landing.html — it is now a first-class token.Principles.
Quiet Sky in five rules. Everything else in this document is these rules applied at smaller scales.
| # | Principle | What it means in practice |
|---|---|---|
| 1 | One color carries the brand | A single cyan accent with three readings — #0FA8CE as the color, #0B86A6 for small text and pressed states on light, #5FD4F2 lifted for the night. No gradients, anywhere. No second hue. |
| 2 | The accent means something | Cyan appears only where it carries meaning: live dots, the agent's word, active states, checkpoints. Never in body text, never as decoration. Danger red appears only on Deny and Stop. |
| 3 | Near-black night, soft glow | Dark surfaces are near-black (#0A0D12) with a faint cyan horizon and at most one slow aurora band. Texture you feel, not atmosphere that shouts. No violet, no neon-on-black. |
| 4 | The dot is the material | The dot in ai·com is the brand's particle: live pips, agent avatars, status dots, the page-scale dot lattice. Its glow (0 0 10px accent) marks anything alive right now. |
| 5 | Trust is visible, not badged | Every safety claim is a component you can watch: the checkpoint card, the verified-done strip, the Stop pill. No seals, no badge walls, no trust theater. |
Always
- Ink pills for primary actions on light; white pills on dark.
- Soft geometry: pills at 99px, cards at 16–20px. No sharp corners.
- Onest for everything — including numbers. Nothing is ever monospaced in product or marketing UI.
- Layered, soft shadows; glass panels with gentle backdrop blur on dark.
Never
- No gradients — anywhere. One color carries the brand.
- No violet, no purple skies. Dusk-toned darks read entertainment, not work.
- No neon-on-black. Dark zones glow softly; they never buzz.
- No badge walls, seals, or trust theater. No accent color in body text.
Both lists verbatim from strategy-deck.html slide 11. Canonical
A near-black night, one cyan accent.
Two palettes — day and night — that were born as the landing page's light and dark zones, formalized here as the platform's light and dark themes. Components never touch primitives; they consume the semantic layer, which is what makes theming a variable swap.
Primitives Canonical
The raw brand values. The first eight are the deck's own swatch row; the rest appear throughout landing.html and are codified here.
Mint is the "verified / live" green — it appears only on evidence of completed, verified work (done strips, live chips). It is never a general success color for UI chrome. Night 2 and Night 3 are the product dark-mode surface steps, derived from the landing's glass base rgb(13,17,23). Extended
Semantic tokens Extended
What components actually use. One name, two values — the theme decides which. This table is the heart of the system; the full copy-paste CSS lives in Tokens & implementation.
| Token | Light | Dark | Use for |
|---|---|---|---|
| --bg | Canvas #FBFBFD | Night #0A0D12 | The page. Nothing else sits below it. |
| --surface-1 | #FFFFFF | #0D1117 | Cards, frames, panels — anything raised off the page |
| --surface-2 | #F7F7FA | #12161F | Nested wells inside cards: mocks, code wells, input strips |
| --surface-3 | #FDFDFE | #0F131B | Barely-raised rows, table headers |
| --text-1 | Ink #0E0E14 | Night ink #EDEEF4 | Headings, primary copy, values |
| --text-2 | Muted #5B5B66 | Night muted #9DA1B2 | Body copy, descriptions |
| --text-3 | Faint #8A8A94 | Night faint #7E8095 | Metadata, timestamps, decorative labels only |
| --border | ink @ 8% | night-ink @ 9% | Hairlines, dividers, card edges |
| --border-strong | ink @ 14% | night-ink @ 18% | Ghost buttons, inputs, interactive edges |
| --fill | ink @ 4.5% | night-ink @ 5% | Chips, hovers, quiet fills |
| --accent | #0FA8CE | #5FD4F2 | Live dots, active states, meters, focus rings |
| --accent-text | #0B86A6 | #5FD4F2 | Small/bold accent text — eyebrows, checkmarks, working labels |
| --accent-tint / --accent-border | accent @ 8% / 30% | accent-night @ 10% / 30% | Checkpoint cards, agent-tinted fills, selected states |
| --danger | #C24558 | #FF7A87 | Deny and Stop. Nothing else. |
| --ok / --ok-text | #2BD9A9 / #14795C | #2BD9A9 / #8FE0C4 | Verified done, live-now chips |
| --btn-primary-bg / -fg | Ink / white | Night ink / night | The primary pill — ink on light, white on dark, by brand rule |
| --bubble-agent | #F4F4F8 | night-ink @ 7% | Agent message bubbles |
| --glass | white @ 78% | rgb(13,17,23) @ 72% | Floating nav, overlay panels — always with backdrop blur 8–14px |
Rules of light Canonical
How color behaves
- One accent, three readings — the theme picks the reading; components just say
--accent. - Primary buttons are ink pills in light, white pills on dark. The accent is never a button fill.
- Text never renders in raw accent on light — small accent text uses
--accent-text(#0B86A6), which exists precisely for contrast. - Tints (8–10%) carry meaning-fills: checkpoints, agent bubbles, selection. Fills (
--fill) are meaning-free.
Color anti-patterns
- Accent as decoration, in body text, or as a background for large areas.
- Danger anywhere except Deny / Stop / destructive confirmation.
- Mint as a general success color — it marks verified outcomes only.
- New hues. If a state needs a color, it maps to accent, danger, mint, or neutrals.
One family, soft geometry.
Onest is the only typeface, everywhere — display to caption, marketing to product, including every number. Nothing in the brand is ever monospaced (code samples in internal docs are the sole exception).
| Style | Size | Weight | Tracking | Line height | Notes |
|---|---|---|---|---|---|
| Display | 64px · clamp(46, 7vw, 80) hero | 700–800 | −0.035 to −0.04em | 1.02 | Marketing heroes, deck titles. Never inside product chrome. |
| Title 1 | 36–44px · clamp(30, 3.8vw, 40) | 600–700 | −0.025em | 1.08–1.12 | Section / page titles |
| Title 2 | 18–22px | 700 | −0.02em | 1.2 | Card and feature headings |
| Title 3 | 14.5–16px | 600–700 | −0.015em | 1.3 | Row titles, list headings |
| Body lg | 16–17px | 400–500 | 0 | 1.6–1.65 | Marketing body, ledes |
| Body / UI | 13.5–14px | 400–500 | 0 | 1.5–1.55 | Product default: bubbles, descriptions |
| Small | 12.5–13px | 400–600 | 0 | 1.45–1.5 | Secondary rows, steps, provenance |
| Caption | 12px | 400–500 | 0 | 1.4 | Timestamps, footnotes — --text-3 |
| Eyebrow | 12px | 700 | +0.1em, uppercase | 1 | Section markers — --accent-text or --text-3 |
| Micro label | 10–11px | 700–800 | +0.06–0.09em, uppercase | 1 | Chips, tags, panel titles. Decorative — never the only carrier of meaning. |
Numbers and stats are set in Onest 600. Emphasis inside body copy is weight 600 in --text-1 — not italic, not accent color. On mobile, body/UI never drops below 13px and captions never below 11px.
A 4px rhythm and soft geometry.
Spacing steps on a 4px base. Radii come in six named stops — pills for anything interactive and small, soft rectangles for containers.
Spacing scale Extended
Usage anchors from the sources: gaps between cards 12–18 · card padding 24–28 · frame padding 18–20 · section padding 96 desktop / 80 tablet / 64 mobile · marketing container padding-inline 28.
Radius Canonical
Pills for buttons, chips, and floating nav. Frames (chat windows, hero scenes) at 20–24. Cards at 16. Nested cards and callouts at 12–14. Controls (inputs) at 12. Tiny nested elements at 8. Message bubbles: 14 with a 4px "speaker corner" pointing at the sender. No sharp corners, anywhere.
Layout & breakpoints Extended
| Context | Spec | Source |
|---|---|---|
| Marketing container | max-width 1160 · padding-inline 28 | landing.html |
| Deck / doc content | max-width 1000–1060 | strategy-deck, product-spec |
| App shell (desktop) | rail 250–260 · main flexible (content max 980) · right panel 320 collapsible | product-spec app map |
| Breakpoints | 1024 tablet (rail collapses, grids halve) · 640 mobile (single column, bottom nav) | standardized — deck's 1000/560 folds into these |
| Grid gaps | 18 between cards on desktop, 12–14 on mobile | landing bento / team grids |
| Touch targets | ≥ 44 × 44 px on mobile; inputs grow to 44px height | extended |
Soft light, glass, and the night sky.
Depth comes from layered shadows and surface steps, not borders alone. Dark zones add glass and — in marketing only — the aurora.
| Level | Token / recipe | Use |
|---|---|---|
| Flat | --bg, no shadow | The page itself |
| Raised | --surface-1 + --shadow-soft + --border | Cards, panels, rows |
| Floating | --surface-1 + --shadow-card | Frames, modals, popovers, hero scenes |
| Glass | --glass + backdrop-blur 8–14px + --border-strong | Floating nav, overlay chrome, dark-zone cards |
| Hover lift | translateY(-4px) + shadow-soft → shadow-card, 250ms | Interactive cards only — never rows or list items |
The dusk treatment Canonical
Marketing dark zones (hero, finale, deck title slides) sit on the night with a faint cyan horizon rising from the bottom edge and one aurora band drifting on a 22–30s loop, blurred 70px. Optional film grain at 4% opacity. Product dark mode uses none of this — it is flat night surfaces; the glow belongs to the brand's front door, not to work.
The dusk recipe: radial cyan horizon at 14% from the bottom · linear cyan wash at 4.5% from the top · one aurora band, blur 70px, drifting 22s alternate. This band is the entire permitted atmosphere.
Calm, physical, brief.
One easing curve everywhere. Transform and opacity only — nothing animates layout. Ambient motion exists solely in marketing dark zones.
| Token | Value | Use |
|---|---|---|
| --ease | cubic-bezier(0.22, 1, 0.36, 1) | Every transition and entrance. The only curve. |
| --t-fast · 200ms | buttons, toggles, links, color shifts | Micro-interactions |
| --t-base · 250ms | card hover lift, chips | Component state |
| --t-slow · 300ms | nav, theme flip, panel slide | Chrome |
| --t-reveal · 500ms | fade + translateY(14–16px), stagger 90ms | Scroll-in reveals, first paint |
The named motions Canonical
pip-pulse marks anything live. bar-run (1.8s) is the agent working. spin is a short determinate wait. Ambient loops — orbit float 7s, aurora 22–30s, marquee 36s — are marketing-only. Every animation dies under prefers-reduced-motion; reveals render visible, spinners become static.
The library.
Every component in both themes — the global toggle flips this whole page; the paired panels below pin one theme each so you can compare side by side. All of it consumes semantic tokens only.
Buttons Canonical
Primary is an ink pill on light and a white pill on dark — by rule, not preference. Ghost carries secondary actions; quiet is for tertiary; deny is text-only danger. Sizes: lg 15/13×26 (marketing CTAs), md 13/8×15 (product default), sm 12/6×12 (dense rows).
Chips, labels & badges Canonical
Chips are quiet fills for neutral facts. Labels are micro-type pills that classify — solid for the highest rank, accent-tinted for meaningful states, outlined neutral for the rest. The glass badge carries a live pip in heroes and headers.
The dot & avatars Canonical
People are photographs; agents are the dot. The agent avatar is a solid accent circle with a pulsing halo ring — one glance separates human from agent in any thread. Pips come in 6 / 7 / 8px; a glowing pip means live right now.
Sizes: 40 (headers, member rows) · 26 (threads) · 20 (dense mocks). The pulse ring animates at 2.6s. In shared Rooms every agent message carries both the dot avatar and its owner's name — "mika · Maya's agent" — attribution is structural, not stylistic.
Messages & threads Canonical
The fused human + agent timeline. User bubbles are primary-colored pills with the speaker corner bottom-right; agent bubbles are quiet fills, corner top-left. Steps render inside agent bubbles with cyan checks. A working line always carries Stop.
The checkpoint card Canonical
The product's core interaction, identical anatomy everywhere: state line ("Needs you…"), the concrete action, provenance, and the three verbs. Accent tint + accent border — the only card that ships with meaning built into its fill. Deny is always text-only, always last.
Verified done Canonical
The only place mint appears: work confirmed by the independent verifier, with evidence. The check circle is mint, the claim is text-1, evidence is expandable.
6 emails in Sent match approved drafts · recipients match contact list · no bounces after 15 min
Panels, rows & toggles Canonical
The panel is the product's list container: micro-label title, hairline-divided rows, metadata right-aligned in text-3. The toggle is 38×21 with the accent as its on-state.
Forms Extended
The marketing pages have no inputs, so these are derived: surface-1 fields, 12px radius, strong border idle, accent border + 3px tint ring on focus. Labels 12.5/600; errors in danger with a plain sentence. 42px tall on desktop, 44px on mobile.
Tables Canonical
Micro-label headers on surface-3, hairline rows, key column bold in text-1, everything else text-2. Wide tables scroll inside their container — the page never scrolls horizontally.
Progress & meters Canonical
Meters are 7px pills — accent fill for budgets and usage, switching to danger only past a warning threshold. The indeterminate working bar belongs to the agent alone.
Toasts & empty states Extended
Toasts are floating frames with an intent pip — accent for information, mint only for verified outcomes, danger for failures. They enter with the reveal motion, bottom-right on desktop, above the tab bar on mobile. Empty states are one sentence plus one action — designed, never defaulted.
The same system at thumb scale.
Below 640px the rail becomes a five-slot tab bar, checkpoints become bottom sheets, and everything interactive grows to a 44px target. Nothing changes visual language.
single column · cards full-width
section padding 64 → 20 inline
| Rule | Spec |
|---|---|
| Tab bar | 5 slots max · 56px + safe-area inset · labels 10px/600 · active = accent-text + tint. Approvals keeps its count badge. |
| Checkpoint sheet | Bottom sheet, radius 20 20 0 0, grabber 36×4. Verbs stack full-width if they don't fit in a row. Deny never collapses into a menu. |
| Touch | ≥44×44 targets · inputs 44px tall · row tap-areas full-bleed |
| Type | Body/UI floors at 13px, captions at 11px. Display scales via the clamp() ramps — no separate mobile scale. |
| Threads | Bubbles widen to 88% max-width · avatars drop to 20px · working line + Stop always visible, never behind a swipe |
| Grids | 4-col → 2-col at 1024 → 1-col at 640 (landing's own collapse pattern). Card gaps 18 → 12. |
| Motion | Ambient marketing loops (orbit float, marquee) switch off below 1024 — the landing already does this; keep it platform law. |
Contrast, focus, motion.
The palette's roles encode its contrast math. Approximate ratios below — re-verify when any value changes.
| Pair | ≈ Ratio | Verdict |
|---|---|---|
| Ink on Canvas | 18 : 1 | AAA everywhere |
| Muted on Canvas | 6.5 : 1 | AA all sizes — the body-copy pair |
| Faint on Canvas | 3.3 : 1 | Fails AA for small text — decorative metadata only, never the sole carrier of meaning |
| Accent deep on white | 4.2 : 1 | 700-weight labels and eyebrows only; body copy never renders in accent (brand rule) |
| Night ink on Night | 17 : 1 | AAA everywhere |
| Night muted on Night | 7 : 1 | AA all sizes |
| Accent night on Night | 11 : 1 | AA — why raw #0FA8CE (6.8:1, thin strokes) is lifted on dark |
Non-negotiables
- Focus is always visible: 2px
--focus-ringoutline, offset 2 — on every interactive element, both themes. - The three checkpoint verbs are keyboard-operable in DOM order: approve, review, deny. Pending checkpoints announce to assistive tech.
- Live pips and working bars pair with text ("working…") — color and motion never carry state alone.
prefers-reduced-motioncollapses every animation to ≤0.01ms; reveals render visible; ambient loops stop.- Both themes declare
color-schemeso native controls, scrollbars, and form widgets match.
Practices
- Icon-free design means labels do the work — keep them; never reduce a verb to a glyph.
- Agent avatars carry
aria-labelnaming the owner ("Maya's agent"). - Hit areas ≥44px on touch; row taps cover the full row, not just the title.
- Skip-link pattern from landing.html (sr-only, surfaces on focus) ships in every shell.
Tokens, ready to ship.
Drop this in as tokens.css. Theming API: set data-theme="light|dark" on <html>; omit it and honor prefers-color-scheme with the tiny bootstrap below. Scoped theming (a pinned-dark hero inside a light page) is the same variables on a .theme-dark wrapper.
| Convention | Rule |
|---|---|
| Components use semantic only | A component referencing a primitive (--cyan, --ink) is a review flag — it will break in the other theme. The two sanctioned exceptions: the toggle's on-state and meter fills may use --cyan when they must read identically on both themes. |
| Naming | --{concept}-{variant}: surfaces and text are numbered by prominence (1 = strongest). Component tokens (--btn-primary-bg) exist only where a semantic pair genuinely flips between themes. |
| Breakpoints | 1024 and 640, hard-coded in media queries (CSS vars don't reach them) — keep them in a comment block at the top of every stylesheet. |
| Adding a token | New tokens need: both theme values, a row in the semantic table, and a component that uses it. No speculative tokens. |
| Dark ≠ dusk | Product dark mode is flat night surfaces. The aurora, grain, and glow recipes are marketing-only and never ship inside the app shell. |
ai.com · Quiet Sky design system v1.0 · July 2026 · Internal · Sources: landing.html (v4), strategy-deck.html (slides 11–12), product-spec.html. Canonical = extracted verbatim; Extended = derived under the system's rules. Companion docs: product-spec.html · roadmap-deck.html.