@nurix/etna 0.19.11 → 0.19.13

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

@@ -1,147 +0,0 @@
----
-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

@@ -1,158 +0,0 @@
----
-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 f04).
-
-| 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 f03).
-- **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 f06). 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 (f03).
-- Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono` (f04).
-- Every workflow completes from the keyboard; the `ring` focus outline is always visible (f06).

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

@@ -1,171 +0,0 @@
----
-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.

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

@@ -1,166 +0,0 @@
----
-schema: design-md/v1
-product: Spotify
-provenance: library
-sourced: 2026-07-04
----
-
-# Spotify — the near-black operator reading
-
-A content-first cocoon reduced to one idea: the UI recedes into near-black shadow so the work glows,
-with a single functional green accent doing all the color. This entry is a deliberate operator
-reading of Spotify — the dark immersion and the one-green discipline carried onto internal tools (a
-media library, a catalog console, a content-ops dashboard), with the album-art color source and the
-hero pill geometry left behind.
-
-## 1 Visual Theme
-
-Dark by conviction, not by option. `background` is near-black `#121212` (never pure black — Spotify is
-deliberately near-black), and surfaces step up by lightness rather than by line: `card` #181818,
-interactive `secondary` #1f1f1f, elevated cards #252525/#272727. A single accent — Spotify Green
-`primary` (#1ed760) — carries the one action that matters and nothing decorative. Because an operator
-surface has no album art to color it, that green plus the status hues carry **all** the color on an
-otherwise achromatic field; keep them scarce. Depth is shadow-carried, not flat — on near-black a
-hairline all but vanishes, so elevation reads through heavy shadow and surface-lightening. Density is
-`dense`: dark compression, built for scanning. This is Spotify's one true theme, so
-`color-tokens.light` (the always-present default slot) carries the near-black set — dark is not opt-in
-here, it is the identity.
-
-## 2 Color Roles
-
-One accent — `primary` green is the only chromatic hue that carries brand meaning; red / orange / blue
-speak status only. On the achromatic near-black field the accent and status hues are the sole color, so
-scarcity is doubly load-bearing.
-
-| Role | Value | Allowed where |
-| --- | --- | --- |
-| `primary` | Spotify Green #1ed760 | the one primary action, active nav, play/CTA — never decorative, never on a background |
-| `primary-foreground` | black #000000 | icon/text on the green fill — the signature; never white on green |
-| `background` / `sidebar` | near-black #121212 | page and nav canvas — the deepest layer, the dark cocoon |
-| `card` | dark surface #181818 | cards, containers — one lightness step off the canvas |
-| `secondary` / `muted` | mid-dark #1f1f1f | interactive/secondary surfaces, subtle fills, hover rows |
-| `foreground` | white #ffffff | primary text (max-emphasis #fdfdfd, bright secondary #cbcbcb available) |
-| `muted-foreground` | silver #b3b3b3 | secondary text, inactive nav, captions, dividers |
-| `border` / `input` | subtle #2a2a2a | grid lines and field edges (control borders take the heavier #4d4d4d) |
-| `accent` | lift #282828 | selected/hovered rows and nav — a neutral surface-lift, never a green wash |
-| `ring` | green #1ed760 | the focus outline — unmistakable, because keyboard-first |
-| `destructive` | negative red #f3727f | destructive actions and error state |
-| `success` | deep green #1db954 | up/success status — the deeper green variant, distinct from the bright accent |
-| `warning` | orange #ffa42b | caution and warning status only |
-
-Announcement blue #539df5 is an info/status hue and a chart color, never a second brand accent.
-
-## 3 Typography
-
-One family, split by cut. `font-sans` is SpotifyMixUI (Circular by Lineto; Inter is the corpus-adjacent
-substitute) — the Title cut serves headings, the UI cut serves body, tables, and labels, same family.
-The voice is a **bold/regular binary**: most text is 700 (`font-weight-strong`) or 400
-(`font-weight-normal`), 600 used sparingly — hierarchy comes from weight contrast, not size. Type is
-compact (10–24px), tuned for scanning, not reading. `font-mono` is derived — the corpus names none (a
-music player has no IDs or logs), but operator tables need a numeric voice; numeric columns render
-`tabular-nums`.
-
-| Step | Role | Size · line | Weight · tracking |
-| --- | --- | --- | --- |
-| h1 | page / section title | 24px / 1.25 | `font-weight-strong` · 0 |
-| h2 | feature heading | 18px / 1.3 | `font-weight-strong` · 0 |
-| h3 | card / group head | 16px / 1.4 | `font-weight-strong` · 0 |
-| body | UI + prose | 14px / 1.45 | `font-weight-normal` |
-| small | labels, dense table | 12px / 1.5 | `font-weight-normal` |
-| caption | uppercase eyebrow | 12px / 1.33 | `font-weight-strong`, +0.1em, uppercase |
-| code | IDs, timestamps, amounts | 13px / 1.5 | `font-mono` |
-
-The uppercase + wide-tracking (1.4–2px) systematic label voice survives on eyebrows and section labels;
-it does not ride every button — operator buttons stay sentence-case for scannability.
-
-## 4 Component Stylings
-
-Every recurring operator component composes from the primitives — no literal values.
-
-- **Button** — `primary`: filled green on black `primary-foreground`, `radius` (8px), no pill. The full
-  500px pill is a hero flourish left behind; the rounded-tactile character carries at 8px. Secondary:
-  `secondary` #1f1f1f fill, `foreground`. Ghost: transparent, `accent` lift on hover. Icon-only
-  controls stay **circular** — the one piece of pill-and-circle geometry that carries.
-- **Input** — `secondary` fill, `radius`; focus draws the green `ring` at 2px. On dark, the edge reads
-  as an inset/surface step, not an exposed gray line.
-- **Card** — `card` #181818 surface, `radius`; hover lightens the surface a step rather than drawing a
-  border; shadow (`shadow-intensity`) only when it must lift off the canvas.
-- **Table row** — `table-row-height`; row separation by surface-lightening or a subtle `border`;
-  `accent` on selection; `muted` on hover; `tabular-nums` + `font-mono` on numeric columns.
-- **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 (9999), `muted` / status fill, uppercase caption; status badges take
-  `success` / `warning` / `destructive`, never `primary`.
-
-## 5 Layout
-
-Base unit 8px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48` (Spotify's fine dense low
-end 2–20 carries; 24–48 are operator section spacing). Shell dimensions map one-to-one to the layout
-primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height` (the
-generous search-pill chrome), side panel `side-panel-width` / `side-panel-width-rich`, modal
-`modal-width-max`, forms `form-max-width`, tables full-width. Spotify's full-width now-playing bottom
-bar carries as an optional persistent transport/status bar in a media tool, not as literal music
-chrome. Density is governed globally by `density-tier` (dark compression) and stepped per archetype —
-never by absolute overrides.
-
-## 6 Depth
-
-Shadow-carried, inverting the flat default — on near-black a hairline vanishes, so elevation is heavy
-shadow plus surface-lightening (the corpus: never expose raw gray borders):
-
-- **0 — canvas** `background` #121212, no border.
-- **1 — surface** `card` #181818 / `secondary` #1f1f1f — one lightness step; hover lightens further.
-- **2 — elevated** dropdowns and hover cards ride a `md` shadow (`rgba(0,0,0,0.3) 0 8px 8px`).
-- **3 — dialog** modals, menus, side panels ride an `lg` shadow (`rgba(0,0,0,0.5) 0 8px 24px`) — the
-  dramatic "floating in darkness" lift.
-- **inset — inputs** the recessed inset-border combo (`rgb(124,124,124) 0 0 0 1px inset`) reads as a
-  tactile field edge, not an exposed line.
-
-Focus is a green `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 near-black `#121212`–`#1f1f1f`; carry depth through shade variation and heavy shadow,
-  because on dark a subtle shadow is invisible.
-- **Do** reserve green `primary` for the single most important action, active state, and play/CTA —
-  never decoratively, never on a background. On green, keep black `primary-foreground`.
-- **Do** let the achromatic gray field rest the eye; supply color only through the one accent and the
-  status hues (there is no album art here to do it for you).
-- **Do** carry the bold/regular (700/400) weight binary and keep type compact; apply `tabular-nums` and
-  `font-mono` to every numeric column.
-- **Don't** add a second brand color — announcement blue, orange, and red are status/chart roles, and
-  the deep green `success` is status, not a second accent.
-- **Don't** use light backgrounds for primary surfaces — the dark immersion is the identity.
-- **Don't** full-pill operator buttons or drop uppercase wide-tracking onto every label — those are
-  hero-scale flourishes; the rounded character lives at 8px and circular icon buttons.
-- **Don't** expose raw gray borders where a surface-lift or inset edge will do; don't relax the compact
-  line-heights.
-
-## 8 Responsive
-
-The operator sweep is 375 / 768 / 1024 / 1440:
-
-| Breakpoint | What changes |
-| --- | --- |
-| 375 | sidebar → off-canvas drawer (Spotify's nav → bottom bar echoes here); two-pane list+detail stacks; side panel → full sheet; density holds |
-| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); card grid re-flows 3→2; tables scroll their overflow |
-| 1024 | sidebar expands; two-pane queue+detail holds side by side; grid 5→3 |
-| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width; grid opens up |
-
-## 9 Agent Prompt Guide
-
-- Start in near-black darkness — everything lives on `#121212`; surfaces step by lightness (#181818,
-  #1f1f1f), never by exposed borders. This is the one theme; do not offer a light mockup of it.
-- One accent, always: green `primary` marks THE action and active nav, black on green. On the
-  achromatic field the green and the status hues are the only color — keep them scarce and functional.
-- Carry depth with heavy shadow (`md`/`lg`) and surface-lightening, not flat hairlines — the operator's
-  usual flat default is inverted here because shadow is what reads on dark.
-- Bold/regular weight binary (700/400); compact type; `tabular-nums` + `font-mono` on every numeric
-  column; the uppercase wide-tracked label voice on eyebrows only.
-- Keep the rounded-tactile character at 8px `radius`, pill for badges/chips, circular for icon-only
-  controls.
-- Leave behind: album-art-as-color-source (there is none — the UI supplies its own restrained color),
-  the 500px hero pills, uppercase wide-tracking on every button, the light-mode marketing pills, and the
-  literal music transport bar. What carries: the near-black palette, the one functional green, the
-  achromatic discipline, the compact dense type, the rounded/circular geometry, and shadow-carried depth.