# ai.com — Quiet Sky Application Design System

**v2.0 · August 2026 · Internal**
Companion to `reference/design-system.html` (Quiet Sky foundations) and `catalog.html` (the living, themeable proof of this document).
Scope: the **product UI** — every screen, component, CTA, and text style in the AI.com application, in **light and dark**.

---

## How to use this document

- **Part A** restates the Quiet Sky foundations you must consume (tokens, type, spacing, motion). Nothing here is new; the source of truth is `design-system.html` v1.0.
- **Part B** is the audit: every visual violation found in the current product (16 screenshots, July 2026) and the exact Quiet Sky replacement. This is the migration checklist.
- **Part C** specifies the app shell — sidebar, headers, tabs, popovers, modals — the one chrome every page shares.
- **Part D** is the product component library (`ds-*`), with anatomy, measurements, and states for both themes.
- **Part E** walks all nine product surfaces page-by-page and maps every element to a Part C/D component.
- **Part F** standardizes writing: CTA voice, labels, timestamps, empty states.
- **Part G** is dark-mode law and accessibility.
- **Part H** is time: loading, skeletons, optimistic states, and the three empty states.
- **Part I** is layering and focus — the z-index scale, scroll lock, dismissal.
- **Part J** is input: the keyboard map, the command palette, drag, density.
- **Part K** is data: tables, and the chart system a one-colour brand implies.
- **Part L** wires in the sound identity; **Part M** is print.

**The one rule above all rules:** components consume **semantic tokens only** (`--bg`, `--surface-1`, `--text-2`, `--accent`…). A component that references a primitive (`--cyan`, `--ink`) or a raw hex is a review flag — it will break in the other theme. Sanctioned exceptions: the toggle on-state and meter fills may use `--cyan` where they must read identically in both themes.

---

# Part A — Foundations (canonical, from Quiet Sky v1.0)

## A1. Principles, restated for product

1. **One color carries the brand.** Cyan `#0FA8CE` (light), `#5FD4F2` (dark), `#0B86A6` for small accent text on light. No second hue. **No gradients, anywhere.** No violet — dusk-toned UI reads entertainment, not work.
2. **The accent means something.** Cyan appears only where it carries meaning: live dots, the agent's presence, active nav, selected states, checkpoints, links. Never decoration, never body text, never a button fill.
3. **Near-black night, soft glow.** Product dark mode is **flat night surfaces** — `#0A0D12 / #0D1117 / #12161F`. The aurora, grain, and horizon glow are marketing-only and never ship inside the app shell.
4. **The dot is the material.** Live pips, agent avatars, presence, the ai·com wordmark dot. A glowing pip (`0 0 10px` accent) means *live right now*.
5. **Trust is visible, not badged.** Checkpoints, verified-done strips, and the Stop pill are components, not seals.

## A2. Semantic tokens (the layer product code consumes)

| Token | Light | Dark | Use |
|---|---|---|---|
| `--bg` | `#FBFBFD` | `#0A0D12` | The page. Sidebar and canvas both sit on this. |
| `--surface-1` | `#FFFFFF` | `#0D1117` | Cards, panels, modals, popovers |
| `--surface-2` | `#F7F7FA` | `#12161F` | Nested wells: composer, code wells, app-card thumbnails |
| `--surface-3` | `#FDFDFE` | `#0F131B` | Barely-raised rows, table headers |
| `--text-1` | `#0E0E14` | `#EDEEF4` | Headings, names, values, primary copy |
| `--text-2` | `#5B5B66` | `#9DA1B2` | Body copy, descriptions, message text meta |
| `--text-3` | `#8A8A94` | `#7E8095` | Timestamps, metadata, decorative labels only |
| `--border` | ink @ 8% | night-ink @ 9% | Hairlines, dividers |
| `--border-strong` | ink @ 14% | night-ink @ 18% | Inputs, ghost buttons, interactive edges |
| `--fill` | ink @ 4.5% | night-ink @ 5% | Chips, hovers, quiet fills (meaning-free) |
| `--accent` | `#0FA8CE` | `#5FD4F2` | Live dots, active states, meters, focus |
| `--accent-text` | `#0B86A6` | `#5FD4F2` | Small/bold accent text, links, eyebrows |
| `--accent-tint` / `--accent-border` | 8% / 30% | 10% / 30% | Selected states, checkpoints, agent fills |
| `--danger` | `#C24558` | `#FF7A87` | Deny, Stop, destructive actions. Nothing else. |
| `--ok` / `--ok-text` | `#2BD9A9` / `#14795C` | `#2BD9A9` / `#8FE0C4` | **Verified** outcomes and live-now chips only |
| `--btn-primary-bg/-fg` | ink / white | night-ink / night | The primary pill — ink on light, white on dark |
| `--bubble-agent` | `#F4F4F8` | night-ink @ 7% | Agent message bubbles |
| `--glass` | white @ 78% | rgb(13,17,23) @ 72% | Popovers/overlay chrome + backdrop-blur 8–14px |

Shape: `--r-pill 99` · `--r-frame 20` · `--r-card 16` · `--r-inner 14` · `--r-ctrl 12` · `--r-tight 8`.
Motion: one curve `cubic-bezier(0.22,1,0.36,1)`; 200 / 250 / 300 / 500ms. Transform + opacity only.
Type: **Onest** 400/500/600/700/800 — everything, including numbers. Nothing in product UI is monospaced (the one exception: code *content* authored by users/agents inside messages and docs).

## A3. Type scale (product usage)

| Style | Spec | Product use |
|---|---|---|
| Title 1 | 26–31px / 700 / −0.025em | Page titles ("Calendar", "Knowledge") |
| Title 2 | 18–21px / 700 / −0.02em | Card + modal titles ("Your Priorities Today") |
| Title 3 | 14.5–16px / 600–700 / −0.015em | Row titles, priority headlines, event names |
| Body/UI | 13.5–14px / 400–500 / 1.5–1.55 | Messages, descriptions — the product default |
| Small | 12.5–13px / 400–600 | Secondary rows, meta lines, nav items |
| Caption | 12px / 400–500 / `--text-3` | Timestamps, footnotes, "Updated 5h ago" |
| Eyebrow | 12px / 700 / +0.1em uppercase | Section markers ("Schedule", "Awaiting reply") |
| Micro label | 10–11px / 700–800 / +0.06–0.09em uppercase | Chips, panel titles, type tags |

Display type (46px+) belongs to marketing; the **only** in-app exception is the Skills & Apps create hero at Title-1 weight (see E4). Numbers set in Onest 600. Emphasis = weight 600 in `--text-1`, never italic, never accent.

---

# Part B — The Remap: current UI → Quiet Sky

Every class of violation observed in the July 2026 screenshots, with the binding replacement. This table **is** the migration plan; when all rows are cleared, the product is on Quiet Sky.

| # | Where seen | Current (violation) | Quiet Sky replacement |
|---|---|---|---|
| R1 | Command Center priorities, Today's Brief, sparkle icons, "Discuss" links, selected calendar day, notification dot | **Purple/violet as the "AI" color** | The entire violet family is deleted. AI/agent presence = the **dot system**: `--accent` pips, `--accent-tint` fills, `--accent-text` labels. Sparkle glyphs are retired; the agent's mark is the dot, not a wand. |
| R2 | Skills & Apps hero "Create apps & skills…" | **Pink→purple gradient headline** | Title 1 in `--text-1`. No gradient text exists anywhere in the platform. |
| R3 | Calendar event "Join call" | **Green filled button** | Primary pill (`--btn-primary-bg`). Live-ness is carried by a glowing pip + "Live" `ds-label--ok`, not by a green fill. |
| R4 | DM/Room timelines | **Slack-style colored usernames** (green, orange) | Names in `--text-1` 600. Identity comes from avatar + name, never name color. |
| R5 | Discover tab | **Orange "Update available" chips** | `ds-label--accent` ("Update available"). Orange is not a system color. |
| R6 | Command Center risk line | **Orange warning text** ("Risk of no-show…") | Body in `--text-2` with a neutral pip; `--danger` only for destructive/stop contexts. Urgency is copy + placement, not paint. |
| R7 | Sidebar logo + user avatar | **Crimson/red square mark** | The ai·com wordmark: ink text + accent dot (`ai·com`). Human avatars keep their photo/initial but sit in a **circle**, not a rounded square. |
| R8 | Communication Health table | **Gold/brown meter bar** | `ds-meter` — accent fill; switches to `--danger` only past the warn threshold. |
| R9 | Wiki links, dashboard links, meeting links | **Default blue hyperlinks** | Links = `--accent-text`, weight 500–600, underline on hover only. Visited = same (product, not documents). |
| R10 | Wiki paths (`wiki/concepts/…`), Vault secret names, chat metric chips | **Monospace + red/pink inline-code styling in UI chrome** | Onest. Wiki source refs become neutral chips (`--fill`, `--r-tight`). Vault names: Onest 600 `--text-1`. Monospace survives only inside authored code blocks in message/doc *content* (`--surface-2` well, 12px). |
| R11 | Calendar "Today 9 PM" + pink calendar icon | **Red/pink ad-hoc date chip** | Neutral chip (`--fill`, `--text-2`). If the event is happening *now*: accent chip + live pip. Danger is never a time color. |
| R12 | Knowledge graph nodes + legend | **Rainbow categorical palette** (blue/pink/teal/green) | Constrained mapping, no new hues: Concept = `--accent` · Synthesis = `--text-1` (ink/night-ink) · Source = `--text-3` (hollow) · Service = `--ok` mint. Edges = `--border-strong`. |
| R13 | Agent avatars ("A" purple/blue squares, "ai" badge) | **Letter-square agent avatars, indistinguishable from humans** | `ds-ava--agent`: solid accent **circle** with pulsing halo ring. In shared Rooms the agent row reads "mika · Maya's agent" — attribution is structural. Humans: circular photo/initial avatars. |
| R14 | My Apps / Marketplace cards | **Near-black thumbnails with purple gradient art** | Thumbnail = `--surface-2` well, `--r-inner`, centered app glyph or live preview. No gradients, no dark-on-light islands. |
| R15 | "New call" (black pill), "Update/Add" (black rect), "Reach out" (white rect), "Ping Aaron + add agenda" (white rect + icon) | **Four unrelated button systems** | One system: `ds-btn` pills only. Primary = ink/white pill; Ghost = bordered surface; Quiet = borderless text; Deny/danger = text-only danger. Sizes lg/md/sm. Corner radius is always pill. |
| R16 | Priority/People (pills) vs Browse/Sources/Search/Ask Agent (underline) vs All/Skills/Apps/Dashboards (dark pill + text) | **Three competing tab patterns** | Two, by rule: `ds-tabs` **segmented control** for switching *views of the same data* (Priority/People, Yours/Discover, All/DMs/Mentions, filter groups) and `ds-tabs--line` **underline tabs** for switching *documents/sections* (Browse/Sources/Search/Ask Agent, Files/Apps/Skills…). Never mixed in one header row. |
| R17 | Thumbs up/down + sparkle row on priority cards | **Unlabeled icon-only actions in accent purple** | Quiet icon buttons in `--text-3`, hover `--text-1`; tooltips required; never accent-colored at rest. |
| R18 | Notification popover ("Mark all read"), modals | **Flat white sheets, mixed paddings, gray pill search** | Popover/modal = `--surface-1`, `--r-frame`, `--shadow-card`, hairline header; search inputs use `ds-input` recipe. |
| R19 | "Danger zone" rows (Delete account orange) | **Orange destructive text** | `--danger` text row with danger icon; confirmation follows the checkpoint pattern (verbs: Delete / Cancel, Deny-style styling). |
| R20 | Whole product | **Light mode only** | Every surface ships both themes via semantic tokens; `data-theme` on `<html>`, `prefers-color-scheme` default, per-user persistence. |
| R21 | Empty recaps ("No recap yet" italic gray) | **Italic placeholder text** | Empty states are designed: one sentence `--text-2` + one action. Italics don't exist in the system. |
| R22 | Selected sidebar item (white card + border) | **Floating white active state** | Active nav = `--accent-tint` fill + `--accent-text` text, `--r-tight` radius. Hover = `--fill`. |

---

# Part C — The App Shell

One chrome for every screen: **rail → main → (optional) right panel**, all on `--bg`, separated by hairlines — the product is one continuous surface, never a dark sidebar next to a light canvas.

## C1. Sidebar rail

- **Geometry:** fixed 260px; `--bg`; `border-right: 1px solid var(--border)`; padding 16px 12px; collapses to icon rail at 1024, bottom tab bar at 640 (five slots: Brief, Rooms, Agent, Approvals, More).
- **Logo row:** `ai·com` wordmark — Onest 700 17px `--text-1`, the dot is a 7px `ds-pip` with `drop-shadow(0 0 3px accent @45%)`. Right-aligned quiet icon buttons: notifications (with count badge when >0), search. Height 56px.
- **Primary nav** (Command Center, Calendar, Workflows, Skills & Apps, Knowledge): rows 34px, 13.5px/500 `--text-2`, icon 18px stroke 1.5 in `--text-3`; 10px gap; radius `--r-tight`. Hover: `--fill` + `--text-1`. **Active: `--accent-tint` fill, `--accent-text` text, icon `--accent-text`.** No borders, no white cards, no shadows in the rail.
- **Section headers** ("Agents", "People · 10", "Rooms"): micro label 11px/700 +0.08em uppercase `--text-3`, 24px top margin; trailing quiet `+` icon button; People/Rooms collapsible with chevron.
- **Agent entries:** `ds-ava--agent` 20px (accent dot circle, halo on when the agent is working) + handle 13.5px/600 `--text-1`. Chat sublist rows: 30px, 13px `--text-2`, indented 30px; active chat = `--accent-tint`/`--accent-text`; "See all chats (15)" in `--text-3`.
- **People entries:** 20px circular avatar + presence pip (6px, `--ok` filled = online, `--border-strong` hollow = away) anchored bottom-right of the avatar; name 13.5px `--text-2`, hover `--text-1`.
- **Room entries:** `#` glyph in `--text-3` + name 13.5px `--text-2`; unread = name 600 `--text-1` + 6px accent pip right-aligned; mention/approval counts use `ds-count`.
- **Feedback card:** `--surface-1`, `--border`, `--r-inner`, 12px padding — the only card in the rail.
- **User row:** pinned bottom; 28px circular avatar, handle 13.5px/600, quiet settings icon. Height 56px, top hairline.

## C2. Page headers

One pattern, three slots: **[Title | tabs] ——— [meta] [actions]**

- Height 60px, bottom hairline, padding-inline 24px (main column), aligned to content max-width 980.
- Title: Title 1 26px/700 — or, for tabbed surfaces (Command Center), the `ds-tabs` segmented control sits alone on the left, no title.
- Meta: caption 12px `--text-3` ("Updated 5h ago" + quiet refresh icon).
- Actions: at most one primary `ds-btn--primary ds-btn--md` (e.g., "New call") plus quiet icon buttons. Never two primaries in one header.

## C3. Tabs — the two sanctioned patterns

**`ds-tabs` (segmented pills)** — switch *views of the same data*.
Container: `--fill` pill, 3px padding. Items: 13px/600, 6px 14px, `--r-pill`, `--text-2`. Active: `--surface-1` fill + `--text-1` + `--shadow-soft` hairline. Used for: Priority/People · Yours/Discover · All/DMs/Mentions/Thread/Agent · All/Skills/Apps/Dashboards.

**`ds-tabs--line` (underline)** — switch *sections/documents* within a page.
Items: 13.5px/600 `--text-2`, 10px 2px padding, 20px gap; active: `--text-1` + 2px `--accent` underline (offset 8px). Used for: Browse/Sources/Search/Ask Agent · Files/Apps/Skills/Dashboards/Activity/Pins.

Never both patterns in the same header row. Filter chips inside content (not navigation) are `ds-chip`s with an active accent-tint state.

## C4. Popovers, modals, sheets

- **Popover** (notifications, pickers): `--surface-1` (or `--glass` + blur 14 when floating over content), `--r-frame` 20, `--shadow-card`, hairline header row (Title 3 + quiet action), max-height 60vh scroll. Enters with reveal motion (fade + 8px translateY, 200ms).
- **Modal** (Settings): centered, width 960 max (two-pane) or 520 (single), `--r-frame`, `--shadow-card`, scrim `rgba(10,13,18,0.4)` both themes. Two-pane: left section list 240px on `--surface-3` with `ds-tabs`-style active states; right content pane 24px padding. Close = quiet icon button top-right, `Esc` always works.
- **Mobile sheet:** bottom sheet radius 20 20 0 0, grabber 36×4; checkpoint verbs stack full-width; Deny never collapses into a menu.

---

# Part D — Product Component Library

All components consume semantic tokens only and render identically well in both themes. Measurements are desktop; mobile floors per A3/v1.0.

## D1. `ds-priority-card` — Command Center priority

- **Container:** `--surface-1`, `--border`, `--r-card`, `--shadow-soft`; 16px 18px padding; 12px gap between cards.
- **Collapsed row:** disclosure chevron (quiet icon, `--text-3`) · headline Title 3 15px/600 `--text-1` · right-aligned quiet icon actions (helpful / not-helpful / discuss-with-agent) 16px `--text-3`, hover `--text-1`, tooltips required.
- **Expanded body:** nested item on `--surface-3`, `--r-inner`, hairline: checkbox (18px, `--r-tight`, accent when checked) · item title 14px/600 · **time chip**: neutral `ds-chip` ("Today 9 PM"); if live-now, accent tint + glowing pip · body 13.5px `--text-2` · provenance line: micro label "Calendar" + source text 13px `--text-2` · advisory line 13px `--text-2` with neutral pip (never orange) · footer: "Sources ▾" quiet button + **action `ds-btn--primary ds-btn--md`** ("Ping Aaron + add agenda") + "Discuss" `ds-btn--quiet ds-btn--sm`.
- **Section header above cards:** Title 2 "Your Priorities Today" + right-aligned date lockup (caption "FRI" + Title 2 numeral + caption "JUL").
- **Privacy footer:** caption 12px `--text-3` with eye icon: "Only Your Priorities Today is visible to your manager."
- **Top digest paragraph:** Body lg 15.5px `--text-2`, key names 600 `--text-1`, max-width 720, centered above the stack.

## D2. `ds-reply-row` — awaiting reply

- Row: `--surface-1`, `--border`, `--r-card`, 12px 16px; 8px gap.
- Anatomy: checkbox · statement 14px/600 `--text-1` ("Rayna hasn't replied about AIC messages") · right cluster: age `ds-chip` sm ("0d"), disclosure, snooze + hide quiet icons.
- Section header: eyebrow row — clock icon 14px + "Awaiting reply" 12px/700 uppercase `--text-3` + count in `ds-count`-style neutral.
- "+ add" row: full-width ghost row, `--r-card`, dashed `--border-strong`, `--text-3`, hover `--fill`.

## D3. `ds-brief` — Today's Brief

- Container: `--accent-tint` fill, 1px `--accent-border`, `--r-card`, 16px padding. (The checkpoint family: tinted = meaningful.)
- Eyebrow: `ds-pip` 7px + "Today's Brief" 12px/700 uppercase `--accent-text`. No sparkle glyphs.
- Body: 13.5px `--text-1`, line-height 1.55; times/names 600.
- Chip row: neutral `ds-chip`s ("1 meeting at 10:30", "Heads-down protected 09:00–10:30") on `--surface-1` @ 60% so they read on the tint.

## D4. `ds-event` — calendar event card

- **Rail card (upcoming):** `--surface-1`, `--border` (accent-border + accent-tint at 4% when selected/next), `--r-card`, 14px padding.
- Time: 13px/700 `--text-1` (Onest, never mono-styled) · title Title 3 15px/600 · organizer + attendee count caption `--text-3`.
- **"Agent prepped for this" disclosure:** `ds-pip` + 12.5px/600 `--accent-text` + chevron — the agent's presence is the dot, not a sparkle.
- **Expanded:** time range row (clock icon + 13px `--text-2`) · **Join call = `ds-btn--primary ds-btn--md`** with camera icon; when the call is live: `ds-label--ok` "Live" + glowing pip beside the button — the button itself never turns green · guest summary 12.5px `--text-3` ("37 guests · 24 yes, 1 no, 12 awaiting") · attendee list rows 28px: presence pip (`--ok` = joined/yes, hollow = pending) + name 13px `--text-2`, "(Organizer)" caption; "+29 more" quiet link `--accent-text`.
- **Day strip:** 7 columns, each 44px min: weekday micro label + date 15px/600; today = `--accent-tint` fill + `--accent-text`; event-dots = 3px pips `--text-3` (never colored dots per calendar).
- **Brief block** at rail top = `ds-brief` (D3).

## D5. `ds-call-row` — past call

- Full-width `--surface-1` card rows separated by hairlines, 16px padding, `--r-card` on the group.
- Header line: "Call ended" `ds-label--neutral` + date/duration caption `--text-3` + right quiet `@`-mention icon.
- Title cell: 15px/600 `--text-1`; "Untitled call" renders `--text-3` 500 (it's a placeholder, not a title) · participant chips: 20px circular avatars + "1 person" caption.
- Recap cell: recap text 13.5px `--text-2`; **empty state: "No recap yet" 13px `--text-3` upright (no italics) + "Generate recap" quiet button.**
- Action row: `ds-btn--ghost ds-btn--sm` set — Recap, Scribe note, #announcements (sentence case; icons 14px).

## D6. `ds-person-card` + `ds-health-table` — People

- **Group grid:** team cards `--surface-1`/`--border`/`--r-card`, title 13px/600 `--text-2` centered; member avatars 40px circles with 2px `--border-strong` ring; ring turns `--accent` (2px) when attention is needed — never gold/orange. Names caption `--text-3`.
- **Focus card:** name Title 2 + state `ds-label` — vocabulary: "Cooling" `ds-label--neutral` · "Needs attention" `ds-label--accent` · "Strengthening" `ds-label--ok`. Insight 14px `--text-2`; stats 600 `--text-1`. Actions: "Reach out" `ds-btn--primary ds-btn--md` + "Discuss with agent" `ds-btn--quiet` (agent reference carries a 6px pip, not a sparkle).
- **Communication Health table:** v1.0 table recipe (micro-label headers on `--surface-3`, hairline rows). Ratio meter = `ds-meter` 7px accent (danger past threshold); numerals Onest 600; "You/Them 75/25" caption `--text-2`.

## D7. `ds-timeline` — messages (the core surface)

Two densities, one language. **No colored usernames anywhere (R4).**

**Room timeline (flat)** — multi-human rooms and DMs:
- Row: 26px circular avatar (humans: photo/initial on neutral `--text-3` bg; **agents: `ds-ava--agent` accent dot**) · name 13.5px/600 `--text-1` + timestamp caption 11.5px `--text-3` · body 14px/400 `--text-1` (own) / `--text-1` (all — hierarchy comes from name row, not color).
- Grouped consecutive messages: 4px gap, avatar/name suppressed, 36px left inset.
- Agent attribution: after the agent's name, "· Maya's agent" caption `--text-3`; the "ai" square badge is retired.
- **Day divider:** centered caption `--text-3` over a hairline. **System lines** ("sanjaypramod left · 15:16"): caption `--text-3` centered, no bubble.
- **Thread summary row:** 22px avatar + "1 reply" 12.5px/600 `--accent-text` + "Last reply May 6 at 11:15 AM" caption; hover `--fill`; radius `--r-tight`.
- **Reactions:** `ds-chip` sm (emoji + count 11px/600); own-reacted = accent-tint + accent-border; "+" ghost chip on hover.
- **Suggested follow-ups:** "↳" glyph `--text-3` + suggestion 13.5px `--text-2` in a ghost pill row (hover `--fill`, radius `--r-pill`); trailing quiet edit icon.
- **Rich content in messages:** tables/metrics use the v1.0 table recipe; inline code chips from agent output render as neutral `--fill` chips in **Onest** unless they are literal code (then `--surface-2` well, monospace 12px — the sole exception).
- Links in messages: `--accent-text` 500, underline on hover; meeting-started lines get a camera icon + link, no blue highlight boxes.

**Agent thread (bubbles)** — 1:1 with your agent (canonical v1.0):
- User: `--bubble-user-bg` pill, corner 14/14/4/14. Agent: `--bubble-agent`, corner 4/14/14/14, with `ds-ava--26 ds-ava--agent` and micro label "Agent".
- Steps (`ds-steps`), working line + Stop pill, checkpoint card (`ds-checkpoint`), verified done (`ds-done`) — exactly per v1.0.

## D8. `ds-composer`

- Container: `--surface-1`, 1px `--border-strong`, `--r-inner` 14; focus-within: `--accent` border + 3px `--accent-tint` ring.
- Toolbar (top): quiet icon buttons 16px `--text-3` (bold, italic, strike, underline, link, lists, quote, code, code-block), 28px hit areas, hover `--fill` + `--text-1`; active format = `--accent-text`.
- Field: 14px/400, min-height 44px, placeholder `--text-3` ("Message #shipping-week" / "Message your agent").
- Bottom row: left quiet cluster (attach +, emoji, overflow) · right: mic quiet icon + **send button — 32px circular `--btn-primary-bg`** (arrow-up icon), disabled at 45% opacity until content exists.
- Chat header above timeline: 60px, avatar + name Title 3, `ds-tabs--line` (Files · Apps · Skills · Dashboards · Activity · Pins), right call quiet icon button.

## D9. `ds-skill-row` / `ds-app-card` — Skills & Apps

**List row (Yours):** `--surface-1` group with hairline rows, 14px 16px.
- Name 14.5px/600 `--text-1` (Onest — even for `aes-email`-style handles) · type `ds-label--neutral` ("Skill" / "App" / "Dashboard") · "Private" `ds-label--neutral` with lock icon.
- Meta line: caption `--text-3` — "works in chat · Built · by jeetzandawala · v1.0.0 · 0 added" with · separators. Description 13px `--text-2`, 2-line clamp.
- Right: overflow quiet icon; **Add / Update = `ds-btn--primary ds-btn--sm` pill** (Update preceded by "Update available" `ds-label--accent`, replacing orange R5).
**Card (marketplace/My Apps grid):** `--surface-1`, `--r-card`, `--shadow-soft`, hover lift −4px→`--shadow-card`. **Thumbnail: `--surface-2` well** (R14), `--r-inner`, 16:9, app glyph or screenshot; "Preview" `ds-label--neutral` overlay bottom-left on `--glass`. Body: name 14px/600 + owner caption.
**Toolbar:** search `ds-input` (40px, search icon) · sort select · view toggle (grid/list segmented icon pair) · filter `ds-tabs` (All/Skills/Apps/Dashboards) · count caption "77 items".

## D10. `ds-create-hero` — the prompt panel (Skills & Apps top)

- Headline: Title 1 30px/700 `--text-1` — **no gradient (R2)**; supporting line Body 14px `--text-2`. Centered, max-width 640.
- Prompt well: `ds-composer` recipe, min-height 96px, placeholder in `--text-3`; corner send button.
- Example chips: `ds-chip` with refresh icon leading, `--accent-text` icon; a trailing quiet shuffle icon button.

## D11. `ds-wiki` — Knowledge

- **Header:** Title 1 + subtitle Body `--text-2`; `ds-tabs--line`: Browse · Sources · Search · Ask Agent.
- **Recent changes bar:** full-width `--surface-1` row, `--r-card`, Title 3 + "Show" quiet button.
- **Three panes:** tree 280px · document flexible (max 760) · graph 380px; hairline separators.
- **Tree:** filter `ds-input` sm · section rows 13px/700 · page rows: title 14px/600 `--text-1` + type micro label ("Concept") `--text-3`; active page = `--accent-tint`.
- **Document:** doc titles use the doc scale (H1 28/700, H2 20/700, H3 16/700); body 15px/1.65 `--text-2`; **wiki links `--accent-text` 500** underline-on-hover (R9); **source refs = neutral chips in Onest** (`--fill`, `--r-tight`, 12px) — never monospace paths (R10); "Synthesis" tag = `ds-label--neutral`; source URL line = caption `--text-3`.
- **Graph:** canvas on `--bg`; **node law (R12):** Concept `--accent` filled · Synthesis `--text-1` filled · Source `--text-3` hollow (1.5px stroke) · Service `--ok` filled; selected node = 3px `--accent` ring + label 11px/600; edges 1px `--border-strong`. Legend: micro labels + the pips themselves. Controls: zoom/fit segmented quiet buttons in a `--glass` pill; "1 hop / 2 hops" = `ds-tabs` sm.

## D12. `ds-settings` — the settings modal (shell per C4)

- **Nav (left pane):** rows 38px, icon 18px + label 14px/500; active = `--accent-tint` + `--accent-text` (replaces gray pill R22).
- **Field rows (Account):** group card `--surface-1`/`--border`/`--r-inner`; rows 48px hairline-divided: icon `--text-3` + label 14px `--text-2` + value right-aligned 14px/600 `--text-1`; chevron for drill-ins. Section headers: micro label `--text-3` ("Avatar", "Details", "Danger zone").
- **Connector rows:** 44px: service logo 24px · name 14px/600 + description caption · right: connected = check icon in `--ok-text` + "Connected" caption, or "+ add" quiet icon button. Category headers micro label. Search = `ds-input`. Filter chips = `ds-chip` with active accent-tint (the black "All" pill is retired, R15).
- **Vault rows:** key icon `--text-3` · **name 14px/600 `--text-1` in Onest** (R10) · masked value: 8 × 4px dots `--text-3` · description caption · edit/delete quiet icons (delete hover = `--danger`). "+ Add secret" quiet button with plus icon.
- **Danger zone (R19):** rows in a group card — "Log out" 14px `--text-1` with icon; "Delete account" 14px/600 `--danger` with trash icon; both full-row hover `--fill`. Destructive confirm = checkpoint-pattern dialog: statement, consequences caption, verbs [Delete `ds-btn--primary` styled with `--danger` bg — the one sanctioned danger fill] [Cancel `ds-btn--ghost`].

## D13. `ds-notif-row` — notifications popover

- Shell per C4; header: Title 3 "Notifications" + "Mark all read" `ds-btn--quiet ds-btn--sm`.
- Filter: `ds-tabs` sm (All · DMs · Mentions · Thread · Agent).
- Rows: 20px avatar (agents = dot avatar) · actor 13px/600 `--text-1` · snippet 12.5px `--text-2` 2-line clamp (markdown artifacts like `**` stripped in preview) · age caption `--text-3` right. Unread = 6px accent pip left edge + `--surface-3` fill. Hover `--fill`.
- Bell badge in rail: `ds-count` (accent circle, 10.5px/800).

## D14. Icon system

- One family, stroke 1.5px, 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 rows; hover/active `--text-1`; accent **only** when the icon itself is the active/selected state signal.
- Never decorative-colored, never filled squares, never emoji-as-icons in chrome. **The sparkle/wand glyph is retired platform-wide** — the agent's mark is the dot.

---

# Part E — Page-by-Page Specifications

Each surface below lists: layout, the components that build it, and the corrections applied vs. the July 2026 screenshots. The rendered light + dark versions live in `catalog.html`.

## E1. Command Center — Priority

- Shell: rail (C1) + main; header row = `ds-tabs` [Priority | People] left, "Updated 5h ago" meta right (C2).
- Content column max 980 centered: digest paragraph (D1) → "Your Priorities Today" panel: section header + `ds-priority-card` stack (one expanded, others collapsed) → privacy footer → "Awaiting reply" eyebrow + `ds-reply-row`s → "+ add" ghost row.
- **Corrections:** purple accents → accent system (R1) · orange risk text → neutral advisory (R6) · white-card active nav → accent-tint (R22) · icon actions get tooltips + neutral color (R17) · date chip neutral (R11).

## E2. Command Center — People

- Same shell/tabs. Digest sentence → "Your People" panel: 4 team `ds-person-card` groups in a grid → focus `ds-person-card` → "+ add" row → "Communication Health" panel with `ds-health-table`.
- **Corrections:** attention rings gold→accent (R8-adjacent) · "Needs Attention" purple chip → `ds-label--accent` · "Reach out" white rect → primary pill (R15) · gold meter → accent meter (R8) · "Discuss with jeetz_aibot" purple link → quiet button + pip.

## E3. Calendar

- Shell: rail + main (call history) + right day rail 340px.
- Main: header "Calendar" Title 1 + "New call" `ds-btn--primary ds-btn--md` (the black pill is now the standard primary, R15) → "Earlier" eyebrow → `ds-call-row` group (D5).
- Day rail: date lockup + chevron nav → 7-day strip (D4) → `ds-brief` (D3) → "Schedule / Morning · 1" eyebrows → `ds-event` expanded (D4) → "Tomorrow + upcoming" disclosure.
- **Corrections:** Today's Brief purple → accent tint (R1) · selected day purple → accent (R1) · **Join call green → primary pill + Live label (R3)** · attendee green dots → `--ok` presence pips (kept, but tokenized) · "Agent prepped" sparkle → dot (R1/D14).

## E4. Skills & Apps

- Main column: `ds-create-hero` (D10) → panel with `ds-tabs` [Yours | Discover].
- Yours: search + Import skill ghost button → filter `ds-tabs` (All/Skills/Apps/Dashboards) + "77 items" caption → `ds-skill-row` group.
- Discover: search + Sort select + grid/list toggle → filter tabs → rows with Add/Update primary sm pills.
- **Corrections:** gradient headline → Title 1 ink (R2) · orange "Update available" → accent label (R5) · black rect Add/Update → primary sm pills (R15) · monospace-styled names → Onest 600 (R10) · segmented black "All" pill → ds-tabs (R16).

## E5. Knowledge

- Per D11 three-pane spec.
- **Corrections:** blue links → accent-text (R9) · monospace red paths → neutral Onest chips (R10) · rainbow graph → 4-role node law (R12) · "SYNTHESIS" chip normalized to `ds-label--neutral`.

## E6. Agent chat (DM with your agent)

- Chat header (D8) + `ds-timeline` agent-thread density: bubbles, steps, working+Stop, checkpoint, verified-done; suggested follow-ups; rich table content per D7.
- **Corrections:** green username → structural attribution (R4) · "ai" blue badge → dot avatar (R13) · monospace metric chips (`NO DATA`, `KYC Approved`) → neutral Onest chips (R10) · blue dashboard link → accent link (R9).

## E7. Human DM & Rooms

- Chat header + room timeline density (D7): flat rows, grouped messages, day dividers, system lines, thread summaries, reactions, meeting-started rows.
- **Corrections:** colored usernames → `--text-1` 600 (R4) · square avatars → circles (R13) · blue link boxes → accent links (R9) · reaction chips tokenized.

## E8. Settings (Account · Connectors · Vault)

- Modal shell (C4) + D12 specs for the three panes shown; Appearance pane hosts the theme switch (Light/Dark/Auto segmented control — the same `ds-tabs` pattern).
- **Corrections:** gray active nav → accent-tint (R22) · orange Delete account → danger row + checkpoint confirm (R19) · monospace secret names → Onest (R10) · black "All" filter pill → chips (R16).

## E9. Notifications

- Popover per D13 anchored to the rail bell.
- **Corrections:** unread ambiguity → accent pip + surface-3 · raw markdown in previews stripped · agent rows get dot avatars (R13).

---

# Part F — Writing & CTA Standards

- **Case:** Sentence case for everything — buttons, labels, tabs, titles ("Mark all read", "New call", "Import skill"). Micro labels render uppercase via CSS, authored in sentence case. Proper nouns keep their case (Gmail, Slack).
- **CTAs are verb-first and concrete:** "Approve & send", "Review drafts", "Ping Aaron + add agenda", "Connect one thing". Never "OK", "Submit", "Yes". One primary verb per view; Deny/destructive is text-only and always last.
- **The agent speaks in first person, plainly:** "Six drafts ready. I read 132 issues." No exclamation-mark enthusiasm in system copy; at most one "!" in a greeting.
- **Timestamps:** within today `7:45` · this week `Tue 8:42` · older `Jul 15` · relative only in meta ("Updated 5h ago", "38d"). Durations `5 mins`. Never both absolute and relative in one line.
- **Empty states** (R21): one designed sentence (`--text-2`) + one action, dashed `--border-strong` container. "No recap yet — Generate recap". Never italic, never bare.
- **Errors:** plain sentence in `--danger`, say what happened and the next step. No codes in UI copy.
- **Micro-label vocabulary** (closed list — additions require design review): Live · Needs you · Verified · Awaiting reply · Draft · Private · Built · Added · Preview · Update available · Cooling · Needs attention · Strengthening · Call ended · Skill · App · Dashboard · Concept · Synthesis · Source · Service · P0–P2.
- **Names & handles:** user handles lowercase as authored (jeetzandawala); agent handles + owner attribution ("mika · Maya's agent"). Rooms are #lowercase-kebab.

---

# Part G — Dark Mode Law & Accessibility

## G1. Dark mode

- Product dark = **flat night surfaces**: `--bg #0A0D12`, cards `#0D1117`, wells `#12161F`. **No aurora, no horizon glow, no grain** — those are marketing-only (v1.0 "dusk").
- Theme API: `data-theme="light|dark"` on `<html>`; default honors `prefers-color-scheme` via the v1.0 bootstrap script; user choice persists (`aic-theme`). Both themes declare `color-scheme` so native controls match.
- Every component in Parts C–D ships both themes by construction (semantic tokens). Hard rules that flip: primary pill ink→white · accent `#0FA8CE`→`#5FD4F2` (raw cyan is too thin on night) · danger `#C24558`→`#FF7A87` · shadows become ring+black recipes.
- Images/avatars: no filter inversion; photos unchanged. App thumbnails sit on `--surface-2` in both themes.

## G2. Accessibility non-negotiables

- Contrast: text-1 18:1 / 17:1 · text-2 6.5:1 / 7:1 (body pair) · text-3 fails AA — metadata only, never sole carrier of meaning · accent-text 4.2:1 at 600–700 weight only · accent-night on night 11:1.
- Focus: 2px `--focus-ring` outline, offset 2, on every interactive element, both themes. Modals trap focus; `Esc` closes; popovers return focus to the trigger.
- Checkpoint verbs keyboard-operable in DOM order (approve → review → deny); pending checkpoints announced to AT.
- Pips/meters/working bars always pair with text — color and motion never carry state alone. Live regions for "working…" updates.
- Agent avatars carry `aria-label` naming the owner ("Maya's agent"). Icon-only buttons carry `aria-label` + tooltip.
- Touch ≥44×44; row taps full-bleed; composer toolbar reachable by arrow keys.
- `prefers-reduced-motion`: all animation ≤0.01ms; pips render static; reveals visible.

---

## Migration order (recommended)

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

---

# Part H — Time: loading, progress, and the agent at work

The product is asynchronous end to end. Every surface can be waiting on a model, a
tool call, or a person. Waiting is therefore a **designed state**, not an absence —
and it has its own rules.

## H1. The loading ladder

What the user sees is chosen by *how long the wait is expected to be*, not by what
the developer finds convenient.

| Expected wait | Show | Never |
|---|---|---|
| **< 120ms** | Nothing. Render the result. | A flash of skeleton — it reads as a bug |
| **120ms – 1s** | The destination's **skeleton** (H2) | A spinner |
| **1s – 10s** | Skeleton **+ a working line** naming the task ("Reading 132 issues…") | An indeterminate bar with no words |
| **> 10s** | Working line **+ Stop pill** + step list (`ds-steps`) | Blocking the whole surface |
| **Unknown / streaming** | Stream tokens into place; the cursor is a `ds-pip--live` | A percentage you cannot honour |

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 animates for more than
10 seconds**; past that it has become a lie, and the surface must escalate to a
working line with a Stop.

## H2. `ds-skel` — skeletons

- Shape: a `--fill` block at `--r-tight` (text) or the component's own radius.
- **Skeletons mirror the real layout.** Same line count, same widths (last line 60%),
  same avatar sizes. A skeleton that doesn't match causes a visible jump on load;
  that jump is the defect, not the skeleton.
- Motion: a single opacity breath, `1.6s`, `--ease`, `0.55 → 1 → 0.55`. **No sweeping
  shimmer gradient** — the system has no gradients, and a diagonal sweep on a
  near-black surface reads as a rendering artifact.
- Stagger rows by `60ms` so a list resolves as a list rather than a slab.
- `prefers-reduced-motion`: the breath stops; the block stays at 0.8 opacity.
- Skeletons are `aria-hidden`; the region carries `aria-busy="true"` and the working
  line is the live region.

## H3. Optimistic states

Actions the user owns render immediately and reconcile after:

| Action | Optimistic | On failure |
|---|---|---|
| Send a message | Bubble appears at 60% opacity, no timestamp | Bubble gains a `--danger` hairline + "Retry" quiet button |
| Check a priority item | Checkbox fills, title strikes through | Reverts with a toast naming the reason |
| React | Chip appears in the accent-tint state | Chip removes itself; no toast (too small to interrupt for) |
| Approve a checkpoint | **Never optimistic.** | — |

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

## H4. The three empty states

Empty, loading and error are different states and must never share a rendering.

- **Empty** — one designed sentence in `--text-2` + one primary action, inside a
  dashed `--border-strong` container at `--r-card`. Never italic, never bare (R21).
- **Loading** — skeleton (H2). Never the empty state's copy.
- **Error** — plain sentence in `--danger` saying what happened and the next step,
  plus a "Try again" `ds-btn--ghost`. No codes, no stack traces, no apology.

---

# Part I — Layering & focus

## I1. The z-index scale

Ad-hoc `z-index` values are how a popover ends up under a sticky header. The scale is
closed; components consume the token, never a number.

| Token | Value | What sits here |
|---|---|---|
| `--z-base` | 0 | Page content |
| `--z-raised` | 100 | Sticky page headers, sticky table headers, the composer bar |
| `--z-rail` | 200 | Sidebar rail, right panel |
| `--z-popover` | 300 | Dropdowns, menus, pickers, the notifications popover |
| `--z-drawer` | 400 | Mobile sheets, side drawers |
| `--z-scrim` | 500 | The modal backdrop |
| `--z-modal` | 600 | Modals, the command palette |
| `--z-toast` | 700 | Toasts — **above modals**, so a confirmation from a modal action is visible |
| `--z-tooltip` | 800 | Tooltips — always last, because they attach to whatever is focused |

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.

## I2. Focus, scroll and dismissal

- **One scroll lock owner.** When a modal or sheet opens it locks `body` scroll and
  records the scroll position; the *innermost* open layer owns the lock and restores
  on close. Nested overlays never double-lock.
- **Focus** moves into the layer on open (first interactive element, or the heading
  for a long modal), is trapped for modal-class layers, and **returns to the trigger**
  on close. Popovers do not trap; they close on outside click, `Esc`, or scroll of
  the underlying surface.
- `Esc` always closes the topmost layer and nothing else.
- A layer that opens from a keyboard action must be dismissible from the keyboard
  without a pointer. No exceptions.

---

# Part J — Input

## J1. The keyboard map

The main surface is called Command Center. It behaves like one.

| Key | Does | Where |
|---|---|---|
| `⌘K` | Open the command palette | Everywhere |
| `⌘/` | Shortcuts sheet | Everywhere |
| `⌘.` | **Stop the agent** | Anywhere an agent is working |
| `Esc` | Close the topmost layer, return focus | Everywhere |
| `G` then `C` / `W` / `A` / `K` / `L` | Go to Command Center · Workflows · Skills & Apps · Knowledge · Calendar | Everywhere |
| `J` / `K` or `↑` `↓` | Move through the focused list | Lists, timelines, notifications |
| `Enter` | Open / expand the focused row | Lists |
| `E` | Hide the focused row | Priorities, awaiting-reply |
| `S` | Snooze the focused row | Priorities, awaiting-reply |
| `⌘Enter` | Send | Composer |
| `⇧Enter` | Newline | Composer |
| `A` / `R` / `D` | Approve · Review · Deny the focused checkpoint | Checkpoint card |
| `⌘F` | Search this surface | Rooms, Knowledge |

Rules: a shortcut never fires while a text field has focus except `⌘`-combinations.
Single-letter shortcuts require the list, not the page, to hold focus. Every shortcut
in this table is discoverable from `⌘/` and from the palette (J2) — a shortcut that
exists only in the docs does not exist.

## J2. `ds-palette` — the command palette

- Shell: modal-class layer at `--z-modal`, width 640, top-anchored at 14vh (not
  centred — the list grows downward and centring makes it jump).
- Input row 56px: `search` icon in `--text-3`, 16px field, `Esc` hint chip right.
- Results: rows 44px, grouped by micro-label section ("Go to", "Do", "Recent"). Each
  row: icon 18px · label 14px `--text-1` · trailing shortcut in a `--fill` chip.
- The selected row is `--accent-tint` + `--accent-text`, moved with `↑` `↓`, never
  with hover alone; hover sets selection so pointer and keyboard agree.
- Empty query shows **Recent** and the five most-used commands, not everything.
- No results: the empty-state rule (H4), plus "Ask your agent instead" as the action —
  the palette is a front door to the agent, not a dead end.

## J3. Drag & reorder

- Only two things reorder: priority items and workflow steps. Everything else sorts.
- Grab affordance appears on hover/focus at the row's left edge — six dots in
  `--text-3`, 18px hit area, `cursor: grab`.
- Dragging: the row lifts to `--shadow-card` at `0.98` scale and 92% opacity; a **2px
  `--accent` line** marks the drop position between rows. No ghost image, no rotation.
- Keyboard equivalent is mandatory: `Space` picks up, `↑` `↓` move, `Space` drops,
  `Esc` cancels — announced through a live region ("Moved to position 2 of 6").
- Drop is optimistic (H3); failure restores the original order with a toast.

## J4. Density

Two densities, one set of components. Density changes **space only** — never type
size, never radius, never stroke.

| | Comfortable (default) | Compact |
|---|---|---|
| Row height | 44px | 36px |
| Section gap | 24px | 16px |
| Card padding | 16–18px | 12–14px |
| Table cell | 11px 18px | 7px 14px |
| Composer min-height | 44px | 36px |

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.

---

# Part K — Data

## K1. Tables

- Base recipe from v1.0: micro-label headers on `--surface-3`, hairline rows.
- **Sort:** click the header; the active column shows `chevrons-up-down` in
  `--text-3`, resolving to `chevron-up`/`chevron-down` in `--accent-text` when
  active. One sort at a time. Sort state lives in the URL.
- **Selection:** checkbox column 44px; the header checkbox is indeterminate when
  partial; a selection bar replaces the toolbar showing "3 selected" + the actions.
- **Pagination:** prefer "Load more" (`ds-btn--ghost`, full width) for feeds; numbered
  pages only where the user needs to return to a known page. Never infinite scroll on
  a surface that has a footer.
- **Sticky header** at `--z-raised` with a hairline that only appears once scrolled.
- Numerals: Onest 600, tabular alignment in columns, proportional in prose.

## K2. Charts

Quiet Sky has **one accent colour and no gradients**. That is not a limitation to
work around; it decides the chart system.

### The law

1. **Magnitude is carried by one hue.** The cyan ramp (K2.3), light → dark. This is
   the default for every chart in the product.
2. **Identity is carried by position and direct labels — not by colour.** Two to
   three series are separated by ramp steps *plus* an end-label each. Beyond three
   series: small multiples, or fold the tail into "Other".
3. **There is no diverging ramp**, because there is no second hue to build one from.
   Polarity is two stacked fills with a 2px surface gap and both ends labelled, or
   two facets side by side.
4. **Status colours are reserved.** `--ok` mint and `--danger` are state, never
   series 2. They always ship with an icon and a word.
5. **There is no amber.** Quiet Sky deleted orange (R5/R6), so "warning" is copy and
   placement, not paint — a warning row is `--text-2` with a neutral pip.
6. **Never a dual-axis chart.** Two measures of different scale become two charts, or
   are indexed to a common base.

### K2.2 Form

| The data's job | Form |
|---|---|
| One headline number | **Stat tile** — no plot |
| Magnitude across categories | Horizontal bars, sorted by value |
| Change over time | Line, 2px |
| Part-to-whole, 2 parts | Single stacked bar with a 2px gap + both labels |
| Part-to-whole, 3+ parts | Bars, not a pie. **The system has no pie chart.** |
| A ratio against a threshold | `ds-meter` |
| Trend in a row | Sparkline, no axes |

### K2.3 The ramps — validated, not chosen

Both ramps pass the ordinal checks (monotone lightness, adjacent ΔL ≥ 0.06, light-end
contrast ≥ 2:1 on the surface, single hue) run against each mode's own surface.

**Light** — on `--bg #FBFBFD`

| Step | Hex |
|---|---|
| `--chart-1` | `#5FBFE0` |
| `--chart-2` | `#1FA9CE` ← the brand accent's step |
| `--chart-3` | `#0A8AAB` |
| `--chart-4` | `#07728C` |
| `--chart-5` | `#05596D` |

**Dark** — on `--surface-1 #0D1117`. These are their own steps, derived and
validated against the night surface — not the light ramp inverted.

| Step | Hex |
|---|---|
| `--chart-1` | `#057D95` |
| `--chart-2` | `#0897B3` |
| `--chart-3` | `#34B1CE` |
| `--chart-4` | `#54CAE8` |
| `--chart-5` | `#89E6FF` |

In both modes the ramp runs **`--chart-1` = smallest / oldest → `--chart-5` = largest
/ newest**, and **the anchor flips with the mode** so `--chart-5` always carries the
most contrast against its surface: darkest on canvas, brightest on night. Get this
backwards and "most" becomes the least visible mark on the chart.

For a two-series line, take **`--chart-4` and `--chart-2`** — mid-ramp steps that stay
legible in both modes — not the ends, where one of the pair goes dim in one theme.

### K2.4 Marks

- **Bars/columns:** ≤ 24px thick — cap it and let the leftover band be air. 4px
  rounded data-end, square at the baseline. Grow from a single baseline.
- **Lines:** 2px, round join and cap. **End-markers ≥ 8px** with a 2px ring in the
  surface colour.
- **2px surface gap** between every pair of touching fills — stacked segments and
  adjacent bars alike.
- **Grid and axes:** hairline, solid, one step off the surface (`--border`). Never
  dashed, never heavier than the data.
- **Label selectively.** The value goes at the tip of a bar, the cap of a column, the
  end of a line — never on every point.
- **Text never wears the data colour.** Values, labels and legends stay in
  `--text-1` / `--text-2` / `--text-3`; a small cyan mark beside the label carries
  identity.

### K2.5 Interaction & access

- Every chart ships a hover layer: crosshair + tooltip on lines and areas, per-mark
  tooltip on bars and cells. Hit targets are larger than the marks.
- Two or more series always carry a legend; up to three are also end-labelled, so
  identity is never colour-alone.
- Every chart has a **table view** behind a quiet toggle. This is the accessibility
  contract, and it also happens to be what people copy into a document.
- Filters sit in one row above the chart, never inside it.

## K3. Stat tiles, meters, sparklines

- **`ds-stat`** — label (sentence case, `--text-3`, 12px) · value (Onest 600, 30–48px,
  `--text-1`) · optional delta chip. The delta chip is `--ok-text` up, `--danger`
  down, always with an arrow icon and a number; **never colour alone**.
- **`ds-meter`** — 7px track at `--r-pill` on `--fill`; fill in `--accent`, switching
  to `--danger` past the warn threshold (R8). Always paired with its numbers.
- **Sparkline** — 2px line, no axes, no grid, 28px tall, end-dot at 8px. Only inside a
  row that already names what it measures.

## K4. `ds-ava-stack` — avatar stacks

- Up to **4** avatars, `-8px` overlap, each with a 2px `--surface-1` ring so the
  overlap reads.
- Order: most-recently-active first.
- Overflow is a `+N` chip at the same diameter in `--fill` / `--text-2` — not a
  fifth face.
- The whole stack is one focusable control with an `aria-label` listing the names;
  it opens a popover, not a tooltip, when there are more than 4.
- Agents in a stack keep `ds-ava--agent`; they are never merged into `+N` — you must
  always be able to see that an agent is in the room.

---

# Part L — Sound

The sound identity (`quiet-sky-sound.js` v3.0) is part of this system, not a
side project. It follows the same principle as the accent: **it only fires where it
carries meaning.**

## L1. The event map

| Sound | Fires when | Tier |
|---|---|---|
| `signature` | First launch of a session, and nowhere else | attention |
| `send` | You send a message | ambient |
| `tap` | A human message arrives in the room you are looking at | ambient |
| `ping` | A DM arrives | ambient |
| `mention` | You are mentioned | attention |
| `checkpoint` | **The agent needs you** — a checkpoint opens | attention |
| `done` | A verified-done strip lands | attention |
| `live` | Something goes live — a call starts, a workflow begins a run | ambient |
| `callEnd` | A call ends | ambient |
| `stopped` | You pressed Stop | attention |
| `error` | An action failed | attention |

`QuietSkySound.play(name)`. Calls use `startCall()` / `stopCall()` for the ring motif.

## L2. When the product is silent

- **Never** on hover, scroll, typing, focus change, or page navigation.
- **Never** for anything the user is already looking at — an arriving message in the
  focused room plays `tap`; the same message while you are typing in it plays nothing.
- **Never** two sounds inside 400ms. The later one wins; the earlier is dropped.
- Muted entirely during a call except `stopped` and `error`.
- Off by default for `attention`-tier sounds until the user opts in; `ambient` tier
  respects the OS sound setting.
- A sound never carries information on its own. Every sound in L1 accompanies a
  visible change — it is a second channel, never the only one.

---

# Part M — Print

Rare but real: people print briefs and recaps.

- Force the light theme; night surfaces waste ink and lose hairlines.
- Hide: rail, tab bars, composers, toasts, tooltips, hover affordances, the theme
  toggle.
- Cards lose shadow and keep a hairline. Charts keep their marks and gain their
  **table view** underneath.
- Links print with their href in parentheses at 10px `--text-3`.
- `break-inside: avoid` on every card, checkpoint, and table row group.
- Page 1 gets the wordmark, the surface name, and the date it was printed.

---

*Parts H–M · Quiet Sky application design system v2.0 · August 2026. Chart ramps
validated with the six-checks validator against each mode's own surface; see K2.3.*

*ai.com · Quiet Sky application design system **v2.0** · Parts A–G from v1.0 (sources: design-system.html v1.0 + product screenshot audit, July 2026); Parts H–M added August 2026. Terminology follows the ratified glossary: **Workflows** (formerly Routines).*