Quiet Sky, inside the product.

The application design system for ai.com — every product screen, component, CTA, and text style, standardized on Quiet Sky and specified in light and dark. Foundations (tokens, type, spacing, motion) are canonical from design-system.html v1.0 and consumed here unchanged; everything else is the product layer built on top of them.

This page is its own proof. Flip the theme toggle in the sidebar — every demo, mock, and table re-renders because every component consumes semantic tokens only. Components marked Canonical come from v1.0; Extended are new product components derived under the system's rules; Remap flags a correction of the current UI.

Sidebar rail Extended Remap R7 · R13 · R22

260px on --bg with a right hairline. Active = accent tint + accent text; hover = quiet fill. Agents are dot avatars; people carry presence pips; the only card is the feedback card. Collapses to an icon rail at 1024, a five-slot tab bar at 640.

Page headers & the two tab patterns Extended Remap R15 · R16

One header pattern: [title or view-tabs] ——— [meta] [one primary action]. 60px, bottom hairline. And exactly two tab patterns: segmented pills switch views of the same data; underline tabs switch sections or documents. Never both in one row.

Popovers, modals & sheets Extended Remap R18

Popover: --surface-1 (or --glass + blur 14 when floating over content), radius --r-frame, --shadow-card, hairline header, max-height 60vh. Modal: centered, 960 two-pane (nav 240 on --surface-3) or 520 single; scrim rgba(10,13,18,0.4) both themes; Esc closes, focus is trapped and returned. Mobile sheet: radius 20 20 0 0, grabber 36×4, verbs stack full-width, Deny never collapses into a menu. Full demos: Settings and Notifications.

Priority card & reply rows Extended Remap R1 · R6 · R11 · R17

The Command Center stack. Collapsed cards are one 15/600 line with quiet icon actions (tooltips required, --text-3 at rest — never accent). Expanded body nests on --surface-3 with a neutral time chip, provenance line, neutral advisory, and one primary verb. The date lockup replaces the purple date badge.

Today's Brief Extended Remap R1

The brief joins the checkpoint family — tinted because it carries meaning. Accent tint + accent border, dot-led eyebrow (no sparkle), body 13.5 with 600 emphasis, then neutral chips on translucent surface so they read on the tint.

Calendar — day strip & event card Extended Remap R1 · R3

Selected day = accent tint (was purple). Join call is a primary pill — live-ness is announced by the glowing pip and the "Live" mint label, never by a green button. Attendee presence uses --ok pips (filled = yes/joined, hollow = awaiting). "Agent prepped" leads with the dot, not a sparkle.

Call history rows Extended Remap R15 · R21

Two-column rows inside one hairline-divided panel. "Untitled call" renders as a placeholder (500, --text-3, upright — italics don't exist). The empty recap is a designed state with its action. The chip-button row uses ghost sm buttons in sentence case.

People & communication health Extended Remap R8

Attention is an accent ring on the avatar — never gold. Relationship states come from the closed label vocabulary: Cooling (neutral) · Needs attention (accent) · Strengthening (ok). The health meter is the system meter: accent, danger past threshold.

Timeline — rooms, DMs & the agent thread Extended Remap R4 · R9 · R13

One message language, two densities. Room timeline: flat rows, 26px circular avatars, names in --text-1 600 (never colored), grouped messages indent 36px. Agents are dot avatars with structural attribution. Agent thread: the canonical v1.0 bubble conversation — shown here composed with steps, working line and checkpoint.

Composer Extended

One composer everywhere — Rooms, DMs, agent chat, the create hero. Surface-1 well, strong border, accent focus ring; quiet-icon toolbar; circular primary send. Placeholder names the destination.

Skills, apps & the create hero Extended Remap R2 · R5 · R14 · R15

The hero headline is Title 1 in --text-1 — the gradient is gone. Skill rows set names in Onest 600 (even kebab handles), type tags from the label vocabulary, and one primary sm pill for Add/Update. App thumbnails are surface-2 wells — no dark islands, no gradient art.

Knowledge — tree, document & graph Extended Remap R9 · R10 · R12

Wiki links are accent-text; source refs are neutral Onest chips (never monospace paths); the graph obeys the four-role node law — Concept accent · Synthesis ink · Source hollow · Service mint — with edges on --border-strong. Flip the theme: the graph re-renders because the roles are tokens.

Settings Extended Remap R10 · R16 · R19 · R22

Two-pane modal: nav on --surface-3 with accent-tint active states; grouped field rows; connector rows with mint "Connected" checks; Vault names in Onest 600 with masked dots; a danger zone whose destructive row is the only danger text on the page — confirmed via the checkpoint pattern.

Destructive confirm follows the checkpoint anatomy: statement + consequences + verbs [Delete — the one sanctioned danger-filled pill] [Cancel ghost]. Appearance pane hosts the Light/Dark/Auto segmented control.

Notifications Extended Remap R13 · R18

Popover anchored to the rail bell: frame radius, card shadow, hairline header with a quiet "Mark all read", segmented filter, rows with unread accent pips on --surface-3. Agent actors get dot avatars; previews strip markdown artifacts.

Icons Extended

One family: 1.5px stroke, round caps (Lucide-compatible). Sizes 14 inline · 16 buttons/meta · 18 nav · 20 headers. Color --text-3 at rest in chrome, --text-2 in content, hover/active --text-1; accent only when the icon is the state signal. The sparkle glyph is retired platform-wide — the agent's mark is the dot.

E1–E2 · Command Center Remap R1 · R6 · R11 · R15 · R17 · R22

E3 · Calendar Remap R1 · R3 · R15 · R21

Corrections: purple brief/selected-day → accent tint (R1) · green Join call → primary pill + Live label (R3) · italic "No recap yet" → designed empty state (R21) · black "New call" pill absorbed into the one primary system (R15).

E4 · Skills & Apps Remap R2 · R5 · R14 · R15 · R16

Layout: create hero (D10) centered at top → panel with segmented [Yours | Discover] → toolbar (search ds-input + Import skill ghost; Discover adds Sort select + grid/list toggle) → filter tabs (All / Skills / Apps / Dashboards) + "77 items" caption → skill rows or card grid. All CTAs are pills; type tags come from the label vocabulary; names in Onest 600. Corrections: gradient headline → Title 1 ink (R2) · orange update chips → accent labels (R5) · black rects → primary sm pills (R15) · dark-pill filter → segmented tabs (R16) · gradient thumbnails → surface-2 wells (R14). Components rendered in the library above.

E6–E7 · Chat surfaces — agent DM, human DM, Rooms Remap R4 · R9 · R10 · R13

Corrections: green/orange usernames → text-1 600 with structural attribution (R4) · "ai" badge and letter squares → dot avatars (R13) · blue links and link boxes → accent-text links (R9) · monospace metric chips in agent output → neutral Onest chips; literal code only in surface-2 wells (R10). Rooms use the identical timeline with thread summaries, reactions, and system lines (library demo).

E5 · Knowledge — E8 · Settings — E9 · Notifications Remap R9 · R10 · R12 · R16 · R18 · R19 · R22

Knowledge: page header (Title 1 + subtitle) → underline tabs (Browse / Sources / Search / Ask agent) → recent-changes bar → the three-pane layout in D11: tree 280 · document ≤760 · graph 380. Settings: the two-pane modal in D12 — Account fields, Appearance (theme control), Connectors, Vault, Admin. Notifications: the popover in D13 anchored to the rail bell. All three are fully specified and rendered in the component library; their corrections are listed there.

The label vocabulary Extended

A closed list — new labels require design review. Rank: solid > accent > ok > neutral > danger.

Migration order

1 · Ship tokens.css + Onest + theme bootstrap.  2 · Replace the four button systems with ds-btn (R15).  3 · Delete the violet family, gradients, and sparkles; land the dot agent avatar (R1, R2, R13).  4 · Normalize tabs, sidebar states, links, monospace (R16, R22, R9, R10).  5 · Components per Part D; pages signed off per Part E.  6 · Turn on dark mode — if 1–5 used semantic tokens honestly, it's a switch, not a project.

The loading ladder Extended

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 escalates to a working line with a Stop.

Skeletons Extended

Skeletons mirror the real layout — same line count, same widths, 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.

Optimistic — and the one thing that never is

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.

The innermost open layer owns the scroll lock and restores position on close; nested overlays never double-lock. Focus enters on open, is trapped for modal-class layers, and returns to the trigger. Esc closes the topmost layer and nothing else.

The command palette Extended

Top-anchored at 14vh, not centred — the list grows downward and centring makes it jump. Selection moves with ↑ ↓; hover sets selection too, so pointer and keyboard always agree. 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; 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; a 2px accent line marks the drop position. The keyboard equivalent is mandatory — Space picks up, ↑ ↓ move, Space drops, Esc cancels, announced through a live region.

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. The dark steps are selected, not inverted — they were derived against #0D1117 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 square at the 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 · text wears text tokens, never the data colour.

Every chart ships a hover layer and a table view behind a quiet toggle — that is the accessibility contract, and it is also what people copy into a document.

Stat tiles, meters, stacks

A delta chip always carries an arrow and a number — never colour alone. Avatar stacks cap at four faces with a 2px surface ring each; the overflow is a +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.