@nurix/etna 0.18.19 → 0.18.21

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

@@ -0,0 +1,153 @@
+---
+schema: design-md/v1
+product: Tesla
+provenance: library
+sourced: 2026-07-04
+---
+
+# Tesla — radical-subtraction minimalism, translated for operators
+
+Tesla's web design is radical subtraction: a white canvas, a single Electric Blue accent, a rich
+grayscale ink ramp, near-zero decoration, and a categorical geometry — **barely-rounded 4px
+corners**. This operator reading keeps the white-dominant palette, the one blue accent, the 4px
+radius character, the flat/shadowless depth, the two-weight (400 / 500) type discipline, the
+signature **zero letter-spacing**, and the color-only interaction feel. Left behind: full-viewport
+hero photography, 40px display type, whitespace-as-luxury rhythm, the frosted-glass nav, the
+carousel, the chatbot bar.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. White-dominant and categorically shadowless: hierarchy rides a
+grayscale surface ladder (`background` white → `muted` Light Ash → hairline `border`) and type weight,
+never shadow. The single accent — Electric Blue `primary` (`#3e6ae1`) — is the only chromatic hue,
+reserved for the one action that matters. Ink is Carbon Dark `foreground` (`#171a20`), a warm
+blue-undertoned near-black, stepping down a documented ramp (Carbon → Graphite → Pewter → Silver Fog).
+The geometry is the identity: `radius` 4, barely rounded. The anchor surface is a white canvas beside a
+Light Ash `sidebar`; density is `standard` — engineered-uniform, the marketing whitespace left behind.
+
+## 2 Color Roles
+
+Light values (hex — the corpus's native format). One accent — `primary` Electric Blue is the only
+chromatic hue that carries meaning; status hues speak only status. The rich grayscale ramp is Tesla's
+signature alongside the single blue.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | Pure White `#ffffff` | page, cards, and overlays — the dominant canvas that lets content breathe |
+| `foreground` | Carbon Dark `#171a20` | primary ink, headings, nav — the darkest text, a warm blue-undertoned near-black |
+| `muted` / `secondary` | Light Ash `#f4f4f4` | hover rows, subtle fills, secondary-button surfaces, section differentiation |
+| `muted-foreground` | Pewter `#5c5e62` | labels, captions, tertiary links, placeholders' firmer sibling |
+| `border` | Cloud Gray `#eeeeee` | separators and divider lines — the light hairline |
+| `input` | Pale Silver `#d0d1d2` | field edges — the firmer border tone Tesla uses for delineation |
+| `primary` | Electric Blue `#3e6ae1` | the one primary action; active nav; promotional emphasis text |
+| `accent` | faint blue wash `#edf1fc` | selected / hovered rows and nav, on-accent surfaces only |
+| `ring` | `primary` | the focus outline — an unmistakable blue border, because keyboard-first |
+| `destructive` | red `#dc2626` | destructive actions and error state only |
+| `success` / `warning` | green `#16a34a` / amber `#d97706` | status signalling only, never chrome |
+
+Graphite `#393c41` is the `secondary-foreground` (body / secondary-CTA text); Silver Fog `#8e8e8e` is the
+placeholder / disabled tone. Tesla avoids semantic status color (browser defaults); the derived
+`destructive` / `success` / `warning` give the operator tool a status vocabulary, kept off the chrome (§7).
+
+## 3 Typography
+
+One sans, one mono. `font-sans` leads with Universal Sans Text — Tesla's custom geometric family with
+humanist terminals, unifying web, app, and in-car software — falling back to Inter, the open-source
+stand-in. The hero-scale Universal Sans Display (40px / 500) stays behind; the operator ramp keeps the
+voice at working sizes. `font-mono` is derived (Tesla ships none) — JetBrains Mono for IDs, codes,
+timestamps; numeric columns render `tabular-nums`.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.25 | `font-weight-strong` (500) · `heading-tracking` (0) |
+| h2 | section head | 18px / 1.3 | `font-weight-strong` · 0 |
+| h3 | card / group head | 16px / 1.35 | `font-weight-strong` · 0 |
+| body | UI + prose | 14px / 1.45 | `font-weight-normal` (400) |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| caption | eyebrow / meta | 12px / 1.3 | `font-weight-strong` · 0 · sentence case |
+
+Two weights only — 500 for heads and UI, 400 for body; **no bold, no light**. **Zero letter-spacing at
+every level** is the Tesla signature (unlike most tech brands it takes no negative tracking); **no
+uppercase transforms** — captions and labels stay sentence-case. Emphasize by weight, never size.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values, `radius` 4 on
+controls throughout.
+
+- **Button** — `primary`: filled Electric Blue on `primary-foreground`, `radius` (4px), no pill; the
+  border reserves space for the focus animation. Hover is color-only — a subtle darkening, never a
+  transform. Secondary: `secondary` Light Ash fill, 1px `border`, `secondary-foreground` Graphite.
+- **Input** — `background` fill, 1px `input` (Pale Silver) edge, `radius`; placeholder in Silver Fog
+  (`muted-foreground`); focus draws the blue `ring` at 2px, no glow.
+- **Card** — white `card`, optional 1px `border`, `radius` (4px controls; the scale offers 12px for a
+  large image-forward tile); no shadow at rest, inset by `density-inset`.
+- **Table row** — `table-row-height`; Cloud Gray `border` grid lines; Light Ash `muted` on hover;
+  `tabular-nums` on numeric columns; row selection tints `accent`.
+- **Side panel** — detail and edit open beside the work (`side-panel-width` / `side-panel-width-rich`),
+  never over it.
+- **Badge / chip** — `radius`, hairline `border`, `muted` / status fill, sentence-case caption (no
+  uppercase); status badges take `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing unit 8px (Tesla's grid); the on-scale ramp is `4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` (the
+4px step is the button 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 cap `modal-width-max`, forms `form-max-width`, tables
+full-width capped at ~1383px (Tesla's container). Density is governed globally by `density-tier` and
+stepped per archetype; the viewport-height rhythm and whitespace-as-luxury stay behind.
+
+## 6 Depth
+
+Flat, and essentially shadowless — Tesla's elevation approach is "none." Hierarchy comes from the surface
+ladder, hairlines, and z-position, never a drop shadow:
+
+- **0 — flat** `background` white, no shadow, no border — the default at rest for cards, panels, controls.
+- **1 — frost** sticky chrome floats over content by a frosted-glass backdrop (`rgba(255,255,255,0.75)`)
+  and z-position, not shadow.
+- **2 — overlay** `popover` / side panel / modal — a region-scrim (`rgba(128,128,128,0.65)`) dims the
+  canvas beneath; `shadow-intensity` earns only a whisper `sm` shadow, a hairline still carrying the edge.
+
+Focus is a 2px `ring` outline in Electric Blue (never a glow), visible everywhere. Three z-levels:
+content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve Electric Blue (`primary`) for the single most important action — never decoration;
+  carry hierarchy with the grayscale surface ladder, hairlines, and weight.
+- **Do** keep every corner barely rounded — `radius` 4 on buttons, inputs, and chips is the signature.
+- **Do** hold typography at 400 / 500 only, zero letter-spacing, and sentence case — no bold, no light,
+  no negative tracking, no uppercase; apply `tabular-nums` to numbers, `font-mono` to IDs / codes / times.
+- **Don't** promote a second chromatic accent — the palette is monochrome-plus-one; status uses
+  `success` / `warning` / `destructive`, never the blue.
+- **Don't** pill or over-round a control (radius stays inside `radius-scale`), or signal elevation with a
+  drop shadow — the aesthetic is flat.
+- **Don't** animate with scale or translate — Tesla's interactions are color-only (background and border
+  transitions).
+
+## 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 | content caps at ~1383px; forms hold `form-max-width`; tables and dashboards use the full width |
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Carries over: the white-dominant palette (Carbon → Graphite → Pewter → Silver Fog ink ramp, Electric
+  Blue `#3e6ae1`), the single-accent discipline, the 4px technical radius, the flat/shadowless depth, the
+  two-weight 500 / 400 type voice with zero tracking and no uppercase.
+- Stays behind: full-viewport hero photography, 40px display type, whitespace-as-luxury rhythm, the
+  frosted-glass nav, the carousel, the chatbot bar — none belong in operator chrome.
+- Accent only the primary action in Electric Blue — if two things want it, one is not primary.
+- Keep motion color-only — background and border transitions, never a scale or translate; the hot path
+  tempers Tesla's languid 0.33s to a still-smooth normal, parking 330ms for large surface changes.
+- Numeric columns `tabular-nums`, IDs / codes / timestamps `font-mono`; every workflow keyboard-complete
+  with the blue `ring` focus outline always visible; stay flat, a whisper `sm` shadow only for a true overlay.

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

@@ -0,0 +1,167 @@
+---
+schema: design-md/v1
+product: The Verge
+provenance: library
+sourced: 2026-07-04
+---
+
+# The Verge — the operator reading
+
+The operator reading of The Verge's 2024 editorial system. The Verge is categorically dark — "there
+is no light mode; the dark canvas is the product" — so this entry earns the doctrine's dark
+exception: the near-black canvas fills the default-emitted theme, recorded plainly because the brand
+demands it. What carries onto internal tools (a content queue, a moderation dashboard, an activity
+log): the near-black canvas, the single acid-mint accent, the mono-uppercase label voice, the flat
+color-as-elevation depth, and the rounded-never-square character. What stays behind: the marketing
+shout — 60–107px Manuka hero display, the saturated rave-flyer story tiles, the FK Roman serif
+pulls, the 40px pill CTAs, the thin-weight "fashion whisper" eyebrows. The result is unmistakably
+The Verge — a developer-console feel with club-night color — but it reserves its one accent and
+earns its density.
+
+## 1 Visual Theme
+
+Dark by default, deliberately — the categorically-dark exception, not the light-default norm. The canvas
+is Canvas Black `#131313`, almost-but-not-pure black with just enough warmth to read as a printed-newsprint
+negative rather than an OLED void. Flat: hierarchy comes from 1px hairline `border`, the near-black surface
+ladder, and saturated color — never heavy shadow, color is elevation here. A single accent, Jelly Mint
+`primary` (`#3cffd0`), is reserved for the one action that matters, treated like neon safety paint; ink is
+Hazard White `foreground` (`#ffffff`). The type voice pairs a grotesque sans body with a mono-uppercase
+label register — the second-most-identifiable Verge detail after the display face. Density is `standard`;
+the anchor surface is the black canvas beside a fractionally darker `sidebar`.
+
+## 2 Color Roles
+
+One accent: `primary` (mint) is the only chromatic hue that carries brand meaning; ultraviolet,
+yellow, pink, and electric blue live only in charts, and status hues speak status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` | Canvas Black `#131313` | the page — the dominant near-black surface, no light mode |
+| `foreground` | Hazard White `#ffffff` | primary text and headlines on the canvas |
+| `card` / `popover` | `#1a1a1a` | panels and overlays — a faint step off canvas, border still carries |
+| `muted` | `#242424` | subtle fills and hover rows |
+| `muted-foreground` | Secondary Text `#949494` | bylines, timestamps, captions, column headers |
+| `border` / `input` | Image Frame `#313131` | every quiet hairline, grid line, field edge; white/mint reserved for emphasis |
+| `primary` | Jelly Mint `#3cffd0` | the one primary action, active nav underline — as fill with black text, never small text |
+| `primary-foreground` | Absolute Black `#000000` | text/icon on the mint fill — the only place black appears |
+| `accent` | Surface Slate `#2d2d2d` | selected/hovered rows and nav — a neutral step, never a mint wash |
+| `ring` | Focus Cyan `#1eaedb` | the keyboard-focus outline — the brand's dedicated focus hue, shown nowhere else |
+| `secondary` | Surface Slate `#2d2d2d` | secondary button fill |
+| `destructive` | hazard red-pink `#ff3b5c` | destructive actions and error state only |
+| `success` / `warning` | green `#22c55e` / hazard yellow `#ffd23c` | status signalling only, never chrome |
+
+Verge Ultraviolet `#5200ff` is a brand hazard, not an operator accent — it survives here as a chart hue
+(the corpus's error-purple role is handed to a readable red so destructive reads as danger). Deep Link
+Blue `#3860be` is the text-link hover color; Console Mint Border `#309875` outlines mint elements where
+pure mint over-saturates. White as a large fill is a "spotlight" moment, not the canvas.
+
+## 3 Typography
+
+Two families carry the voice. `font-sans` is PolySans (Space Grotesk the corpus-named substitute) — the
+UI, body, table, and headline workhorse. `font-mono` is PolySans Mono (Space Mono substitute) — used
+exclusively for ALL-CAPS labels: kickers, timestamps, category tags, IDs, log lines. Lowercase mono does
+not exist in this system; every all-caps label carries positive letter-spacing, the Verge signature.
+Numeric columns render `tabular-nums`. Line heights run tight for a telegraph-ticker rhythm.
+
+| Step | Role | Family | Size · line | Weight · tracking |
+| --- | --- | --- | --- | --- |
+| h1 | page title | sans | 26px / 1.1 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | sans | 20px / 1.2 | `font-weight-strong` · 0 |
+| h3 | card / group head | sans | 16px / 1.3 | `font-weight-strong` · 0 |
+| body | UI + prose | sans | 14px / 1.5 | `font-weight-normal` |
+| small | labels, dense table | sans | 13px / 1.4 | `font-weight-normal` |
+| label | all-caps kicker / tag / timestamp | mono | 12px / 1.2 | `font-weight-strong`, +0.12em, uppercase |
+| code | IDs, logs, amounts | mono | 13px / 1.5 | `font-weight-normal` |
+
+Emphasis is the jump from 400 to 700 — the brand is punchy, not calm. The Manuka display, the 300-weight
+whisper eyebrows, and the FK Roman serif pulls stay behind; the mono-uppercase label register is the
+irreducible type signature and carries.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled mint on `primary-foreground` (black on mint), `radius`, no pill; hover
+  inverts to a translucent-white surface, active dims. Secondary: `secondary` slate fill, `foreground`.
+  Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the Focus Cyan
+  `ring` at 2px, no glow.
+- **Card** — `card` surface on a 1px `border`; a focused or active card firms its hairline to mint or
+  white (the depth ladder), never a shadow lift; 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`; timestamps and IDs ride `font-mono` uppercase.
+- **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 / tag** — pill radius, `muted` / status fill, `font-mono` uppercase caption with positive
+  tracking; status badges take `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing unit 4px (the corpus's editorial 8px base loosens for the operator grid); 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` (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`, tables full-width. The corpus caps content at ~1280px with
+24/48px outer padding — operator forms cap tighter at `form-max-width`. Density is governed globally by
+`density-tier` and stepped per archetype by the surface catalog — never by absolute overrides.
+
+## 6 Depth
+
+Flat, color-as-elevation. Hierarchy comes from the near-black surface ladder and hairlines, never a
+traditional shadow:
+
+- **0 — canvas** `background` (`#131313`), no border.
+- **1 — panel / card** `card` on a 1px `border`; a focused card firms its hairline to mint `#3cffd0` or
+  white — the border escalates, the surface does not lift.
+- **2 — overlay** `popover` / side panel / modal — on a dark canvas a drop shadow barely registers, so
+  `shadow-intensity` earns only the faintest `sm` ring; separation is carried by border and position.
+
+Focus is a Focus Cyan `ring` outline (never a glow), visible on every interactive element. The active-nav
+underline is a 1px inset mint rule — a signature Verge move that carries. Three z-levels: content, sticky
+chrome, overlay. No gradients, no glows, no atmospheric blurs — the hazard-tape aesthetic breaks if
+anything fades.
+
+## 7 Do's & Don'ts
+
+- **Do** anchor every view on the near-black `#131313` canvas — the dark canvas is the product, the
+  categorically-dark exception, not a theme toggle.
+- **Do** reserve mint `primary` for the single most important action and the active-nav underline (black
+  text on the mint fill); everything else is neutral or status.
+- **Do** carry every all-caps label, tag, timestamp, and ID in `font-mono` uppercase with positive
+  tracking — missing tracking is missing voice; apply `tabular-nums` to every numeric column.
+- **Don't** use mint as small text (it vibrates under 16px) or as a background wash — mint is a fill and a
+  hairline, never a canvas tint.
+- **Don't** promote a second chromatic accent — ultraviolet, yellow, and pink are chart/status hues.
+- **Don't** pill the primary CTA (the 40px pill is a marketing shout) or square a corner — controls stay
+  softly rounded at `radius`.
+- **Don't** signal elevation with a drop shadow; escalate the hairline (white, then mint) or step the
+  surface instead.
+
+## 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; mono labels stay pinned at 11–12px; 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; margins breathe |
+
+Saturated status and chart hues never lose saturation on any viewport — they reflow, they do not fade.
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Reach for the near-black `#131313` canvas first — there is no light mode; the dark canvas is the brand.
+- Accent only the primary action in mint, as a fill with black text or the active-nav underline. If two
+  things want the accent, one of them is not primary.
+- Carry the mono-uppercase label voice everywhere labels, tags, timestamps, and IDs appear — positive
+  tracking on every all-caps run; every numeric column is `tabular-nums`, every ID / log line `font-mono`.
+- Every workflow completes from the keyboard; the Focus Cyan `ring` outline is always visible.
+- Stay flat — hairline and the near-black surface ladder before any shadow; escalate a border to white or
+  mint before reaching for elevation.
+- Leave the marketing shout behind: the 60–107px Manuka hero, the saturated story tiles, the FK Roman
+  serif pulls, the 40px pill CTAs, the 300-weight whisper eyebrows. What carries: the near-black palette,
+  the single mint accent, the mono-uppercase voice, the rounded-never-square character, and flat depth.

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

@@ -0,0 +1,140 @@
+---
+schema: design-md/v1
+product: Together AI
+provenance: library
+sourced: 2026-07-04
+---
+
+# Together AI — the white-band operator reading
+
+Together AI's surface alternates two registers: near-black hero bands carrying a single piece of
+brand chrome — a three-color orange-magenta-periwinkle gradient ribbon — and bright white technical
+bands where the real content lives (pricing tables, docs, model rows). This entry is the *operator*
+reading: it lives in the **white technical band**, carried onto a CRM, a queue, or a dashboard. What
+carries: the white canvas, stark black ink and black CTA, the uppercase mono-caps eyebrow/label
+voice, hairline-led flatness, the tight 4px radius, and a near-black nav rail — the brand's dark nav
+made permanent. What stays behind: near-black content bands, the gradient ribbon, hero-scale display
+(64px), the giant `together.ai` wordmark banner, the mint/white hero pills, and the dual-surface
+alternation. The gradient's colors survive only in data viz.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. Flat — hierarchy is carried by hairline `border`, type weight, uppercase
+mono labels, and surface contrast, never by shadow. The register is stark: ink is pure black `foreground`
+(`#000000`) on a pure white canvas — recorded plainly, because the brand's own ink is `#000000` and that
+starkness *is* the voice. The primary action wears black `primary` (`#000000`) — a monochrome CTA, not a
+color; the brand's black pill carried intact. One chromatic accent — a periwinkle-indigo pulled from the
+cool leg of the brand gradient — is reserved for links, selection, and focus; the full three-stop gradient
+stays marketing-only. The persistent nav rail wears the brand's near-black nav color (`sidebar` `#010120`) —
+the dark-nav-over-light-content signature made permanent. Density is `standard`, stepping denser per
+archetype; the brand's pricing tables read like a sheet.
+
+## 2 Color Roles
+
+One chromatic accent — periwinkle-indigo carries interactive meaning; status hues (all derived — the
+brand documents none) speak only status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | canvas white `#ffffff` | page, cards, and overlays — the dominant surface, differentiated by border not brightness |
+| `foreground` | ink black `#000000` | all primary text — stark, per the brand |
+| `muted` | faint neutral `#f5f5f5` | hover rows, subtle fills |
+| `muted-foreground` | body gray `#666666` | labels, captions, mono eyebrows, secondary text |
+| `secondary` | canvas-soft `#ebebeb` | secondary buttons, table-header rails, toggle rails |
+| `border` / `input` | hairline `#e6e6e6` | every separator, grid line, field edge, and card chrome |
+| `primary` | black `#000000` | the one primary action; active nav — a neutral, not a color |
+| `accent` | pale periwinkle `#eeedfd` | selected/hovered rows and nav, on-accent surfaces only |
+| `accent-foreground` | periwinkle-indigo `#4b44dd` | links, selection detail — the single interactive hue |
+| `ring` | periwinkle-indigo `#4b44dd` | the keyboard focus outline — the one accent, so focus never reads as the black CTA |
+| `destructive` | red `#dc2626` | destructive actions and error state only |
+| `success` / `warning` | green `#16a34a` / amber `#d97706` | status signalling only, never chrome |
+
+The three-stop gradient (orange → magenta → periwinkle) and the mint pill are marketing graces — no chrome role here; they survive only as chart hues (see §6, §7).
+
+## 3 Typography
+
+Two faces carry the whole system, and their contrast *is* the brand. `font-sans` is Together's geometric
+display sans (`The Future`, Inter substitute) — headings and body both ride it; tight negative tracking,
+not weight, is the voice, and it never bolds past 500. `font-mono` is the uppercase mono-caps face
+(`PP Neue Montreal Mono`, JetBrains Mono substitute) — the brand's irreducible signature: every eyebrow,
+button label, table-header cell, and system tag is set in it, uppercase, at positive tracking. Headlines
+stay sentence-case; every uppercase moment is the mono. Numeric columns render `tabular-nums`; the 64px
+hero display stays behind.
+
+| Step | Role | Family | Size · line | Weight · tracking |
+| --- | --- | --- | --- | --- |
+| h1 | page title | sans | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | sans | 20px / 1.3 | `font-weight-strong` · -0.015em |
+| h3 | card / group head | sans | 16px / 1.35 | `font-weight-strong` · -0.01em |
+| body | UI + prose | sans | 14px / 1.45 | `font-weight-normal` |
+| small | labels, meta, dense table | sans | 13px / 1.4 | `font-weight-normal` |
+| mono-label | uppercase eyebrow / header cell | mono | 11px / 1.4 | `font-weight-strong`, +0.05em, uppercase |
+| mono-button | uppercase button label | mono | 13px / 1 | `font-weight-strong`, +0.02em, uppercase |
+| code | IDs, logs, amounts | mono | 13px / 1.5 | `font-weight-normal` |
+
+Never let the mono carry a paragraph; emphasis is weight-to-strong or a switch to the mono face.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled black `primary` on `primary-foreground`, `radius` (4px), never a full pill, label in uppercase mono. Secondary: `secondary` fill, 1px `border`, `foreground`. Ghost: `accent` on hover.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the periwinkle `ring` at 2px, no glow.
+- **Card** — `card` on a 1px `border`; white-on-white, read by its hairline, never brightness; shadow only when a true overlay lifts (`shadow-intensity`); inset by `density-inset`.
+- **Table row** — height `table-row-height`; `secondary` header fill with uppercase mono header cells; `border` grid lines; `muted` on hover; `tabular-nums` on numeric columns; selection tints `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` (9999) allowed here as a brand grace; hairline `border` or status fill, uppercase mono 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 · 80` (the 80 preserves the
+brand's dramatic section rhythm). Shell dimensions map one-to-one to the layout primitives: the near-black
+sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height` (the brand's nav
+rhythm), side panel `side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms
+`form-max-width`, tables full-width. Rows ride `table-row-height` (40px — the brand's sheet-tight pricing
+row). 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 hairlines, surface polarity, and the dark rail — not shadow:
+
+- **0 — canvas** `background` white, no border.
+- **1 — panel / card** `card` white on a 1px `border`; white-on-white read entirely by the hairline.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md` shadow, navy-tinted (the brand's `rgba(1,1,32,0.1)` drop); modals lean on a tinted scrim, not a heavy shadow.
+- **rail — nav** the persistent sidebar wears near-black `sidebar` (`#010120`) with white text — the brand's dark nav carried, the one dark surface in a light UI.
+
+The gradient is not chrome here — it lives in charts (`chart-1..5` carry the accent indigo, brand magenta, brand orange, deepened mint). Focus is a 2px periwinkle `ring` outline, never a glow, on every interactive element. Three z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** keep the canvas pure white and the ink pure black — the stark black-on-white is the brand's technical register.
+- **Do** set every eyebrow, button label, and table-header cell in uppercase mono (`font-mono`) with positive tracking — the two-face contrast is the voice.
+- **Do** reserve black `primary` for the single most important action and the periwinkle `accent-foreground` for links, selection, and focus — one accent, treated as scarce.
+- **Do** dress the persistent nav rail in the near-black `sidebar` (`#010120`) — the brand's dark nav made permanent.
+- **Don't** set headlines in the all-caps mono or let the mono carry a paragraph — every uppercase moment is the mono, every headline is the sans in sentence case.
+- **Don't** promote a second chromatic accent, or reduce the three-stop gradient into UI chrome — it survives only at chart scale.
+- **Don't** full-pill the primary CTA (buttons keep the 4px `radius`; pills stay on badges), or signal elevation with heavy drop shadows — hairlines and surface polarity carry rank.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440.
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | dark sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; table rows stack model above values; density holds |
+| 768 | sidebar collapses to the near-black 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; section rhythm widens |
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Reach for the white canvas and pure-black ink first; float hairline-bordered white `card` surfaces on it, read by border, never by brightness.
+- Set every eyebrow, button label, and table-header cell in uppercase mono (`font-mono`); keep headlines in the sentence-case sans with tight negative tracking. Never bold the sans past 500.
+- Accent only the primary action in black `primary`; let the periwinkle `accent-foreground` be the one chromatic hue, for links, selection, and focus. If two things want the accent, one is not primary.
+- Dress the persistent nav rail in the near-black `sidebar` (`#010120`) — the one dark surface in a light UI.
+- Every numeric column is `tabular-nums`; every ID, code, model slug, and timestamp is `font-mono`. Every workflow completes from the keyboard; the periwinkle `ring` focus outline is always visible.
+- Stay flat — hairline and surface polarity before shadow; reach past a hairline only for a real overlay.
+- Leave the marketing furniture behind: near-black content bands, the gradient ribbon, the 64px hero display, the wordmark banner, the mint/white hero pills. The gradient's colors return only in charts.

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

@@ -0,0 +1,140 @@
+---
+schema: design-md/v1
+product: Uber
+provenance: library
+sourced: 2026-07-04
+---
+
+# Uber — the black-and-white super-app operator design
+
+The operator reading of Uber's monochrome web brand. The marketing theatre stays behind: hero
+display type (52 / 36px), the editorial 4:3 illustrations, the ride-request hero card, and the
+alternating white-then-black band rhythm. What carries is the chassis underneath — a black-and-white
+duet where pure black `primary` (`#000000`) does every conversion job, the pill on every interactive
+control, a flat no-shadow-by-default discipline, the neutral-tracked geometric sans voice, and the
+polarity-flip as the depth cue.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. The system is a black-and-white duet: a pure white `background`
+canvas, pure black `foreground` ink, and a single accent that is not a colour at all — black `primary`
+(`#000000`) carries the one primary action, the active state, and the polarity-flipped bands. No second
+chromatic accent exists; the identity is the monochrome contrast plus one signature shape — the pill.
+Every interactive control rounds to the pill (`9999`), Uber's irreducible geometry, while cards take a
+soft 16px. Pure black is intentional (the brand ink is true `#000000`, recorded plainly over the generic
+no-pure-black bias). Flat: hierarchy is hairline `border`, type weight, and the polarity-flip, never
+shadow. The anchor surface is a white canvas beside a black `sidebar` — the shell is the duet, at `standard` density.
+
+## 2 Color Roles
+
+Light values. One accent: black `primary` is the only value that carries meaning; the status hues
+are derived and speak only status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | white `#ffffff` | page, cards, and overlays — the dominant surface |
+| `foreground` | pure black `#000000` | all primary ink and headlines — the brand's true-black ink |
+| `muted` / `secondary` | canvas-soft `#efefef` | hover rows, subtle fills, chip grounds, the gray subtle-pill button |
+| `muted-foreground` | body gray `#5e5e5e` | labels, captions, secondary text |
+| `border` / `input` | pressed gray `#e2e2e2` | every separator, grid line, and field edge |
+| `primary` | black `#000000` | the one primary action; active nav mark; the polarity-flip bands |
+| `accent` | pressed gray `#e2e2e2` | selected / hovered rows — a gray wash, never a hue |
+| `ring` | black `#000000` | the focus outline — maximally visible, keyboard-first |
+| `destructive` | derived red `#d93025` | destructive actions and error state only |
+| `success` / `warning` | derived `#157347` / `#b25000` | status signalling only, never chrome |
+
+Links are ink and underlined, never blue — the `#0000ee` browser-blue in Uber's fine print stays behind.
+The black `sidebar` wears Uber's dark-band tones (`#000000` fill, `#282828` hover); `#afafaf` is placeholder only.
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is Inter — the corpus's substitute for the proprietary UberMove /
+UberMoveText, with `font-feature-settings: "ss01"` approximating UberMove's geometric alternates. One
+family carries body, UI, and headings; weight, not a second face, carries the display voice (the
+two-face split and the hero 52 / 36px sizes stay behind). Tracking is neutral (`0`) — Uber never
+letter-spaces, a stated brand invariant. `font-mono` is Geist Mono for IDs, codes, and timestamps;
+numeric columns render `tabular-nums`.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` (0) |
+| h2 | section head | 20px / 1.3 | `font-weight-strong` · 0 |
+| h3 | card / group head | 16px / 1.4 | `font-weight-strong` · 0 |
+| body | UI + prose | 15px / 1.5 | `font-weight-normal` |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow (rare) | 12px / 1.4 | `font-weight-strong`, `+0.04em`, uppercase |
+| mono | IDs, codes, timestamps | 13px / 1.5 | `font-weight-normal` |
+
+Headlines are sentence-case (the uppercase eyebrow is the rare exception); emphasise by weight, never size or tracking.
+
+## 4 Component Stylings
+
+- **Button** — `primary`: filled black `primary` on `primary-foreground`, pill (`9999`) — the pill IS
+  the signature, kept where other readings would rect. Secondary: white `card` fill, 1px `border`, pill.
+  Subtle: `secondary` gray fill, pill. Ghost: transparent, `muted` hover.
+- **Input** — `background` fill, 1px `border`, the soft `radius` rect (~8px) — inputs are the one
+  control that does **not** pill; focus draws the black `ring` at 2px, no glow.
+- **Card** — `card` surface, 1px `border`, `radius` steps to 16px (Uber's canonical card); shadow only when lifted.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; selection tints
+  `accent`; `tabular-nums` on numerics; the active-row indicator is a black `primary` left edge.
+- **Side panel** — detail and edit open in the side panel (`side-panel-width` / `-rich`), beside the work, never 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 `4 · 6 · 8 · 12 · 16 · 20 · 24 · 32 · 48` (the brand's own
+tokens, including the 6px sub-step). 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` (440px) / `side-panel-width-rich` (640px), modal `modal-width-max`, forms
+`form-max-width`, tables full-width. Density is `standard`, governed by `density-tier`, stepped per archetype.
+
+## 6 Depth
+
+Flat, polarity-first. Hierarchy comes from the black/white contrast and hairlines, not shadow:
+
+- **0 — canvas** white `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`
+  drop (matching Uber's ~0.16-alpha card drop).
+- **band — polarity-flip** inverting to the black `primary` / `sidebar` surface with white text is
+  Uber's signature depth cue: rank by flipping to black, never by stacking a heavier shadow.
+
+Focus is a 2px black `ring` outline (never a glow). Three z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** keep the system black-and-white — one black `primary` doing every conversion job; the
+  monochrome contrast is the brand.
+- **Do** pill every interactive control (buttons, chips, badges) — Uber's irreducible geometric
+  signature; inputs are the one exception (the soft `radius` rect).
+- **Do** keep headlines sentence-case with neutral (`0`) tracking — Uber never letter-spaces; apply
+  `tabular-nums` to numeric columns and `font-mono` to IDs, codes, and timestamps.
+- **Don't** introduce a second chromatic accent — orange, blue, or green flattens the monochrome
+  system; the status hues are derived and reserved for status only.
+- **Don't** render links in browser-blue (the `#0000ee` fine-print artifact stays behind), or put a
+  shadow on chrome — flat is the default; shadow lifts only true overlays.
+- **Don't** reach past `radius-scale`, 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 |
+
+## 9 Agent Prompt Guide
+
+- **Carries:** the black-and-white duet; pure black `primary` as the single accent; the pill on every
+  interactive control; the black `sidebar` / band polarity-flip; Inter (`ss01`) at neutral tracking; flat hairline depth.
+- **Stays behind:** the hero display (52 / 36px); the editorial 4:3 illustrations; the ride-request hero
+  card; the alternating-band rhythm at hero scale; the browser-blue link.
+- Lead every list with its table, every entity with its primary read. Accent only the primary action in
+  black — if two things want black, one is not primary.
+- Pill the interactive controls; inputs take the soft rect; keep the `sidebar` black with white actives.
+  Every numeric column is `tabular-nums`, every ID / code / timestamp `font-mono`, the black `ring` always visible.
+- Stay flat — hairline and polarity-flip before shadow; past a hairline only for a real overlay.