@nurix/etna 0.18.19 → 0.18.21

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

@@ -0,0 +1,163 @@
+---
+schema: design-md/v1
+product: Sentry
+provenance: library
+sourced: 2026-07-04
+---
+
+# Sentry — the violet-and-lime developer-console operator design
+
+Sentry's design language reads like a debugging console wearing a leather jacket: a deep
+purple-violet midnight canvas, electric-lime keyword highlights, sticker mascots, a chunky display
+sans. But the brand is explicitly *two-polarity* — dark violet owns marketing and feature pages,
+while **white owns the dense, scannable, transactional surfaces** (pricing, contact, reference)
+where developers scan tables. That white polarity is exactly operator territory, so this entry wears
+it. What carries: the violet palette and its cool temperature, the authoritative near-black-violet
+primary button that reads as the strongest affordance on either polarity, the Rubik UI voice with
+uppercase `+0.2px` caps, Monaco on every code/log surface, the 8px developer-dialect radius, and
+lime held scarce as a signature highlight. What stays behind: the 88px display hero, the starfield
+texture, the floating mascots, the lime squiggle divider, and the dark-canvas marketing atmosphere.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. The operator UI sits on Sentry's white transactional canvas
+(`#ffffff`) — the polarity the brand reserves for dense reference content, not its atmospheric dark
+marketing hero. Flat: hierarchy is carried by a cool `#e5e7eb` hairline grid, type weight, and violet
+temperature — never heavy shadow. A single accent — the authoritative midnight-violet `primary`
+(`#150f23`), a near-black button with a violet undertone — carries the one action that matters, and
+reads as the most authoritative affordance on any canvas, so it is never softened to a bright
+brand-violet. Ink is deep ink-violet `foreground` (`#1f1633`), one hair lifted from the button. Lime
+stays scarce — a signature highlight glyph, never a fill (§7). The **dark violet console remains the
+opt-in iconic read** for a monitoring surface that wants it, but light is the default. Density is
+`standard`, dense-capable from the console heritage, stepping denser per archetype.
+
+## 2 Color Roles
+
+Light values. One accent — midnight-violet `primary` is the only hue that carries the primary-action
+meaning; lime, pink, and the violet family speak charts and the scarce highlight, status hues speak
+only status. The dark-console value is noted where it defines the identity.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | white `#ffffff` (dark console: `#1f1633`) | page, cards, and overlays — the dominant surface |
+| `foreground` | deep ink-violet `#1f1633` (dark console: `#ffffff`) | all primary ink — the brand's single token doing double duty as dark canvas and light ink |
+| `muted` / `secondary` | faint violet tint `#f3f1f8` | hover rows, subtle fills, secondary-button fill |
+| `muted-foreground` | violet-gray `#6b6577` | labels, captions, secondary text |
+| `border` | cool hairline `#e5e7eb` | every divider and grid line on the light canvas |
+| `input` | field hairline `#cfcfdb` | text-field and form-control edges — one step firmer than the divider grid |
+| `primary` | midnight violet `#150f23` | the one primary action; active nav; nowhere decorative |
+| `primary-foreground` | white `#ffffff` | text on the near-black action |
+| `accent` | faint violet wash `#e9e5f4` | selected / hovered rows and nav — a violet tint, never a lime or pink wash |
+| `ring` | focus blue `#3b82f6` | the focus outline — the corpus's one documented blue, reserved for keyboard focus |
+| `destructive` | cool crimson `#e11d48` | destructive actions and error state only |
+| `success` / `warning` | green `#16a34a` / amber `#d97706` | status signalling only, never chrome |
+
+Lime `#c2ef4e`, hot-pink `#fa7faa`, and the violet family live in charts and the one scarce highlight device (§7) — never a button, a fill, or body text.
+
+## 3 Typography
+
+One UI sans, one mono. `font-sans` is **Rubik** (fallbacks `-apple-system, system-ui, Segoe UI,
+Helvetica, Arial`) — it carries every body, caption, button, and eyebrow role. `font-mono` is **Monaco**
+(Menlo, Ubuntu Mono fallbacks) for IDs, codes, timestamps, log lines, stack traces, and event payloads.
+The proprietary chunky display sans and its 88px hero stay behind — an operator surface tops out at a
+24px page title in Rubik. The brand's signature is **uppercase caps with `+0.2px` tracking** on buttons
+and eyebrows — a console-prompt cadence carried on the caption step by hand. Functional copy rides the
+denser 1.5 leading ("reads like a log"); the airy 2.0 marketing leading stays behind. Numeric columns
+render `tabular-nums` (floor P4).
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 20px / 1.25 | `font-weight-strong` · 0 |
+| h3 | card / group head | 16px / 1.3 | `font-weight-strong` · 0 |
+| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
+| small | labels, meta, dense table | 13px / 1.45 | `font-weight-normal` |
+| caption | uppercase eyebrow / button cap | 12px / 1.3 | `font-weight-strong`, `+0.2px`, uppercase |
+| code | IDs, logs, payloads | mono 13px / 1.5 | `font-weight-normal` |
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — primary: filled midnight-violet `primary` on white `primary-foreground`, `radius` (8px),
+  uppercase `+0.2px` caption label, no pill. Secondary: `secondary` fill, 1px `border`, `foreground`.
+  Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `input` border (`border-weight`), `radius` (inputs step to 6px);
+  focus draws the blue `ring` at full 2px, no glow.
+- **Card** — `card` surface on a 1px `border`, cards step to 12px radius; shadow only when a true overlay must lift off the canvas; 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 payloads), beside the work, not over it.
+- **Badge** — hairline `border`, `muted`/status fill, uppercase caption, 4px pill-ish radius; 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's
+`2 / 4 / 8 / 12 / 16 / 24 / 32` map direct and the 96px marketing section rhythm stays behind. Shell
+dimensions map one-to-one to the layout primitives: sidebar `sidebar-width-expanded` (248px) /
+`sidebar-width-collapsed` (56px), topbar `topbar-height` (56px), side panel `side-panel-width` (420px) /
+`side-panel-width-rich` (640px), modal cap `modal-width-max`, forms `form-max-width` (the brand's
+~1152px container is marketing), tables full-width. Density is governed globally by `density-tier` and
+stepped per archetype — never by absolute overrides.
+
+## 6 Depth
+
+Flat. Hierarchy comes from the surface ladder and cool hairlines, not shadow:
+
+- **0 — canvas** `background`, no border.
+- **1 — panel / card** `card` on a 1px `border`; shadow only when it must lift off the canvas.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
+  shadow (the corpus's level-2 light-canvas card shadow). Rank is border and position; the marketing
+  glow-halo CTA stays behind.
+- **inlay — code / log / terminal** near-black `#150f23` with white text and `font-mono` — the corpus's
+  `code-block` carried as the surface for log streams, stack traces, and event payloads inside a light UI.
+
+Focus is a 2px blue `ring` outline (never a glow), visible on every interactive element (floor P6).
+Three z-levels: content, sticky chrome, overlay. The full **dark violet console** is the opt-in iconic
+read for a monitoring surface that wants it — same tokens, inverted polarity.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve midnight-violet `primary` for the single most important action and active nav — never
+  soften it to a bright brand-violet; the near-black is the point, authoritative on any canvas.
+- **Do** carry hierarchy with cool hairlines, weight, and whitespace, keep every button and eyebrow
+  uppercase with `+0.2px` tracking, and dress code/log/payload panels in the near-black inlay
+  (`#150f23`, Monaco) with `tabular-nums` on numeric columns.
+- **Don't** make lime a fill. `#c2ef4e` is a scarce highlight glyph (a matched-keyword chip, a single
+  "live" marker — one per viewport) and a chart hue; a lime "success" reads yellow and fails contrast,
+  so status uses `success` / `warning` / `destructive`.
+- **Don't** promote a second brand accent — pink and the violet family are chart/decorative graces, not
+  UI action colors; keep crimson `destructive` distinct from decorative pink.
+- **Don't** pill the primary CTA or reach outside `radius-scale` (buttons 8px; pill is badges only),
+  blend the two canvas polarities on one content band, signal rank with heavy shadow, or open detail in
+  a modal when the side panel fits.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440.
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
+| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
+| 1024 | sidebar expands; two-pane queue+detail holds side by side |
+| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
+
+Code, log, and payload inlays keep Monaco legibility at every breakpoint by scrolling horizontally, not wrapping.
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Reach for the white transactional canvas first — Sentry's dense polarity, not the dark marketing
+  hero (which is the opt-in iconic read, not the default). Spend the accent once: midnight-violet
+  `primary` marks THE action and active nav, never softened to a bright violet.
+- Keep every button and eyebrow uppercase with `+0.2px` tracking — the console cadence is the brand;
+  emphasise by weight, never size. Lime is scarce: one highlight glyph per viewport (matched keyword,
+  a single "live" marker) plus the chart series — never a button, fill, or body text.
+- Dress code, log, and event-payload panels in the near-black inlay (`#150f23`, Monaco) — real product
+  chrome, not a light mock. Every numeric column is `tabular-nums`; every ID / timestamp is `font-mono`.
+- Stay flat — cool hairlines and the surface ladder before shadow; reach past a hairline only for a
+  real overlay. Keyboard-first: the blue `ring` focus outline is always visible.
+- Leave behind the starfield texture, the floating mascots, the lime squiggle divider, and the 96px
+  marketing rhythm. What carries: the violet palette and cool temperature, the authoritative near-black
+  button, the Rubik caps cadence, Monaco, and the 8px radius character.

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

@@ -0,0 +1,147 @@
+---
+schema: design-md/v1
+product: Shopify
+provenance: library
+sourced: 2026-07-04
+---
+
+# Shopify — operator reading
+
+Shopify's brand runs two canvases that never blend: a cinematic near-black marketing track (full-bleed
+merchant photography, 96px thin display type, one white-stroked black pill) and a warm-cream
+transactional track (pricing, signup, dashboards) in pastel greens with pill buttons and Inter body. An
+operator surface wears the **transactional** track: the cinematic black canvas, the photography, and the
+hero-scale thin display type stay behind; the cream/white layering, pure-black ink, the single
+mint-green accent, the soft paper-halo shadow, and the pill button character carry across — a
+comfortable, editorial, high-contrast translation, not a marketing transcription.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. The anchor surface is a faintly warm cream `background` carrying
+crisp white `card` panels — that cream-page / white-card layering is the brand's editorial warmth. Ink
+is pure black; a single chromatic accent, mint-green `accent`, marks growth and selection. Depth is not
+flat — white cards lift on a soft layered "paper halo" (`shadow`), the light track's signature.
+Comfortable `standard` density; the pill button shape carries in from the brand.
+
+## 2 Color Roles
+
+Light values first. One chromatic accent — the mint-green family; black is ink/primary, a neutral,
+not a second color.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` | warm cream `#fbfbf5` | the page canvas — editorial warmth under white cards |
+| `card` / `popover` | white `#ffffff` | cards, panels, overlays — the crisp surface on the cream page |
+| `foreground` | pure black `#000000` | all primary ink on light (the brand's `ink`) |
+| `muted` / `secondary` | light zinc `#f4f4f5` | hover rows, subtle fills, secondary chips |
+| `muted-foreground` | mid zinc `#71717a` | labels, captions, secondary text |
+| `border` / `input` | hairline zinc `#e4e4e7` | every separator, grid line, and field edge |
+| `primary` | black `#000000` | the one primary action (a black pill); active nav |
+| `primary-foreground` | white `#ffffff` | labels on the black pill |
+| `accent` | aloe mint `#c1fbd4` | selected/hovered rows, growth highlight, featured tint — a fill, never behind type |
+| `accent-foreground` | black `#000000` | ink on the mint fill |
+| `ring` | black `#000000` | the focus outline — matches `primary`, unmistakable |
+| `destructive` | commerce red `#d82c0d` | destructive actions and error state only |
+| `success` | commerce green `#008060` | positive status text and badges |
+| `warning` | amber `#b45309` | caution status only |
+
+The pale aloe/pistachio greens are surface fills, never text colors — a status "success" reads on the
+saturated `#008060`. The cool zinc text ladder against the warm cream canvas is the temperature signature.
+
+## 3 Typography
+
+The brand's display face, **Neue Haas Grotesk Display** at a thin cut (weight 330), is a marketing
+signature and its hero scale stays behind. The operator workhorse is **Inter** (`font-sans`): body, UI,
+tables, labels, and headings all ride it, so one sans serves dense chrome. `font-mono` is the system
+monospace for IDs, codes, timestamps, and log lines. Numeric columns render `tabular-nums`.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.2 | `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` · `heading-tracking` |
+| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
+| small | labels, meta, dense rows | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow | 12px / 1.2 | `font-weight-strong`, `+0.06em`, uppercase |
+
+Headings track slightly **open** (`heading-tracking` positive) — the editorial voice runs opposite to
+the tight tracking most operator UIs use; keep it. The OpenType `ss03` stylistic set is the brand's
+character-level signature: apply `font-feature-settings: "ss03"` on the root so it tracks across every
+role. Bump weight for emphasis; never change size.
+
+## 4 Component Stylings
+
+- **Button** — `primary`: filled black `primary` on `primary-foreground`, **pill** (the brand
+  signature, not `radius`). Secondary: white `card` fill, 1px `border`, `foreground` ink — outlined,
+  also pill. Featured/positive: `accent` mint fill, `foreground`, pill.
+- **Input** — `card` fill, 1px `border` (`border-weight`), `radius`; focus draws the black `ring` at 2px.
+- **Card** — white `card` on the cream `background`, 1px `border`, `radius` (larger step for content
+  cards); lifts on the soft layered `shadow` — the paper halo, not a hard drop.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
+  numeric columns; selection tints `accent`.
+- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`),
+  beside the work, not over it.
+- **Badge** — hairline `border`, `muted`/status fill, uppercase caption; status badges take `success` /
+  `warning` / `destructive`, never `primary`; the mint `accent` marks featured, not status.
+
+## 5 Layout
+
+Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` (the brand's own
+8px-family scale, extended down for fine operator work). 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 and section insets run generous (the brand pads comfortably) but the global
+tier stays `standard` — governed by `density-tier`, stepped per archetype, never by absolute overrides.
+
+## 6 Depth
+
+Not flat — the light track carries hierarchy partly with a soft shadow:
+
+- **0 — canvas** cream `background`, no shadow.
+- **1 — card / panel** white `card` on a 1px `border`, lifted by the soft layered "paper halo"
+  (`shadow` at `sm`/`md`) — many tiny low-opacity shadows, never one hard drop.
+- **2 — overlay** `popover` / side panel / modal — the `md`/`lg` shadow, the strongest lift.
+
+Focus is a 2px black `ring` outline (never a glow), on every interactive element. Three z-levels:
+content, sticky chrome, overlay. Rank is border, position, and the soft halo — never a harsh shadow.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve black `primary` for the single most important action; buttons take the **pill** — the
+  one place the brand overrides the operator no-pill default; honor it.
+- **Do** keep the single chromatic accent the mint-green family — a fill for selection, growth, and the
+  featured tier, never behind type.
+- **Do** lift white cards on the cream canvas with the soft layered paper halo, and apply
+  `font-feature-settings: "ss03"` at the root with `tabular-nums` on every numeric column.
+- **Don't** promote a second chromatic accent, or use the pale aloe/pistachio as a status color —
+  status uses `success` / `warning` / `destructive`.
+- **Don't** reach for a rounded-rectangle button — the pill is the brand's non-negotiable button shape.
+- **Don't** bring the cinematic black canvas, full-bleed photography, or 96px thin display type into
+  operator chrome — they stay on the marketing track.
+
+## 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:
+
+- Layer white `card` panels on the cream `background`; lift them with the soft layered paper halo
+  (`shadow`), not a hard drop; overlays one step up.
+- `primary` is black ink; the primary action is a black pill, and buttons keep the pill everywhere —
+  this brand overrides the no-pill default.
+- One chromatic accent: mint-green `accent`, a fill for selection, growth, and featured — never behind
+  type, never as status.
+- Apply `font-feature-settings: "ss03"` at the root and keep headings tracked slightly open; body and
+  tables ride Inter, the thin display face stays behind.
+- Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`; the black `ring`
+  focus outline is always visible and every workflow completes from the keyboard.
+- Leave the cinematic black track and its photography on marketing surfaces — never the operator UI.

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

@@ -0,0 +1,158 @@
+---
+schema: design-md/v1
+product: Slack
+provenance: library
+sourced: 2026-07-04
+---
+
+# Slack — operator reading
+
+An operator translation of Slack's design language: the signature deep-aubergine `sidebar`, a white
+content canvas, one aubergine accent, and blue reserved strictly for links. The marketing surface —
+cream-lavender pastel-mesh gradients, 64px hero display, floating product mockups — stays behind.
+What carries is the palette temperature (warm aubergine, cool lavender tints), the humanist type
+voice, Slack's rounded character, and the one thing every stranger recognizes as Slack: the dark
+aubergine workspace rail.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. The content canvas is white with hairline `border`
+hierarchy — flat, with a friendlier radius than a terminal. The one exception to the light
+polarity is the brand's most enduring asset: the **aubergine `sidebar`**, a categorically
+dark plane carrying light text (a legitimate brand override of the light-default floor —
+recorded plainly in §6). A single accent, aubergine `primary` (`#4a154b`), is reserved for
+the one action that matters; blue `#1264a3` is a functional link color, not a chrome
+accent. Density is `standard`, nudged a hair toward comfort for Slack's relaxed rhythm.
+
+## 2 Color Roles
+
+Light values first. One accent — aubergine `primary` is the only chromatic hue that
+carries interactive meaning; link blue is scoped to inline links; status hues speak only
+status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | white `#ffffff` | page, cards, overlays — the dominant light surface |
+| `foreground` | near-black ink `#1d1d1d` | all primary text on light |
+| `muted` / `secondary` | faint lavender-gray `#f5f3f7` / lavender `#f9f0ff` | hover rows, subtle fills, secondary buttons |
+| `muted-foreground` | mid gray `#696969` | labels, captions, secondary text |
+| `border` / `input` | hairline `#e6e6e6` | every separator, grid line, and field edge |
+| `primary` | deep aubergine `#4a154b` | the one primary action; the sidebar surface; brand-mark moments |
+| `accent` | lavender tint `#f9f0ff` | selected / hovered rows and nav on light |
+| `ring` | aubergine `#611f69` | the focus outline on light surfaces — unmistakable, keyboard-first |
+| `sidebar` | aubergine `#4a154b` | the workspace rail — the one categorically dark surface |
+| link (functional) | blue `#1264a3` | inline links only — never a chrome or CTA color |
+| `destructive` | rust `#cc4117` | destructive actions and error state only |
+| `success` / `warning` | green `#007a5a` / amber `#d97706` | status signalling only, never chrome |
+
+Cream `#f4ede4` and the pastel-mesh hero gradients are marketing graces: they carry no
+operator role (see §7).
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is Lato — the humanist face that carries Slack's warmth
+at UI sizes (the brand's own display and UI faces are proprietary; a neutral grotesque
+flattens the voice). UI, body, and headings all ride it; heading weight and tracking, not
+a second family, carry emphasis. `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.3 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 18px / 1.4 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 15px / 1.45 | `font-weight-strong` · `heading-tracking` |
+| 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.2 | `font-weight-strong`, `+0.08em`, uppercase |
+
+Body leans on a relaxed 1.5 line-height (a restrained echo of the brand's 1.55) — legible
+without going airy. Bump weight one step for emphasis; never change size to emphasize.
+Hero-scale display (32–64px, tight negative tracking) stays on the marketing surface.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled aubergine `primary` on `primary-foreground`, pill radius
+  (`9999`, the one brand flourish), bold label. Secondary: lavender `secondary` fill,
+  `foreground`, workhorse `radius`. Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the
+  `ring` at full 2px, no glow.
+- **Card** — `card` surface, 1px `border`, `radius`; a soft `md` shadow only when it must
+  lift (`shadow-intensity`); inset by `density-inset`.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover;
+  selection tints `accent` (lavender); `tabular-nums` on numeric columns.
+- **Sidebar** — aubergine `sidebar` surface, `sidebar-foreground` light text; active item
+  a `sidebar-primary` band, hover a subtler `sidebar-accent` — the signature dark rail (§6).
+- **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** — hairline `border`, `muted`/status fill, uppercase caption; status badges take
+  `success` / `warning` / `destructive`, never aubergine `primary`.
+
+## 5 Layout
+
+Base spacing unit 4px (Tailwind `--spacing` 0.25rem), with 8px as the dominant step
+honoring Slack's rhythm; 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. Density is governed globally by `density-tier`
+(rewriting the spacing scale through `density-gap`) and stepped per archetype by the
+surface catalog — never by absolute overrides.
+
+## 6 Depth
+
+Flat on the light canvas; the aubergine rail is the one deliberate exception. Hierarchy
+comes from the surface split and hairlines, not stacked shadow:
+
+- **0 — canvas** `background`, no border.
+- **1 — panel / card** `card` on a 1px `border`; a soft `md` shadow only when it must lift.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md` shadow.
+
+The aubergine `sidebar` is a **fixed dark plane, not an elevation** — its prominence comes
+from the surface-polarity split, never a heavier shadow. Focus is a 2px aubergine `ring` on
+light and a light mauve `sidebar-ring` on the rail, visible on every interactive element
+(floor P6). Three z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve aubergine `primary` for the single most important action; everything else
+  is neutral, status, or a link.
+- **Do** keep the aubergine `sidebar` — the dark rail is the brand's most recognizable
+  signal; light-on-aubergine is by design.
+- **Do** give the primary CTA the pill radius as the one brand flourish; keep every other
+  control on the `radius` workhorse.
+- **Do** use blue for inline links only; apply `tabular-nums` to numeric columns and
+  `font-mono` to IDs, codes, and timestamps.
+- **Don't** promote a third accent — aubergine + link-blue is exhaustive; status uses
+  `success` / `warning` / `destructive`.
+- **Don't** use aubergine for body text — it is a surface and CTA color, not a type color.
+- **Don't** bring the pastel-mesh gradients, floating mockups, or 64px hero display onto an
+  operator surface, and don't pill anything but the primary CTA.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440.
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | aubergine 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 to the aubergine rail; two-pane queue+detail holds side by side |
+| 1440 | content caps at `form-max-width` for forms; tables and dashboards use the full width |
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Carry the palette: aubergine `primary`, the dark aubergine `sidebar`, lavender `accent`
+  tints, blue links, near-black ink on white. The `sidebar` is the one categorically dark
+  plane; keep the rest of the app light.
+- Leave behind the marketing surface — pastel-mesh gradients, floating UI mockups,
+  hero-scale display, the full-bleed aubergine footer band do not exist here.
+- Accent only the primary action; if two things want the aubergine, one is not primary.
+  Blue is for links, not buttons. Give the primary CTA the pill; everything else on `radius`.
+- Detail and edit go in the side panel; a modal is a confirmation, not a workspace (P3).
+- Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono` (P4).
+- Every workflow completes from the keyboard; the `ring` focus outline is always visible (P6).

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

@@ -0,0 +1,171 @@
+---
+schema: design-md/v1
+product: SpaceX
+provenance: library
+sourced: 2026-07-04
+---
+
+# SpaceX — the mission-console operator reading
+
+An operator translation of SpaceX's design language into a mission console. The marketing theatre
+stays behind: full-bleed rocket and Mars photography, autoplaying launch video, hero-scale display
+type, the museum negative space. What carries is the austere chassis underneath — a pure-black
+canvas, an achromatic white accent doing every "click me" job, the condensed industrial D-DIN voice
+set UPPERCASE with the brand's signature *positive* tracking, tight 4px chrome, and a zero-shadow
+flat depth. This is the one library entry where the light-default floor legitimately yields: SpaceX
+is **categorically dark** — pure `#000000` is the load-bearing brand fact — so the default theme
+wears near-black, and the brief blesses the override plainly (brand tokens win; a pure `#000000`
+surface is exactly the case the catalog lets a design.md demand).
+
+## 1 Visual Theme
+
+Dark by default, and pure black on purpose. The canvas is `background` `#000000` (canvas-night) — the
+brand's single most recognizable fact — with cards lifting to `#0a0a0a` (canvas-night-soft), a
+barely-lifted near-black that reads as elevation with no shadow at all. Flat throughout: hierarchy comes
+from the near-black surface ladder, `#3a3a3f` hairlines, and type weight — never a drop shadow (the
+corpus uses none). There is **no chromatic brand accent**; the one accent is achromatic **white**
+(`#ffffff`), reserved for the single primary action, which inverts to white-on-black. The type voice is
+condensed and engineered — D-DIN, set UPPERCASE on titles and eyebrows with a distinctly *positive*
+letter-spacing, the one operator brand that tracks out rather than in. Density is `dense`: the operator
+reading is a mission console — telemetry-dense — not the spacious full-bleed of the marketing site.
+
+## 2 Color Roles
+
+Dark values are the default. The brand has no accent colors; black, white, and a derived telemetry
+set of status hues do all the chromatic work. The corpus's light shop surface (white `#ffffff`, ink
+`#000000`, hairline `#e0e0e8`) is the inverse a light form context can opt into, but the console
+wears black.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` | canvas-night `#000000` | the page canvas — pure black, the signature; no tint |
+| `card` / `popover` | canvas-night-soft `#0a0a0a` | cards and overlays lift off pure black by the surface step alone |
+| `foreground` | on-primary `#ffffff` | all primary ink — the dominant text color |
+| `muted` | near-black `#141417` | hover rows, subtle fills (a hair above card) |
+| `muted-foreground` | cool gray `#8a8a92` | labels, captions, secondary text — corpus ink-mute `#5a5a5f` is a light-surface tone; on black it lightens to read |
+| `border` / `input` | hairline-on-dark `#3a3a3f` | every separator, grid line, and field edge — the highest-frequency token |
+| `primary` | white `#ffffff` | the one primary action; active nav; the wordmark — the accent is achromatic, not a hue |
+| `primary-foreground` | ink `#000000` | text/icon on the white fill — black on white, never gray |
+| `accent` | cool near-black `#1e1e26` | selected / hovered rows and nav — selection lifts the near-black, it does not colour it |
+| `ring` | white `#ffffff` | the focus outline — maximally visible on black, because keyboard-first (corpus link-on-dark is white) |
+| `destructive` | telemetry-red `#ff453a` | destructive / abort actions and error state only |
+| `success` / `warning` | nominal-green `#32d74b` / caution-amber `#ff9f0a` | status signalling only, never chrome |
+
+On-primary-mute `#f0f0fa` (a cooled-white barely distinct from white) is the corpus's subtle-hierarchy
+secondary text on dark; reach for it only where a whisper of text hierarchy is wanted without a gray.
+
+## 3 Typography
+
+One condensed sans, plus a mono the operator console adds. `font-sans` is **D-DIN** — the condensed
+industrial cut inspired by the DIN 1451 engineering standard; Inter at 700+ with positive tracking is the
+corpus-named substitute, and Arial Narrow the corpus fallback that keeps the width compression. The
+display face is D-DIN-Bold (700); the body is D-DIN (400) — there is **no mid weight**, the brand jumps
+400 → 700. `font-mono` is a **derived** addition (`Space Mono`, JetBrains Mono fallback): the corpus omits
+mono outright, but a mission console needs a telemetry / ID / timestamp voice, and Space Mono's engineered
+character suits the DIN aesthetic. Numeric and telemetry columns render `tabular-nums`.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title (UPPERCASE) | 24px / 1.1 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head (UPPERCASE) | 18px / 1.2 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head (UPPERCASE) | 15px / 1.3 | `font-weight-strong` · `heading-tracking` |
+| body | UI + prose | 14px / 1.5 | `font-weight-normal` · `+0.01em` |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow / nav | 12px / 1.4 | `font-weight-normal`, `+0.08em`, uppercase |
+| number | table figures, telemetry | 13px / 1.4 | `font-mono` · `tabular-nums` |
+
+The positive tracking and the UPPERCASE display are the brand's irreducible signature; body carries a
+faint `+0.01em` — the whole system reads engineered rather than designed. Emphasise by weight, never size.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled white (`primary`) on black (`primary-foreground`), tight `radius`, no
+  pill, UPPERCASE label positively tracked. The **ghost pill** is the brand's signature CTA — transparent,
+  1px `border`, white text, `pill` radius (32px), UPPERCASE — reserved for a lone hero action (a launch /
+  commit / deploy confirm), never two side by side. Secondary: `secondary` fill, 1px `border`.
+- **Input** — `card` fill, 1px `border` (`border-weight`), `radius`; focus draws the white `ring` at full
+  2px, no glow.
+- **Card** — `card` (`#0a0a0a`) on a 1px `border`, `radius`; elevation is the surface step + hairline off
+  pure black, never a shadow; inset by `density-inset`.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `accent` on selection;
+  `tabular-nums` + `font-mono` on numeric / telemetry columns.
+- **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 `4 · 8 · 12 · 16 · 18 · 24 · 32 · 48` — note the corpus's
+signature 18px step (its button vertical padding). 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 `dense`, governed globally by `density-tier` (rewriting the spacing scale
+through `density-gap`) and stepped per archetype by the surface catalog — never by absolute overrides. The
+marketing full-bleed bands and their edge-to-edge photography stay behind.
+
+## 6 Depth
+
+Flat, and darker-flat. The corpus's depth is *photographic* — full-bleed imagery does all the lifting —
+and it uses zero drop shadows, blurs, glows, or gradients. The operator reading has no photography, so
+depth becomes the near-black surface ladder plus hairlines:
+
+- **0 — canvas** `background` (`#000000`), no border.
+- **1 — panel / card** `card` (`#0a0a0a`) on a 1px `border`; elevation is the surface step + hairline, no
+  shadow.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns the faintest `sm`
+  lift to separate a floating overlay from the console; even then, prefer the hairline.
+
+Focus is a 2px white `ring` outline (never a glow), visible on every interactive element. Three z-levels:
+content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** keep the canvas pure black (`#000000`) — it is the load-bearing brand fact; cards lift by the
+  `#0a0a0a` step + hairline, never a shadow.
+- **Do** render titles and eyebrows UPPERCASE in the condensed D-DIN with *positive* tracking — the brand
+  tracks out, not in.
+- **Do** reserve the one achromatic accent (white) for the single primary action; everything else is
+  neutral or status.
+- **Do** carry telemetry, IDs, codes, and timestamps in `font-mono` with `tabular-nums`.
+- **Don't** introduce a chromatic brand accent — black, white, and the derived telemetry status hues are
+  the entire palette; a colored "brand" accent breaks the system.
+- **Don't** render titles in sentence-case or title-case — UPPERCASE is the brand.
+- **Don't** signal rank with a drop shadow — the near-black surface step + hairline carries elevation.
+- **Don't** pill every control — the 32px pill is a lone hero-CTA signal; operator controls take the tight
+  4px rect.
+- **Don't** reach for a serif or humanist-sans heading — the condensed industrial DIN cut is non-negotiable.
+
+## 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 24 → 20; density holds |
+| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
+| 1024 | sidebar expands; two-pane console + detail holds side by side |
+| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
+
+The corpus's display tier stair-steps 80 → 60 → 48 → 40px; at operator scale the h1 steps down more
+modestly, but the principle holds — the display shrinks first.
+
+## 9 Agent Prompt Guide
+
+- **Carries:** the pure-black `background` + `#0a0a0a` surface ladder; the achromatic white accent; the
+  condensed D-DIN voice set UPPERCASE with positive tracking on titles and eyebrows; the tight 4px chrome
+  radius; zero-shadow flat depth; the telemetry-dense layout.
+- **Stays behind:** full-bleed rocket / Mars photography and autoplaying launch video; hero-scale display
+  (80 / 60 / 48px); the museum negative space; the marketing full-bleed bands; the ghost-pill-everywhere
+  marketing CTA grammar.
+- Keep the canvas pure black; cards lift by the `#0a0a0a` step + hairline, never a shadow.
+- One accent, and it is white — the primary action inverts to white-on-black; if two things want it, one
+  of them is not primary.
+- Titles and eyebrows are UPPERCASE, condensed, positively tracked — the irreducible signature; body and
+  tables stay sentence-case D-DIN.
+- Every numeric / telemetry column is `tabular-nums`; every ID / code / timestamp is `font-mono` (the brand
+  omits mono — the console adds it for telemetry).
+- Every workflow completes from the keyboard; the white 2px `ring` focus outline is always visible.
+- The 32px ghost pill is a lone hero CTA (a launch / commit confirm), never two side by side.