@nurix/etna 0.18.19 → 0.18.21

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

@@ -0,0 +1,138 @@
+---
+schema: design-md/v1
+product: Cursor
+provenance: library
+sourced: 2026-07-04
+---
+
+# Cursor — the warm-cream editorial dev-tool operator design
+
+Cursor's marketing site is a quietly-confident developer brand that chose editorial calm over
+IDE-darkness: a warm cream canvas, warm near-black ink carrying body and display alike, a single orange
+voltage, and JetBrains Mono across the roughly-half of the page that is code. This entry is the
+*operator* reading of that brand — an internal tool (agent-ops console, run queue, cluster dashboard,
+log stream) in Cursor's language. What carries: the warm cream canvas (never pure white), warm ink, the
+single Cursor Orange accent held scarce, the editorial magazine voice (display at 400 with negative
+tracking, never bold), JetBrains Mono on every code surface, hairline-only flat depth, and the 8px
+developer-dialect button radius. What stays behind: the 72px hero display, the full-width IDE mockup,
+the 80px section rhythm, the ink-inverted featured card, and the marketing CTA bands.
+
+**Warm, but light.** The cream canvas (`#f7f7f4`) is deliberate warmth, not the cool gray-white the
+category defaults to — but it reads *light*, so the light-default floor holds cleanly (no
+categorically-dark exception); warmth is temperature, not polarity.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. The whole UI floats on Cursor's warm cream `background` (`#f7f7f4`);
+cards step up to pure white `card` (`#ffffff`), so a panel reads by a hair of brightness plus its
+hairline, not by shadow. Emphatically flat: hierarchy is carried by warm hairline `border`, type
+weight, and the cream-to-white surface step — never a drop shadow. A single accent, Cursor Orange
+`primary` (`#f54e00`), is held scarce — the one primary action, the active-nav indicator, the focus
+`ring`. Ink is a warm near-black `foreground` (`#26251e`) — warm where every other tool is cool.
+Density is `standard`; editorial pacing survives as slightly generous shell dimensions, not loose grids.
+
+## 2 Color Roles
+
+Light values. One accent — `primary` is the only chromatic hue that carries UI meaning; the timeline
+pastels live only in charts and agent-stage chips (see §7), status hues speak only status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` | warm cream `#f7f7f4` | the page floor and content canvas — the dominant surface |
+| `card` / `popover` | pure white `#ffffff` | cards and overlays — a slight bright lift off the cream, differentiated by hairline |
+| `foreground` | warm near-black `#26251e` | display and all primary ink |
+| `muted` / `secondary` | soft warm fill `#efeee8` | hover rows, quiet band tints, secondary-button fill |
+| `muted-foreground` | warm gray `#807d72` | labels, captions, secondary text |
+| `border` / `input` | warm hairline `#e6e5e0` | every separator, grid line, and field edge — one warm step, not an ink line |
+| `primary` | Cursor Orange `#f54e00` | the one primary action; the focus `ring`; the active-nav indicator |
+| `primary-foreground` | white `#ffffff` | text on the orange action |
+| `accent` | warm selection lift `#eae8e0` | selected / hovered rows and nav — a neutral warm step, never orange |
+| `ring` | `primary` orange | the focus outline — unmistakable, because keyboard-first |
+| `destructive` | warm rose-red `#cf2d56` | destructive actions and error state only |
+| `success` / `warning` | green `#1f8a65` / warm gold `#c08532` | status signalling only, never chrome |
+
+## 3 Typography
+
+`font-sans` is CursorGothic (the licensed brand face), with Inter the corpus's documented open-source
+substitute — one sans carries body, UI, labels, and headings. `font-mono` is JetBrains Mono for IDs,
+codes, timestamps, log lines, and every code surface (roughly half of Cursor's own chrome); numeric
+columns render `tabular-nums`. The defining typographic trait is the **editorial voice**: page titles
+wear weight 400 with negative tracking — a magazine feel, never bold — while smaller component heads
+step up to the strong 600. The hero-scale 72px display stays behind; an operator surface tops out at a
+24px page title.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.2 | `font-weight-normal` (400) · `heading-tracking` |
+| h2 | section head | 20px / 1.3 | `font-weight-normal` (400) · `heading-tracking` |
+| h3 | card / group head | 15px / 1.4 | `font-weight-strong` (600) · 0 |
+| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow | 12px / 1.4 | `font-weight-strong`, `+0.08em`, uppercase |
+| code | IDs, logs, amounts | mono 13px / 1.5 | `font-weight-normal` |
+
+Keep page titles at 400 with negative tracking — the magazine voice depends on it; emphasise by size, never by bolding the display.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — primary: filled orange `primary` on white `primary-foreground`, `radius` (8px), never a pill. Secondary: white `card` fill, 1px `border`, `foreground`. Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the orange `ring` at full 2px, no glow.
+- **Card** — white `card` surface on a 1px `border` — the bright step off the cream carries the lift; shadow only when a true overlay must separate; inset by `density-inset`.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on numeric columns; row selection warms to `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** — pill radius (badges only), `muted`/status fill, uppercase caption; 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
+80px section rhythm stays behind. Shell dimensions map one-to-one to the layout primitives: sidebar
+`sidebar-width-expanded` (256px) / `sidebar-width-collapsed` (56px), topbar `topbar-height` (64px, the
+brand's nav height), side panel `side-panel-width` (440px) / `side-panel-width-rich` (640px), modal cap
+`modal-width-max`, forms `form-max-width`, tables full-width. The dimensions run a hair generous —
+editorial breathing carried through the shell, not loose grids. Density is governed globally by
+`density-tier` and stepped per archetype by the surface catalog — never by absolute overrides.
+
+## 6 Depth
+
+Flat and hairline-only. Depth comes from the cream-to-white surface step and warm hairlines, not shadow:
+
+- **0 — canvas** `background` (`#f7f7f4`), no border.
+- **1 — panel / card** white `card` (`#ffffff`) on a 1px `border`; the bright step off the cream plus the hairline carries the lift. Selected / hover rows warm to `accent` (`#eae8e0`).
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns the faintest soft lift, enough to float an overlay above the cream. Rank is surface, border, and position — never a heavier shadow.
+
+Focus is a 2px orange `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 warm cream canvas — pure white as the page floor reads as any-other-tool; the tint is Cursor.
+- **Do** reserve orange `primary` for the single primary action, the focus `ring`, and the active-nav indicator — its scarcity at element scale is what makes it read as voltage.
+- **Do** keep page titles at weight 400 with negative tracking, and render every code, log, and terminal surface in `font-mono` (JetBrains Mono) with `tabular-nums` on numeric columns.
+- **Don't** introduce a second brand action color — Cursor Orange is the only one.
+- **Don't** drop the timeline pastels onto semantic status or general chrome — they are scoped to charts and agent-stage chips, and status stays `success` / `warning` / `destructive`.
+- **Don't** pill the primary CTA or reach for a radius outside `radius-scale` — the button/input radius is 8px; pill is badges only.
+- **Don't** signal elevation with drop shadows — warm hairlines and the cream-to-white step carry depth.
+
+## 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; breathing widens |
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Reach for the warm cream canvas first — never pure white for the page floor; the tint is Cursor. Cards are the white bright step above it.
+- Spend orange once per surface: the primary action, the focus `ring`, the active-nav indicator. If two things want the orange, one of them is not primary. Color otherwise belongs to data and status.
+- Page titles wear weight 400 with negative tracking — the editorial voice; component heads and labels earn the strong 600. Never bold the display.
+- Render code, log, and terminal panels in `font-mono` (JetBrains Mono) — show real chrome, not a light mockup of it. Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`.
+- The timeline pastel palette (peach / mint / blue / lavender / gold) is the brand's one sanctioned multi-hue set — use it for chart series and agent-stage chips (Thinking / Reading / Editing / Done), never for semantic status or general chrome.
+- Depth is the cream-to-white step and warm hairlines, never shadow; reach for the faint overlay lift only for a true modal or popover. Detail and edit go in the side panel beside the work, never a modal.
+- Keyboard-first: the orange `ring` focus outline is always visible. Leave behind the 72px hero display, the full-width IDE mockup, the 80px section rhythm, and the marketing CTA bands.

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

@@ -0,0 +1,137 @@
+---
+schema: design-md/v1
+product: ElevenLabs
+provenance: library
+sourced: 2026-07-04
+---
+
+# ElevenLabs — editorial voice-AI, warmed to an operator console
+
+The operator reading of the ElevenLabs brand. Its own surfaces read like a quietly editorial print
+magazine — off-white canvas, Waldenburg Light display at weight 300, pastel gradient orbs as the
+only "color". This entry keeps what survives at operator scale: the warm canvas, the achromatic ink
+accent, the warm-stone temperature, modest type weight, soft radius, and the pill on the one action.
+The 64px hero display, the orbs, and the 96px rhythm stay behind; the five pastels return only as
+charts.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. Flat and editorial: hierarchy comes from warm hairline `border`, type
+weight, and the stone surface ladder, never heavy shadow. The single accent is **achromatic** — a warm
+near-black ink `primary` (`#292524`) worn as a pill on the one action that matters; there is no chromatic
+accent at all, and that discipline carries. Ink is `foreground` (`#0c0a09`); the neutral ramp is a warm
+stone, never the cool slate the category defaults to. The type voice is editorial (a light serif over
+Inter — see §3). Density is `spacious` — the print-magazine calm honored, not crammed. The anchor surface
+is an off-white `background` (`#f5f5f5`) holding white cards, beside a warm `sidebar` (`#f0efed`).
+
+## 2 Color Roles
+
+Light values. One accent, and it is not a hue: `primary` is warm near-black ink; the pastel orbs are
+demoted to chart series and status speaks status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` | off-white `#f5f5f5` | the page floor — warm, never a cool gray-white |
+| `card` / `popover` | white `#ffffff` | cards and overlays float bright on the off-white canvas |
+| `foreground` | warm near-black `#0c0a09` | all primary ink |
+| `muted` / `secondary` | warm stone `#f0efed` | hover rows, subtle fills, secondary button fill |
+| `muted-foreground` | warm gray `#777169` | labels, captions, secondary text |
+| `border` / `input` | hairline `#e7e5e4` / stronger `#d6d3d1` | separators and grid lines / field edges |
+| `primary` | ink `#292524` | the one primary action (a pill); active nav; press deepens to `#0c0a09` |
+| `accent` | deep stone `#eae7e3` | selected/hovered rows — selection warms the stone, it does not colour it |
+| `ring` | ink `#0c0a09` | the focus outline — unmistakable, because keyboard-first |
+| `destructive` | red `#dc2626` | destructive actions and error state only |
+| `success` / `warning` | green `#16a34a` / amber `#d97706` | status signalling only, never chrome |
+
+The five pastels (mint, sky, lavender, peach, rose) live only in `chart-*` — never a button fill, text
+color, or surface; on operator surfaces they are data, not atmosphere.
+
+## 3 Typography
+
+Two families. `font-sans` is **Inter** — body, UI, table, label, and button. Page titles wear the editorial
+**serif** — Waldenburg Light at weight 300, EB Garamond the open substitute; the 64px hero display stays
+behind, but the light-serif voice is the brand's irreducible signature. `font-mono` is JetBrains Mono for
+IDs, codes, timestamps, log lines; numeric columns render `tabular-nums`. The brand **never bolds** — the
+serif holds 300; sans emphasis caps at `font-weight-strong` (500), 600 only on the uppercase eyebrow.
+
+| Step | Role | Family | Size · line | Weight · tracking |
+| --- | --- | --- | --- | --- |
+| h1 | page title | serif | 28px / 1.15 | 300 · `heading-tracking` |
+| h2 | section head | serif | 22px / 1.2 | 300 · -0.01em |
+| h3 | card / group head | sans | 16px / 1.35 | `font-weight-strong` · 0 |
+| body | UI + prose | sans | 15px / 1.5 | `font-weight-normal` · +0.01em |
+| small | labels, meta, dense table | sans | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow | sans | 12px / 1.4 | 600, +0.08em, uppercase |
+| code | IDs, logs, amounts | mono | 13px / 1.5 | `font-weight-normal` |
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled ink, a **pill** (`radius-scale` 9999) — the brand's signature, for the
+  one primary action. Secondary: `secondary` fill, 1px `border`, base `radius`. Ghost: `accent` on hover.
+- **Input** — `card` fill, 1px `input` border (`border-weight`), base `radius` (8px); focus thickens the
+  border to a 2px ink `ring`, no glow.
+- **Card** — `card` surface on a 1px `border`, base `radius` (12px for feature cards); shadow only when
+  lifted (`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 warms to `accent`.
+- **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`.
+
+## 5 Layout
+
+Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48 · 64` (the marketing
+96px rhythm stays behind). Shell dimensions map one-to-one to the layout primitives (sidebar 256/56px,
+topbar 64px — the brand's nav height, side panel 440/640px, modal 560px, forms 640px, tables full-width)
+— airier than a dense console, because the tier is `spacious`. Density is stepped per archetype by the
+surface catalog, never by absolute overrides.
+
+## 6 Depth
+
+Flat, hairline-first. Hierarchy comes from the stone ladder and warm hairlines, not shadow:
+
+- **0 — canvas** `background` (`#f5f5f5`), no border.
+- **1 — panel / card** `card` (white) on a 1px `border` — lifts off the canvas by brightness and hairline; shadow only when it must lift.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
+  drop (the brand's single `0 4px 16px rgba(0,0,0,0.04)` tier). Rank is border and position.
+
+Focus is a 2px ink `ring` (never a glow) on every element; z-levels: content, chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** anchor on the off-white `#f5f5f5` canvas with white cards — the warm floor is the brand.
+- **Do** keep the accent achromatic — the ink pill is the only action color, reserved for one action per surface.
+- **Do** wear the light serif (weight 300) on page titles, Inter body at +0.01em — the editorial dialect.
+- **Do** pill the primary CTA and badges (`radius-scale` 9999) — the brand's button geometry, kept
+  deliberately even though the operator floor would otherwise square it.
+- **Don't** introduce a saturated action color or a second accent; the pastels are chart data only
+  (`chart-*`), never fills, text, or surfaces.
+- **Don't** drop the body Inter to weight 300 to match the display — body stays 400/500 for legibility.
+- **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 | forms cap at `form-max-width`; tables and dashboards use the full width; breathing widens |
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Reach for the off-white `#f5f5f5` canvas with white cards; keep the accent achromatic — the ink pill is
+  the only action color, on the one primary action per surface. If two want it, one is not primary.
+- Page titles wear the light serif (Waldenburg Light / EB Garamond, weight 300) at reduced scale;
+  everything else is Inter, body at +0.01em. Never bold — the light display weight is the signature.
+- Pill the primary CTA and badges; keep every other component at the base 8px `radius`.
+- The five pastels are the chart palette only — leave the orbs and the 64px hero display behind.
+- Numeric columns `tabular-nums`; IDs / codes / timestamps `font-mono`; workflows keyboard-complete.
+- Stay flat and spacious — hairline and the stone ladder before shadow.

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

@@ -0,0 +1,148 @@
+---
+schema: design-md/v1
+product: Expo
+provenance: library
+sourced: 2026-07-04
+---
+
+# Expo — the operator reading
+
+Expo's marketing surface is a quietly-confident developer platform: a pure-white editorial canvas
+with a soft sky-blue gradient behind the hero and a centered MacBook + iPhone device composite as its
+chrome. This entry keeps the parts an operator tool can wear — the near-black ink, the single **pure
+black** brand voltage, the cool-neutral grays, the compact developer radii, and the Inter + JetBrains
+Mono type voice — and leaves the marketing devices behind: the sky-gradient wash, the device-mockup
+hero, the 64px display type, and the dark-inversion feature cards do not follow the brand onto a CRM,
+a build queue, or a dashboard.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. Flat and editorial: hierarchy is carried by hairline `border`, type
+weight, and near-black ink — never by heavy shadow (Expo ships a single very-soft drop). The one brand
+voltage is `primary` = **pure black `#000000`**, reserved for the single most important action on a
+surface; this is a deliberate brand override of the usual chromatic-accent floor (black is the only CTA
+fill Expo permits). The neutral ramp is a cool editorial gray anchored on ink `#171717`, so the whole
+UI reads engineered and restrained rather than warm. The anchor surface is a white content canvas
+beside a faintly off-white `sidebar`. Density is `standard` and steps denser per surface archetype.
+
+## 2 Color Roles
+
+Light values first (hex is the corpus's native format). One brand voltage — black `primary` — carries
+the primary action; a scoped link-blue serves inline references only; status hues speak only status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | pure white `#ffffff` | page, cards, and overlays — the dominant surface |
+| `foreground` | near-black ink `#171717` | all primary ink, display and body alike |
+| `muted` / `secondary` | soft neutral `#f0f0f3` | hover rows, subtle fills, secondary buttons, tiles |
+| `muted-foreground` | cool gray `#60646c` | labels, captions, secondary running text |
+| `border` / `input` | hairline-strong `#dcdee0` | card outlines, field edges, table grid lines |
+| `primary` | pure black `#000000` | the one primary action; active nav; press state `#1a1a1a` |
+| `accent` | neutral tint `#f0f0f3` | selected / hovered rows and nav (black has no light chroma tint) |
+| `ring` | ink `#171717` | the 2px focus outline — Expo focuses to ink, never a glow |
+| `destructive` | red `#dc2626` | destructive actions and error state only |
+| `success` / `warning` | green `#16a34a` / amber `#ab6400` | status signalling only, never chrome |
+
+The text-link blue `#0d74ce` is a scoped grace — inline body/reference links only, never a CTA or a
+chart-of-record accent (see §7). The sky-blue gradient (`#cfe7ff → #a8c8e8`) and the dark-inversion
+surfaces (`#171717` feature cards) are marketing devices; they carry no operator role.
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is Inter — UI, body, and headings all ride it; heading weight and
+negative tracking, not a second family, carry the editorial voice (display weight holds at 600, never
+700). `font-mono` is JetBrains Mono for IDs, codes, timestamps, and log lines. Numeric columns render
+`tabular-nums` so figures align down a column (floor P4).
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 18px / 1.4 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 16px / 1.4 | `font-weight-strong` · `heading-tracking` |
+| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
+| small | labels, meta, dense tables | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow | 11px / 1.4 | `font-weight-strong`, `+0.88px`, uppercase |
+| code | IDs, logs, snippets | 13px / 1.5 | JetBrains Mono, `font-weight-normal` |
+
+Bump weight for emphasis; never change size to emphasize. The 64/48/36px hero display steps stay
+behind — the operator ramp tops out at 24px.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled black `primary` on `primary-foreground`, `radius` (8px), no pill;
+  press darkens to `#1a1a1a`. Secondary: `secondary` fill, 1px `border`, `foreground`. Tertiary:
+  transparent, text-link blue label, inline only.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus thickens to a 2px
+  `ring` (ink) outline, no glow. Field height runs generous.
+- **Card** — `card` surface, 1px `border`, `radius` (12px for cards); the single soft drop appears only
+  when a card must lift off the canvas (`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 (floor P3).
+- **Badge** — pill (9999) with uppercase caption on a `muted` 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 · 20 · 24 · 32 · 48 · 64` (Expo keeps
+a 20px step for compact workflow rows). 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` and stepped per archetype by the
+surface catalog — never by absolute overrides. Expo's 96px marketing section rhythm stays behind.
+
+## 6 Depth
+
+Flat and editorial. Hierarchy comes from the surface ladder and hairlines, not shadow:
+
+- **0 — canvas** `background`, no border.
+- **1 — panel / card** `card` on a 1px `border`; the single soft drop `0 4px 12px rgba(0,0,0,0.04)`
+  only when a card must lift.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
+  shadow. Rank is border and position, never a heavier stacked shadow.
+
+Focus is a 2px `ring` outline in ink (never a glow), visible on every interactive element (floor P6).
+Three z-levels: content, sticky chrome, overlay. The sky-gradient backdrop and dark-inversion surfaces
+are marketing depth and do not appear in operator chrome.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve black `primary` for the single most important action on a surface; everything else is
+  neutral or status.
+- **Do** carry hierarchy with hairlines, weight, and whitespace — the brand is predominantly flat.
+- **Do** set CTAs and inputs at 8px `radius` and cards at 12px — the developer dialect.
+- **Do** apply `tabular-nums` to every numeric column and `font-mono` to IDs, codes, and timestamps.
+- **Don't** introduce a saturated brand action color — black is the only primary fill.
+- **Don't** put the text-link blue on a CTA or button; it is for inline references only.
+- **Don't** pill the primary CTA — pill geometry is reserved for badges.
+- **Don't** bring the sky-blue gradient, the device-mockup hero, or the 64px display into operator chrome.
+- **Don't** signal elevation with heavy drop shadows; one soft drop is the ceiling.
+
+## 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 list+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 for an operator surface wearing Expo:
+
+- Reach first for the black `primary` as the single action fill; keep every other control neutral on a
+  hairline `border`. If two things want the accent, one of them is not primary.
+- The text-link blue is a reference color only — inline links, breadcrumbs, entity cross-links. It
+  never fills a button and never leads a chart-of-record.
+- Carry IDs, codes, timestamps, and log lines in JetBrains Mono; every numeric column is `tabular-nums`.
+- Stay flat — hairline and weight before shadow. Reach past the single soft drop only for a real overlay.
+- Leave the marketing devices behind: no sky-gradient wash, no device-mockup hero, no 64px display
+  type, no dark-inversion feature cards. What carries is the palette, the cool-neutral temperature, the
+  8px/12px radius character, and the Inter + JetBrains Mono voice.
+- Every workflow completes from the keyboard; the ink `ring` focus outline is always visible (P6).

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

@@ -0,0 +1,141 @@
+---
+schema: design-md/v1
+product: Figma
+provenance: library
+sourced: 2026-07-04
+---
+
+# Figma — the operator reading
+
+Figma's marketing canvas is an editorial black-and-white frame interrupted by oversized pastel
+color-block sections and pill CTAs — storytelling devices that stay on the marketing site with the
+poster-scale display type. An operator surface inherits the *spine*: pure black ink on pure white, a
+warm off-white for panels, hairline depth over shadow, one saturated chromatic accent (Figma
+magenta), and the figmaSans/figmaMono type voice. It reads as a serious tool made by people who like
+color — monochrome, calm, dense-capable, the joyful pastels demoted to chart encodings.
+
+## 1 Visual Theme
+
+Light by default; dark is not documented and stays opt-in. Flat: hierarchy is carried by hairline
+`border`, type weight, and the black/white contrast itself — never by heavy shadow, which the brand
+avoids by design. The spine is monochrome — pure black `foreground` on pure white `background`, with a
+faintly warm off-white `muted`/`sidebar`. A single chromatic accent, Figma magenta, is reserved and
+scarce: it carries the focus `ring` and active indicators, nothing decorative. The primary action
+fills black — Figma's own primary is achromatic — so magenta stays a single-shot pop. Density is
+`standard` and steps denser per archetype; the roomy 8px rhythm keeps it friendly, not cramped.
+
+## 2 Color Roles
+
+Light values first. The neutral spine is genuinely monochrome; magenta is the one chromatic hue that
+carries meaning, and the pastels appear only as chart series.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | white `#ffffff` | page, cards, and overlays — the dominant surface |
+| `foreground` | pure black `#000000` | all primary ink — headlines, body, labels |
+| `muted` / `secondary` | warm off-white `#f7f7f5` | hover rows, tile fills, secondary buttons, the sidebar ground |
+| `muted-foreground` | neutral gray `#666666` | labels, captions, table meta — the secondary ink role |
+| `border` / `input` | hairline `#e6e6e6` | every separator, grid line, and field edge |
+| `primary` | black `#000000` | the one primary action; active-nav fill; selected tab |
+| `accent` | pale magenta `#ffe4ef` | selected / hovered rows and nav — a tint, never a fill |
+| `ring` | magenta `#ff3d8b` | the focus outline and active indicator — the single chromatic pop |
+| `destructive` | red `#eb5757` | destructive actions and error state only |
+| `success` / `warning` | green `#1ea64a` / amber `#f2994a` | status signalling only, never chrome |
+
+The pastel color blocks (lime, lilac, cream, mint, pink, coral, navy) are marketing surfaces — no
+operator role, reappearing only as `chart-*` encodings (§7). Figma's marketing refuses a mid-gray text
+role; an operator surface needs one, so `muted-foreground` is a derived neutral gray, AA on white.
+
+## 3 Typography
+
+One sans, one mono — a single voice that flexes by weight, not a multi-family stack. `font-sans`
+substitutes for the proprietary figmaSans (Inter matches its fine variable-weight axis); the UI, body,
+and headings all ride it, weight and negative tracking carrying the display voice. `font-mono`
+substitutes for figmaMono — reserved for IDs, codes, timestamps, log lines, and uppercase
+eyebrow/caption labels, never body. Numeric columns render `tabular-nums`.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.3 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 18px / 1.35 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 15px / 1.4 | `font-weight-strong` · `heading-tracking` |
+| body | UI + prose | 14px / 1.45 | `font-weight-normal` |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| eyebrow / caption | uppercase mono label | 12px / 1.3 | `font-mono`, `+0.05em`, uppercase |
+
+Bump weight one step for emphasis; never change size — weight, not scale, carries hierarchy. The
+poster-scale 86px/64px display steps and their aggressive negative tracking stay on the marketing site.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled black `primary` on white `primary-foreground`, `radius`, no pill.
+  Secondary: `secondary` fill, 1px `border`, `foreground`. Ghost: transparent, `accent` on hover.
+  Icon-only buttons stay circular (`radius-scale` full, 9999) — the one marketing shape that carries.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the magenta `ring` at 2px, no fill change and no glow.
+- **Card** — `card` surface, 1px `border`, `radius`, inset by `density-inset`; shadow only when it must lift (`shadow-intensity`); large feature cards may take the large radius step.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on numeric columns; selection tints `accent` with a magenta `ring` indicator.
+- **Side panel** — detail and edit open beside the work (`side-panel-width`, `side-panel-width-rich` for content-heavy), not over it.
+- **Badge** — hairline `border`, `muted`/status fill, uppercase mono caption; status badges take `success` / `warning` / `destructive`, never `primary` or magenta.
+
+## 5 Layout
+
+Base spacing unit 8px (Figma's grid); the on-scale ramp is `4 · 8 · 12 · 16 · 24 · 32 · 48 · 96`.
+Shell dimensions map one-to-one to the layout primitives: sidebar `sidebar-width-expanded` /
+`sidebar-width-collapsed`, topbar `topbar-height` (56px — Figma's own nav 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` (through `density-gap`) and stepped
+per archetype by the surface catalog — never absolute overrides. The 96px section rhythm stays behind.
+
+## 6 Depth
+
+Flat and shadow-light. Hierarchy comes from the surface ladder, hairlines, and the black/white
+contrast — not shadow:
+
+- **0 — canvas** `background`, no border.
+- **1 — panel / card** `card` on a 1px `border`; shadow only when it must lift off the canvas.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
+  shadow (roughly `0 4px 16px rgba(0,0,0,0.06)`). Rank is border and position, never a heavier shadow.
+
+Focus is a 2px magenta `ring` outline (never a glow), visible on every interactive element — the one
+chromatic surface the keyboard-first operator sees constantly. Three z-levels: content, chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve black `primary` for the single most important action on a surface; everything else is
+  neutral or status.
+- **Do** keep magenta scarce — the focus `ring` and small active indicators only. It is a single-shot
+  accent, not a fill or a text color.
+- **Do** carry hierarchy with hairlines, weight, and whitespace — the brand is emphatically flat, and
+  apply `tabular-nums` to numeric columns and `font-mono` to IDs, codes, and timestamps.
+- **Don't** reach for the pastel color blocks as UI chrome; they are marketing surfaces and appear
+  operator-side only as `chart-*` series.
+- **Don't** pill the primary CTA or reach for a radius outside `radius-scale` — pills stay on the
+  marketing site.
+- **Don't** introduce a second chromatic accent, spend magenta on body text or a whole fill, or signal
+  elevation with heavy drop shadows.
+
+## 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 list+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 spine, not the marketing: pure black on white, warm off-white panels, hairline depth. The
+  color blocks, pill CTAs, and 86px display type stay behind.
+- Primary action fills black. If two things want the black fill, one of them is not primary.
+- Magenta is single-shot: the focus `ring` and active indicators only — never a fill, never body text.
+- Icon-only buttons stay circular; every other control uses the base `radius`.
+- Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`.
+- The pastels live only in charts (`chart-1..5`); stay flat — hairline and weight before shadow, and
+  reach past a hairline only for a real overlay.