@nurix/etna 0.18.18 → 0.18.20

package/data/harnesses/code/skills/design/data/design-md/library/spotify.md

@@ -0,0 +1,248 @@
+---
+schema: design-md/v1
+product: Spotify
+provenance: library
+sourced: 2026-07-04
+---
+
+# Spotify — the near-black operator reading
+
+A content-first cocoon reduced to one idea: the UI recedes into near-black shadow so the work glows,
+with a single functional green accent doing all the color. This entry is a deliberate operator reading
+of Spotify — the dark immersion and the one-green discipline carried onto internal tools (a media
+library, a catalog console, a content-ops dashboard), with the album-art color source and the hero
+pill geometry left behind. Spotify is a **categorically dark** brand; the manifest ships that dark
+surface set in the default slot (the corpus forbids light primary surfaces). Judgments away from the
+corpus are annotated `# derived:`.
+
+## 1 Visual Theme
+
+Dark by conviction, not by option. `background` is near-black `#121212` (never pure black — Spotify is
+deliberately near-black), and surfaces step up by lightness rather than by line: `card` #181818,
+interactive `secondary` #1f1f1f, elevated cards #252525/#272727. A single accent — Spotify Green
+`primary` (#1ed760) — carries the one action that matters and nothing decorative. Because an operator
+surface has no album art to color it, that green plus the status hues carry **all** the color on an
+otherwise achromatic field; keep them scarce. Depth is shadow-carried, not flat — on near-black a
+hairline all but vanishes, so elevation reads through heavy shadow and surface-lightening. Density is
+`dense`: dark compression, built for scanning. This is Spotify's one true theme, so
+`color-tokens.light` (the always-present default slot) carries the near-black set — dark is not opt-in
+here, it is the identity.
+
+## 2 Color Roles
+
+One accent — `primary` green is the only chromatic hue that carries brand meaning; red / orange / blue
+speak status only. On the achromatic near-black field the accent and status hues are the sole color, so
+scarcity is doubly load-bearing.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `primary` | Spotify Green #1ed760 | the one primary action, active nav, play/CTA — never decorative, never on a background |
+| `primary-foreground` | black #000000 | icon/text on the green fill — the signature; never white on green |
+| `background` / `sidebar` | near-black #121212 | page and nav canvas — the deepest layer, the dark cocoon |
+| `card` | dark surface #181818 | cards, containers — one lightness step off the canvas |
+| `secondary` / `muted` | mid-dark #1f1f1f | interactive/secondary surfaces, subtle fills, hover rows |
+| `foreground` | white #ffffff | primary text (max-emphasis #fdfdfd, bright secondary #cbcbcb available) |
+| `muted-foreground` | silver #b3b3b3 | secondary text, inactive nav, captions, dividers |
+| `border` / `input` | subtle #2a2a2a | grid lines and field edges (control borders take the heavier #4d4d4d) |
+| `accent` | lift #282828 | selected/hovered rows and nav — a neutral surface-lift, never a green wash |
+| `ring` | green #1ed760 | the focus outline — unmistakable, because keyboard-first |
+| `destructive` | negative red #f3727f | destructive actions and error state |
+| `success` | deep green #1db954 | up/success status — the deeper green variant, distinct from the bright accent |
+| `warning` | orange #ffa42b | caution and warning status only |
+
+Announcement blue #539df5 is an info/status hue and a chart color, never a second brand accent.
+
+## 3 Typography
+
+One family, split by cut. `font-sans` is SpotifyMixUI (Circular by Lineto; Inter is the corpus-adjacent
+substitute) — the Title cut serves headings, the UI cut serves body, tables, and labels, same family.
+The voice is a **bold/regular binary**: most text is 700 (`font-weight-strong`) or 400
+(`font-weight-normal`), 600 used sparingly — hierarchy comes from weight contrast, not size. Type is
+compact (10–24px), tuned for scanning, not reading. `font-mono` is derived — the corpus names none (a
+music player has no IDs or logs), but operator tables need a numeric voice; numeric columns render
+`tabular-nums`.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page / section title | 24px / 1.25 | `font-weight-strong` · 0 |
+| h2 | feature heading | 18px / 1.3 | `font-weight-strong` · 0 |
+| h3 | card / group head | 16px / 1.4 | `font-weight-strong` · 0 |
+| body | UI + prose | 14px / 1.45 | `font-weight-normal` |
+| small | labels, dense table | 12px / 1.5 | `font-weight-normal` |
+| caption | uppercase eyebrow | 12px / 1.33 | `font-weight-strong`, +0.1em, uppercase |
+| code | IDs, timestamps, amounts | 13px / 1.5 | `font-mono` |
+
+The uppercase + wide-tracking (1.4–2px) systematic label voice survives on eyebrows and section labels;
+it does not ride every button — operator buttons stay sentence-case for scannability.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled green on black `primary-foreground`, `radius` (8px), no pill. The full
+  500px pill is a hero flourish left behind; the rounded-tactile character carries at 8px. Secondary:
+  `secondary` #1f1f1f fill, `foreground`. Ghost: transparent, `accent` lift on hover. Icon-only
+  controls stay **circular** — the one piece of pill-and-circle geometry that carries.
+- **Input** — `secondary` fill, `radius`; focus draws the green `ring` at 2px. On dark, the edge reads
+  as an inset/surface step, not an exposed gray line.
+- **Card** — `card` #181818 surface, `radius`; hover lightens the surface a step rather than drawing a
+  border; shadow (`shadow-intensity`) only when it must lift off the canvas.
+- **Table row** — `table-row-height`; row separation by surface-lightening or a subtle `border`;
+  `accent` on selection; `muted` on hover; `tabular-nums` + `font-mono` on numeric columns.
+- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`),
+  beside the work, not over it.
+- **Badge** — pill radius (9999), `muted` / status fill, uppercase caption; status badges take
+  `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base unit 8px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48` (Spotify's fine dense low
+end 2–20 carries; 24–48 are operator section spacing). Shell dimensions map one-to-one to the layout
+primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height` (the
+generous search-pill chrome), side panel `side-panel-width` / `side-panel-width-rich`, modal
+`modal-width-max`, forms `form-max-width`, tables full-width. Spotify's full-width now-playing bottom
+bar carries as an optional persistent transport/status bar in a media tool, not as literal music
+chrome. Density is governed globally by `density-tier` (dark compression) and stepped per archetype —
+never by absolute overrides.
+
+## 6 Depth
+
+Shadow-carried, inverting the flat default — on near-black a hairline vanishes, so elevation is heavy
+shadow plus surface-lightening (the corpus: never expose raw gray borders):
+
+- **0 — canvas** `background` #121212, no border.
+- **1 — surface** `card` #181818 / `secondary` #1f1f1f — one lightness step; hover lightens further.
+- **2 — elevated** dropdowns and hover cards ride a `md` shadow (`rgba(0,0,0,0.3) 0 8px 8px`).
+- **3 — dialog** modals, menus, side panels ride an `lg` shadow (`rgba(0,0,0,0.5) 0 8px 24px`) — the
+  dramatic "floating in darkness" lift.
+- **inset — inputs** the recessed inset-border combo (`rgb(124,124,124) 0 0 0 1px inset`) reads as a
+  tactile field edge, not an exposed line.
+
+Focus is a green `ring` outline (never a glow), visible on every interactive element. Three z-levels:
+content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** anchor on near-black `#121212`–`#1f1f1f`; carry depth through shade variation and heavy shadow,
+  because on dark a subtle shadow is invisible.
+- **Do** reserve green `primary` for the single most important action, active state, and play/CTA —
+  never decoratively, never on a background. On green, keep black `primary-foreground`.
+- **Do** let the achromatic gray field rest the eye; supply color only through the one accent and the
+  status hues (there is no album art here to do it for you).
+- **Do** carry the bold/regular (700/400) weight binary and keep type compact; apply `tabular-nums` and
+  `font-mono` to every numeric column.
+- **Don't** add a second brand color — announcement blue, orange, and red are status/chart roles, and
+  the deep green `success` is status, not a second accent.
+- **Don't** use light backgrounds for primary surfaces — the dark immersion is the identity.
+- **Don't** full-pill operator buttons or drop uppercase wide-tracking onto every label — those are
+  hero-scale flourishes; the rounded character lives at 8px and circular icon buttons.
+- **Don't** expose raw gray borders where a surface-lift or inset edge will do; don't relax the compact
+  line-heights.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440:
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | sidebar → off-canvas drawer (Spotify's nav → bottom bar echoes here); two-pane list+detail stacks; side panel → full sheet; density holds |
+| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); card grid re-flows 3→2; tables scroll their overflow |
+| 1024 | sidebar expands; two-pane queue+detail holds side by side; grid 5→3 |
+| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width; grid opens up |
+
+## 9 Agent Prompt Guide
+
+- Start in near-black darkness — everything lives on `#121212`; surfaces step by lightness (#181818,
+  #1f1f1f), never by exposed borders. This is the one theme; do not offer a light mockup of it.
+- One accent, always: green `primary` marks THE action and active nav, black on green. On the
+  achromatic field the green and the status hues are the only color — keep them scarce and functional.
+- Carry depth with heavy shadow (`md`/`lg`) and surface-lightening, not flat hairlines — the operator's
+  usual flat default is inverted here because shadow is what reads on dark.
+- Bold/regular weight binary (700/400); compact type; `tabular-nums` + `font-mono` on every numeric
+  column; the uppercase wide-tracked label voice on eyebrows only.
+- Keep the rounded-tactile character at 8px `radius`, pill for badges/chips, circular for icon-only
+  controls.
+- Leave behind: album-art-as-color-source (there is none — the UI supplies its own restrained color),
+  the 500px hero pills, uppercase wide-tracking on every button, the light-mode marketing pills, and the
+  literal music transport bar. What carries: the near-black palette, the one functional green, the
+  achromatic discipline, the compact dense type, the rounded/circular geometry, and shadow-carried depth.
+
+```yaml design-primitives
+radius: 8px                                        # corpus: Spotify's comfortable/dialog radius; controls read rounded-tactile without the 500px hero pill (left behind)
+shadow-intensity: 0.8                              # corpus: depth is heavy shadow (0.3-0.5 alpha at 8-24px) — on near-black a hairline vanishes, so shadow lifts; the flat default is inverted here
+border-weight: 1px
+density-gap: 0.85                                  # derived: dark-compression — Spotify packs content densely, gaps and rows tighten
+density-inset: 0.85                                # derived: matches the dense tier's tighter component insets
+font-sans: SpotifyMixUI, Inter, system-ui, sans-serif            # SpotifyMixUI (Circular family); Inter is the corpus-adjacent substitute; the Title cut serves headings, same family
+font-mono: JetBrains Mono, ui-monospace, monospace               # derived: corpus names no mono (a player has no IDs/logs); operator tables need a numeric voice
+font-weight-normal: 400                            # corpus: regular is 400
+font-weight-strong: 700                            # corpus: the bold/regular binary — most text is 700 or 400, 600 sparingly
+heading-tracking: 0                                # corpus: Spotify titles track normal; the wide 1.4-2px tracking rides the uppercase label voice, not headings
+duration-unit: 50ms                                # derived: corpus silent on motion; functional operator base
+duration-fast: 100ms                               # derived: corpus silent on motion
+duration-normal: 150ms                             # derived: corpus silent on motion
+duration-slow: 250ms                               # derived: corpus silent on motion
+ease-default: cubic-bezier(0.4,0,0.2,1)            # derived: corpus silent; standard functional ease
+contrast-boost: 1                                  # derived: the grid reads via surface-lightening and shadow, not boosted hairlines
+icon-stroke: 2                                     # derived: Spotify's filled, bold glyph character → the full lucide stroke, not the refined 1.75
+icon-size-base: 16px                               # derived: corpus silent; operator base control-icon size
+sidebar-width-expanded: 256px                      # derived: a media-library rail wants room for playlist/entity names; a touch wider than the dense 248 default
+sidebar-width-collapsed: 56px                      # derived: corpus silent; operator icon rail
+topbar-height: 64px                                # derived: Spotify's top chrome is generous for the search pill and account
+side-panel-width: 420px                            # derived: corpus's now-playing/queue panel; operator standard
+side-panel-width-rich: 640px                       # derived: content-heavy detail width
+modal-width-max: 560px                             # derived: corpus silent; confirmations only
+form-max-width: 640px                              # derived: corpus silent; operator standard
+table-row-height: 40px                             # derived: Spotify's album-thumbnail track rows run taller (~56px); a bare operator data row lands at 40px, dense archetypes step down
+verbosity: compact                                 # derived: content-first, scannable — Spotify trusts dense content over explanatory chrome
+feedback: subtle
+density-tier: dense                                # corpus: content density over breathing room, dark compression
+product-traits: [media-library, catalog, dashboard, content-ops, admin]
+```
+
+```yaml lever-manifest
+version: 1
+fonts: { sans: "SpotifyMixUI, Inter, system-ui, sans-serif", mono: "JetBrains Mono, ui-monospace, monospace" }
+color-tokens:
+  light:                            # categorically-dark brand — the default slot carries Spotify's near-black surface set; the corpus forbids light primary surfaces
+    background: "#121212"
+    foreground: "#ffffff"
+    card: "#181818"
+    card-foreground: "#ffffff"
+    muted: "#1f1f1f"
+    muted-foreground: "#b3b3b3"
+    border: "#2a2a2a"               # derived: subtle grid/field hairline on near-black; corpus reserves #4d4d4d for control borders and prefers inset/surface-lightening over exposed lines
+    input: "#2a2a2a"                # derived: field edge; input focus draws the ring
+    ring: "#1ed760"                 # derived: keyboard-first needs a visible ring; the accent green is the natural choice (corpus's #000000 focus edge fails the ring-visible floor)
+    primary: "#1ed760"             # corpus: Spotify Green — the one accent
+    primary-foreground: "#000000"  # corpus: black icon/text on green — the signature, never white on green
+    accent: "#282828"               # derived: selection/hover lightens the surface a step (corpus hover = background lightening), a neutral lift, never a green wash
+    accent-foreground: "#ffffff"
+    destructive: "#f3727f"          # corpus: negative red (--text-negative)
+    destructive-foreground: "#000000"   # derived: black reads on the light coral-red; white on #f3727f fails contrast
+    success: "#1db954"              # corpus: the deeper green-border variant, distinct from the bright #1ed760 accent so status green does not read as the primary CTA
+    warning: "#ffa42b"              # corpus: warning orange (--text-warning)
+    popover: "#282828"              # derived: elevated overlay/menu surface, a step above card, lifted by heavy shadow
+    popover-foreground: "#ffffff"
+    secondary: "#1f1f1f"            # corpus: interactive/button surface (#1f1f1f)
+    secondary-foreground: "#ffffff"
+    chart-1: "#1ed760"             # green
+    chart-2: "#539df5"             # corpus: announcement blue
+    chart-3: "#ffa42b"             # corpus: warning orange
+    chart-4: "#f3727f"             # corpus: negative red
+    chart-5: "#b3b3b3"             # derived: silver neutral for the fifth series (green + achromatic palette — no purple)
+    sidebar: "#121212"             # corpus: navigation sidebar #121212
+    sidebar-foreground: "#ffffff"
+    sidebar-primary: "#1ed760"
+    sidebar-primary-foreground: "#000000"
+    sidebar-accent: "#282828"
+    sidebar-accent-foreground: "#ffffff"
+    sidebar-border: "#2a2a2a"
+    sidebar-ring: "#1ed760"
+spacing-scale: [2, 4, 8, 12, 16, 20, 24, 32, 48]
+radius-scale: [4, 6, 8, 12, 9999]
+shadow-levels: [none, sm, md, lg]
+motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
+icons: { family: lucide, stroke: 2 }
+accent-count: 1
+```

package/data/harnesses/code/skills/design/data/design-md/library/stripe.md

@@ -0,0 +1,241 @@
+---
+schema: design-md/v1
+product: Stripe
+provenance: library
+sourced: 2026-07-04
+---
+
+# Stripe — operator reading
+
+The operator translation of Stripe's financial-infrastructure brand — a marketing system built on a
+gradient-mesh hero, thin Sohne display type at negative tracking, single-indigo pill CTAs, and tabular
+money figures. This entry keeps the operator-durable core — the indigo accent, the deep-navy ink, the
+cool temperature, the soft blue-tinted lift, the thin editorial type voice, the tabular-figure money
+signal — and leaves the marketing scaffolding behind; §9 lists exactly what carries and what stays.
+Both machine blocks are fully valued; judgments away from the marketing brand are annotated `# derived:`.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. The working canvas is white `background`, banded with a cool-tinted
+off-white `canvas-soft` for grouped panels. Stripe's one departure from pure-flat carries: cards lift on
+a **soft blue-tinted shadow** (`shadow-blue`, `rgba(0,55,112,0.08)`), not gray — depth reads cool and
+engineered, never heavy. A single accent, indigo `primary` (`#533afd`), is reserved for the one action
+that matters; ink is deep navy `foreground` (`#0d253d`), never pure black. The temperature runs cool
+throughout — hairlines lean blue, inputs cooler still. The type voice is thin and editorial (Sohne, Inter
+substitute) with negative heading tracking and the `ss01` stylistic set. Density is `standard` — the
+dashboard reads clean and moderate, neither terminal-dense nor consumer-spacious.
+
+## 2 Color Roles
+
+Light values (the manifest carries hex — the corpus's native format). One chromatic accent — indigo is
+the only brand hue that carries meaning; status hues speak only status; the gradient palette lives in
+charts, never chrome.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | white `#ffffff` (canvas) | page, cards, and overlays — the dominant surface |
+| `foreground` | deep navy `#0d253d` (ink) | all primary ink; never pure black |
+| `muted` / `secondary` | cool off-white `#f6f9fc` (canvas-soft) | hover rows, subtle fills, grouped panel bands |
+| `muted-foreground` | mid slate `#64748d` (ink-mute) | labels, captions, table meta |
+| `border` | hairline `#e3e8ee` | every separator, grid line, and card edge |
+| `input` | cooler hairline `#a8c3de` (hairline-input) | form-field edges only — the brand's cool input border |
+| `primary` | indigo `#533afd` | the one primary action; active nav; inline link emphasis |
+| `accent` | pale indigo `#edecfe` | selected/hovered rows and nav on the light canvas |
+| `accent-foreground` | indigo deep `#4434d4` (primary-deep) | ink on the accent tint |
+| `ring` | `primary` `#533afd` | the focus outline — always visible, keyboard-first |
+| `destructive` | ruby `#ea2261` | destructive actions and error state only |
+| `success` / `warning` | green `#1a8754` / amber `#bb5504` | status signalling only, never chrome |
+
+The gradient stops (cream, sherbet, lavender, magenta, ruby) carry no UI role — they appear only as
+chart series (see §7). Deep-navy `brand-dark-900` (`#1c1e54`) is not a page surface here.
+
+## 3 Typography
+
+One voice, thin and precise. `font-sans` is **Inter** — the documented open substitute for Stripe's
+proprietary Sohne — carrying the brand rhythm with `ss01` enabled and negative tracking on headings;
+it serves body, UI, table, and label. The 56px display tier and its weight-300 air stay behind, but the
+thin editorial voice and tight tracking carry at operator heading scale. `font-mono` renders IDs, codes,
+timestamps, and log lines; numeric columns and every money cell render `tabular-nums` — the brand's quiet
+financial-data signal, which carries strongly.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 18px / 1.3 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 15px / 1.4 | `font-weight-strong` · -0.01em |
+| body | UI + prose | 14px / 1.45 | `font-weight-normal` |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow | 12px / 1.4 | `font-weight-strong`, +0.02em, uppercase |
+| tabular | money / counts | 14px / 1.4 | `font-weight-normal`, `tabular-nums` |
+
+Bump weight one step for emphasis — a thin brand, so emphasis lifts to medium 500, never a heavy 600.
+Apply `ss01` on the body element so the stylistic-set substitution rides every text role.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled indigo `primary` on `primary-foreground`, `radius` (rounded, not pilled
+  — the marketing pill stays behind). Secondary: `secondary` fill, 1px `border`, `primary` text. Ghost:
+  transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `input` border (`border-weight`) — the cool input hairline; `radius`;
+  focus swaps the border to the `ring` at full 2px, no glow.
+- **Card** — `card` surface, 1px `border`, `radius`; lifts on the soft blue-tinted `md` shadow
+  (`shadow-intensity`) — the brand's one elevation cue; inset by `density-inset`.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
+  numeric columns; row selection tints `accent`.
+- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`
+  for content-heavy), beside the work, not over it.
+- **Badge** — status pill (`radius-scale` max, the one controlled brand pill nod), hairline `border` or
+  status fill, uppercase caption; status badges take `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing rhythm 8px on a 4px grid; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64`
+(48 added on the 8px grid; the corpus jumps 32→64 for marketing bands, which stay behind). Shell
+dimensions map one-to-one to the layout primitives: sidebar `sidebar-width-expanded` /
+`sidebar-width-collapsed`, topbar `topbar-height`, side panel `side-panel-width` / `side-panel-width-rich`,
+modal `modal-width-max`, forms `form-max-width`, tables full-width. The marketing section padding
+(64–96px) and the 1200px centered container stay behind. Density is governed globally by `density-tier`
+and stepped per archetype by the surface catalog — never by absolute overrides.
+
+## 6 Depth
+
+Subtly lifted, cool. Unlike a pure-flat operator brand, Stripe carries one soft elevation cue — a
+blue-tinted shadow — and otherwise leans on hairlines and the surface ladder:
+
+- **0 — canvas** `background` white, no border.
+- **1 — panel / card** `card` on a 1px `border`; lifts on a soft blue-tinted shadow
+  (`rgba(0,55,112,0.08) 0 1px 3px`) — the brand's signature cool lift, kept restrained.
+- **2 — overlay** `popover` / side panel / modal — a deeper blue-tinted `md`
+  (`rgba(0,55,112,0.08) 0 8px 24px`) for floating chrome. No level stacks a heavier shadow to signal
+  rank; rank is border, position, and the one soft lift.
+
+The gradient-mesh backdrop — the corpus's primary marketing depth medium — stays behind entirely. Focus
+is a 2px indigo `ring` outline (never a glow), visible on every interactive element. Three z-levels:
+content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve indigo `primary` for the single most important action and inline link emphasis — one
+  filled control per view. If two things want it, one is not primary.
+- **Do** keep ink deep navy `#0d253d`, never pure black; keep the temperature cool, hairlines blue-leaning.
+- **Do** lift cards on the soft blue-tinted shadow (`shadow-blue`), never a neutral gray drop shadow.
+- **Do** apply `tabular-nums` to every money and numeric column and `font-mono` to IDs, codes, timestamps;
+  keep `ss01` on the body.
+- **Don't** promote a second chromatic accent — the gradient stops (cream, sherbet, lavender, magenta,
+  ruby) are chart series only, never chrome, and indigo is never a body-text color.
+- **Don't** pill the primary CTA — the marketing pill stays behind; buttons take `radius`, only status
+  badges pill.
+- **Don't** carry the gradient mesh, the cream feature band, or the dark-navy featured-tier inversion into
+  an operator surface.
+- **Don't** open detail or edit in a modal when the side panel fits — modals are confirmations only.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440.
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
+| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
+| 1024 | sidebar expands; two-pane queue+detail holds side by side |
+| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
+
+## 9 Agent Prompt Guide
+
+**Carries over:** indigo `primary` (`#533afd`) as the single reserved accent · deep-navy ink `#0d253d`
+(never pure black) · the cool temperature with a cooler input hairline · the soft blue-tinted card
+shadow (`rgba(0,55,112,0.08)`) · the thin Sohne/Inter type voice with negative heading tracking and
+`ss01` · `tabular-nums` money as the financial-data signal.
+
+**Stays behind:** the gradient-mesh backdrop · hero-scale display (56px, weight 300) · the pill CTA
+(`8px 16px` pill) · the cream feature band · the dark-navy featured-tier inversion · the composited
+product-UI mockups · the dark-app dashboard shell as the working surface.
+
+- Lead every list surface with its table; accent only the primary action in indigo.
+- Detail and edit go in the side panel; a modal is a confirmation, not a workspace.
+- Every money and numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`, and every
+  workflow completes from the keyboard with the indigo `ring` outline always visible.
+- Lift a card on the soft blue-tinted shadow, not a gray one; reach past a hairline only for a real
+  overlay. Leave the gradient mesh, the hero display, and the cream bands behind.
+
+```yaml design-primitives
+radius: 6px                                        # derived: the input/sm corner is the operator-appropriate step; the pill CTA and 16px mockup chrome stay marketing-only
+shadow-intensity: 0.5                              # derived: brand lifts cards on a soft blue-tinted shadow (corpus ~0.08 alpha) — present but restrained
+border-weight: 1px
+density-gap: 1
+density-inset: 1
+font-sans: Inter, 'SF Pro Display', system-ui, -apple-system, sans-serif   # derived: Sohne is proprietary; Inter with ss01 is the documented open substitute carrying the brand rhythm
+font-mono: ui-monospace, SFMono-Regular, Menlo, monospace   # derived: corpus ships no mono; a system mono keeps IDs/codes refined without a techy display face
+font-weight-normal: 400                            # derived: brand body is display-thin 300; dense operator body needs 400 to stay legible
+font-weight-strong: 500                            # derived: a thin brand — emphasis lifts to medium 500, never a heavy 600
+heading-tracking: -0.02em                          # derived: the brand's negative-tracking display signature (-0.64px/32px), carried to operator heading sizes
+duration-unit: 60ms                                # derived: corpus silent on motion; a slightly softer base suits the refined brand
+duration-fast: 120ms                               # derived: corpus silent on motion; refined-airy operator timing
+duration-normal: 180ms                             # derived: corpus silent on motion
+duration-slow: 240ms                               # derived: corpus silent on motion
+ease-default: cubic-bezier(0.4,0,0.2,1)            # derived: corpus silent on motion; standard operator ease
+contrast-boost: 1
+icon-stroke: 1.5                                   # derived: the thin type voice calls for a lighter icon stroke than lucide's 2
+icon-size-base: 16px                               # derived: corpus has no icon spec; operator standard
+sidebar-width-expanded: 240px                      # derived: corpus is marketing-only; Stripe-dashboard nav width
+sidebar-width-collapsed: 56px                      # derived: standard operator icon rail
+topbar-height: 56px                                # derived: a touch airier than a dense console, matching the brand posture
+side-panel-width: 440px                            # derived: refined detail panels breathe a touch wider than the 420px norm
+side-panel-width-rich: 640px                       # derived: content-heavy detail width
+modal-width-max: 560px                             # derived: confirmation dialog cap
+form-max-width: 640px                              # derived: single-column form cap
+table-row-height: 44px                             # derived: dashboard rows breathe more than a terminal at standard density
+verbosity: default
+feedback: subtle                                   # derived: Stripe's micro-feedback is polished and present, not austere silence
+density-tier: standard                             # derived: the dashboard reads clean and moderate, neither terminal-dense nor consumer-spacious
+product-traits: [payments, fintech, dashboard, b2b]
+```
+
+```yaml lever-manifest
+version: 1
+fonts: { sans: "Inter, 'SF Pro Display', system-ui, -apple-system, sans-serif", mono: "ui-monospace, SFMono-Regular, Menlo, monospace" }
+color-tokens:
+  light:
+    background: "#ffffff"
+    foreground: "#0d253d"
+    card: "#ffffff"
+    card-foreground: "#0d253d"
+    muted: "#f6f9fc"
+    muted-foreground: "#64748d"
+    border: "#e3e8ee"
+    input: "#a8c3de"                              # brand's cooler input hairline (hairline-input)
+    ring: "#533afd"
+    primary: "#533afd"
+    primary-foreground: "#ffffff"
+    accent: "#edecfe"                             # derived: pale indigo wash for row/nav selection, lighter than the tag fill #b9b9f9
+    accent-foreground: "#4434d4"
+    destructive: "#ea2261"                        # derived: brand ships no semantic red; ruby is the nearest hue, reads as a raspberry error
+    destructive-foreground: "#ffffff"
+    success: "#1a8754"                            # derived: brand ships no green; a teal-leaning success green
+    warning: "#bb5504"                            # derived: brand ships no amber; a burnt-amber warning, warmer cousin of lemon
+    popover: "#ffffff"
+    popover-foreground: "#0d253d"
+    secondary: "#f6f9fc"
+    secondary-foreground: "#0d253d"
+    chart-1: "#533afd"                            # indigo primary
+    chart-2: "#003770"                            # derived: shadow-blue deep ocean, second categorical series
+    chart-3: "#1a8754"                            # derived: success green as third series
+    chart-4: "#bb5504"                            # derived: amber as fourth series
+    chart-5: "#ea2261"                            # ruby as fifth series
+    sidebar: "#f6f9fc"                            # derived: faint cool sidebar tint against the white canvas
+    sidebar-foreground: "#0d253d"
+    sidebar-primary: "#533afd"
+    sidebar-primary-foreground: "#ffffff"
+    sidebar-accent: "#edecfe"                     # derived: matches accent — pale indigo nav selection
+    sidebar-accent-foreground: "#4434d4"
+    sidebar-border: "#e3e8ee"
+    sidebar-ring: "#533afd"
+spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 64]
+radius-scale: [0, 4, 6, 8, 12, 9999]
+shadow-levels: [none, sm, md]
+motion: { durations: [120, 180, 240], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
+icons: { family: lucide, stroke: 1.5 }
+accent-count: 1
+```