One system, every surface.

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).

Both lists verbatim from strategy-deck.html slide 11. Canonical

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.

Rules of light Canonical

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.

Spacing scale Extended

Radius Canonical

Layout & breakpoints Extended

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 named motions Canonical

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.

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.

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.

Marketing nav — the glass pill Canonical

App shell — desktop Extended

R15, in miniature Remapped

The highest-visibility row, and the clearest illustration of what a remap actually does. Four button systems existed because four screens each solved the same problem locally. One system means one decision — which priority is this? — and the shape follows from the answer.

Migration order

The order matters: it front-loads the visible wins and leaves the switch that looks hardest for last, when it has become trivial.

1. Ship tokens.css and Onest; add the theme bootstrap.
2. Replace the four button systems with ds-btn (R15) — the highest-visibility win.
3. Kill the violet family, gradient text and sparkles (R1, R2); land the dot and agent avatar (R13).
4. Normalize tabs (R16), sidebar states (R22), links (R9), monospace (R10).
5. Component by component, then page sign-off against the per-surface checklists.
6. Enable dark mode last. If steps 1–5 used semantic tokens honestly, it is a switch, not a project.

Compliance is not a matter of opinion: migration/quiet-sky-audit.mjs counts violations by rule with zero dependencies, so every phase has a number that goes down. Rules tagged exact are driven to zero; heuristic rules flag for review and are never CI-gated.

The family Extended

Every glyph is measured after rendering: a script rasterizes the whole family and flags any drawing that misses its keyline by more than 1.8px. Craft you would never consciously notice — but you would feel a rail where one icon sits 2px heavy than its neighbours.

All 106, one grid

Rendered live from the shipped sprite, inlined at the top of this document — one request, one cache entry, consumed as <svg class="ic ic--18"><use href="#ic-{name}"/></svg>. Icons take currentColor, so this whole grid re-colours with the theme.

Logotype & the dot Canonical

Onest draws the tittle on the i and the period as the same circle. The logotype is built on exactly that rhyme: the dot above the i and the dot in ai·com are the identical particle, placed twice — and only one of them is lit. Every downstream asset — app icon, agent avatar, status pip, favicon — is that one particle at a different size.

Never re-set the wordmark in live type. Typing ai.com in Onest gives you a period at the wrong size sitting on the baseline. The masters are outlined vector paths, so no font has to load and nothing reflows — the letterfit is fixed forever. That rhyme between the tittle and the dot is the mark, and typing it destroys it. Every wordmark on this page, including the one in the sidebar, is <use href="#logo-display"/>.

Nothing in product code may use a raw z-index. A component that needs to sit between two steps is a signal the scale is wrong — and the scale gets fixed, not the component.

The loading ladder Extended

Two hard rules. A spinner never appears alone — if you cannot describe the work, you cannot ask someone to wait for it. And a skeleton never breathes for more than ten seconds; past that it has become a lie, and the surface must escalate to a working line with a Stop.

Skeletons Extended

Skeletons mirror the real layout — same line count, same widths (last line 60%), same avatar sizes — because the jump on load is the defect, not the skeleton. One opacity breath at 1.6s, rows staggered 60ms. No sweeping shimmer: the system has no gradients, and a diagonal sweep on near-black reads as a rendering artifact. Skeletons are aria-hidden; the region carries aria-busy="true" and the working line is the live region.

Optimistic — and the one thing that never is

The exception is the rule that matters: approvals, denials and Stop are never optimistic. A checkpoint that looks approved before the server agrees is a trust failure — and trust is the thing this product sells.

Empty, loading, error — three states, three renderings

The command palette Extended

Modal-class layer at --z-modal, width 640, top-anchored at 14vh — not centred, because the list grows downward and centring makes it jump. Selection moves with ↑ ↓; hover sets selection too, so pointer and keyboard always agree. An empty query shows Recent and the five most-used commands, not everything. No results offers "Ask your agent instead" — the palette is a front door to the agent, not a dead end.

The keyboard map

A shortcut never fires while a text field has focus except ⌘-combinations. Single-letter shortcuts require the list to hold focus, not the page.

Density Extended

Two densities, one set of components. Density changes space only — never type size, never radius, never stroke. Set with data-density="compact" on the app root. Compact is for tables, rooms and long lists on large screens; it is never the default on touch, where 44px is the floor.

Drag & reorder

Only two things reorder: priority items and workflow steps. Everything else sorts. The row lifts to --shadow-card at 0.98 scale and 92% opacity; a 2px accent line marks the drop position. No ghost image, no rotation. The keyboard equivalent is mandatory — Space picks up, ↑ ↓ move, Space drops, Esc cancels, all announced through a live region ("Moved to position 2 of 6"). Drop is optimistic; failure restores the original order with a toast.

Which form the data gets

The ramps — validated, not chosen Extended

Both ramps pass the ordinal checks — monotone lightness, adjacent ΔL ≥ 0.06, light-end contrast ≥ 2:1 against that mode's own surface, single hue. Measured: the light ramp's lightest step #5FBFE0 reads 2.03:1 against --bg with a 3° hue spread across all five steps; the dark ramp's #057D95 reads 3.94:1 against #0D1117 at a 1° spread. The dark steps are selected, not inverted — derived against night and validated there, rather than computed from the light hexes. What does flip is the anchor: --chart-5 is always the largest value and always carries the most contrast against its surface — darkest on canvas, brightest on night. Get that backwards and "most" becomes the least visible mark on the chart. For two series use --chart-4 and --chart-2, not the ends, where one of the pair goes dim in one theme.

Charts

Bars capped at 24px thick with a 4px rounded data-end and a square baseline · lines 2px with an end-marker ringed 2px in the surface colour · hairline solid grid, never dashed · values at the tip and the line-end only, never on every point · a 2px surface gap between touching fills · text wears text tokens, never the data colour.

Every chart ships a hover layer and a table view behind a quiet toggle — the "View as table" buttons above are live. That is the accessibility contract, and it is also what people copy into a document. In print the table always wins: the chart drops and the numbers stay.

Stat tiles, meters, sparklines & stacks

A delta chip always carries an arrow and a number — never colour alone. Bars cap at 24px thick; the meter track is 7px; the sparkline is 2px at 28px tall with an 8px end-dot. Avatar stacks cap at four faces with a 2px surface ring each and an overflow +N chip — and an agent is never folded into the overflow. You must always be able to see that an agent is in the room.

Tables

Micro-label headers on --surface-3, hairline rows, sticky header at --z-raised with a hairline that appears only once scrolled. Sort: one column at a time, chevrons-up-down in --text-3 resolving to a single chevron in --accent-text when active; sort state lives in the URL. Selection: a 44px checkbox column, indeterminate in the header when partial, and a selection bar that replaces the toolbar. Prefer "Load more" over numbered pages for feeds — and never infinite scroll on a surface that has a footer. Numerals are Onest 600, tabular in columns and proportional in prose.

The event map and the rules are ratified; the sounds themselves are not. A wide slate of candidates is being auditioned under the same test as the accent — it only fires where it carries meaning. Nothing final yet, which is why there is nothing to play on this page.

Force the light theme — night surfaces waste ink and lose every hairline. Drop the rail, the mode switch and all hover-only chrome; they have nothing to say on paper. Cards lose their shadow and keep their hairline. Charts print their table view, not the plot: the numbers survive a photocopier and the marks do not. Every card and table carries break-inside: avoid. Page one gets the wordmark, the surface name and the date — a printout with no provenance is a rumour.

ai.com · Quiet Sky design system v2.0 · August 2026 · Internal · Foundations sources: landing.html (v4), strategy-deck.html (slides 11–12), product-spec.html. Application layer: app-design-system.md (Parts A–M) · migration/quiet-sky-audit.mjs · product screenshot audit, July 2026. Canonical = extracted verbatim; Extended = derived under the system's rules; Remapped = added because the audit found a violation. Terminology per the ratified glossary: Workflows (formerly Routines). Companion docs: quiet-sky-story.html (how this came together) · product-spec.html · strategy-deck.html (the July 2026 brand strategy, archived).