From 1741fb11a50492aa33a2088c28a2538b0996ffde Mon Sep 17 00:00:00 2001
From: Keysat <licensing@keysat.xyz>
Date: Tue, 16 Jun 2026 23:08:41 -0500
Subject: [PATCH] Add design/ contract extracted from the as-built UI

Inventory the as-built recaps.cc look and distill it into a durable,
vendor-neutral design contract: design/DESIGN.md (nine-section brand
brief) + design/tokens.tokens.json (W3C DTCG tokens), plus brand icon
and provenance notes. Canonical calls reconciled with the owner:
indigo #818cf8 as the single interactive accent, purple #a855f7 for
premium only, the #0a0e1a->#111827->#0f172a surface ladder, and a
normalized type scale. Wire the AGENTS.md Design line and record the
contract-vs-code drift as a cleanup backlog in ROADMAP.md.
---
 AGENTS.md                    |   6 +
 ROADMAP.md                   |  38 +++++++
 design/DESIGN.md             | 213 +++++++++++++++++++++++++++++++++++
 design/brand/README.md       |  17 +++
 design/brand/icon.png        | Bin 0 -> 11039 bytes
 design/inspiration/README.md |  18 +++
 design/tokens.tokens.json    | 194 +++++++++++++++++++++++++++++++
 7 files changed, 486 insertions(+)
 create mode 100644 design/DESIGN.md
 create mode 100644 design/brand/README.md
 create mode 100644 design/brand/icon.png
 create mode 100644 design/inspiration/README.md
 create mode 100644 design/tokens.tokens.json

diff --git a/AGENTS.md b/AGENTS.md
index c633c51..568625c 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -5,6 +5,12 @@ YouTube + podcast summarizer + library, served as a single-page app from a Node.
 > **Inbox check:** At session start, if `~/Projects/standards/INBOX.md` exists, scan it for
 > items tagged `(recap)` and surface them before proposing next steps; triage with `/triage`.
 
+> **Design:** before building or changing any user-facing UI, read `design/DESIGN.md` and
+> `design/tokens.tokens.json` and conform to them. Accent is indigo `#818cf8`; purple
+> `#a855f7` is premium-only. The same tokens govern three surfaces that must stay in sync:
+> the main `public/index.html` stylesheet, its `SHARE_PAGE_CSS` share-export string, and
+> `public/auth.html`.
+
 ## Stack
 
 - **Server**: Node.js (`type: module`, ES modules). The dev box currently runs `v25.6.1`; container runtime is whatever the `Dockerfile` pins — check before assuming.
diff --git a/ROADMAP.md b/ROADMAP.md
index 7c17e19..ffbaa09 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -13,6 +13,44 @@ Longer-term backlog for Recaps. Near-term in-flight work and known issues live i
 - **Decide the Max tier-quota default.** The relay code default is `max.monthly: null` (unlimited) → cards render "Unlimited" on a fresh install. The operator set `max.monthly: 120` on their box via the Adjust-Tier-Quotas action (so cards show 120 there). Decide whether a metered number (e.g. 120) should be the shipped default in `recap-relay/server/config.js` — note it also enforces the ceiling, not just the card label.
 - **Add Gemini 3.5 to model selection.** First have a research agent confirm which stable Gemini model versions are actually available and the correct model id/name before wiring anything. The model list is duplicated server + client (provider config under `server/providers/` + the model picker in `public/index.html`) — add the option in lockstep, like the URL-parser convention. Coordinate with the matching relay-side capture (the relay routes Gemini, so its model list must agree). — captured 2026-06-16
 
+## Design-contract conformance cleanup (from the 2026-06-16 `/design` extract)
+
+The `design/` contract (`design/DESIGN.md` + `design/tokens.tokens.json`) was extracted
+from the as-built UI and reconciled with Grant on 2026-06-16. The code is **structurally
+aligned** (right surface ladder, accent system, premium-purple, components) but a set of
+legacy values survived the reconciliation and now read as off-contract drift. None are
+release-blocking; all are mechanical token migrations. `design-checker` found seven
+categories (counts approximate, from grep) across the three styling surfaces — the main
+`public/index.html` `<style>` block, its `SHARE_PAGE_CSS` string, and `public/auth.html`.
+**Edit all three in lockstep** (the SHARE_PAGE_CSS string carries its own copies that a
+main-stylesheet grep won't catch). Do NOT do this in the same pass as the contract itself.
+
+- **Legacy accent indigo → `#818cf8`** (~12 hard + ~16 tint). `#6366f1`/`#4f46e5`/`#4338ca`
+  fills/borders/hovers and `rgba(99,102,241,…)` tints → `#818cf8`/`#a5b4fc` + `rgba(129,140,248,…)`.
+  Biggest cluster is the activation screen (`index.html:1213-1216`, `:1565,1576,1579`) which
+  uses all three demoted values in one component; also inline buttons `:6496,7776,8183`,
+  `.license-block` `:1593,1601`.
+- **Blue `#3b82f6` as a primary interactive color → indigo** (auth ×4 + index ×8). `auth.html`
+  is the worst offender — its primary button + input focus are blue (`auth.html:99,105-117`);
+  also wallet/sign-up/grant/password buttons (`index.html:5228,5763,8151,8163,7609,12384`).
+  Blue stays only for info/status + speaker chips.
+- **Legacy dark backgrounds → ladder** (~10). `#0a0e17`→`#0a0e1a` (`:1156,1243,8662`);
+  `#0b1120`→`#0a0e1a` (`:1191` + SHARE_PAGE_CSS `:11111`); `#020617`→`#0f172a` (`:1562`);
+  and the auth sub-palette `#121828`→`#111827`, `#1f2942`→`#1e293b` (`auth.html:47-48,83`,
+  `index.html:400-401`).
+- **Stray heading near-white `#f5f9ff` → `#f1f5f9`** (×9; 5 in `auth.html:59,63,87,94,96`,
+  4 in index `:418,660,6335,6343`).
+- **Off-scale font sizes → nearest step** (~23). `15→16`, `24→22`, `9→10`, `12.5/11.5→12`,
+  `10.5→10` (e.g. `index.html:84,899,907`, `auth.html:86,110`).
+- **Off-scale weights** (×3): `650→600` (`:1008`, SHARE_PAGE_CSS `:11133`), `680→700`
+  (SHARE_PAGE_CSS `:11113`).
+- **Off-scale radii → snap** (~18). `3→4`, `5→6`, `7→6|8`, `9→8|10`, `11→10|12` (scrollbars,
+  history/queue action buttons, mobile submit/menu, buy inputs).
+- **(stretch) Consolidate inline styles behind CSS custom properties.** ~447 inline `style=`
+  attrs + duplicated values are why this drift accumulates; a `:root` token block (or
+  `design/brand/palette.css` generated from the tokens) would make the contract enforceable
+  instead of advisory. Big diff — schedule deliberately.
+
 ## Known debt (P2, from the 2026-06-14 full-eval — `EVALUATION.md`)
 
 Real but not release-blocking for self-host. The P0/P1 findings from the same eval were fixed 2026-06-15 (see git log + `EVALUATION.md`).
diff --git a/design/DESIGN.md b/design/DESIGN.md
new file mode 100644
index 0000000..2e2e112
--- /dev/null
+++ b/design/DESIGN.md
@@ -0,0 +1,213 @@
+# Recap — Design brief
+
+The durable brand contract for Recap's user-facing UI. Read this and
+`design/tokens.tokens.json` before building or changing any UI. This was
+**extracted** from the as-built `recaps.cc` interface (no prior guidelines), then
+**reconciled** with the owner on 2026-06-16 — so where the live code still
+disagrees with a value here, *this file is the intent* and the code is the cleanup
+backlog (see `ROADMAP.md`). Provenance: there was no design tool or export; the
+source is the shipped `public/index.html`, `public/auth.html`, and the app icon.
+
+---
+
+## 1. Visual theme
+
+A **dense, dark, information-first developer-tool aesthetic.** Restraint over
+decoration: small type, tight radii, thin hairline borders, flat panels on a
+near-black navy field, with the indigo accent used sparingly to mark what's
+interactive or active. It should read like a fast, technical instrument — closer
+to a code editor or an ops dashboard than a consumer media app. Calm, quiet, and
+legible at high density; never glossy, never playful.
+
+The brand mark (app icon) is a **play-triangle filled with a blue→purple gradient
+over four light "transcript" lines**, on the dark navy field — the product in one
+glyph: *press play on a video, get the text back.* That blue→purple gradient is
+the origin of the whole accent story (§2).
+
+Voice: precise, plain-spoken, unhyped. The UI explains tersely and trusts the
+user. What it is **not**: not gradient-heavy, not glassmorphic beyond a light
+overlay blur, not rounded-and-bubbly, not light-mode, not framework-flashy.
+
+## 2. Color palette
+
+Built almost entirely on the **Tailwind Slate + Indigo** ramps over a custom
+near-black navy base. Canonical roles below; full values in
+`tokens.tokens.json`.
+
+**Surface ladder (warm/cool split — the agreed system).**
+| Role | Value | Where |
+|---|---|---|
+| Base | `#0a0e1a` | page, body, sticky top bars, full-height side panels (history sidebar, log drawer). Also the PWA `theme_color`. |
+| Card | `#111827` (warm gray-900) | raised cards, modals, popovers, toasts, icon-buttons, pipeline steps, skeletons. |
+| Inset | `#0f172a` (cool slate-900) | recessed fields & list rows: settings/key inputs, queue items, subscription items, model buttons, expanded-chunk bg. |
+| Raised field | `#1e293b` | the **primary URL input only** — deliberately lighter than the inset so the hero field pops. |
+
+> Legacy darks **`#0a0e17`, `#0b1120`, `#020617`** are near-duplicates that
+> leaked in; fold them into the nearest rung (`#0a0e17`/`#0b1120` → Base,
+> `#020617` → Inset). Don't add new background darks.
+
+**Accent — indigo (THE single interactive accent).**
+- `#818cf8` (indigo-400) — **the accent.** Fills (submit button, active tab/icon,
+  processing badge) and marks (links, focus ring, active state, timestamps,
+  expanded-chunk arrow).
+- `#a5b4fc` (indigo-300) — accent hover (lighter), active-line emphasis.
+- Indigo tints `rgba(129,140,248, .06–.20)` — hover washes, active backgrounds,
+  the `0 0 0 3px …/.15` focus ring, the `0 4px 24px …/.3` submit glow.
+- **Demoted:** `#6366f1` (indigo-500) and its hovers `#4f46e5`/`#4338ca` are
+  legacy dups — migrate them to `#818cf8`; do not introduce new ones.
+
+**Premium — purple (RESERVED for paid/upgrade only).**
+- `#a855f7` (purple-500) — upgrade button, highlighted tier, buy badge, primary
+  buy CTA. `#c084fc` hover; `#9333ea` deep.
+- `#c4b5fd`/`#d8b4fe` (purple-300/200) — tier-badge & Pro text.
+- Purple appears **nowhere** in non-premium UI.
+
+**Text ramp (slate).**
+`#e2e8f0` primary · `#f1f5f9` strong/headings (canonical near-white — fold the
+stray `#f5f9ff` into this) · `#cbd5e1` running body copy · `#94a3b8` muted/
+secondary · `#64748b` labels & placeholders · `#475569` faint meta/timestamps ·
+`#334155` dimmest (doubles as the hover-border). `#fff` only on filled
+accent/premium buttons.
+
+**Borders.** `#1e293b` (slate-800) default hairline → `#334155` (slate-700) on
+hover/active → `#475569` (slate-600) strongest hover. Borders, not shadows, are
+the primary way surfaces are separated.
+
+**Semantic status (consistent, intentional — keep).**
+- Success/green: `#22c55e` base · `#4ade80` text · `#86efac` soft · `#16a34a` deep.
+- Error/red: `#ef4444` base · `#f87171` text · `#fca5a5` soft · `#dc2626` deep.
+- Warning/amber: `#fbbf24` base/dot · `#fcd34d` · `#fde68a` · `#f59e0b` (update btn).
+- Info/blue: `#3b82f6` base · `#60a5fa` · `#93c5fd`. **Blue is status/info only**
+  (and the legacy auth-screen accent, which should migrate to indigo) — never a
+  primary interactive color in-app.
+
+**Speaker chips (8-hue categorical set — intentional, keep as-is).** A→H:
+red/blue/green/amber/purple/sky/pink/slate, each as the *tinted triplet*
+(background α≈.18, light-shade text, border α≈.35).
+
+## 3. Typography
+
+- **Sans (everything):** `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  sans-serif`. System stack — **no web fonts.**
+- **Mono (timestamps, license keys, URLs, code):** `ui-monospace, "SF Mono",
+  Menlo, Consolas, monospace`. One canonical stack — snap the near-variants to it.
+- **Scale (px):** `10 · 11 · 12 · 13 · 14 · 16 · 18 · 20 · 22 · 28`.
+  - 10–11 — micro labels, badges, meta, section labels, pills, hints.
+  - 12 — secondary UI default (buttons, labels, stats, list titles).
+  - 13 — body default (descriptions, list items, transcript-adjacent).
+  - 14 — emphasis / larger body, drawer & settings headers.
+  - 16 — input text, modal `h2`, section heads.
+  - 18 — sub-headers, logo wordmark, large numerals.
+  - 20–22 — headings, modal/activation titles, tier names.
+  - 28 — display (price). Snap strays `15→16`, `24→22`, fractionals
+    `12.5/11.5→12`, `10.5/9→10`.
+- **Weights:** 400 normal · 500 medium · **600 semibold (the UI default)** · 700
+  bold (headings, badges) · 800 extrabold (tier badge, big numerals). Snap
+  `650→600`, `680→700`.
+- **Line-height:** 1.5 body · 1.55 denser reading blocks · 1.3–1.4 titles · 1.25
+  large titles · 1 single-line badges.
+- **Letter-spacing:** 0 default. Uppercase micro-labels track `0.05em`; badges
+  `0.04em`; tier/section labels `0.06–0.08em`; one display title tightens
+  `-0.01em`.
+
+## 4. Component styling
+
+- **Buttons.** *Primary:* filled `#818cf8`, white text, radius 8–10px, weight
+  600, hover lifts `translateY(-1px)` + indigo glow; disabled → `#1e293b` bg /
+  `#475569` text. *Secondary:* `#1e293b` fill, `#334155` border, `#94a3b8`→
+  `#cbd5e1` text. *Icon/ghost:* `#111827` (or transparent), `#1e293b` border,
+  muted glyph; hover lightens bg + border; `.active` → accent fill. *Premium:*
+  filled `#a855f7`.
+- **Inputs.** Inset `#0f172a` (or `#1e293b` for the hero URL input), `#334155`/
+  `#1e293b` border; focus → accent border + `0 0 0 3px rgba(129,140,248,.15)`
+  ring. Mono font for keys/codes; placeholders `#64748b`/`#475569`.
+- **Cards.** `#111827` bg, `#1e293b` border, radius 10–14px; border lightens on
+  hover; expanded/active → accent border + faint `0 2px 16px …/.06` accent glow.
+- **Pills / badges / chips — the "tinted triplet".** Background at α≈.1,
+  text in the light shade, border at α≈.2–.45 of the same hue. Status pills,
+  tier badges, `queue-from` tags, clip badges, and speaker chips all follow this
+  one rule.
+- **Modals.** `#111827` (settings) / `#0f172a` (buy) bg, radius 16px, sticky
+  header with `1px #1e293b` bottom border, `slideUp` entrance, scrim
+  `rgba(0,0,0,.6)` + `backdrop-filter: blur(4px)`.
+- **Toasts.** Top-right stack, `#1e293b` bg, `#334155` border, slide-in from
+  right, auto-fade.
+- **Spinner.** 3px ring, `#1e293b` track, `#818cf8` top, `spin 0.8s linear`.
+- **Pipeline / tracker.** Stepped pills: idle neutral, `.active` → accent
+  tint+border, `.done` → green tint+border.
+
+## 5. Layout
+
+- **Single fluid column.** `.container` `max-width:100%`, padding `36px 24px`
+  (landing) tightening to `16px 24px` (results) and down on mobile.
+- **Results = split screen.** `.results-left` 58% (video/player, sticky top) +
+  `.results-right` (scrolling chunk list), 16px gap; stacks vertically <900px.
+- **Persistent left history sidebar**, 320px, *pushes* content on desktop /
+  overlays on mobile. **Right log drawer**, 440px, slides in.
+- **Dense vertical rhythm.** Card margin 14px, chunk margin 6px, gaps 6–16px.
+- **Spacing steps (de-facto):** `4 · 6 · 8 · 10 · 12 · 14 · 16 · 20 · 24` for
+  controls/gaps, `28 · 32 · 36` for section padding. Not a strict 4/8 grid —
+  dense and organic by design; prefer these steps over new in-between values.
+
+## 6. Depth / elevation
+
+**Flat by default — separation comes from 1px borders, not shadows.** Shadows are
+reserved for things that genuinely float:
+- Overlays/drawers/modals: `0 8px 24px …/.3` (toast) · `0 8px 32px …/.4` (video,
+  side drawers `±8px 0 32px`) · `0 12px 32px …/.5` (menu) · `0 20px 60px …/.5`
+  and `0 24px 64px …/.5–.6` (panel, settings/buy modal). All `rgba(0,0,0,α)`.
+- **Accent glows** signal primary/active: submit `0 4px 24px rgba(129,140,248,.3)`;
+  focus ring `0 0 0 3px rgba(129,140,248,.15)`; expanded chunk `0 2px 16px …/.06`;
+  premium tier `0 12px 40px rgba(168,85,247,.25)`.
+- Overlay scrims use `rgba(0,0,0,.4–.65)` + `backdrop-filter: blur(4–6px)`.
+- Drag/drop affordance is an accent line: `box-shadow: 0 ±2px 0 0 #818cf8`.
+
+## 7. Do's and don'ts
+
+**Do**
+- Use `#818cf8` as the *single* interactive accent; reserve purple `#a855f7`
+  strictly for premium/upgrade.
+- Separate surfaces with 1px `#1e293b` borders that lighten to `#334155` on hover;
+  keep shadows for true overlays only.
+- Build every status/category chip as the tinted triplet (bg α.1 / light text /
+  border α.2).
+- Keep type dense — 12–13px body, 10–11px meta — with 600 as the default weight.
+- Follow the surface ladder: base `#0a0e1a` → card `#111827` → inset `#0f172a`.
+- Use the system font stack; mono only for timestamps / keys / URLs.
+
+**Don't**
+- Don't introduce new `#6366f1`/`#4f46e5` indigos — they migrate to `#818cf8`.
+- Don't put blue `#3b82f6` on primary interactive elements; blue is info/status
+  (and legacy auth) only — auth should move to indigo.
+- Don't add new background darks (`#0a0e17`/`#0b1120`/`#020617` are legacy dups).
+- Don't use purple for non-premium UI, or the accent indigo for premium.
+- Don't add fractional font sizes (12.5/11.5/10.5) or off-scale weights (650/680).
+- Don't reach for a framework, web font, or heavy drop shadows — vanilla JS,
+  system fonts, flat-with-borders is the intentional language.
+
+## 8. Responsive behavior
+
+- **Breakpoints:** `900px` (primary: split→stack, sidebar push→overlay), `880px`
+  (tablet: top breadcrumb swaps to a hoisted mobile copy), `600px` (phone:
+  icon-only submit, hamburger menu, desktop toolbar/pills hidden), `640px` (share
+  export). Plus `≤900px landscape` → fullscreen video.
+- **Mobile rules:** form inputs forced to `16px` (iOS auto-zoom guard); touch
+  targets 44–48px; sticky top bar; full-width drawers/panels; hover-gated
+  controls pinned visible (touch has no hover). Use `100dvh` for full-height.
+
+## 9. Agent prompt guide
+
+When building or changing UI in this repo:
+- Read `design/tokens.tokens.json` and pull values from it — don't eyeball new hex.
+- Match the **dense dark vanilla-JS** style. The frontend is one file,
+  `public/index.html`, with two `<style>` blocks + ~447 inline `style=` attrs and
+  a render-into-`innerHTML` loop. No framework, no bundler, no web fonts — keep it
+  that way.
+- Accent is `#818cf8`; purple is premium-only; follow the surface ladder; build
+  chips as the tinted triplet; system font for text, mono for timestamps/keys.
+- **Three surfaces stay in sync:** the main app stylesheet, the `SHARE_PAGE_CSS`
+  string (the self-contained share export), and `public/auth.html`. A token change
+  must be reflected in all three. Auth currently uses the legacy blue accent —
+  new auth work should adopt indigo.
+- Sanitize operator-internal strings at error boundaries (per `AGENTS.md`) — they
+  must never reach cloud users, design surfaces included.
diff --git a/design/brand/README.md b/design/brand/README.md
new file mode 100644
index 0000000..ea1c513
--- /dev/null
+++ b/design/brand/README.md
@@ -0,0 +1,17 @@
+# Brand assets
+
+- **`icon.png`** — the app icon (1024×1024). A rounded-square (squircle) on the
+  dark navy field, with a **play-triangle filled by a blue→purple gradient** over
+  four light "transcript" lines. Used as the PWA icon (`manifest.json` →
+  `/assets/icon.png`, also `assets/icon.png` / `icon.png` at repo root) and the
+  auth-screen logo. The gradient's blue end and purple end are the source of the
+  app's blue (info) and purple (premium) accents; the indigo `#818cf8` interactive
+  accent sits between them.
+
+**Fonts:** none shipped — Recap uses the system font stack (`-apple-system, …`)
+and a system monospace stack. No web-font files to vendor here.
+
+**Palette:** the machine-readable source of truth is `../tokens.tokens.json`. No
+generated `palette.css` yet — styles live inline in `public/index.html`;
+consolidating them behind CSS custom properties is tracked as cleanup in the
+repo `ROADMAP.md`.
diff --git a/design/brand/icon.png b/design/brand/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..d326778d4f60731e627959ea083d94bac06590a2
GIT binary patch
literal 11039
zcmd^Fdt8m#yI*^^RVZ!amQY(th1jkYrB`m_mObthWsgfTluIO~dK=_YMu<YRhsiXq
z83{>kl1UnxB<UW5qPx;no$s^D?;O8#e&>A7IiKJ8=k)nh&wAE#`99CH)_T`k@4HWC
zKV7?vUKhrg_KdHm%wtRhQp7aX@y~C-(4CA8c{5|mqy?Vg<@w)Ub6kDu_v*K@w_{Bm
zcMA=V>>o7$YdgDp!BXSd{^IW4yYJatQggZZt2@`u-@fje8|%8p)nvhfm(igTQOwmf
zOEdMm)b01}@yiIKfhJZ-`dJQ7s@itAUElJ|X{goP`urya-_BIVIr+9`9nE{rm~y>u
zTiKyVkj6C{JKw~Y#Xk!2V9cv}&vM(<qyN;>8NG01g@BnJ_?k1fj_Ua^U4tn+?y<;f
z?(nIrI*jXihFNWI&^-#8UDziKO5XWEq2<e1*a3-BX1$~~wMc{UzMX}&$vf}cQHO4*
zL>X^wnU+?9j!}CBY4?)uEeJw~=}BFsv$f>nBkCBxPjE4L^4%fRY#EE0s#RpFBQ!Hk
zGGNTXL{ucuR4Iqu=fm=9c`ZN2B*p_JdKMEj&q5-5uWtH8i<_GQpepS;P~qsd{w&GJ
zyW4TzdFcVVpAfb9K0of}K5c1>fbk<W1zX)e3~_EyW6TQl=BGne5p66MzI*As@P3sB
zV>69JnZ+S_eUw{*U`nyz<IDjIPTXtUi85y1U(0X4HFEbTvUQ@f;Ps}-T~?C5d3RxI
z@wA@zNZ(<w=&!f4SXX%qIxb!Fu9+_%RRccTo3fU-4reL%8_+uQ+nySk<Fq%EKzkl~
z%3f959aOnr5+Rma8whm$tC8mDk+;`+c6r2GE1`eQT~DrS&$LwfVFzu-Y6;{_e-UGR
za`wVc?ibHY*O#Hu+W0kR8_r7hkpZce_XUF?sXting@IR_^yI$wY?zV&=!Om$XDg7~
z>yL+yb=lQMP3B$|Enw`g)uDepUSr~1BmjQXgO#1ae(b^Kk7`9%>Z&Vqrn9gg_H;&K
z)_df>5%F_8$?`jSqU&sy&F_I>#c+?jrXAnh)3cVMr|!dR{(_ZYqwp2#rO^JE|GiMT
z$+|y!T(5p`GGg({$uOKg*t_zei2v(5@Lf*jn=nsJP(SQVXtUGcODv!&Igv6!x}NRb
z@f6~QfpHp>)%hrke!y<K|7O>uPW)brzGxhon!D#GAs2J9D=PoMu>8JMAjz212}8o`
zn~y8@GVyC?A+i#odHZT36BiFgBl>1m{mQ2TMcqk&=Mo(X4*j9dAKRb@07+}N&K=j6
zIo$acji9s1jxUxmm+HYlAWg{nxO%=oas4Ec#5tLlr#TC`Sr%}_Z;tuR;-n_Kl&1xy
z)XaMo>kUCL*6+eZ79*nwO_!H9Uwg-7&4H*8=lFfWPtVl(6U(=t>)pcl`j<wr%%&Bv
zn;xLIZS7Wp;z1t@?PF%_+zSW`ft8)_!mdB-1u|#RQ~OJUS!V4SL?WJU?tOhflRXMV
zeYn|U%d%doaoQuueMrJ`at7U(`@6Bo=RH7LIz5~ao6Tf3fwVNeH{1H8H}VNjtv&m)
znU{<~N)LRs&2^JNala2NGUtUk3Fbps$j6sxC=F-k+?tAjkz3tl5r6nRm8>>0<j&G5
z%=C3K8vMYJXzxH`GiCH|8vIv7h}JT%Z~a4`n0)bSZFcKD($0d+-ga|Jt@CU7&HVso
z9b3_qwBfX#&%tJuwkX(`dDdeT@F|<iUjC`Z)6izGDpwky6pUxnv{}I?nBn^zxOL<d
zSj6kv!8>x`dgy0f=MG-ofvYDwc<MSGyg#(>L}+NU2ewe3y&+{l`5-bRR>}p++ijqv
zw}1K=LwN&F@|l-7(BpbLkE`t9Mc+)Q|IEA6!Ap;rxGlC_jwcIDP}`gJZzIU9b=Pln
zK=JwvuekQ=?G9e=ZXNK7&Epa~cvy)T)0F?jiW&%P(3(R7DpWj?bQ`OxQ1Lbt*mUqD
zB+W7RPVDzKq)QU9-Q!kA7-=2wf(tJ;=TU{3CP#mH=G=w-*hWL!%K1g9J@Gj9=vqtY
zollhcttXm9%C+qRo6hCGpC}{=fvQ$w<pP1S+7E5h=VNZ?e_?f;c8Ar*ak-TpR#mDZ
z2^rv6KXn$N%8J+em{(s$yZu#Lwh2ioI=w&5EX(uEvnbF7&Ub7o+bhLW@83|I5GdbL
zyb7mv<z6a938T@%gkt*pxnXI>8iX7eQHA@O3%)?xo@VMpLKbym%NYe&Zt44Wg33@w
zygUhfcH7bD-<7qhriROtKkrnw*G58O9Qz{Pf83a57P%$o*3w0rmy=Uz|9>387vX%-
zSYmG$8FRRC2n_I(to|#^?bYKU{P)p>Z_cqIBov2q*#88{7qI?U4TZ@siQ5l1e}z@Y
zQOLN1_O@eY{9^DG5@~u6=-5ESnt@Q%#=lB8IyDfGWhlE`WC!fGP~Jf*z8Uzz{`kFn
ze4Bm7@oim@oS^B9rF;!l`7jt3IBj}sbjOaG9Ga7MK|jEdv7RNppz$r4vjK=M9$BZ3
zY{{BLZj)iYm*sl};!~~=F@Ar1O_9-^d1Rs+Ozb8T&c+zBWk)qkO4pN$89KEsn~RK2
z`RpOJCa493x6?VG)la$qZggr8&~EH6V2ba^?R2;igcE-#_`3#UbGi94l*PyJn||xY
z+>Bc{x+0!Ku<d_pTeHzA6Oxl)%;P`Jw2f)oA=L<D+!3(sHzz<n9S-=dr~KrHAKQ{(
z3<uovuZ)+@xI)=I4?ohez^rgWYqa+>{~2D_p(g7EwOe-_;4CTt5!`d~kso&QIZ0ik
z&{YusCU%C`0csjivonyr?vCw8+B&zBKX=`QBp5<ht3n9d5=<=q&t)5PjT|>#fJ*RA
zSS)e!es6SV5rlM)0`WM&R(b;9Z{FpXj?|8anp_4*$)2a6A=QP2mzr?$32U5b*82^|
ze|}zQ2=UrU!0t)PFVQ+*-L!OYsWvs2QS*a3*`d9`Gm7>c2D$8xMS=B<4e{T?bM{_%
z9=!`->yZ61Zx2|^%{WQTg-||GHyFxA<oOMS2Yvr#o*#@HJ&yp<{h0W}&0Uy$)$~Ei
z(K?lncVGm(+9YIr^zgW~hlhI@V$roj=<$KO@s~m0iPCQl_(h`7yfHIE%lbe%7AT^B
zob?fv<tCs%`@V6rN$ET|jta-1m>;(Q0z*(FWe{*FrU69S+DEN3awztrz#*Ts^y8e2
zV?OXDi+vqKQ%Iprta&p_f89|2*vE`96X0TA9xqyF#HCGFWBfhXl#1cQbRT@E<;M9P
zj>S~rC{IDF-Y3k+dG|;t;Ag{y?u#s+BQbNJFbyEM!MQ*op8~m6gVDPZ02Jcf`Z*aM
zu%^2g)^@*0*l;+u&=kF&Fp(6p+zsJBKSB-^CeZ3xu^ECT{t!GWM)*@<Say7Xg?&ah
z@WT!fKWEb`qw<@R&~pwC0PeL%o^-|p7?AgXfiWw7fzS1Ft4P(^r?$jJ<XLve@%R-H
zf<bQ6qlUVbWc0Gwa%+SdGX+?70BU>);Ap<u|NeH&doMUT17wmgM?1_PBe;-(xNitz
z<LxVz8Ez0bL93yeF(?P3E|eu)p0(Hs6OLO4OY%93k*@Tf0@N!Qa9r`r|GI3eW9Vg!
zGKB+hN_#-}9gH*gTkqnAJNjIL3{5P4_c9edmS`u8XxTWJDS0;bxksrUboSFjZzpo2
zz;eZ;QR^<3XXu0f8-nA%DSMF{Y2%G#q)dg_G-CkLhgfiO!5zmOtQ$%fz>^Gx`~&>5
zsoA%0%z6&2G=G?B>UHn9E#+jb3B_bn3G8yH%VOSt+)_$Yt~c=)!n=GV@sARp66UPp
z$NA0;y_`5rlksaYUASi*G%CgQaJzYKmIcCz9u7|~`w`tbLOeKs<D5{po<h|;VlFuc
zo^L6AZ~*~O_+qzsEHDyEfadDLXO1~Yus9e9b{T;<KtyciyW!=SD5?$2*Jebz(8Smn
z{%P^nwQURS@Z`p_!?HF$UFaA$Lz5{60=QCr7b*wbY<BUv3vpYni5ZuS%<z5lhKZQW
z3=ZYpESA5BJb4AsqV_;AnqPXkEW;f3dI1{ql0a@e<P_6yEPD~T6o|V}HMNQs4Q!u4
zOf9Z1b$EW<Qbb@&21Pf@D>7VRpf8fc1|hksBBd0?<~xpuIjJF}BxltiF^C{{*(l!@
z+N}(7x<8^R3(noPwG{J+S8YH#fnRcx_|e42^x*Z8Xx8iIWKB$Z1j$WBkZ+8^TToKe
z%W=HtZZT8VQk46#T+N<^4j1L!p>bO<W0dN|56Hs<GP)Z@H3=w8FbkNThs&DKZskY=
zg>8q@(|@5=%(Yn?dJCBy$q2oWKrw+7hk>AUadGR`gjVDX6tS4uXcmRt_CWD3k+kJQ
z#|d$@y$3Rd8BntKUV&nkt_7$39N?<Ms9<3^`4i%{)W5c4+yMY%&K@e-_1M#y6~L`n
zv~77oWMoLj8vVkf&GT6HE>ap+b_sSD6?SK`F=VX(4qubQl6)IjJ1Ax{nvwk7JooLP
z71gW#*;EQeH_s+?TPf<oEh0E)x8oTWOk+z~vWxN6RI63)m9HJ+7HcwHl$miJ^=_3J
zcXD^*phLYqUlo))dfgT?DIDS{6z{0XN@x?yU4?;GDoW4FgmTBYxteUrUgD3f$SsI$
zjzzQ|2tm|ipWL`wR8T&c5Ipn3o<KU5Y`ufXNs7(o!Kd7~Es0_lO{Y-)O<v-qS@j!w
z3E7Xd{G?xOzTr`N3L(s#fu@9~jSZRFq$%K55m6k!Ze3^rmV>(lXBP<CCa_)gmmkH|
zRy^9p6s{x|UzBgh(xq_0>?I;*PT7+WsJwM?R%Le~kBN<W(0L$pxmz={VkmITj9)V=
z^w_+a20mVkD`pA8juTet*?PCq4DTD3-C5>Tw0Wz}0&WhKaY=e}?3Pj=J0`Ov7hZTq
z8Iy)$O=WIIWc~6XBDR`FzFbn7i04}BK+sAhz=;T4&|hky9;KKb!TZo+gL(-0{$w>p
z#h<&I$&DV}8Ue<crVkP2sXm=KiApW4N@FvnS#A_y8+-%=Q)}*;WMImx$dN7nhbgY~
zYl%B@sx(q*dFAG6`6*O+8<tX~@x25rW%$JJ8`OHK&`k@ll?|c*&ee`gGKdNT#ZES4
z&j*_(I?MX5LCu^bi$s2_8`QKZi$$FRY}2tZVtmy^w+1!U6y8-=Jt)AoeY#kJI0QLP
z*Uz;<&7a2Am?u>lgxe+CM9Ys~Nui$ju+K!>kME)CPO8#a5<x0;tq-a+vO|cx4#`sL
zUGVlufUPo(l+IT_Bm>)t-4iyK(E7+-ZOy9ED4}uAZ9;FWs`nLQP|A<ZcX;TdjXh)i
zuO^pMd^)o~+>uCr{lvQYNd~k_#w=-`0CJ0p9N8kMp=fpUegU>Ja;c8nv5?6i6x$+v
z^QtsVRem<K7J$Td728F)tRa_a<)Z^^xv`|=jO)3~=^*6aM{GyYqOk2_%5xLfHK;9^
zOKe9-(jJJ}*H|SPD6Gi)@4Bt5oD%$XMDxC4opf4~CDBj%wX*N1s)D|)teOb_9e1lV
zG-=J#R90zl`0o-{tfTw}Hn^P$*$}%J8;-LM+CGghaU&;prGx62qFK0Pq+Kne+e4{2
z%q#4`x<)>S)Vwx;r!)c`#lzegpyPk=Nv_gR?PfTC+)An*r9H`_DLE6g7EgzM66ue^
zg`#dCh~T@6wf$5(C>DefC+Pz>auLMn=)%;Ra&*w0Dgmtp^olWL=wJfIk<63;X+ScP
zCQ@%XSab-GcPqrjXH*b)(w!SxNXZ^b%AN^pAwg$Cxf+yc)4{T!l&%L>k);lz88Z{S
zugz?BWJ8Ho1#!*|gz*DJ`Ct%dP-|XB1VZ4&2^g+o8c}1)a}VmZvf#r+zncK-7Y#wq
z!SIlinRF2@cgLyr3Es#C|0~ME9o274DAr+kd@%m}j^|+CB6csBUqaw}{sERRu?{7y
zX;9;^jbjQ^*w&)awZH09B`PPy34^7iLUI#H_C|LQReD-o6l~KzUTF%0Da2FX+Hf2F
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

literal 0
HcmV?d00001

diff --git a/design/inspiration/README.md b/design/inspiration/README.md
new file mode 100644
index 0000000..195dc23
--- /dev/null
+++ b/design/inspiration/README.md
@@ -0,0 +1,18 @@
+# Inspiration / provenance
+
+This is an **extract** run (Case B): Recap had no prior design guidelines and no
+design tool was used. There are no external reference images — the *de-facto* look
+**is** the source, harvested directly from the shipped code on 2026-06-16:
+
+- `public/index.html` — the whole app + landing (two `<style>` blocks + ~447
+  inline `style=` attributes).
+- `public/index.html` → `SHARE_PAGE_CSS` — the self-contained share-export styles.
+- `public/auth.html` — the magic-link auth screen.
+- `public/manifest.json` — PWA name/colors/icons (`theme_color` = `#0a0e1a`).
+- `design/brand/icon.png` — the app icon (the only first-class brand asset). Its
+  blue→purple gradient play-triangle is the origin of the accent story.
+
+The conflict reconciliation (which dark, which indigo, the type scale, the
+accent-hue strategy) was decided with the owner and is recorded in `../DESIGN.md`.
+If real reference images are gathered later, drop them here with a one-line note
+on what's liked about each.
diff --git a/design/tokens.tokens.json b/design/tokens.tokens.json
new file mode 100644
index 0000000..2d6f5e5
--- /dev/null
+++ b/design/tokens.tokens.json
@@ -0,0 +1,194 @@
+{
+  "$schema": "https://tr.designtokens.org/format/",
+  "$description": "Recap design tokens (W3C DTCG). Extracted from the as-built recaps.cc UI and reconciled 2026-06-16. Canonical roles only; see design/DESIGN.md for usage. Composite shadows and tint scales are documented strings, not strict DTCG primitives.",
+
+  "color": {
+    "$type": "color",
+
+    "surface": {
+      "$description": "Warm/cool elevation ladder over the navy base. Legacy darks #0a0e17/#0b1120 fold into base; #020617 folds into inset.",
+      "base": { "$value": "#0a0e1a", "$description": "Page, body, sticky bars, full-height side panels. Also PWA theme_color/background_color." },
+      "card": { "$value": "#111827", "$description": "Warm gray-900. Raised cards, modals, popovers, toasts, icon-buttons, steps, skeletons." },
+      "inset": { "$value": "#0f172a", "$description": "Cool slate-900. Recessed fields & list rows: inputs, queue/sub items, model buttons, expanded chunk." },
+      "raised-field": { "$value": "#1e293b", "$description": "Primary URL input only — lighter than inset so the hero field pops." }
+    },
+
+    "border": {
+      "default": { "$value": "#1e293b", "$description": "Slate-800. Default hairline — primary surface separator." },
+      "hover": { "$value": "#334155", "$description": "Slate-700. Border on hover/active." },
+      "strong": { "$value": "#475569", "$description": "Slate-600. Strongest hover border." }
+    },
+
+    "accent": {
+      "$description": "Indigo — THE single interactive accent.",
+      "default": { "$value": "#818cf8", "$description": "Indigo-400. Submit/active fills, links, focus ring, timestamps, active marks." },
+      "hover": { "$value": "#a5b4fc", "$description": "Indigo-300. Accent hover (lighter), active-line emphasis." },
+      "legacy-500": { "$value": "#6366f1", "$description": "DEMOTED indigo-500 dup — migrate to accent.default. Do not introduce new." },
+      "legacy-600": { "$value": "#4f46e5", "$description": "DEMOTED legacy hover for #6366f1 — migrate away." }
+    },
+
+    "premium": {
+      "$description": "Purple — RESERVED for paid/upgrade UI only. Never in non-premium surfaces.",
+      "default": { "$value": "#a855f7", "$description": "Purple-500. Upgrade button, highlighted tier, buy badge, primary buy CTA." },
+      "hover": { "$value": "#c084fc", "$description": "Purple-400." },
+      "deep": { "$value": "#9333ea", "$description": "Purple-600. Pro-CTA hover." },
+      "text": { "$value": "#c4b5fd", "$description": "Purple-300. Tier-badge & Pro text." },
+      "text-soft": { "$value": "#d8b4fe", "$description": "Purple-200." }
+    },
+
+    "text": {
+      "primary": { "$value": "#e2e8f0", "$description": "Slate-200. Primary body/UI text." },
+      "strong": { "$value": "#f1f5f9", "$description": "Slate-100. Headings/emphasis near-white. Canonical — fold stray #f5f9ff into this." },
+      "body": { "$value": "#cbd5e1", "$description": "Slate-300. Running body copy (transcript, descriptions, bullets)." },
+      "muted": { "$value": "#94a3b8", "$description": "Slate-400. Secondary/muted." },
+      "label": { "$value": "#64748b", "$description": "Slate-500. Labels & placeholders." },
+      "faint": { "$value": "#475569", "$description": "Slate-600. Faint meta, timestamps." },
+      "dim": { "$value": "#334155", "$description": "Slate-700. Dimmest text (doubles as border.hover)." },
+      "on-accent": { "$value": "#ffffff", "$description": "White — only on filled accent/premium buttons." }
+    },
+
+    "status": {
+      "$description": "Semantic status ramps. Use the tinted-triplet pattern for chips (see tint.*).",
+      "success": { "$value": "#22c55e" },
+      "success-text": { "$value": "#4ade80" },
+      "success-soft": { "$value": "#86efac" },
+      "success-deep": { "$value": "#16a34a" },
+      "error": { "$value": "#ef4444" },
+      "error-text": { "$value": "#f87171" },
+      "error-soft": { "$value": "#fca5a5" },
+      "error-deep": { "$value": "#dc2626" },
+      "warning": { "$value": "#fbbf24" },
+      "warning-soft": { "$value": "#fcd34d" },
+      "warning-faint": { "$value": "#fde68a" },
+      "warning-deep": { "$value": "#f59e0b" },
+      "info": { "$value": "#3b82f6", "$description": "Blue-500. Info/status only (+ legacy auth accent). Not a primary interactive color in-app." },
+      "info-mid": { "$value": "#60a5fa" },
+      "info-soft": { "$value": "#93c5fd" }
+    },
+
+    "speaker": {
+      "$description": "8-hue categorical set for diarized speaker chips A–H. Rendered as the tinted triplet (bg α≈.18 / this text / border α≈.35).",
+      "a": { "$value": "#fca5a5", "$description": "red — base rgb(239,68,68)" },
+      "b": { "$value": "#93c5fd", "$description": "blue — base rgb(59,130,246)" },
+      "c": { "$value": "#86efac", "$description": "green — base rgb(34,197,94)" },
+      "d": { "$value": "#fcd34d", "$description": "amber — base rgb(245,158,11)" },
+      "e": { "$value": "#d8b4fe", "$description": "purple — base rgb(168,85,247)" },
+      "f": { "$value": "#7dd3fc", "$description": "sky — base rgb(14,165,233)" },
+      "g": { "$value": "#f9a8d4", "$description": "pink — base rgb(236,72,153)" },
+      "h": { "$value": "#cbd5e1", "$description": "slate — base rgb(100,116,139)" }
+    }
+  },
+
+  "tint": {
+    "$type": "color",
+    "$description": "Recurring translucent washes. Stored as documented rgba strings — they are tints of the named hues, not standalone primitives.",
+    "accent-wash": { "$value": "rgba(129,140,248,0.06)", "$description": "Hover/active wash of accent.default. Family: .06 .08 .10 .15 .20." },
+    "accent-active": { "$value": "rgba(129,140,248,0.08)", "$description": "Active background of accent.default." },
+    "accent-ring": { "$value": "rgba(129,140,248,0.15)", "$description": "Focus-ring color → box-shadow 0 0 0 3px." },
+    "chip-bg": { "$value": "rgba(34,197,94,0.10)", "$description": "Representative tinted-triplet background (α≈.10) — swap the hue per status/category." },
+    "chip-border": { "$value": "rgba(34,197,94,0.20)", "$description": "Representative tinted-triplet border (α≈.20)." },
+    "scrim": { "$value": "rgba(0,0,0,0.6)", "$description": "Overlay scrim behind modals; family .4 .5 .6 .65." }
+  },
+
+  "font": {
+    "family": {
+      "$type": "fontFamily",
+      "sans": { "$value": ["-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "sans-serif"], "$description": "System stack — no web fonts." },
+      "mono": { "$value": ["ui-monospace", "SF Mono", "Menlo", "Consolas", "monospace"], "$description": "Timestamps, license keys, URLs, code. Canonical — snap near-variants to this." }
+    },
+    "size": {
+      "$type": "dimension",
+      "$description": "Normalized scale (px). Snap strays 15→16, 24→22, 12.5/11.5→12, 10.5/9→10.",
+      "10": { "$value": "10px", "$description": "micro labels, badges, meta, section labels" },
+      "11": { "$value": "11px", "$description": "small labels, pills, hints, queue meta" },
+      "12": { "$value": "12px", "$description": "secondary UI default — buttons, labels, stats" },
+      "13": { "$value": "13px", "$description": "body default — descriptions, list items" },
+      "14": { "$value": "14px", "$description": "emphasis / larger body, drawer & settings headers" },
+      "16": { "$value": "16px", "$description": "input text, modal h2, section heads" },
+      "18": { "$value": "18px", "$description": "sub-headers, logo wordmark, large numerals" },
+      "20": { "$value": "20px", "$description": "headings" },
+      "22": { "$value": "22px", "$description": "large headings, modal/activation titles, tier names" },
+      "28": { "$value": "28px", "$description": "display — price" }
+    },
+    "weight": {
+      "$type": "fontWeight",
+      "$description": "Snap 650→600, 680→700.",
+      "normal": { "$value": 400 },
+      "medium": { "$value": 500 },
+      "semibold": { "$value": 600, "$description": "The UI default weight." },
+      "bold": { "$value": 700, "$description": "Headings, badges." },
+      "extrabold": { "$value": 800, "$description": "Tier badge, big numerals." }
+    },
+    "lineHeight": {
+      "$type": "number",
+      "body": { "$value": 1.5 },
+      "reading": { "$value": 1.55, "$description": "Denser reading blocks." },
+      "title": { "$value": 1.3 },
+      "title-large": { "$value": 1.25 },
+      "single": { "$value": 1, "$description": "Single-line badges/controls." }
+    },
+    "letterSpacing": {
+      "$type": "dimension",
+      "label": { "$value": "0.05em", "$description": "Uppercase micro-labels." },
+      "badge": { "$value": "0.04em" },
+      "tracked": { "$value": "0.06em", "$description": "Tier/section labels (up to 0.08em)." },
+      "tight": { "$value": "-0.01em", "$description": "Large display titles." }
+    }
+  },
+
+  "radius": {
+    "$type": "dimension",
+    "$description": "Snap strays 3→4, 5→6, 7→6|8, 9→8|10, 11→10|12.",
+    "4": { "$value": "4px", "$description": "tiny chips, badges, drop-zones, skeleton lines" },
+    "6": { "$value": "6px", "$description": "default small controls — buttons, chips, menu items" },
+    "8": { "$value": "8px", "$description": "default medium — inputs, buttons, pills" },
+    "10": { "$value": "10px", "$description": "larger cards/chunks, status bars" },
+    "12": { "$value": "12px", "$description": "modals, popovers, menus" },
+    "14": { "$value": "14px", "$description": "big cards, video embed, activation card" },
+    "16": { "$value": "16px", "$description": "settings / buy modal" },
+    "18": { "$value": "18px", "$description": "listen panel" },
+    "pill": { "$value": "999px", "$description": "fully-rounded badges" },
+    "circle": { "$value": "50%", "$description": "avatars, dots, play controls, spinner" }
+  },
+
+  "space": {
+    "$type": "dimension",
+    "$description": "De-facto dense scale (px). Not a strict 4/8 grid; prefer these steps over new in-between values.",
+    "4": { "$value": "4px" },
+    "6": { "$value": "6px" },
+    "8": { "$value": "8px" },
+    "10": { "$value": "10px" },
+    "12": { "$value": "12px" },
+    "14": { "$value": "14px", "$description": "card margin" },
+    "16": { "$value": "16px", "$description": "split-screen gap" },
+    "20": { "$value": "20px" },
+    "24": { "$value": "24px", "$description": "container horizontal padding" },
+    "28": { "$value": "28px", "$description": "section padding" },
+    "32": { "$value": "32px" },
+    "36": { "$value": "36px", "$description": "landing container vertical padding" }
+  },
+
+  "shadow": {
+    "$type": "shadow",
+    "$description": "Flat-by-default — shadows only for floating surfaces. Composite/glow values kept as documented strings.",
+    "toast": { "$value": "0 8px 24px rgba(0,0,0,0.3)" },
+    "drawer": { "$value": "0 8px 32px rgba(0,0,0,0.4)", "$description": "Video embed; side drawers use ±8px 0 32px." },
+    "menu": { "$value": "0 12px 32px rgba(0,0,0,0.5)" },
+    "panel": { "$value": "0 20px 60px rgba(0,0,0,0.5)", "$description": "Listen panel, activation card." },
+    "modal": { "$value": "0 24px 64px rgba(0,0,0,0.5)", "$description": "Settings/buy modal (up to ...0.6)." },
+    "glow-accent": { "$value": "0 4px 24px rgba(129,140,248,0.3)", "$description": "Submit button — signals primary." },
+    "glow-accent-faint": { "$value": "0 2px 16px rgba(129,140,248,0.06)", "$description": "Expanded chunk." },
+    "ring-accent": { "$value": "0 0 0 3px rgba(129,140,248,0.15)", "$description": "Input focus ring." },
+    "glow-premium": { "$value": "0 12px 40px rgba(168,85,247,0.25)", "$description": "Highlighted premium tier." }
+  },
+
+  "motion": {
+    "$description": "Transitions are quick and functional. Durations as documented strings.",
+    "duration": {
+      "fast": { "$value": "0.15s", "$description": "Default control transition (transition: all 0.15s)." },
+      "base": { "$value": "0.2s", "$description": "Cards, layout shifts." },
+      "slow": { "$value": "0.4s", "$description": "Chunk-body max-height expand." }
+    },
+    "overlay-blur": { "$value": "blur(4px)", "$description": "Modal/overlay backdrop-filter; 4–6px range." }
+  }
+}