@nurix/etna 0.18.19 → 0.18.21

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

@@ -0,0 +1,154 @@
+---
+schema: design-md/v1
+product: Airbnb
+provenance: library
+sourced: 2026-07-04
+---
+
+# Airbnb — the operator reading
+
+The warm marketplace brand rendered for internal tools. Airbnb's public surfaces are photography-led
+and generous; an operator surface wearing this brand keeps the palette, the single warm voltage, the
+soft corners, and the modest type voice, but leaves the marketing chrome behind — the pill search
+bar, the 64px rating hero, the 80px nav, and the hand-illustrated product glyphs do not follow the
+brand into a queue or a console. What carries is the feel: pure-white canvas, near-black ink (never
+pure black), one Rausch accent used scarcely, flat depth with a single soft shadow tier, and rounded
+everything.
+
+## 1 Visual Theme
+
+Light only — Airbnb ships no dark mode on the public web, so light is the default and dark is a
+foreign opt-in, not a native mode. Flat: depth comes from white-on-white surface separation, hairline
+`border`, and rounded-corner clipping, not from layered shadows (there is exactly one soft shadow
+tier). A single accent, Rausch (`primary`, brand `#ff385c`), carries the one action that matters on a
+surface and nothing else. Ink is a deep near-black slate (`foreground`, brand `#222222`), never pure
+`#000000`. The anchor surface is a pure-white content canvas beside a faintly warm-gray `sidebar`.
+Corners are soft throughout — `radius` on buttons and inputs, a larger step on cards, pill on badges —
+there is no hard corner except the body grid. Density is `standard` with a generous per-dimension lean:
+the brand breathes, but marketplace pages already run tighter than SaaS marketing, so the operator
+reading holds standard rather than airy.
+
+## 2 Color Roles
+
+Light values. One accent: Rausch is the only chromatic hue that carries meaning; status hues speak
+only status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | white `#ffffff` | page, cards, and overlays — the dominant surface |
+| `foreground` | ink `#222222` | all primary ink; never pure black |
+| `muted` | soft gray `#f7f7f7` | hover rows, disabled fields, subtle fills |
+| `muted-foreground` | mid gray `#6a6a6a` | labels, captions, secondary text, inactive tabs |
+| `secondary` | stronger gray `#f2f2f2` | secondary buttons, circular icon-button surfaces |
+| `border` / `input` | hairline `#dddddd` | every separator, grid line, and field edge |
+| `primary` | Rausch `#ff385c` | the one primary action; active nav; the single warm voltage |
+| `accent` | pale Rausch `#ffe8ec` | selected/hovered rows and nav — a whisper of brand warmth |
+| `ring` | ink `#222222` | the focus outline — Airbnb focuses with ink, not a colored glow |
+| `destructive` | error red `#c13515` | destructive actions and error text only — distinct from Rausch |
+| `success` / `warning` | green / amber | status signalling only, never chrome |
+
+Luxe purple (`#460479`), Plus magenta (`#92174d`), and the legal-link blue (`#428bff`) are sub-brand
+graces — they carry no operator role and never become a second accent (see §7). Star ratings render in
+ink, not gold, and that carries over: numbers are ink, not a yellow accent.
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is Airbnb Cereal VF (with Circular and Inter as the licensed/open
+fallbacks — Inter is the closest open substitute); the whole ramp rides it, display voice carried by
+size and modest weight, not a second family. Airbnb runs deliberately modest weights — `font-weight-strong`
+stops at 600, never the 700+ that fintech and enterprise systems lean on. `font-mono` is derived: Airbnb
+ships no monospace, but operator IDs, codes, and timestamps need one. Numeric columns render
+`tabular-nums` so figures align down a column.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 22px / 1.2 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 18px / 1.3 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 16px / 1.35 | `font-weight-strong` |
+| body | UI + prose | 14px / 1.45 | `font-weight-normal` |
+| small | labels, meta, dense table | 13px / 1.3 | `font-weight-normal` |
+| caption | uppercase eyebrow | 12px / 1.2 | `font-weight-strong`, `+0.02em`, uppercase |
+
+The 64px rating display and the 28px marketing hero stay behind — that peak-scale typographic moment is
+a marketing trust signal, not operator chrome. Bump weight one step for emphasis; never reach past 600.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled `primary` on `primary-foreground`, `radius`, no pill (the pill CTA is a
+  marketing form and stays behind). Secondary: `card` fill, 1px `border`, `foreground`. Ghost:
+  transparent, `accent` on hover.
+- **Input** — `card` fill, 1px `border` (`border-weight`), `radius`; on focus the border thickens toward
+  2px and flips to `ring` (ink) — no glow, no colored ring, the signature Airbnb focus.
+- **Card** — `card` surface, 1px `border`, a larger corner step from the radius scale, one soft shadow
+  only when floated (`shadow-intensity`); inset by `density-inset`.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
+  numeric columns; row selection tints `accent`.
+- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`
+  for content-heavy), beside the work, not over it.
+- **Badge** — pill (the largest radius step), hairline `border`, `muted`/status fill, uppercase caption;
+  status badges take `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing unit 4px (with a 2px micro-step); the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48
+· 64`. Shell dimensions map one-to-one to the layout primitives: sidebar `sidebar-width-expanded` /
+`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. Card
+internal padding runs generous (24px on rich cards, 16px on meta blocks). Density is governed globally
+by `density-tier` and stepped per archetype by the surface catalog — never by absolute overrides.
+
+## 6 Depth
+
+Flat. Hierarchy comes from the surface ladder, hairlines, and rounded-corner clipping — not shadow:
+
+- **0 — canvas** `background`, no border.
+- **1 — panel / card** `card` on a 1px `border`; the one soft shadow tier only when a card must float off
+  the canvas.
+- **2 — overlay** `popover` / side panel / modal — the same single soft shadow, over a black scrim at 50%
+  opacity for modals. No level stacks a heavier shadow to signal rank; rank is border and position.
+
+Focus is a 2px `ring` outline in ink (never a glow, never a colored ring), visible on every interactive
+element. Three z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve `primary` (Rausch) for the single most important action on a surface; everything else is
+  neutral or status. Most surfaces are 90% white + ink with one Rausch moment.
+- **Do** keep corners soft — `radius` on interactive elements, the larger step on cards, pill on badges.
+- **Do** render numbers and ratings in ink, and apply `tabular-nums` to every numeric column; use
+  `font-mono` for IDs, codes, and timestamps.
+- **Don't** promote a second chromatic accent. Luxe purple, Plus magenta, and the legal-link blue stay
+  sub-brand-decorative; status uses `success` / `warning` / `destructive`.
+- **Don't** focus with a colored ring or a glow — Airbnb focuses by thickening the border to ink.
+- **Don't** use pure black `#000000` for ink; ink is `#222222`.
+- **Don't** pull the pill search bar, the 64px rating hero, or the 80px marketing nav into operator chrome.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440. Grids reduce column counts cleanly at each step — never
+reflow rows.
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; sticky detail collapses to a bottom bar carrying the primary action |
+| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow; card grids drop to 2-up |
+| 1024 | sidebar expands; two-pane queue+detail holds side by side; card grids 3-up |
+| 1440 | content caps for forms at `form-max-width`; tables and dashboards use the full width; card grids 4-up |
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim. This brand is warm and generous; keep it restrained for
+operator work.
+
+- Lead every list surface with its table; lead every entity with its primary read, not its chrome.
+- Accent only the primary action with Rausch (`primary`). If two things want the accent, one is not primary.
+- Stay flat — surface separation, hairlines, and rounded clipping before shadow. Reach for the one soft
+  shadow tier only for a real float or overlay.
+- Focus with ink (`ring`), not a colored glow. Render numbers and ratings in ink, never gold.
+- Keep corners soft: `radius` on buttons and inputs, the larger step on cards, pill on badges. No hard corners.
+- Type stays modest — Cereal/Inter, `font-weight-strong` at 600, never 700+. Mono for IDs, codes, timestamps.
+- One accent. Luxe, Plus, and legal-blue are not operator colors here.
+- Leave marketing behind: the pill search bar, the 64px rating hero, the 80px nav, hand-illustrated
+  glyphs, and gradients do not follow the brand into a console. Light only — dark is a foreign opt-in.

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

@@ -0,0 +1,151 @@
+---
+schema: design-md/v1
+product: Airtable
+provenance: library
+sourced: 2026-07-04
+---
+
+# Airtable — operator reading
+
+A sober, editorial operator design: white canvas, dark-ink type, hairline separation, and a
+distinctive move at its center — the primary action is **near-black**, not a color. Black *is* the
+brand action here; blue is only the link and the focus ring. This entry is the operator reading of
+Airtable's marketing brand: the temperature, the ink-primary discipline, the moderate radii and the
+never-bold type voice carry; the hero-scale display sizes, the full-bleed signature cards, and the
+96px marketing section rhythm stay behind.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. Flat and editorial: hierarchy is carried by hairline `border`
+(`#dddddd`), type weight, and whitespace — the brand is emphatically shadow-light, color-block first.
+A single brand action, `primary`, is near-black ink (`#181d26`, a cool navy-black) reserved for the
+one action that matters on a surface; it reads confident and final, never decorative. The neutral ramp
+is a cool near-white, and the one chromatic interactive signal is a link blue (`#1b61c9`) that appears
+only as links and the focus `ring`. The anchor surface is a white content canvas beside a faintly cool
+`sidebar`. Density is `standard` and leans editorial-roomy — calm, not cramped, and never terminal-dense.
+
+## 2 Color Roles
+
+Light values first. One brand action — `primary` (near-black) is the only fill that means "act"; the
+blue is functional (links, focus) and status hues speak only status. The warm signature palette
+(coral, forest, cream, peach, mint, mustard) is marketing chrome — it survives here only as chart
+categoricals, never as UI chrome or a second accent.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | white `#ffffff` | page, cards, overlays — the dominant surface |
+| `foreground` | near-black ink `#181d26` | all primary ink |
+| `muted` / `secondary` | cool near-white `#f8fafc` | hover rows, subtle fills, secondary buttons |
+| `muted-foreground` | mid slate `#41454d` | labels, captions, secondary text |
+| `border` / `input` | hairline `#dddddd` | every separator, grid line, and field edge |
+| `primary` | near-black `#181d26` | the one primary action; filled, white text — never the link blue |
+| `accent` | pale blue tint `#eef3fb` | selected/hovered rows and active nav, on-accent surfaces only |
+| `ring` | link blue `#1b61c9` | the focus outline — blue by brand rule, unmistakable, keyboard-first |
+| `destructive` | warm red `#c0301c` | destructive actions and error state only |
+| `success` / `warning` | green `#006400` / amber `#b45309` | status signalling only, never chrome |
+
+The blue is the link and focus color, not the brand action; the most common misread is treating
+link-blue as `primary`. Reserve `primary` for near-black.
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is Inter — the open substitute the licensed Haas Grotesk resolves to;
+the UI, body, and headings all ride it, with weight and size (never a second family) carrying the
+display voice. `font-mono` is IBM Plex Mono for record IDs, keys, timestamps, and log lines. Numeric
+columns render `tabular-nums` so figures align down a column.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.35 | `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.45 | `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 |
+
+The Airtable trait: never bold for its own sake. Emphasis bumps weight one step to `font-weight-strong`
+(500) — never 600/700 in the running UI. True bold is reserved, as in the brand, for legal surfaces.
+Bump weight to emphasize; never change size.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled near-black `primary` on `primary-foreground`, `radius`, no pill.
+  Secondary: `secondary` fill, 1px `border`, `foreground` — the white-outline pair to the near-black CTA.
+  Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the blue `ring`
+  at 2px, no glow.
+- **Card** — `card` surface, 1px `border`, `radius`, 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 tints `accent`.
+- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`
+  for content-heavy), beside the work, not over it.
+- **Badge** — hairline `border`, `muted`/status fill, uppercase caption; status badges take
+  `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` (the marketing
+96px section rhythm stays behind). Shell dimensions map one-to-one to the layout primitives: sidebar
+`sidebar-width-expanded` (240px, the brand's filter-rail width) / `sidebar-width-collapsed`, topbar
+`topbar-height` (64px, the brand nav height), side panel `side-panel-width` / `side-panel-width-rich`,
+modal cap `modal-width-max`, forms `form-max-width`, tables full-width. Rows are a roomy 44px — the
+editorial reading, not a dense grid. Density is governed globally by `density-tier` and stepped per
+archetype by the surface catalog, never by absolute overrides.
+
+## 6 Depth
+
+Flat — color-block first, shadow second. Hierarchy comes from the surface ladder and hairlines:
+
+- **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. No level stacks a heavier shadow to signal rank; rank is border and position.
+
+Focus is a 2px blue `ring` outline (never a glow), visible on every interactive element. Three
+z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** keep `primary` near-black. The brand action is `#181d26`, not the link blue — mixing them
+  turns a confident surface into a confused one.
+- **Do** reserve `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** apply `tabular-nums` to numeric columns and `font-mono` to IDs, keys, and timestamps.
+- **Don't** bold the UI. Emphasis tops out at `font-weight-strong` (500); 600/700 read as a template.
+- **Don't** promote a second chromatic accent. The signature warm palette (coral/forest/cream/mustard)
+  is marketing chrome; here it lives only in `chart-*`.
+- **Don't** pill the CTA or reach for a radius outside `radius-scale`; the marketing pill is a pricing
+  sub-system signal, not an operator option.
+- **Don't** open detail or edit in a modal when the side panel fits — modals are for confirmations.
+
+## 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, capped with outer margin |
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Lead every list surface with its table; lead every entity with its primary read, not its chrome.
+- Accent only the primary action, and make it near-black `primary` — never the blue. Blue is links and
+  the focus `ring` only. If two things want the accent, one is not primary.
+- Keep type modest: `font-weight-strong` is 500, never 600/700 in the UI; emphasize by weight, not size.
+- Detail and edit go in the side panel; a modal is a confirmation, not a workspace.
+- Every numeric column is `tabular-nums`; every ID / key / timestamp is `font-mono`.
+- Every workflow completes from the keyboard; the blue `ring` outline is always visible.
+- Stay flat and editorial — hairline and whitespace before shadow. A single near-black band is the
+  brand's one voltage moment; use it sparingly for a summary or hero card, never as routine chrome.
+- The warm signature palette (coral, forest, cream, peach, mint, mustard) stays behind as marketing;
+  it survives only as chart categoricals. Hero-scale display type (48/40/32) and the 96px section
+  rhythm are marketing — do not carry them into operator surfaces.

package/data/harnesses/code/skills/design/data/design-md/library/anthropic-claude.md

@@ -0,0 +1,139 @@
+---
+schema: design-md/v1
+product: Claude
+provenance: library
+sourced: 2026-07-04
+---
+
+# Claude — the warm editorial operator design
+
+The operator reading of Anthropic's Claude brand. Claude's own surfaces are marketing-editorial —
+hero-scale slab-serif display, full-bleed coral callout bands, a cream-to-dark pacing rhythm. This
+entry keeps what survives at operator scale: the warm cream canvas, the single coral accent, the
+warm-neutral temperature, the moderate radius, the editorial type voice. The 64px display, the coral
+bands, and the 96px rhythm stay behind. The result is unmistakably Claude — warm where every other
+tool is cool — but it earns its density and reserves its one accent.
+
+## 1 Visual Theme
+
+Warm by default; dark is opt-in. The canvas is Claude's tinted cream `background` (`#faf9f5`) — a
+deliberate warm off-white, never the cool gray-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`,
+type weight, and the cream surface ladder, never heavy shadow. A single accent — Claude coral
+`primary` (`#cc785c`) — is reserved for the one action that matters; ink is warm near-black
+`foreground` (`#141413`). The type voice is editorial — a serif carries the page-title voice over a
+humanist sans body. Density is `standard`; the anchor surface is a cream canvas beside a softer cream `sidebar`.
+
+## 2 Color Roles
+
+Light values. One accent: `primary` is the only chromatic hue that carries meaning; teal and amber
+are chart/status graces, status speaks status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | warm cream `#faf9f5` | page, cards, and overlays — the dominant surface, differentiated by border not brightness |
+| `foreground` | warm near-black `#141413` | all primary ink and headlines |
+| `muted` | soft cream `#f5f0e8` | hover rows, subtle fills, quiet panel bands |
+| `secondary` | cream card `#efe9de` | secondary button fill, one step darker than canvas |
+| `muted-foreground` | warm gray `#6c6a64` | labels, captions, secondary text |
+| `border` / `input` | warm hairline `#e6dfd8` | every separator, grid line, and field edge — one elevation step, not an ink line |
+| `primary` | Claude coral `#cc785c` | the one primary action; active nav; the coral text-link |
+| `accent` | strong cream `#e8e0d2` | selected/hovered rows and nav — selection warms the cream, it does not colour it |
+| `ring` | `primary` coral | the focus outline — unmistakable, because keyboard-first |
+| `destructive` | warm red `#c64545` | destructive actions and error state only |
+| `success` / `warning` | green `#5db872` / gold `#d4a017` | status signalling only, never chrome |
+
+The dark navy `#181715` is not a page surface here — it is the inlay for code, log, and terminal
+panels (see §6). Coral stays scarce; teal and amber live only in charts and status.
+
+## 3 Typography
+
+Two families carry Claude's voice. `font-sans` is the humanist sans (Styrene B, Inter fallback) — the
+body, UI, table, and label workhorse. Page titles wear the editorial **serif** (Copernicus / Tiempos
+Headline; Cormorant Garamond at `-0.02em` the open substitute) at operator heading scale — the 64px
+display stays behind, but the serif voice is the brand's irreducible signature and carries. `font-mono`
+is JetBrains Mono for IDs, codes, timestamps, log lines; numeric columns render `tabular-nums`.
+Emphasis is weight 500 or a larger serif — the brand **never bolds** (serif at 400; sans to 500).
+
+| Step | Role | Family | Size · line | Weight · tracking |
+| --- | --- | --- | --- | --- |
+| h1 | page title | serif | 28px / 1.2 | 400 · `heading-tracking` |
+| h2 | section head | serif | 22px / 1.3 | 400 · -0.01em |
+| h3 | card / group head | sans | 16px / 1.4 | `font-weight-strong` · 0 |
+| body | UI + prose | sans | 14px / 1.55 | `font-weight-normal` |
+| small | labels, meta, dense table | sans | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow | sans | 12px / 1.4 | `font-weight-strong`, +0.12em, uppercase |
+| code | IDs, logs, amounts | mono | 13px / 1.5 | `font-weight-normal` |
+
+Negative tracking on the serif is non-negotiable; it is what reads as Claude.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+- **Button** — `primary`: filled coral on `primary-foreground`, `radius` (8px), no pill. Secondary:
+  `secondary` cream fill, 1px `border`, `foreground`. Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the coral `ring` at 2px, no glow.
+- **Card** — `card` surface on a 1px `border`; panels read by their hairline, not brightness (nothing sits lighter than cream but off-brand white); shadow only when lifted.
+- **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 · 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 `modal-width-max`, forms
+`form-max-width`, tables full-width — a hair more generous than a dense console. Density is governed
+globally by `density-tier` and stepped per archetype by the surface catalog.
+
+## 6 Depth
+
+Flat, color-block-first. Hierarchy comes from the cream ladder and warm hairlines, not shadow:
+
+- **0 — canvas** `background` (`#faf9f5`), 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. Rank is border and position, never a heavier shadow.
+- **inlay — code / log / terminal** dark navy `#181715` with cream `on-dark` text and `font-mono` — Claude's product-chrome carried in even a light UI (echoes Claude Code's editor chrome).
+
+Focus is a coral `ring` outline (never a glow), visible on every interactive element. Three z-levels:
+content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** anchor on the warm cream canvas — pure white reads as any-other-AI-tool; the tint is the brand.
+- **Do** reserve coral `primary` for the single most important action; everything else is neutral or status.
+- **Do** wear the editorial serif with negative tracking on page titles; keep body, tables, and labels on the humanist sans.
+- **Do** dress code, log, and terminal panels in the dark navy inlay (`#181715`, `font-mono`).
+- **Don't** bold the serif — Copernicus at 700 reads bombastic; emphasise by weight 500 or a larger size.
+- **Don't** promote a second chromatic accent — teal and amber are chart/status graces, not UI accents.
+- **Don't** pill the primary CTA (buttons are 8px `radius`); pill radius is for badges only.
+- **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 |
+
+Code and log inlays keep mono legibility at every breakpoint by scrolling horizontally, not wrapping.
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Reach for the warm cream canvas first — never pure white; the warm tint is Claude.
+- Accent only the primary action in coral. If two things want the accent, one of them is not primary.
+- Page titles wear the editorial serif at reduced scale with negative tracking; everything else is the
+  humanist sans. Never bold — emphasise by weight 500 or a larger serif.
+- Dress code, log, and terminal panels in the dark navy inlay (`#181715`) — show real product chrome,
+  never a light mockup of it.
+- Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`.
+- Every workflow completes from the keyboard; the coral `ring` focus outline is always visible.
+- Stay flat — warm hairline and the cream ladder before shadow; reach past a hairline only for a real
+  overlay. Leave behind the hero display, the coral callout bands, and the 96px rhythm.

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

@@ -0,0 +1,139 @@
+---
+schema: design-md/v1
+product: Apple
+provenance: library
+sourced: 2026-07-04
+---
+
+# Apple — the reverent, photography-first operator reading
+
+An operator translation of Apple's web design language. The marketing theatre stays behind:
+full-bleed product tiles, hero display type, and photography carrying the one drop-shadow in the
+system. What carries is the quiet chassis underneath — a parchment canvas with white cards that lift
+by surface change rather than shadow, near-black ink that reads photographic, a single Action Blue
+accent doing every "click me" job, SF Pro's tight-tracked voice, and the 17px reading pace.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. Flat, but not gray-flat — elevation comes from a surface ladder
+(parchment `background` → white `card` → near-black chrome), never from a shadow on chrome. A single
+accent, Action Blue `primary` (#0066cc), is the only chromatic hue that carries meaning; status hues
+speak only status. Ink is near-black `foreground` (#1d1d1f), chosen over pure black so the page reads
+photographic rather than printed. The anchor surface is a white content canvas resting on the signature
+Apple parchment. Density is `spacious` on purpose: Apple runs airier than contemporary SaaS, and the
+operator reading keeps that pace.
+
+## 2 Color Roles
+
+Light values first. One accent — Action Blue is reserved for interactive; a second chromatic accent never appears.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` | parchment `#f5f5f7` | the page canvas — the signature Apple off-white |
+| `card` / `popover` | white `#ffffff` | cards and overlays lift off parchment by surface change alone |
+| `foreground` | near-black ink `#1d1d1f` | all primary ink — photographic, never pure black |
+| `muted` | `#f0f0f0` (Apple divider-soft) | hover rows, subtle fills |
+| `muted-foreground` | mid gray `#6e6e73` | labels, captions, secondary text |
+| `border` / `input` | hairline `#e0e0e0` / control gray `#d2d2d7` | separators and card edges; fields take the firmer `input` tone |
+| `primary` | Action Blue `#0066cc` | the one primary action; links; active interactive detail |
+| `ring` | Focus Blue `#0071e3` | the 2px solid focus outline — Apple's exact ring hue |
+| `accent` | Action-Blue tint `#e8f1fb` | selected / hovered rows and nav on light surfaces |
+| `destructive` | `#d70015` | destructive actions and error state only |
+| `success` / `warning` | `#248a3d` / `#b25000` | status signalling only, never chrome |
+
+Sky Link Blue `#2997ff` is the dark-surface-only sibling of Action Blue: it carries links and actives on
+the near-black sidebar, where Action Blue would disappear. It never appears on light.
+
+## 3 Typography
+
+One sans, one mono. `font-sans` leads with `-apple-system` / `system-ui` so it resolves to real SF Pro on
+Apple platforms and falls back to Inter elsewhere (the corpus's own substitution). Hero display sizes
+(56 / 40px) stay behind; the operator ramp keeps SF Pro's voice — negative tracking, the 17px body — at
+working sizes. `font-mono` is SF Mono for IDs, codes, and timestamps; numeric columns render `tabular-nums`.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 28px / 1.14 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 21px / 1.2 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 17px / 1.24 | `font-weight-strong` · `heading-tracking` |
+| body | UI + prose | 17px / 1.47 | `font-weight-normal` |
+| small | labels, meta, dense table | 14px / 1.43 | `font-weight-normal` |
+| caption | eyebrow / nav | 12px / 1.3 | `font-weight-normal` · `-0.01em` |
+
+The weight ladder is 300 / 400 / 600 / 700 — **500 is deliberately absent**; headings sit at 600, not
+700. Body runs at 17px, not 16px: the extra pixel is the brand's reading pace. Emphasise by weight, never size.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled Action Blue on `primary-foreground`, `radius` (soft rect), no pill by
+  default; press is `transform: scale(0.95)`. Secondary: `secondary` fill, `border`. Ghost: `muted` on hover.
+- **Input** — `background` fill, 1px `border` (`input` tone), `radius`; focus draws the `ring` as a full
+  2px solid outline, no glow.
+- **Card** — white `card` on the parchment `background`, 1px `border` hairline, `radius`; elevation is the
+  surface change, not a shadow. Inset by `density-inset`.
+- **Table row** — `table-row-height`; hairline `border` grid lines; `muted` on hover; selection tints
+  `accent`; `tabular-nums` on numeric columns.
+- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`),
+  beside the work, never over it.
+- **Badge** — hairline `border`, `muted` / status fill, uppercase caption; status badges take
+  `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing unit 8px (Apple's grid); the on-scale ramp is `4 · 8 · 12 · 17 · 24 · 32 · 48 · 80` — note
+the signature 17px step and the generous 80px section rhythm. Shell dimensions map one-to-one to the
+layout primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height`,
+side panel `side-panel-width` / `side-panel-width-rich`, modal `modal-width-max`, forms `form-max-width`,
+tables full-width. Density is `spacious`, governed globally by `density-tier` and stepped per archetype.
+
+## 6 Depth
+
+Flat. Hierarchy comes from the surface ladder and hairlines, not shadow:
+
+- **0 — canvas** parchment `background`, no border.
+- **1 — panel / card** white `card` lifting off parchment by surface change alone; 1px `border` hairline.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns the faintest `md` lift, or a backdrop-blur floats sticky chrome.
+
+Apple puts **exactly one** shadow in its whole system, and it belongs to product photography — never a
+card, button, or text. Operator chrome has no imagery, so it carries zero shadow; only true overlays lift.
+Focus is a 2px solid `ring` outline (Focus Blue), never a glow. Three z-levels: content, chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve Action Blue (`primary`) for the single most important action and every link; the one
+  accent is non-negotiable.
+- **Do** elevate by surface change — parchment ↔ white ↔ near-black — before a shadow; the color change is the divider.
+- **Do** keep ink near-black (`foreground` #1d1d1f), never pure black text.
+- **Do** run body at 17px, `tabular-nums` on numeric columns, `font-mono` on IDs / codes / timestamps.
+- **Do** use `transform: scale(0.95)` as the press state, system-wide.
+- **Don't** introduce a second chromatic accent; every "click me" signal is Action Blue.
+- **Don't** put a shadow on a card, button, or text — shadow is reserved for imagery this UI does not have.
+- **Don't** use weight 500; the ladder is 300 / 400 / 600 / 700, and headings are 600, not 700.
+- **Don't** pill every control — the full pill is a marketing-hero signal; operator controls take the soft
+  `radius` rect, the pill (`9999`) reserved for at most one hero action.
+- **Don't** use Sky Link Blue (#2997ff) on a light surface — it is the dark-surface-only variant.
+
+## 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; h1 steps 28 → 24 |
+| 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 parchment `background` + white `card` surface ladder; near-black ink; the single
+  Action Blue accent; SF Pro's voice (via `-apple-system` → Inter fallback) with tight tracking; the 17px
+  reading pace; soft radii; surface-change elevation; the `scale(0.95)` press.
+- **Stays behind:** hero display type (56 / 40px); full-bleed marketing tiles; product photography and
+  its lone drop-shadow; the pill-everything CTA grammar; the museum-gallery whitespace.
+- Lead every surface with its content — the table on a list, the primary read on an entity — not chrome.
+- Accent only the primary action; if two things want Action Blue, one of them is not primary.
+- Keep the sidebar recessive and near-black, with Sky Link Blue actives; the light canvas does the talking.
+- Every workflow completes from the keyboard; the 2px Focus Blue `ring` is always visible.