@nurix/etna 0.18.19 → 0.18.21

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

@@ -0,0 +1,139 @@
+---
+schema: design-md/v1
+product: Wired
+provenance: library
+sourced: 2026-07-04
+---
+
+# Wired — the print-editorial, black-on-white operator reading
+
+An operator translation of Wired's design language — a flagship technology magazine ported to the
+screen. The marketing theatre stays behind: the 64px `WiredDisplay` cover headline, the full-bleed
+16:9 hero photography, the magazine story grid. What carries is the chassis underneath — a strict
+black-on-white duet with no chromatic accent, square geometry on every control, hairline-only
+elevation, and an editorial three-face type voice where a serif carries the page title over the sans
+that runs the chrome.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. Pure and unmistakable: black ink on a white canvas, the way a printed
+page reads. Flat — hierarchy is the `border` hairline, type weight, and stark ink contrast, never
+shadow (the brand uses none). The single "accent" is black itself (`primary`), reserved for the
+wordmark, the one CTA, and active nav; there is no chromatic accent in the chrome. Temperature is
+dead-neutral — every gray a true achromatic gray, colder than any tinted-slate tool. Geometry is
+square: `radius` 0 on every control, the non-negotiable signature. The anchor is a white canvas beside
+a white `sidebar` split by a hairline; density is `standard`, the breathing riding type, not rows.
+
+## 2 Color Roles
+
+Light values. A deliberate black-and-white duet: `primary` is black, the sole chromatic grace (link
+blue) is text-links only, and status hues are derived (the brand ships none), kept deep to sit under
+the austerity.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | white `#ffffff` | page, cards, and overlays — the dominant surface |
+| `foreground` | pure black `#000000` | every headline and every line of ink — the brand override (see §7) |
+| `muted` / `secondary` | canvas-soft `#f5f5f5` | hover rows, subtle fills, secondary button — the brand's single soft tint |
+| `muted-foreground` | body gray `#757575` | bylines, timestamps, labels, secondary metadata |
+| `border` | hairline `#e0e0e0` | every divider, story-row rule, table grid line, and card edge — the brand's only "line" |
+| `input` | black `#000000` | the field edge — Wired's square black-bordered input is a signature (dividers stay hairline) |
+| `primary` | black `#000000` | the one CTA fill; the wordmark; active nav; the heavy-border moment |
+| `accent` | canvas-soft `#f5f5f5` | selected / hovered rows and nav — selection tints, never colours |
+| `ring` | black `#000000` | the 2px focus outline — it IS the brand's heavy black border, put to keyboard use |
+| `destructive` | deep red `#c1121f` | destructive actions and error state only |
+| `success` / `warning` | green `#1a7f37` / amber `#b45309` | status signalling only, never chrome |
+
+The link blue `#057dbc` is the one chromatic grace — inline text-links only, never a button, nav, or
+focus ring. It survives in the chart ramp (`chart-2`) as the single accent series; every other is gray.
+
+## 3 Typography
+
+Three faces, three roles — the editorial ladder. `font-sans` is Apercu (Inter fallback), the humanist
+sans that runs all chrome: nav, labels, buttons, metadata, table cells, dense body. Page titles wear
+the **serif** — `WiredDisplay` shading into `BreveText`; *Playfair Display* / *Lora* the open
+substitutes — applied to h1/h2 by hand at operator scale, never the 64px hero. `font-mono` is derived
+(the corpus ships none) for IDs, codes, timestamps; numeric columns render `tabular-nums`.
+
+| Step | Role | Family | Size · line | Weight · tracking |
+| --- | --- | --- | --- | --- |
+| h1 | page title | serif | 32px / 1.1 | 400 · `heading-tracking` |
+| h2 | section head | serif | 26px / 1.08 | 400 · `heading-tracking` |
+| h3 | card / group head | sans | 17px / 1.3 | `font-weight-strong` · 0 |
+| body | UI + prose | sans | 14px / 1.4 | `font-weight-normal` |
+| small | labels, meta, dense table | sans | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow / category | sans | 12px / 1.3 | `font-weight-strong`, `+0.02em`, uppercase |
+| code | IDs, logs, amounts | mono | 13px / 1.5 | `font-weight-normal` |
+
+Two weights only: sans emphasis 700, serif heading 400 — **never** promote the display past 400, its
+elegance is the typeface, not the weight.
+
+## 4 Component Stylings
+
+- **Button** — `primary`: filled black on `primary-foreground`, `radius` 0 (a sharp rectangle), never a
+  pill. Secondary is the brand outline: `background` fill, 1px ink `border`. Ghost: `accent` on hover.
+- **Input** — `background` fill, 1px `input` (black) border, `radius` 0; focus draws the black `ring` at
+  a full 2px with 1px offset, no glow. Standalone fields wear the black edge; inline table-edit cells
+  relax to the `border` hairline.
+- **Card** — `card` surface, no shadow; hierarchy is the 1px `border` hairline alone, `radius` 0.
+- **Table row** — height `table-row-height`; `border` hairline 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`),
+  beside the work, not over it; it lifts by a 2px `border`, never a shadow.
+- **Badge** — square (`radius` 0), hairline `border`, `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`. Shell dimensions
+map one-to-one to the layout primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`,
+topbar `topbar-height` (the thin masthead band), side panel `side-panel-width` / `side-panel-width-rich`,
+modal `modal-width-max`, forms `form-max-width`, tables full-width in a wide ~1400px container. Density
+is governed globally by `density-tier` and stepped per archetype — never by absolute overrides.
+
+## 6 Depth
+
+Flat, and emphatically so — the brand uses zero drop-shadows. Hierarchy is the surface duet and
+hairlines, across three z-levels (content, sticky chrome, overlay):
+
+- **0 — canvas** `background`, no border. Almost every surface lives here.
+- **1 — hairline** `card` / row / input on a 1px `border` (`#e0e0e0`) — the brand's only elevation cue.
+- **2 — heavy black border** a 2px `border` at ink for the moment that must stand off the page — a
+  floated overlay, the side panel, the modal; rank is border weight and position, never a shadow.
+
+Focus reuses that heavy black border: a 2px black `ring` outline (never a glow) on every interactive
+element, put to keyboard work.
+
+## 7 Do's & Don'ts
+
+- **Do** hold the strict black-on-white duet — pure-black `foreground` on `#ffffff` canvas is a
+  deliberate brand override of the usual near-black default; keep it.
+- **Do** keep `radius` at 0 on every button, input, card, and badge; the only round shape is a circular
+  icon container. Carry elevation with the `border` hairline (or the 2px black border), never a shadow.
+- **Don't** introduce a chromatic brand accent — link blue is text-links only, never a button, nav, or
+  focus ring; the chrome accent is black.
+- **Don't** round a corner, bold the serif past 400, drop a soft shadow, or open detail in a modal when
+  the side panel fits.
+
+## 8 Responsive
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; h1 32 → 26; 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:** the strict black-on-white duet; pure-black ink and CTA; the dead-neutral achromatic
+  grays; square `radius` 0 geometry; hairline-and-black-border elevation (zero shadow); the Apercu sans
+  for all chrome with the editorial serif on page titles; the scarce link blue for text links only.
+- **Stays behind:** the 64px `WiredDisplay` cover hero; the full-bleed 16:9 story photography; the
+  magazine cover-grid; the relaxed 2.2 byline line-height; the campaign-only heavy-border theatrics.
+- Lead every list with its table and every entity with its primary read — not chrome. The accent is
+  black; if something wants colour it wants weight or a hairline, and link blue stays on text links.
+- Keep every control square; page titles wear the serif (never bolded past 400), everything else Apercu
+  sans; `tabular-nums` on numeric columns, `font-mono` on IDs / codes / timestamps.
+- Every workflow completes from the keyboard, the 2px black `ring` always visible; stay flat — hairline
+  and the black border before anything, the brand owns no shadow.

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

@@ -0,0 +1,137 @@
+---
+schema: design-md/v1
+product: Wise
+provenance: library
+sourced: 2026-07-04
+---
+
+# Wise — the operator reading
+
+A global money-transfer brand distilled to one idea for internal tools: a single lime-green action
+color against a warm sage surface ladder, near-black olive ink, and generously rounded cards. This
+is a deliberate operator reading of Wise — the friendly-fintech temperature carried onto a payments
+console, a transfers queue, a settlement dashboard — with the marketing skin left behind.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. The defining move is the **surface ladder**: a warm sage `background`
+(`#e8ebe6`) with white `card` surfaces lifting off it — surface contrast, not shadow, carries elevation
+(the brand's own stated depth model). Flat throughout: hierarchy is sage/white contrast, warm hairlines,
+and type weight. A single accent — Wise lime `primary` (`#9fe870`) on black `primary-foreground` — is
+reserved for the one action that matters; ink is near-black olive `foreground` (`#0e0f0c`). The chrome
+is white (top nav, sidebar) beside the sage content canvas, echoing Wise's white nav over sage bands.
+Density is `standard` — the brand breathes, so the operator read holds an honest tier.
+
+## 2 Color Roles
+
+Light values. One accent: `primary` lime carries brand meaning; the two greens are disciplined apart
+(lime is the action, positive green is status), and the tertiary orange `#ffc091` / cyan `#38c8ff`
+are illustration graces that survive only as chart hues, never UI accents.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` | sage `#e8ebe6` | the content canvas — the brand's defining surface; cards lift off it |
+| `card` / `popover` | white `#ffffff` | panels, cards, overlays — the bright surface that lifts off the sage |
+| `foreground` | near-black olive `#0e0f0c` | all primary ink and headings |
+| `muted` | faint sage `#eef1ea` | table-row hover, quiet fills — one step between white card and sage canvas |
+| `muted-foreground` | warm gray `#454745` | labels, captions, secondary text (lowest-priority meta drops to `#868685`) |
+| `border` | sage hairline `#d4d8d2` | every separator and grid line — a soft sage line, not an ink rule |
+| `input` | ink `#0e0f0c` | the field edge — Wise's signature 1px ink-outlined input, kept as a brand override |
+| `primary` | Wise lime `#9fe870` | the one primary action, active nav indicator, the brand mark — nowhere else |
+| `primary-foreground` | black `#0e0f0c` | text/icon on the lime fill — never white on lime |
+| `accent` | pale green `#e2f6d5` | selected/hovered rows and nav — a soft brand tint, never a lime wash |
+| `ring` | forest `#163300` | the focus outline — the deep brand green, because lime is too light to read as a ring |
+| `destructive` | red `#d03238` | destructive actions and error state only |
+| `success` / `warning` | green `#2ead4b` / amber `#b86700` | status only — success is a truer green than the lime CTA; warning is the legible warning-deep, not the bright `#ffd11a` |
+
+## 3 Typography
+
+One sans carries the operator UI. `font-sans` is **Inter** — the brand's actual second face, workhorse
+for body, sub-display, labels, and UI. Wise Sans (the weight-900 geometric display) reads bombastic at
+operator scale, so it stays behind; headings hold the brand's semibold sub-display weight (600).
+`font-mono` is JetBrains Mono for IDs, codes, timestamps; amount and numeric columns render
+`tabular-nums` (Inter carries `tnum`) — the number legibility a money product depends on.
+
+| 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` · -0.01em |
+| h3 | card / group head | 16px / 1.4 | `font-weight-strong` · 0 |
+| body | UI + prose | 16px / 1.5 | `font-weight-normal` |
+| small | labels, dense table | 14px / 1.4 | `font-weight-normal` |
+| caption | fine print, eyebrow | 12px / 1.35 | `font-weight-normal` |
+| number | amounts, IDs | 16px / 1.4 | `font-mono` · `tabular-nums` |
+
+Emphasize by weight (400 → 600) or size, never a third family. Negative heading tracking echoes the
+brand's Inter sub-displays; the 900-weight hero display is not part of the operator voice.
+
+## 4 Component Stylings
+
+Every recurring component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled lime on black `primary-foreground`, `radius`, rounded but not the 24px pill. Secondary: sage `secondary` fill, `foreground`. Tertiary: white fill, 1px ink `input` border.
+- **Input** — white `card` fill, 1px ink `input` border (`border-weight`), `radius`; focus draws the forest `ring` at 2px, no glow. The bold ink edge is the Wise form signature.
+- **Card** — white `card` lifting off the sage canvas by contrast, not shadow; `radius` (scale offers
+  16/24px for larger cards); optional sage hairline; inset by `density-inset`.
+- **Table row** — height `table-row-height`; sage `border` grid lines; `muted` on hover; `accent` on
+  selection; `tabular-nums` on amount columns; `font-mono` on IDs and reference codes.
+- **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, status tint; the brand's positive badge is pale-green `accent` fill with forest text; status badges take `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` (the marketing 96px 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` (56px), side panel `side-panel-width`
+(440px) / `side-panel-width-rich` (640px), modal cap `modal-width-max`, forms `form-max-width`, tables
+full-width. Density is governed globally by `density-tier` and stepped per archetype, never by overrides.
+
+## 6 Depth
+
+Flat, surface-contrast-first. Hierarchy comes from the sage/white ladder and warm hairlines, not shadow:
+
+- **0 — canvas** `background` (sage `#e8ebe6`), no border.
+- **1 — panel / card** white `card` lifting off the sage by contrast — the brand's primary elevation
+  cue; a soft `border` hairline where a card sits on white.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
+  shadow. Rank is contrast and position, never a heavier shadow.
+
+Focus is a 2px forest `ring` (`#163300`) outline, never a glow, on every interactive element; three z-levels (content, sticky chrome, overlay).
+
+## 7 Do's & Don'ts
+
+- **Do** reserve lime `primary` for the single most important action, the active-nav indicator, and the
+  brand mark — nowhere else; keep black `primary-foreground` on the fill.
+- **Do** anchor on the sage/white surface ladder — white cards lifting off the sage canvas IS the
+  brand's elevation; carry rank with contrast and hairline before any shadow.
+- **Do** keep the two greens apart — lime is the action, positive `#2ead4b` is success status. Carry amounts in `tabular-nums`, IDs/codes in `font-mono`.
+- **Don't** promote a second brand accent (orange/cyan are chart graces), wash a selected row in lime
+  (use the pale-green `accent`), or pair the lime CTA with a green surface — lime sits on neutral only.
+- **Don't** render controls with sharp corners, signal elevation with heavy shadow, or reach for the
+  900-weight hero stencil in operator chrome (headings hold semibold 600).
+
+## 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; amount tables scroll horizontally; 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; the sage canvas widens |
+
+## 9 Agent Prompt Guide
+
+- Anchor on the sage/white surface ladder — sage `background`, white `card` lifting off it by contrast;
+  reach for shadow only on a true overlay.
+- Accent only the primary action in lime; black on lime, never white. Hold the two-green discipline —
+  lime `primary` is the action, positive `#2ead4b` is success status, never interchanged.
+- Every amount/numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`. Every
+  workflow completes from the keyboard; the forest `ring` outline is always visible.
+- Keep the rounded friendliness (12px `radius`, never sharp corners) and the bold ink input edge, but
+  not the 24px marketing pill.
+- Leave the marketing skin behind: Wise Sans 900 hero display, the 64–126px scale, the 24px pill CTA,
+  the currency-converter widget, the polarity-flipped dark bands, and illustrative SVGs. What carries:
+  the sage/white temperature, the lime accent, the olive ink, the moderate radius, the Inter voice, and
+  the tabular number discipline.

package/data/harnesses/code/skills/design/data/design-md/library/x-ai.md

@@ -0,0 +1,138 @@
+---
+schema: design-md/v1
+product: xAI
+provenance: library
+sourced: 2026-07-04
+---
+
+# xAI — the engineered-cosmic monochrome operator design
+
+xAI's web surface is a near-black cosmic canvas broken only by white outline pills, a proprietary
+geometric sans (Universal Sans) at weight 400 with extreme negative tracking, and uppercase tracked
+GeistMono eyebrows that read like code comments — confidently sparse, unmarketed. This entry is the
+*operator* reading of that brand: an internal tool (model-ops console, agent-run queue, inference
+dashboard, log stream) in xAI's language. What carries: the stark near-monochrome discipline, the
+near-black `#0a0a0a` ink, the single sunset-orange accent held scarce, the pill shape on interactive
+controls, the geometric-sans display voice (weight 400, negative tracking, never bold), the mono-caps
+eyebrow, and hairline-only flat depth. What stays behind: the 96px hero display, the edge-to-edge black
+page, and the sunset/dusk gradient illustration accents.
+
+**Light surface, cosmic inlay.** Inverting the whole page to near-black would be
+dark-mode-as-default, which the light floor refuses; instead the operator surface is a cool
+near-white canvas, and xAI's signature near-black is carried as the **cosmic inlay** — the sidebar
+rail and the terminal / log / metric panels.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. The content floats on a faint cool near-white `background`
+(`#fbfbfc`); cards step up to pure white `card` (`#ffffff`), so a panel reads by a hair of brightness
+plus its hairline, never by shadow. Emphatically flat — the brand uses no shadows; cool hairline
+`border`, type weight, and the near-white-to-white step carry every elevation cue. A single accent,
+sunset orange `primary` (`#ff7a17`) — xAI's one brand chroma — is held scarce: the primary action, the
+focus `ring`, the active-nav indicator. Ink is xAI's stark near-black `foreground` (`#0a0a0a`), which
+returns as the cosmic inlay — a near-black `sidebar` rail and dark terminal / metric panels. Density is
+`standard`, engineered-tight, stepping denser per archetype.
+
+## 2 Color Roles
+
+Light values. One accent — `primary` is the only chromatic hue that carries UI meaning; the cosmic
+accent palette lives only in charts (§7), status hues speak only status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` | cool near-white `#fbfbfc` | the page floor and content canvas — the dominant surface |
+| `card` / `popover` | pure white `#ffffff` | cards and overlays — a slight bright lift off the near-white, read by hairline |
+| `foreground` | stark near-black `#0a0a0a` | display and all primary ink — xAI's signature black |
+| `muted` / `secondary` | cool light fill `#f2f3f5` | hover rows, quiet band tints, secondary-button fill |
+| `muted-foreground` | cool gray `#7d8187` | labels, captions, secondary text — the brand's mute gray |
+| `border` / `input` | cool hairline `#e6e7ea` | every separator, grid line, and field edge — one cool step, not an ink line |
+| `primary` | sunset orange `#ff7a17` | the one primary action; the focus `ring`; the active-nav indicator |
+| `primary-foreground` | near-black `#0a0a0a` | text on the sunset action — near-black reads on the bright orange (the brand's on-primary) |
+| `accent` | cool selection lift `#eceef1` | selected / hovered rows and nav — a neutral cool step, never orange |
+| `ring` | `primary` sunset | the focus outline — high-chroma, unmistakable even at 1px |
+| `destructive` | clean red `#e5484d` | destructive actions and error state only |
+| `success` / `warning` | green `#30a46c` / amber-gold `#d99126` | status signalling only, never chrome |
+
+## 3 Typography
+
+`font-sans` is Universal Sans (the proprietary geometric brand face), with Inter the corpus's documented
+open substitute — one sans carries body, UI, labels, and headings. `font-mono` is Geist Mono for IDs,
+codes, timestamps, log lines, metric counters, and — the signature move — the uppercase tracked
+**eyebrow** above every section head; numeric columns render `tabular-nums`. The defining trait is xAI's
+restraint: the display sits at weight 400 with aggressive negative tracking (never bold — size and
+gathering do the emphasis). The 96px hero stays behind; an operator surface tops out at a 24px title.
+
+| Step | Role | Family | Size · line | Weight · tracking |
+| --- | --- | --- | --- | --- |
+| h1 | page title | sans | 24px / 1.2 | `font-weight-normal` (400) · `heading-tracking` |
+| h2 | section head | sans | 19px / 1.3 | `font-weight-normal` (400) · -0.02em |
+| h3 | card / group head | sans | 15px / 1.4 | `font-weight-strong` (500) · 0 |
+| body | UI + prose | sans | 14px / 1.5 | `font-weight-normal` |
+| small | labels, meta, dense table | sans | 13px / 1.4 | `font-weight-normal` |
+| eyebrow | uppercase mono label | mono | 12px / 1.4 | 400, `+0.12em`, uppercase (GeistMono) |
+| code | IDs, logs, amounts | mono | 13px / 1.5 | `font-weight-normal` |
+
+Keep the display at 400 with gathered negative tracking — it is the brand; never bold it, and keep the eyebrow mono, not sans.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+- **Button** — primary: filled sunset `primary` on near-black `primary-foreground`, **pill radius** (the pill is xAI). Secondary: white `card`, 1px `border`, `foreground`, pill. Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius` (8px, not pilled); focus draws the sunset `ring` at 1px, no glow.
+- **Card** — white `card` surface on a 1px `border` — the bright step off the near-white carries the lift; `radius` 8px; 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 lifts to `accent`; column headers wear the mono-caps eyebrow.
+- **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, `muted`/status fill, uppercase mono caption; status badges take `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing unit 4px; the on-scale ramp is xAI's exact set — `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64`.
+Shell dimensions map one-to-one to the layout primitives: sidebar `sidebar-width-expanded` (240px) /
+`sidebar-width-collapsed` (56px), topbar `topbar-height` (52px, the brand's lean nav), side panel
+`side-panel-width` (420px) / `side-panel-width-rich` (640px), modal cap `modal-width-max`, forms
+`form-max-width`, tables full-width — engineered-tight, not editorial-loose. 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 — the brand uses no shadows. Depth comes from the surface step, cool hairlines, and the cosmic inlay:
+
+- **0 — canvas** `background` (`#fbfbfc`), no border.
+- **1 — panel / card** white `card` (`#ffffff`) on a 1px `border`; the bright step plus the hairline carries the lift. Selected / hover rows lift to `accent` (`#eceef1`).
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns the faintest lift, enough to float above the near-white. Rank is surface, border, and position.
+- **inlay — cosmic near-black** `#0a0a0a` with `#dadbdf` text and `font-mono` — the sidebar rail and terminal / log / metric panels, xAI's white-on-near-black soul carried into a light UI.
+
+Focus is a 1px sunset `ring` outline (never a glow), visible everywhere because the orange is high-chroma; three z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** stay near-monochrome — near-black ink on cool near-white, hairlines and type weight before any color; the restraint is the brand.
+- **Do** reserve sunset orange `primary` for the single primary action, the focus `ring`, and the active-nav indicator — its scarcity is what reads as voltage.
+- **Do** pill the interactive controls (buttons, chips, badges) — the pill is xAI's shape system; keep cards, inputs, and panels at the 8px `radius`.
+- **Do** keep the display at weight 400 with negative tracking, wear GeistMono uppercase for eyebrows and metric counters, and render every code / log / terminal surface in `font-mono` with `tabular-nums`.
+- **Don't** bold the display — weight 400 is the whole scale; component heads and labels earn 500 at most.
+- **Don't** promote a second chromatic accent — the dusk / twilight / breeze cosmic hues are chart series only, and status stays `success` / `warning` / `destructive`; keep the amber-gold warning distinct from the sunset primary.
+- **Don't** signal elevation with drop shadows, or turn the whole page near-black — the near-black is the sidebar and terminal inlay, not the operator canvas.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440.
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | sidebar → off-canvas drawer (stays near-black); 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:
+
+- Reach for the cool near-white canvas first, near-black ink on top — the operator page is light; the near-black is the sidebar rail and terminal / metric inlays, never the whole page.
+- Spend sunset 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.
+- The display sits at weight 400 with negative tracking — the geometric-sans voice; never bold it. Component heads and labels earn the restrained 500. Emphasise by size and gathering, not weight.
+- The eyebrow above every section head is GeistMono, uppercase, positively tracked — the code-comment label. Every numeric column is `tabular-nums`; every ID / code / timestamp / metric counter is `font-mono`.
+- Pill the buttons, chips, and badges — the pill is xAI's shape system; keep cards, inputs, and panels at the 8px radius. Dress terminal, log, and metric panels in the near-black cosmic inlay (`#0a0a0a`, `font-mono`).
+- Depth is the surface step and cool hairlines, never shadow; the brand uses none. Reach for the faint overlay lift only for a true modal or popover. Detail and edit go in the side panel beside the work.
+- Keyboard-first: the sunset `ring` focus outline is always visible. Leave behind the 96px hero display, the edge-to-edge black page, and the sunset / dusk gradient accents.

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

@@ -0,0 +1,158 @@
+---
+schema: design-md/v1
+product: Zapier
+provenance: library
+sourced: 2026-07-04
+---
+
+# Zapier — the operator reading
+
+The operator translation of Zapier's workflow-automation brand. Zapier's public surface is
+confidently warm — a cream canvas, deep coffee ink, one saturated orange CTA, and a two-face type
+system (Degular Display for hero moments, Inter for the rest). This entry keeps what survives at
+operator scale: the cream temperature, the single orange accent, the coffee ink, the recessed
+cream-card elevation, the 12px middle-radius signature, and Inter as the workhorse. The 56px Degular
+hero, the dark coffee-ink polarity-flip bands, and the 64px rhythm stay behind — warm where the
+category runs cool, but earning its density and reserving its one accent.
+
+## 1 Visual Theme
+
+Warm by default; dark is opt-in. The canvas is Zapier's warm-cream `background` (`#fffefb`) — a
+deliberate off-white, never the pure white the category defaults to (it reads light, so the
+light-default floor holds — it is simply warm). Flat: hierarchy comes from warm hairline `border`, the
+recessed cream-card surface ladder, and type weight, never heavy shadow. A single accent, Zapier orange
+`primary` (`#ff4f00`), is reserved for the one action that matters; ink is deep coffee `foreground`
+(`#201515`), never pure black. Corners hold the brand's signature 12px middle radius — neither
+friendly-pill nor technical-square. Density is `standard`; the anchor is a bright cream canvas holding
+faintly recessed cream cards.
+
+## 2 Color Roles
+
+Light values. One accent: `primary` is the only chromatic hue that carries meaning; status hues
+speak only status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `popover` | warm cream `#fffefb` (canvas) | page and overlays — the brightest surface |
+| `card` | recessed cream `#f8f4f0` (canvas-soft) | content cards / inset panels — a step below canvas, elevation by surface contrast |
+| `foreground` | deep coffee `#201515` (ink) | all primary ink and headings; never pure black |
+| `muted` / `secondary` | soft cream `#f1ece4` | hover rows, subtle fills, secondary button fill |
+| `muted-foreground` | warm gray `#605d52` (body) | labels, captions, secondary text |
+| `border` | warm hairline `#e9e2d8` | separators, grid lines, card edges |
+| `input` | coffee ink `#201515` | form-field edges — the brand's bold ink-bordered field |
+| `primary` | Zapier orange `#ff4f00` | the one primary action; active nav; the single conversion voltage |
+| `accent` | pale orange `#ffe9e0` | selected/hovered rows and nav — a whisper of brand warmth |
+| `accent-foreground` | burnt orange `#b83900` | ink on the accent tint |
+| `ring` | `primary` orange | the focus outline — unmistakable, because keyboard-first |
+| `destructive` | brick red `#c0362c` | destructive actions and error state only — distinct from the orange |
+| `success` / `warning` | green `#3f8f5a` / gold `#c88a1e` | status signalling only, never chrome |
+
+The warm-neutral ladder runs coffee-ink → body `#605d52` → body-mid `#939084` → mute `#c5c0b1`: every
+neutral carries warmth, none is cool gray. The dark coffee polarity-flip (dark hero/feature bands, dark
+footer) is a marketing device and stays behind (see §7).
+
+## 3 Typography
+
+`font-sans` is **Inter** — the brand's actual workhorse (sub-display, body, button, label) and, at
+operator scale, the whole ramp; its display steps track slightly negative, which is what carries. The
+proprietary Degular Display carries only hero-scale loud moments (56px, weight 500) and stays behind.
+`font-mono` is derived — the corpus ships none, but zap IDs, run IDs, webhook payloads, and log
+timestamps need one. Numeric columns render `tabular-nums`; headlines stay sentence-case.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 20px / 1.3 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 16px / 1.35 | `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 | 13px / 1.3 | `font-weight-strong`, +0.06em, uppercase |
+
+The eyebrow keeps **positive** tracking — the corpus's signature label style (Degular +1px at 14px),
+carried on Inter uppercase. Emphasize by weight, never size, never past 600 (the corpus 700 is
+display-micro and stays behind).
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — filled orange on `primary-foreground` (warm white), `radius` (12px), no pill. Secondary:
+  `secondary` cream fill, 1px `border`. Tertiary/outline: transparent, bold ink border. Ghost: `accent`
+  on hover.
+- **Input** — `background` fill, 1px `input` (coffee-ink) border (`border-weight`), `radius` at the 6px
+  scale step; focus draws the orange `ring` at 2px, no glow.
+- **Card** — recessed `card` cream on the brighter canvas (surface-contrast elevation); 1px `border` for
+  a grid edge; shadow only when a card truly floats; 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** — 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 · 24 · 32 · 48 · 64` (the corpus
+tokens; the 64px marketing band padding stays behind). Shell dimensions map one-to-one to the layout
+primitives: sidebar `sidebar-width-expanded` (256px) / `sidebar-width-collapsed` (56px), topbar
+`topbar-height` (56px), side panel `side-panel-width` (440px) / `side-panel-width-rich` (640px), 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 — never by absolute overrides.
+
+## 6 Depth
+
+Flat, surface-contrast-first. Hierarchy comes from the recessed cream ladder and warm hairlines:
+
+- **0 — canvas** `background` (`#fffefb`), no border.
+- **1 — panel / card** recessed `card` cream (`#f8f4f0`) — surface contrast carries the elevation; a 1px
+  `border` where a grid edge is wanted. Emphasized outlines take the bold ink border.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
+  shadow, over a scrim for modals. Rank is surface, border, and position, never a heavier shadow.
+
+Focus is a 2px orange `ring` outline (never a glow) on every interactive element. Three z-levels:
+content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** anchor on the warm cream canvas (`#fffefb`) — pure white loses the brand; keep coffee ink
+  `#201515`, never pure black. The temperature is the voice.
+- **Do** reserve orange `primary` for the single most important action — orange + cream + coffee is the
+  whole conversion story; everything else is neutral or status.
+- **Do** keep corners at the 12px middle radius on buttons and cards; inputs step to 6px, badges pill.
+- **Do** apply `tabular-nums` to numerics with `font-mono` for IDs, run codes, and timestamps.
+- **Don't** render the CTA as a pill or a square — the 12px rounded rectangle is the signature.
+- **Don't** promote a second chromatic accent, and don't let orange become `destructive` (use the brick
+  red); status uses `success` / `warning` / `destructive`.
+- **Don't** pull the Degular hero, the dark coffee polarity-flip bands, or the 64px rhythm into an
+  operator 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 | forms cap at `form-max-width`; tables and dashboards use the full width |
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim. This brand is warm and confident; keep it restrained.
+
+**Carries over:** the warm cream temperature (canvas `#fffefb`, never pure white) · deep coffee ink
+`#201515` (never pure black) · orange `primary` (`#ff4f00`) as the single reserved accent · the 12px
+middle-radius character (never pill, never square) · the recessed cream-card surface-contrast elevation
+· the bold ink-bordered field · Inter with the positive-tracked uppercase eyebrow · `tabular-nums`.
+
+**Stays behind:** the 56px Degular Display hero · the dark coffee-ink polarity-flip (dark hero/feature/
+pricing bands, dark footer) · the illustrative zap/workflow SVGs · the 64px section-padding rhythm.
+
+- Lead every list surface with its table; accent only the primary action in orange — if two things want
+  it, one is not primary.
+- Reach for the warm cream canvas first; float recessed cream cards on it, separated by surface contrast
+  and warm hairlines before shadow. Detail and edit go in the side panel; a modal is a confirmation.
+- Every numeric column is `tabular-nums`; every ID / run code / timestamp is `font-mono`; every workflow
+  completes from the keyboard with the orange `ring` outline always visible.
+- One accent. Type stays on Inter — Degular Display and the marketing bands do not follow into a console.