@nurix/etna 0.18.19 → 0.18.21

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

@@ -0,0 +1,166 @@
+---
+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.
+
+## 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.

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

@@ -0,0 +1,160 @@
+---
+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.
+
+## 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. 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.

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

@@ -0,0 +1,173 @@
+---
+schema: design-md/v1
+product: Supabase
+provenance: library
+sourced: 2026-07-04
+---
+
+# Supabase — an operator reading of the white-canvas, emerald-green system
+
+Supabase's web system is the quietly-technical brand in the database category: a committed white
+canvas, near-black ink that is never pure black, one emerald-green voltage held for the CTA, and real
+product UI (dashboard tables, SQL editors, log streams) doing the decorative work. This entry is the
+*operator* reading — an internal tool (query console, project dashboard, job queue, log stream) in
+Supabase's language. What carries: the white canvas, the single emerald accent held scarce, the
+near-black ink, the idiosyncratic near-black-on-green button, flat hairline-first depth, the 6px
+not-pill radius, the near-black `#1c1c1c` inlay for code and logs (the developer DNA), and Circular's
+mid-weight-500 humanist voice with tight negative tracking. What stays behind: the 64/48px hero
+display, the composited product-mockup float shadows, the dark inverted featured pricing tier, and the
+64–96px marketing section rhythm.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in — the white `background` (`#ffffff`) is the committed floor, and the
+white-canvas commitment is the brand (no atmospheric gradient, no dark marketing track). Flat:
+hierarchy comes from a fine greyscale hairline ladder, type weight, and near-black-on-white contrast —
+never heavy shadow. A single accent, emerald `primary` (`#3ecf8e`), is the only chromatic event on a
+surface: it wears the one primary action, the focus `ring`, and the active-nav indicator, nothing else.
+Ink is near-black `foreground` (`#171717`) — never pure `#000000`. The neutral ramp is a calibrated
+achromatic grey (white through `#fafafa`, `#ededed`, `#dfdfdf` down to `#171717`). Density is
+`standard` and steps denser per archetype — the product's tables and log streams read technical.
+
+## 2 Color Roles
+
+Light values first. One accent — emerald `primary` is the only chromatic hue that carries meaning;
+status hues speak only status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | white `#ffffff` (canvas) | page, cards, and overlays — the dominant surface, differentiated by hairline not brightness |
+| `foreground` | near-black `#171717` (ink) | all primary ink and headlines — never pure black |
+| `muted` | barely-tinted `#fafafa` (canvas-soft) | hover rows, subtle fills, quiet band tints |
+| `secondary` | light grey `#f2f2f2` | secondary-button and segmented fills, one step below canvas |
+| `muted-foreground` | mid grey `#707070` (ink-mute) | labels, captions, secondary text |
+| `border` / `input` | hairline `#dfdfdf` | every separator, grid line, and field edge |
+| `primary` | emerald `#3ecf8e` | the one primary action; active-nav indicator; the signature CTA and dot |
+| `primary-foreground` | near-black `#171717` (on-primary) | text on the green action — the button reads "lit" with dark type, not a colored chip |
+| `accent` | grey lift `#ededed` (hairline-cool) | selected/hovered rows and nav — a neutral lift, never coloured green |
+| `ring` | emerald `#3ecf8e` | the focus outline — unmistakable, because keyboard-first |
+| `destructive` | clean red `#dc2626` | destructive actions and error state only |
+| `success` / `warning` | deep-emerald `#24b47e` / status-yellow `#ffdb13` | status signalling only, never chrome |
+
+The emerald's power is its scarcity at element level; the rich accent set (purple, violet, pink,
+indigo, tomato, crimson) is chart-and-logo voltage and carries no operator role beyond charts (see §7).
+
+## 3 Typography
+
+One sans, one mono. `font-mono` is the brand's **system mono** stack (`ui-monospace`, Menlo / Monaco
+/ Consolas — the corpus ships no proprietary mono webfont) for IDs, codes, timestamps, log lines,
+and SQL; numeric columns render `tabular-nums`. The marketing display scale (64/48px) stays behind —
+an operator surface tops out at a 28px page title.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 28px / 1.2 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 22px / 1.2 | `font-weight-strong` · -0.01em |
+| h3 | card / group head | 18px / 1.4 | `font-weight-strong` |
+| body | UI + prose | 16px / 1.5 | `font-weight-normal` |
+| small | labels, meta, dense table | 13px / 1.45 | `font-weight-normal` |
+| caption | uppercase eyebrow | 12px / 1.45 | `font-weight-strong`, +0.02em, uppercase |
+| code | IDs, logs, SQL | 14px / 1.5 | `font-weight-normal` |
+
+Display weight caps at 500 — the brand's calibrated mid-weight reads engineered, and breaks at 600+.
+Negative tracking on headings is the signature; build hierarchy on size and tight tracking, never a
+second family or a heavier-than-500 weight.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — primary: filled emerald `primary` with near-black `primary-foreground`, `radius` (6px),
+  never a pill; pressed lifts to deep-emerald. Secondary: `secondary` fill, 1px `border`, `foreground`.
+  Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the emerald
+  `ring` at full 2px, no glow.
+- **Card** — `card` surface on a 1px `border`, `radius`; depth is the hairline, not shadow — shadow
+  only when it must lift off the canvas; inset by `density-inset`.
+- **Table row** — height `table-row-height`; `border` grid lines carry the grid; `muted` on hover;
+  `tabular-nums` on numeric columns; selection tints `accent` (neutral, never green).
+- **Side panel** — detail and edit open in the panel (`side-panel-width`, `side-panel-width-rich` for
+  content-heavy), beside the work, not over it.
+- **Badge** — pill radius, `muted`/status fill, uppercase caption; status badges take `success` /
+  `warning` / `destructive`, never `primary`. Pill radius is badges-only.
+
+## 5 Layout
+
+Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` — the marketing
+64–96px section rhythm stays 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 cap `modal-width-max`, forms `form-max-width`,
+tables full-width. Density is governed globally by `density-tier` (standard, rewriting the spacing scale
+through `density-gap`) and stepped per archetype by the surface catalog — the data-heavy console and
+log stream step denser, never the whole app.
+
+## 6 Depth
+
+Flat, hairline-first. Hierarchy comes from the greyscale ladder and 1px hairlines, not drop shadows:
+
+- **0 — canvas** `background` (`#ffffff`), no border.
+- **1 — panel / card** `card` on a 1px `border`; the hairline carries rank — shadow only when a card
+  must genuinely lift off the canvas (the faintest `sm`).
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
+  shadow, enough to separate an overlay from the canvas above a scrim. Rank is border and position,
+  never a heavier shadow.
+- **inlay — code / log / SQL** near-black `#1c1c1c` (canvas-night, `#202020` for nested chrome) with
+  white text and `font-mono` — the developer DNA carried even in a light UI (the SQL editor and log
+  stream wear it).
+
+Focus is a 2px emerald `ring` outline (never a glow), visible on every interactive element. Three
+z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** anchor every surface on the white canvas; the white-canvas commitment is the brand — no
+  atmospheric gradient, no dark marketing track.
+- **Do** reserve emerald `primary` for the primary action, the focus `ring`, and the active-nav
+  indicator — nothing else. Its scarcity is what reads as the one chromatic event.
+- **Do** set near-black `primary-foreground` on the green button — the brand's idiosyncratic "lit"
+  read, dark type on green, never white.
+- **Do** carry hierarchy with the greyscale ladder, hairlines, weight, and tight tracking — the brand
+  is flat.
+- **Do** dress code, log, and SQL panels in the near-black inlay (`#1c1c1c`, `font-mono`) — show the
+  real query, not an illustration of one.
+- **Do** apply `tabular-nums` to numeric columns and `font-mono` to IDs, codes, timestamps, and SQL.
+- **Don't** promote a second chromatic accent — purple, yellow, pink, and indigo belong in charts and
+  logos only, never as system or UI colours.
+- **Don't** bump display weight above 500, or set white text on the green button — both break the brand.
+- **Don't** pill controls or reach for a radius outside `radius-scale` — the button/input radius is 6px.
+- **Don't** signal elevation with heavy drop shadows, or open detail in a modal when the panel fits.
+
+## 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 | content caps at `form-max-width` for forms; tables and dashboards use the full width |
+
+Code, log, and SQL inlays keep mono legibility at every breakpoint by scrolling horizontally, not
+wrapping.
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Wear the white canvas by default; the white-canvas commitment is Supabase — no gradient, no dark
+  marketing band. Panels read by their hairline, not by brightness.
+- Spend emerald once per surface: the primary action, the focus ring, the active-nav indicator. If two
+  things want the green, one is not primary. Colour otherwise belongs to charts and status.
+- Set near-black type on the green button (`primary-foreground` `#171717`), never white — the "lit"
+  green with dark type is the brand's signature.
+- Headings ride Inter at weight 500 with tight negative tracking; the display scale (64/48px) stays
+  behind — operator headings top out at 28px, hierarchy is size and tracking. Never exceed weight 500.
+- Dress code, log, and SQL panels in the near-black `#1c1c1c` inlay with `font-mono`; show the real
+  query, not a mockup of one.
+- Every numeric column is `tabular-nums`; every ID / code / timestamp / log line and SQL block is
+  `font-mono` (system mono, no webfont).
+- Detail and edit go in the side panel beside the work; a modal is a confirmation, not a workspace.
+- Keyboard-first: the emerald `ring` focus outline is always visible.
+- Leave behind: the 64/48px hero display, the composited product-mockup float shadows, the dark
+  featured pricing tier, and the 64–96px section rhythm — marketing chrome, not operator chrome.

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

@@ -0,0 +1,145 @@
+---
+schema: design-md/v1
+product: Superhuman
+provenance: library
+sourced: 2026-07-04
+---
+
+# Superhuman — the warm-editorial operator reading
+
+An operator translation of Superhuman's fast-productivity brand: a warm, quiet, editorial system
+whose content body is white with off-black warm-grey ink, anchored by a single deep indigo-navy
+accent. The marketing surfaces are theatrical — a violet-sky atmospheric hero, hero-scale display
+type, a deep-teal closing band that resolves every page. None of that theatre belongs on a queue or
+a case detail; what carries is the warmth (warm neutrals, sub-default type weights, off-black ink),
+the 8px rounded-rectangle radius character, and the one-accent indigo discipline.
+
+## 1 Visual Theme
+
+Light by default — the brand's content body *is* white; dark is opt-in. Warm and quiet: the neutral
+ramp leans warm-grey, ink is `foreground` warm off-black `#292827` (never pure black), the canvas is
+white, and hairlines are a warm grey `#e8e4dd`. Flat — hierarchy comes from hairline, type weight, and
+whitespace, not shadow. A single accent, `primary` deep indigo-navy `#1b1938` (near-black), is reserved
+for the one action that matters and for active nav; it is the brand's own CTA color. The radius
+character is the signature: 8px rounded rectangles, never a pill on a working surface. Density is
+`standard` and editorial-roomy — it steps denser per archetype, never cramped. The violet-sky hero
+gradient, hero-scale display type, and the teal closing band stay behind as marketing (see §7).
+
+## 2 Color Roles
+
+Light values first. One accent — `primary` is the only chromatic hue that carries meaning; status hues
+speak only status. Violet-soft and teal are marketing surfaces and carry no operator role.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | white `#ffffff` | page, cards, and overlays — the dominant surface |
+| `foreground` | warm off-black `#292827` | all primary ink — never pure black |
+| `muted` / `secondary` | warm off-white `#f4f2ed` | hover rows, subtle fills, secondary buttons |
+| `muted-foreground` | warm grey `#73706d` | labels, captions, secondary text |
+| `border` / `input` | warm hairline `#e8e4dd` | every separator, grid line, and field edge |
+| `primary` | indigo-navy `#1b1938` | the one primary action; active nav; key interactive detail |
+| `accent` | pale indigo tint `#edecf2` | selected / hovered rows and nav, on-accent surfaces only |
+| `ring` | `primary` indigo | the focus outline — unmistakable, because keyboard-first |
+| `destructive` | warm red `#c0362b` | destructive actions and error state only |
+| `success` / `warning` | green `#157a52` / amber `#b5791f` | status signalling only, never chrome |
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is Super Sans VF — the proprietary variable display sans; Inter
+Variable is the documented open substitute, run at the same sub-default weights. The brand's warmth
+signature is the *in-between* weight: body sits at `font-weight-normal` 460 (not 400), headings at
+`font-weight-strong` 600. Display tracking is negative and tight; operator headings inherit a
+proportioned `heading-tracking` of `-0.02em`. `font-mono` is derived (the marketing brand ships none)
+for IDs, codes, timestamps, and log lines. Numeric columns render `tabular-nums` so figures align.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.2 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 19px / 1.25 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 15px / 1.35 | `font-weight-strong` · `heading-tracking` |
+| body | UI + prose | 14px / 1.5 | `font-weight-normal` (460) |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow | 12px / 1.3 | `font-weight-strong`, `+0.02em`, uppercase |
+
+Keep the sub-default weight — the quiet warmth is the type voice. Bump weight for emphasis, never size.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled `primary` indigo on `primary-foreground` white, `radius` 8px, never a
+  pill. Secondary: `secondary` fill, 1px `border`, `foreground`. Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring` at a
+  full 2px, no glow.
+- **Card** — `card` surface, 1px `border`, `radius`; shadow only when it must lift (`shadow-intensity`);
+  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** — hairline `border`, `muted` / status fill, uppercase caption; status badges take
+  `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing unit 8px (the brand's base, with 2 / 4 / 12 sub-tokens for fine work); the on-scale ramp
+is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64`. Shell dimensions map one-to-one to the layout primitives:
+sidebar `sidebar-width-expanded` 256 / `sidebar-width-collapsed` 56, topbar `topbar-height` 56, side
+panel `side-panel-width` 440 / `side-panel-width-rich` 640, modal cap `modal-width-max` 560, forms
+`form-max-width` 640, tables full-width. Density is governed globally by `density-tier` and stepped per
+archetype by the surface catalog — never by absolute overrides. The editorial roominess is carried by
+the 8px base, the taller `table-row-height`, and the larger radius, not by inflating the global tier.
+
+## 6 Depth
+
+Flat. Hierarchy comes from the surface ladder and hairlines, not shadow:
+
+- **0 — canvas** `background`, no border.
+- **1 — panel / card** `card` on a 1px `border`; shadow only when it must lift off the canvas —
+  `0 1px 3px rgba(0,0,0,0.08)` (riding `shadow-intensity`).
+- **2 — overlay** `popover` / side panel / modal — the one place shadow earns its keep,
+  `0 8px 24px rgba(0,0,0,0.12)`.
+
+The hero's violet-sky atmospheric backdrop (the marketing depth medium) stays behind. Focus is a 2px
+`ring` outline in indigo, never a glow, visible on every interactive element. Three z-levels: content,
+sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve `primary` indigo for the single most important action on a surface; everything else is
+  neutral or status.
+- **Do** carry hierarchy with warm hairlines, sub-default weight steps, and whitespace — the brand is flat.
+- **Do** hold ink at warm off-black `foreground` `#292827`; pure black breaks the brand's quiet warmth.
+- **Do** apply `tabular-nums` to every numeric column and `font-mono` to IDs, codes, and timestamps.
+- **Don't** wear the marketing theatre: no violet-sky hero gradient, no deep-teal closing band, no
+  hero-scale display type on a working surface — those are brochure devices, not operator chrome.
+- **Don't** promote a second chromatic accent. Teal and violet-soft stay marketing-decorative; status
+  uses `success` / `warning` / `destructive`.
+- **Don't** pill the primary CTA — 8px rounded rectangle is the button shape; the pill is hero-only.
+- **Don't** signal elevation with heavy drop shadows, or open detail in a modal when the side panel fits.
+
+## 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
+
+Directives the emitting agent follows verbatim:
+
+- What carries from Superhuman: the warm neutral palette and warm off-black ink, the single indigo
+  accent, the 8px rounded-rectangle radius, and the sub-default type weights (460 body / 600 strong).
+- What stays behind: the violet-sky hero gradient, the deep-teal closing band, hero-scale display type,
+  and the pill CTA — every one is a marketing device with no operator role.
+- Lead every list surface with its table; lead every entity with its primary read, not its chrome.
+- Accent only the primary action with indigo. If two things want the accent, one is not primary.
+- Detail and edit go in the side panel; a modal is a confirmation, not a workspace.
+- Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`.
+- Every workflow completes from the keyboard; the indigo `ring` focus outline is always visible.
+- Stay flat and warm — hairline and weight before shadow; never pure black, never a pill on a CTA.