@nurix/etna 0.18.19 → 0.18.21

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

@@ -0,0 +1,170 @@
+---
+schema: design-md/v1
+product: Resend
+provenance: library
+sourced: 2026-07-04
+---
+
+# Resend — editorial-noir developer console
+
+Resend's marketing surfaces are a developer tool wearing the typography of a print magazine: a
+true-black canvas, off-white ink, oversized Domaine Display serif headlines, and depth built entirely
+from translucent-white hairlines instead of shadow. This entry is the *operator* reading of that brand —
+an internal tool (sending-logs stream, API-key console, audience table, deliverability dashboard) in
+Resend's language. What carries: the pure-black `#000000` canvas, off-white ink, the single white-hot
+`primary` (a white surface that is the brightest pixel — the inverted accent), translucent-white hairline
+depth with no shadow, the 8px button / 12px card radius vocabulary, Geist Mono on every code surface, the
+Inter UI voice, and the six atmospheric accents repurposed as chart/status hues. What stays behind: the
+76–96px Domaine Display serif hero, ABC Favorit marketing body, the full-section glow washes, the
+96–128px section bands, and the print-magazine email-mockup insets.
+
+**Categorically dark, and truly black.** Two doctrine-floor overrides are legitimate here and
+recorded plainly: the brand is dark by default (`data-theme="dark"` is the signature; a derived
+light daytime floor ships alongside per schema), and its canvas is exactly `#000000`, never a
+near-black.
+
+## 1 Visual Theme
+
+Dark by default; a light daytime mode is the opt-in floor. Emphatically flat: hierarchy is carried by
+translucent-white hairline `border`, type weight, and a surface ladder that steps by luminance, never
+shadow — the system has no drop-shadow language. A single accent — but the accent is *white*. `primary`
+is an off-white surface with black text, the brightest pixel on the black canvas and the one solid anchor
+(in the light floor it inverts to near-black-on-white, the same highest-contrast invariant). The anchor
+surface is a pure `#000000` canvas with cards a hairline-and-luminance-step above it; ink is off-white
+`foreground`, faintly blue-cool so it reads as printed paper. Density is `standard` — dense-capable and
+technical, editorial breathing carried in the shell dimensions, not the data grid.
+
+## 2 Color Roles
+
+Both themes are valued; dark is the signature (listed second, but it is the default the tool wears).
+One action accent — `primary` is the only solid that carries interactive meaning; the six atmospheric
+accents live only in charts and status (see §7); status hues speak only status.
+
+| Role | Light (floor) | Dark (signature) | Allowed where |
+| --- | --- | --- | --- |
+| `background` | `#ffffff` | canvas `#000000` | the page floor — the dominant surface |
+| `card` / `popover` | `#ffffff` | card `#0a0a0c`, popover `#101012` | panels and overlays, one luminance step up |
+| `foreground` | `#000000` | off-white ink `#fcfdff` | all primary ink |
+| `muted` / `secondary` | `#f1f7fe` | `#101012` | hover fills, quiet bands, ghost/secondary buttons |
+| `muted-foreground` | `#5b6066` | `#a1a4a5` | labels, captions, secondary text |
+| `border` / `input` | `#e4e8ee` | hairline-strong `rgba(255,255,255,0.14)` | every card edge, field edge, and grid line |
+| `primary` | near-black `#000000` | white-hot `#fcfdff` | the one primary action; active nav; the brightest solid |
+| `primary-foreground` | `#ffffff` | `#000000` | label on the primary surface — black on the white pill |
+| `accent` | `#eef4fc` | wash `rgba(255,255,255,0.09)` | selected / hovered rows and nav — a neutral lift, never colored |
+| `ring` | `#000000` | ink `#fcfdff` | focus outline — the border thickens to ink, no separate glow |
+| `destructive` | `#e11d3f` | brand red `#ff2047` | destructive actions and error state only |
+| `success` / `warning` | `#0a9d63` / `#b8790a` | `#11ff99` / `#ffc53d` | status signalling only, never chrome |
+
+The atmospheric glow colours (orange, blue, green, yellow, red) are marketing backdrops; here they carry
+`chart-1..5` and semantic status, never full-section washes or solid buttons.
+
+## 3 Typography
+
+One UI sans, one mono. `font-sans` is Inter — the corpus's own UI face — carrying body, tables, labels,
+and every heading; ABC Favorit (marketing body) and the 76–96px Domaine Display serif hero both stay
+behind, since operator surfaces top out at a 24px title where the serif never appears. `font-mono` is
+Geist Mono for IDs, codes, timestamps, log lines, and every code well; numeric columns render
+`tabular-nums`. Hierarchy is size and family, not weight — body holds at 400 and the brand never bolds
+past the strong 500.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.5 | `font-weight-strong` (500) · `heading-tracking` |
+| h2 | section head | 20px / 1.3 | `font-weight-strong` (500) · `heading-tracking` |
+| h3 | card / group head | 16px / 1.4 | `font-weight-strong` (500) · 0 |
+| body | UI + prose | 14px / 1.5 | `font-weight-normal` (400) |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| caption | eyebrow, footer meta | 12px / 1.5 | `font-weight-normal` |
+| code | IDs, logs, amounts | mono 13px / 1.6 | `font-weight-normal` |
+
+Emphasise by size or family (sans → mono), never by bumping body weight to 600 — the corpus forbids it.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — primary: filled `primary` (white on dark / near-black on light), `primary-foreground`,
+  `radius` (8px), never a pill — the one brightest solid per surface. Secondary/ghost: `secondary` fill,
+  1px `border`; outline: transparent on `background`, 1px `border`.
+- **Input** — `card` fill, 1px `border` (`border-weight`), `radius`; focus thickens the edge to the ink
+  `ring` — no glow, no separate ring colour.
+- **Card** — `card` a luminance step above canvas on a 1px hairline `border`, `radius` stepping to 12px
+  for large panels and code wells; depth is the hairline plus the step, never a shadow.
+- **Table row** — height `table-row-height`; `border` grid lines (soft dividers may drop to a 6%
+  hairline); `muted` on hover; `tabular-nums` on numeric columns; selection washes to `accent`.
+- **Code / log well** — the darkest, coolest surface (`#06060a` on dark, a step below canvas), 1px
+  `border`, `radius`, `font-mono` — depth by temperature, not blur.
+- **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 (badges only), `muted`/status fill; status badges take `success` / `warning` /
+  `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` — the marketing
+96px / 128px section bands stay behind. Shell dimensions map one-to-one to the layout primitives: sidebar
+`sidebar-width-expanded` (248px) / `sidebar-width-collapsed` (56px), topbar `topbar-height` (64px, the
+brand's nav height), side panel `side-panel-width` (420px) / `side-panel-width-rich` (640px, the corpus's
+email-inset max width), modal `modal-width-max`, forms `form-max-width`, tables full-width. Density is
+governed globally by `density-tier` and stepped per archetype by the surface catalog.
+
+## 6 Depth
+
+Flat, hairline-and-luminance only — no drop-shadow language on this canvas:
+
+- **0 — canvas** `background` (`#000000` dark / `#ffffff` light), no border.
+- **1 — panel / card** `card` a luminance step above canvas on a 1px hairline `border`; step plus
+  hairline carries the lift.
+- **2 — overlay** `popover` / side panel / modal — a further luminance step (dark) or the faintest
+  `shadow-intensity` lift (light floor). Rank is surface, hairline, and position.
+- **inlay — code / log well** the darkest, coolest surface (`#06060a` on dark) — depth by temperature.
+
+Focus is an ink `ring` — the border thickens to `foreground`, never a glow — visible on every
+interactive element. Three z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** anchor every dark surface on true `#000000` — never a near-black; the corpus is emphatic the
+  brand sits on pure black, not `#0a0a0a`.
+- **Do** reserve the white-hot `primary` as the single brightest solid per surface — one primary action,
+  the active nav, the focus `ring`. Its scarcity is what makes white read as the accent.
+- **Do** carry depth with translucent-white hairlines and the luminance ladder; render every code, log,
+  and terminal surface in `font-mono` (Geist Mono) with `tabular-nums` on numeric columns.
+- **Don't** introduce a second solid brand accent — white (or its light-floor near-black) is the brand;
+  the six atmospheric colours are chart/status only, never buttons or full-section washes.
+- **Don't** signal elevation with drop shadows — hairlines and luminance carry depth on the black canvas.
+- **Don't** pill the primary CTA or reach for a radius outside `radius-scale` — buttons/inputs are 8px,
+  cards and code wells 12px; pill is badges only.
+- **Don't** bring the serif or ABC Favorit into operator surfaces — Inter carries the UI; the display
+  serif is a hero-scale marketing signature that stays behind.
+
+## 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; nav → hamburger; 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 |
+
+Code and log wells keep mono legibility at every breakpoint by scrolling horizontally, not wrapping.
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Wear the dark theme by default (`data-theme="dark"`); the light map is the opt-in daytime floor. On
+  dark the canvas is exactly `#000000` — never a near-black.
+- Spend the white-hot `primary` once per surface: the primary action, the active nav, the focus `ring`.
+  If two things want the white, one is not primary. Everything else is neutral or status.
+- Lead every list surface with its table; render code, log, and terminal panels in `font-mono` (Geist
+  Mono) as the darkest/coolest surface. Every numeric column is `tabular-nums`; every ID / code /
+  timestamp is `font-mono`.
+- The six atmospheric accents (orange / blue / green / yellow / red) are the sanctioned multi-hue set —
+  chart series and semantic status only, never solid buttons or full-section glow washes.
+- Depth is the luminance ladder and translucent-white hairlines, never shadow; the focus ring is the
+  border thickened to ink. Detail and edit go in the side panel beside the work, never a modal.
+- Keep the UI on Inter; leave behind the Domaine Display serif hero, ABC Favorit body, the full-section
+  glows, the 96–128px section bands, and the email-mockup insets.

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

@@ -0,0 +1,145 @@
+---
+schema: design-md/v1
+product: Revolut
+provenance: library
+sourced: 2026-07-04
+---
+
+# Revolut — operator reading
+
+The operator translation of Revolut's fintech-meets-brochure system — a two-mode marketing canvas
+(true-black storytelling bands alternating with white catalogue bands, oversized Aeonik Pro
+headlines, pill buttons, eight saturated illustration colours). This entry keeps the
+operator-durable core and leaves the hero scale behind; §9 lists exactly what carries and what
+stays.
+
+## 1 Visual Theme
+
+Light by default: the working canvas is the white catalogue mode — the surface Revolut reserves for its
+comparison tables and download tiles. Beside it stands a signature **true-black `sidebar`** (`#000000`):
+Revolut's nav and footer are pure black, so the one piece of persistent operator chrome carries the
+brand's dark identity while the work stays on white. Flat — no drop-shadow language; hierarchy comes
+from surface-luminance shifts and 1px hairlines. A single accent, cobalt violet `primary` (`#494fdf`),
+is reserved for the one action that matters; ink is warm near-black (`#191c1f`), never pure black.
+Components are distinctly rounded (12px working, 20px cards) without the marketing pill; density is
+`standard` and comfortable, the way Revolut's tall inputs feel.
+
+## 2 Color Roles
+
+Light values first; one chromatic accent. Cobalt violet is the only brand stamp that carries meaning —
+status hues speak status, the illustration palette lives in charts.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | white `#ffffff` | page, cards, and overlays — the dominant surface |
+| `foreground` | warm near-black `#191c1f` (brand ink) | all primary ink; softer than pure black on purpose |
+| `muted` / `secondary` | off-white `#f4f4f4` (surface-soft) | hover rows, soft-button fills, inset groups |
+| `muted-foreground` | mid-slate `#505a63` (brand mute) | labels, captions, secondary text |
+| `border` / `input` | hairline `#e2e2e7` | every separator, grid line, and field edge |
+| `primary` | cobalt violet `#494fdf` | the one primary action; active nav; key interactive detail |
+| `accent` | pale cobalt tint `#edeefc` | selected / hovered rows and nav on the light canvas |
+| `accent-foreground` | cobalt deep `#3a40c4` | ink on the accent tint |
+| `ring` | `primary` `#494fdf` | the focus outline — always visible, keyboard-first |
+| `destructive` | danger red `#e23b4a` | destructive actions and error state only |
+| `success` / `warning` | green `#428619` / orange `#ec7e00` | status signalling only, never chrome |
+
+The eight saturated illustration colours (teal, light-blue, pink, light-green, yellow, brown) carry no
+UI role — they appear only as chart series (see §7).
+
+## 3 Typography
+
+Two families, one voice. `font-sans` leads with **Aeonik Pro** (the brand's editorial display face),
+falling through its documented substitutes — Inter Display, General Sans, Söhne — to **Inter**, the
+workhorse for body, labels, and tables. Headings carry Aeonik's tight negative tracking; body rides
+Inter with a faint positive tracking that reads mechanical and fintech-precise. `font-mono` is JetBrains
+Mono for amounts, IDs, and timestamps; numeric columns render `tabular-nums`.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 28px / 1.2 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 22px / 1.3 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 18px / 1.35 | `font-weight-strong` · `heading-tracking` |
+| body | UI + prose | 15px / 1.5 | `font-weight-normal` |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow | 12px / 1.2 | `font-weight-strong`, `+0.02em`, uppercase |
+
+Bump weight for emphasis, never size. Aeonik's hero sizes (80–136px) stay behind — voice carries, scale does not.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled cobalt `primary` on `primary-foreground`, `radius` (rounded, not pilled
+  — the marketing pill stays behind). Secondary: `secondary` fill, `border`. Ghost: `accent` on hover.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring` at
+  full 2px, no glow; comfortable height, echoing Revolut's tall fields.
+- **Card** — `card` surface, 1px `border`, the larger radius step (20px, Revolut's card corner), no
+  shadow — depth is the hairline and the surface.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
+  numeric columns; selection tints `accent`.
+- **Side panel** — detail and edit open beside the work (`side-panel-width`, `side-panel-width-rich` for
+  content-heavy), not over it.
+- **Badge** — full pill (`radius-scale` max, the one controlled Revolut pill nod), hairline `border` or
+  status fill, uppercase caption; status badges take `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing unit 4px; the on-scale ramp is `4 · 6 · 8 · 14 · 16 · 24 · 32 · 48 · 64` (6px and 14px are
+Revolut's own off-grid comfort steps, kept). Shell dimensions map one-to-one to the layout primitives:
+sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height` (64px, Revolut's
+nav-bar height), side panel `side-panel-width` / `side-panel-width-rich`, modal `modal-width-max`, forms
+`form-max-width`, tables full-width. Density is governed globally by `density-tier` and stepped per
+archetype by the surface catalog.
+
+## 6 Depth
+
+Flat, and more so than most — Revolut has **no traditional drop-shadow language**. Hierarchy comes from
+surface-luminance shifts and hairlines:
+
+- **0 — canvas** `background` white, no border.
+- **1 — panel / card** `card` on a 1px `border`; to lift off a band, the band steps to `muted`
+  (`#f4f4f4`) rather than casting a shadow.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a low `md`.
+
+The black `sidebar` runs its own dark ladder: `#000000` chrome, `#16181a` hovered/selected nav row,
+`#ffffff1f` dividers. Focus is a 2px cobalt `ring` outline (never a glow) on every interactive element;
+three z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve cobalt `primary` for the single most important action — a stamp, not a theme. If two things want it, one is not primary.
+- **Do** keep the `sidebar` true black `#000000` — Revolut's black is `#000000`, not near-black; a deliberate override of the light-surface default.
+- **Do** carry depth with surface-luminance and hairlines; keep body ink warm `#191c1f`, not pure black.
+- **Do** apply `tabular-nums` to every numeric column and `font-mono` to amounts, IDs, and timestamps.
+- **Don't** promote a second chromatic accent — the eight illustration colours are chart series only, never chrome.
+- **Don't** full-pill buttons or CTAs — the marketing pill stays behind; buttons take `radius`, only badges pill.
+- **Don't** add drop shadows to cards; colour-block and surface-luminance carry elevation.
+- **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 | black `sidebar` → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
+| 768 | sidebar collapses to the black 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:** cobalt violet `primary` as the single accent · warm-black `#191c1f` ink · the black
+`#000000` sidebar chrome · rounded character (12px working, 20px cards) · Aeonik heading voice with tight
+tracking over an Inter body · flat, shadowless depth · `tabular-nums` money.
+
+**Stays behind:** the black canvas as the *working* surface · hero-scale Aeonik (80–136px) · the
+white-pill-on-black CTA (a dark-canvas device — the operator primary is the cobalt fill) · full-pill
+buttons · the band-switching rhythm · the illustration palette as chrome.
+
+- Lead every list surface with its table; the black sidebar is the persistent left chrome.
+- Accent only the primary action with cobalt; everything else is neutral or status.
+- Detail and edit go in the side panel; a modal is a confirmation, not a workspace.
+- Every numeric column is `tabular-nums`; every amount / ID / timestamp is `font-mono`, and every
+  workflow completes from the keyboard with the cobalt `ring` outline always visible.
+- Stay flat — hairline and surface before shadow; illustration colours are chart series, not chrome.

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

@@ -0,0 +1,137 @@
+---
+schema: design-md/v1
+product: Runway
+provenance: library
+sourced: 2026-07-04
+---
+
+# Runway — cinematic monochrome, read for the operator
+
+Runway's brand is a dark, editorial, film-grade surface where full-bleed photography IS the UI and
+the interface retreats to near-invisibility. This entry is the operator reading of that identity: the
+photography, the 48px hero display, and the asymmetric image grids stay behind; the **dark-native
+canvas, the cool-slate monochrome temperature, the zero-shadow flatness, the single geometric type
+voice, and the never-pill radius character** carry into a CRM, queue, or dashboard. This brand is
+**categorically dark** — the operator default is `data-theme="dark"`, an override the doctrine's
+light-default floor concedes to brand truth (§7). A light reading is shipped for surfaces that need it.
+
+## 1 Visual Theme
+
+Dark by default; light is the alternate. Flat to the point of austerity: hierarchy is carried by
+dark/light section polarity, hairline `border`, and type weight — never by shadow (the brand uses
+zero). The neutral ramp is a distinctly cool blue-gray slate (`#767d88`, `#7d848e`), so the whole UI
+reads engineered and photographic-adjacent rather than warm. There is **no chromatic accent** — Runway
+colors nothing but its photography; emphasis is pure contrast, so the operator `primary` is monochrome
+(white on dark, near-black on light). The anchor surface is a `#000000` canvas carrying `#1a1a1a`
+cards. Density is `spacious` — the brand breathes at cinema scale, and the operator reading keeps air.
+
+## 2 Color Roles
+
+Dark values are native (listed first); light is the alternate reading. One accent — and it is a
+monochrome contrast, not a hue. Status hues are derived for the operator floor (the brand ships none).
+
+| Role | Dark (native) | Light | Allowed where |
+| --- | --- | --- | --- |
+| `background` | `#000000` Runway Black | `#ffffff` | page canvas — the dominant surface |
+| `foreground` | `#ffffff` | `#0c0c0c` | primary ink |
+| `card` / `popover` | `#1a1a1a` Dark Surface | `#ffffff` | cards, panels, overlays |
+| `muted` / `secondary` | `#27272a` | `#e9ecf2` Cool Cloud | hover rows, subtle fills, secondary buttons |
+| `muted-foreground` | `#767d88` Cool Slate | `#767d88` | labels, captions, metadata |
+| `border` / `input` | `#27272a` Border Dark | `#c9ccd1` Cool Silver | every separator, grid line, field edge (kept whisper-faint) |
+| `primary` | `#ffffff` | `#0c0c0c` | the one primary action — monochrome contrast, no hue |
+| `primary-foreground` | `#000000` | `#ffffff` | text on the primary fill |
+| `accent` | `#27272a` | `#e9ecf2` | selected / hovered rows and nav only |
+| `ring` | `#ffffff` | `#0c0c0c` | focus outline — high-contrast monochrome, keyboard-first |
+| `destructive` | `#e5484d` | `#c53030` | destructive actions and error only (derived) |
+| `success` / `warning` | `#46a758` / `#d5a13a` | `#2f855a` / `#b7791f` | status signalling only (derived) |
+
+## 3 Typography
+
+One family carries everything — abcNormal in the brand; the operator substitute is DM Sans (its
+geometric sibling), with Inter as the robust fallback. Variety comes from size, weight, case, and
+tracking, never a second family. Heading tracking runs tight and negative (film-title density); the
+weight range is 400–600 and **never reaches 700+**. Uppercase micro-labels take *positive* tracking
+(`+0.02em`) as navigational signposts. `font-mono` (Geist Mono, derived — the brand is single-family)
+serves IDs, codes, timestamps, and log lines; numeric columns render `tabular-nums` (floor P4).
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 40px / 1.0 | `font-weight-normal` · `heading-tracking` |
+| h2 | section head | 24px / 1.1 | `font-weight-normal` · `heading-tracking` |
+| h3 | card / group head | 20px / 1.1 | `font-weight-normal` · `heading-tracking` |
+| body | UI + prose | 16px / 1.4 | `font-weight-normal`, `-0.16px` |
+| small | labels, meta, dense table | 13px / 1.3 | `font-weight-normal`, `-0.2px` |
+| caption | uppercase eyebrow | 14px / 1.3 | `font-weight-strong`, `+0.02em`, uppercase |
+
+Bump weight toward `font-weight-strong` for emphasis; never change size, never exceed 600.
+
+## 4 Component Stylings
+
+Every recurring component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled `primary` (white on dark / near-black on light), `radius`, no pill, label `font-weight-strong`. Secondary: `secondary` fill, 1px `border`. Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring` at 2px, no glow.
+- **Card** — `card` surface, 1px `border`, `radius`; shadow only on true overlays (`shadow-intensity` near zero); inset by `density-inset`.
+- **Table row** — `table-row-height`; faint `border` grid lines; `muted` on hover; `tabular-nums` on numeric columns; selection tints `accent`.
+- **Side panel** — detail and edit open in the side panel (`side-panel-width` / `side-panel-width-rich`), beside the work, not over it (floor P3).
+- **Badge** — hairline `border`, `muted` / status fill, uppercase caption; status badges take `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing unit 8px; the on-scale ramp is `4 · 6 · 8 · 12 · 16 · 20 · 24 · 28 · 32 · 48 · 64 · 78`
+(the brand's own scale — section spacing runs generous). 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 `spacious` globally (via `density-gap`), stepped per archetype by the
+surface catalog — never by absolute overrides. Content caps generous; the 1600px cinema container stays
+behind.
+
+## 6 Depth
+
+Flat, emphatically. The brand uses **zero shadows** — depth comes from dark/light section polarity and
+hairlines, not `box-shadow`:
+
+- **0 — canvas** `background`, no border.
+- **1 — panel / card** `card` on a 1px `border`; no shadow.
+- **2 — overlay** `popover` / side panel / modal — the only place `shadow-intensity` earns a whisper of
+  lift, and even then a `border` does most of the separating.
+
+Focus is a monochrome `ring` outline (white on dark, near-black on light), never a glow, visible on
+every interactive element (floor P6). Three z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** default to dark — this brand is categorically dark; light is the alternate, not the base.
+- **Do** reserve `primary` (the monochrome contrast) for the single most important action; everything else is neutral or status.
+- **Do** keep borders whisper-faint (`#27272a` / `#c9ccd1`) and carry hierarchy with polarity and weight.
+- **Do** apply `tabular-nums` to numeric columns and `font-mono` to IDs, codes, and timestamps; give uppercase labels positive tracking, never tight uppercase.
+- **Don't** introduce a chromatic accent — the interface is colorless by doctrine; color belongs to content, and status hues speak status only.
+- **Don't** pill anything or reach past `radius-scale` — geometry is subtly rounded (4–16px), never round.
+- **Don't** use a weight of 700 or above, or a second typeface; don't signal elevation with shadow (reach for the whisper only on a real overlay).
+
+## 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:
+
+- Default the shell to dark (`data-theme="dark"`); the near-black canvas with `#1a1a1a` cards is the
+  brand. Offer light only where a surface demands it.
+- Carry hierarchy with dark/light polarity, hairline borders, and type weight — reach for shadow only
+  on a genuine overlay, and even then let the border lead.
+- Accent is monochrome contrast, not a hue. If two things want the primary, one of them is not primary.
+- Use one geometric sans (DM Sans / Inter) for everything; keep heading tracking tight-negative, weight
+  ≤ 600. `font-mono` for IDs and timestamps; `tabular-nums` on every numeric column (P4).
+- Uppercase micro-labels take positive tracking; small radius (4–16px), never pill.
+- **Stays behind:** full-bleed cinematic photography, the 48px hero display type, asymmetric editorial
+  image grids, the 1600px cinema container, and photography-as-color. An operator surface earns its
+  clarity from structure, not spectacle.

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

@@ -0,0 +1,168 @@
+---
+schema: design-md/v1
+product: Sanity
+provenance: library
+sourced: 2026-07-04
+---
+
+# Sanity — an operator reading of the near-black command-center system
+
+Sanity's web system is a developer-content platform rendered as a nocturnal control room: a near-black
+achromatic canvas, a geometric-condensed sans with aggressively tight tracking, real code in dark
+cards, and two vivid signal-hues punctuating the gray. This is the *operator* reading — an internal
+tool (content queue, structured-content dashboard, publishing console, log stream) in Sanity's
+language. What carries: the near-black `#0b0b0b` canvas, the pure achromatic gray ramp, the two-signal
+accent system (coral rests, electric-blue activates), IBM Plex Mono, the geometric sans with tight
+tracking, and flat colorimetric depth. What stays behind (§7, §9): the hero display, full-pill CTAs,
+the full-bleed marketing rhythm, and the neon-green/magenta highlights.
+
+**This brand is categorically dark** — the near-black canvas is "not a dark mode but the primary
+identity," and Sanity's light/inverted sections are marketing inversions, never an operator light
+theme. A white operator canvas is off-brand.
+
+## 1 Visual Theme
+
+Dark by default — the near-black `background` (`#0b0b0b`, never pure black) is the floor of every
+surface, with no light counterpart. Emphatically flat: hierarchy comes from a colorimetric surface
+ladder (canvas → elevated `#212121` → prominent `#353535`), hairline `border`, and white-on-black
+contrast, never a drop shadow. The neutral ramp is pure achromatic gray — no warm or cool undertone —
+so the UI reads engineered and monochrome, its accents landing like signal lights in a dark room. Two
+accents, held to strict roles: coral `primary` (`#f36458`) is the one resting call-to-action, and
+electric blue (`#0052ef`) is the system-wide activation signal — hover, active-nav, links, and the
+focus `ring`. Density is `dense` — this reads like a tool for people who live in terminals.
+
+## 2 Color Roles
+
+Dark values. Two accents by strict role — coral rests, blue activates; the vivid greens and magenta
+are chart/status graces, and status hues speak only status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` | near-black canvas `#0b0b0b` | page floor and content area — the dominant surface |
+| `foreground` | white ink `#ffffff` | headlines and primary text on dark |
+| `card` / `popover` / `secondary` | elevated `#212121` | cards, overlays, inputs, secondary-button fills — lifted off the canvas |
+| `muted` | subtle fill `#212121` | quiet band tints, disabled tracks, canvas-level hover fills |
+| `muted-foreground` | silver `#b9b9b9` | labels, captions, secondary/body text, placeholders |
+| `accent` | prominent lift `#353535` | in-card hover and selected rows/nav — a neutral colorimetric step, never a hue wash |
+| `border` / `input` | visible hairline `#353535` | every separator, grid line, and field edge — calibrated visible but not dominant |
+| `primary` | coral `#f36458` | the one resting primary action per surface — the brand's warm signal, nowhere else |
+| `primary-foreground` | white `#ffffff` | text on the coral fill |
+| `ring` | electric blue `#0052ef` | the focus outline — the activation signal, unmistakable because keyboard-first |
+| `destructive` | pure red `#dd0000` | destructive actions and error state only — kept distinct from coral |
+| `success` / `warning` | green `#37cd84` / amber `#f59e0b` | status signalling only, never chrome |
+
+The neon green (`#19d600`) and magenta (`#f500ff`) are marketing punctuation, surviving here only as
+chart hues (§7). Blue never becomes a surface wash — it is line, text, ring, and indicator, so its
+signal stays sharp.
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is waldenburgNormal (the custom face; Space Grotesk or Inter is the
+geometric-condensed substitute) — body, UI, tables, and headings all ride it. `font-mono` is IBM Plex
+Mono for IDs, codes, timestamps, and log lines; numeric columns render `tabular-nums`, and mono
+uppercase carries the "system readout" voice for tags. The display *scale* (112/72/48px) stays behind
+— an operator surface tops out at a 24px page title.
+
+| Step | Role | Family | Size · line | Weight · tracking |
+| --- | --- | --- | --- | --- |
+| h1 | page title | sans | 24px / 1.24 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | sans | 20px / 1.24 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | sans | 16px / 1.3 | `font-weight-strong` · 0 |
+| body | UI + prose | sans | 15px / 1.5 | `font-weight-normal` |
+| small | labels, meta, dense table | sans | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow / tag | mono | 12px / 1.3 | `font-weight-strong`, uppercase |
+| code | IDs, logs, technical | mono | 13px / 1.5 | `font-weight-normal` |
+
+The brand never reaches for heavy weight — emphasis tops at 500 (600 only on 11px uppercase
+micro-labels). Headings build hierarchy on size and the signature tight negative tracking, never
+bolding; bump weight one restrained step for emphasis, never size.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — primary: filled coral `primary` on white `primary-foreground`, `radius`, never a pill
+  (the marketing pill CTA stays behind). Secondary: `secondary` fill, 1px `border`, `muted-foreground`
+  text. Ghost: transparent, `accent` on hover.
+- **Input / Card** — `card` fill on a 1px `border` (`border-weight`), `radius`; input focus draws the
+  blue `ring` at full 2px, no glow; card depth is the surface lift off the canvas, inset by
+  `density-inset`.
+- **Table row** — height `table-row-height`; `border` grid lines carry the grid; `accent` on hover;
+  `tabular-nums` and `font-mono` on numeric columns; selection tints `accent` with a coral `primary`
+  left-indicator.
+- **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** — hairline `border`, `muted`/status fill, uppercase mono caption; pill `radius` is
+  badges-only; status badges take `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing unit 8px; the on-scale ramp is `4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` — the marketing
+64-120px section rhythm stays behind. Shell dimensions map one-to-one to the layout primitives: sidebar
+`sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height` (compact, matching the
+brand's tight nav), side panel `side-panel-width` / `side-panel-width-rich`, modal `modal-width-max`,
+forms `form-max-width`, tables full-width. Density is governed globally by `density-tier` (dense,
+rewriting the scale through `density-gap`) and stepped per archetype by the surface catalog.
+
+## 6 Depth
+
+Flat and colorimetric. Elevation is a surface-color shift, not a shadow:
+
+- **0 — canvas** `background` (`#0b0b0b`), no border.
+- **1 — panel / card** `card` (`#212121`) on a 1px `border`; the elevated-surface lift off the
+  near-black canvas carries rank. Hover/selected lift one step to `accent` (`#353535`).
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns the faintest
+  ring-based lift or a backdrop blur, enough to separate an overlay from the canvas above a scrim.
+
+Focus is a 2px blue `ring` outline (never a glow), visible on every interactive element. The shadow
+vocabulary is ring-based (`0 0 0 Npx`) and backdrop-blur only — no offset drop shadows. Three z-levels:
+content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** anchor every surface on the near-black canvas and keep the gray ramp purely achromatic — no
+  warm or cool tint; the vivid-signal-on-dark pairing is the brand.
+- **Do** reserve coral `primary` for the one resting call-to-action per surface, and spend electric
+  blue on the activation states (hover, active-nav, links, focus `ring`). Coral rests, blue activates;
+  never mix the two in one element.
+- **Do** carry hierarchy with the surface ladder, hairlines, weight, and size — the brand is flat — and
+  run headings on the geometric sans with tight negative tracking, never past weight 500.
+- **Do** apply `tabular-nums` to numeric columns and `font-mono` (IBM Plex Mono) to IDs, codes,
+  timestamps, and log lines; mono uppercase for technical tags.
+- **Don't** promote the neon green or magenta to a UI accent — they are chart/status graces; success
+  status uses the calmer `success` green.
+- **Don't** pill controls or reach for a radius between 13px and the badge pill — the marketing pill CTA
+  stays behind.
+- **Don't** signal elevation with offset drop shadows, or adapt the shell to a light canvas — this brand
+  has no light surface.
+
+## 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 |
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Wear the near-black canvas by default; this brand is categorically dark, with no light surface to fall
+  back to. Cards and panels are the elevated `#212121` lift off the canvas, not white.
+- Two accents, strict roles: coral `primary` marks the one resting call-to-action; electric blue is the
+  activation signal on hover, active-nav, links, and the focus ring. If they meet in one element, one is
+  wrong. All other color belongs to data and status; keep the neutral ramp purely achromatic.
+- Depth is surface contrast and hairlines, never a drop shadow; reach for the faint overlay lift or a
+  backdrop blur only for a true modal or popover.
+- Headings ride the geometric sans with tight negative tracking; build hierarchy on size, never bold
+  past weight 500. Every numeric column is `tabular-nums`; every ID / code / timestamp / log line is
+  `font-mono` (IBM Plex Mono); technical tags are mono uppercase. Show real content, not an illustration.
+- Detail and edit go in the side panel beside the work; a modal is a confirmation, not a workspace.
+  Keyboard-first: the blue `ring` focus outline is always visible.
+- Leave behind: the hero display at -4.48px tracking, full-pill CTA buttons, full-bleed marketing
+  sections and the 64-120px rhythm, and the neon-green/magenta highlights — marketing voltage, not
+  operator chrome.