@nurix/etna 0.18.18 → 0.18.20

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

@@ -0,0 +1,233 @@
+---
+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. Both
+machine blocks are fully valued; each judgment away from the brand is annotated `# derived:` where silent.
+
+## 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.
+
+```yaml design-primitives
+radius: 4px                                        # Tesla signature: barely-rounded 4px on all controls; scale still offers 12px for a large image-forward tile
+shadow-intensity: 0.1                              # derived: Tesla is essentially shadowless (Level-3 hint rgba(0,0,0,0.05)); a whisper only lifts a true overlay
+border-weight: 1px
+density-gap: 1                                     # derived: standard tier; marketing whitespace-as-luxury stays behind, base multiplier held at 1
+density-inset: 1                                   # derived: standard operator inset; the generous gallery air stays behind
+font-sans: Universal Sans Text, Inter, system-ui, -apple-system, sans-serif   # Universal Sans is Tesla's proprietary family; Inter is the closest open stand-in (geometric with humanist terminals)
+font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace   # derived: Tesla ships no mono; operator-standard mono for IDs/codes/logs
+font-weight-normal: 400                            # Tesla body weight (regular)
+font-weight-strong: 500                            # Tesla heading/UI weight (medium) — the 500/400 pair is the whole type system; no bold, no light
+heading-tracking: 0                                # Tesla signature: zero letter-spacing at every level; unlike most tech brands it takes no negative tracking
+duration-unit: 50ms                                # derived: corpus documents transition durations, not a base unit; functional operator base
+duration-fast: 100ms                               # derived: snappy color-only state change
+duration-normal: 200ms                             # derived: Tesla's smooth 0.33s marketing pace tempered to a still-relaxed operator normal; the color-only character is the carry
+duration-slow: 330ms                               # Tesla's documented universal 0.33s timing, kept as the slow tier for larger surface changes
+ease-default: cubic-bezier(0.4,0,0.2,1)            # derived: corpus's main transition curve is an unspecified "cubic-bezier"; standard functional ease (the documented text-link curve is preserved in the manifest)
+contrast-boost: 1                                  # derived: Tesla's clean minimal surfaces read as a grid without a boost; the light hairline is intentional
+icon-stroke: 1.5                                   # derived: Tesla's precise, understated aesthetic wants a refined thin stroke, one step under lucide's 2
+icon-size-base: 16px                               # derived: corpus silent; operator standard
+sidebar-width-expanded: 256px                      # derived: Tesla is a top-nav marketing site with no sidebar; 8px-rhythm operator shell
+sidebar-width-collapsed: 56px                      # derived: standard icon-rail width, on the 8px grid
+topbar-height: 56px                                # derived: Tesla's minimal floating nav → a thin recessive operator topbar
+side-panel-width: 440px                            # derived: no operator shell in corpus; 8px-rhythm detail panel
+side-panel-width-rich: 640px                       # derived: content-heavy detail panel on the 8px rhythm
+modal-width-max: 480px                             # derived: Tesla's minimal, confirmation-scale read (its only modal idiom is the region/cookie popup)
+form-max-width: 640px                              # derived: corpus silent; single-column form measure
+table-row-height: 40px                             # derived: corpus has no tables; Tesla's calm engineered chrome sits at the operator-standard 40px, on the 8px rhythm
+verbosity: compact                                 # derived: Tesla's radical subtraction — minimal chrome, terse labels, UI that gets out of the way
+feedback: minimal                                  # derived: Tesla's interactions are strictly color-only (no scale/translate); minimal zeroes the press-scale to honor that, ring stays visible
+density-tier: standard                             # derived: marketing whitespace-as-luxury stays behind; the engineered-uniform chrome carries as standard, neither cramped nor spacious
+product-traits: [inventory, configurator, orders, dashboard, automotive]
+```
+
+```yaml lever-manifest
+version: 1
+fonts: { sans: "Universal Sans Text, Inter, system-ui, -apple-system, sans-serif", mono: "JetBrains Mono, ui-monospace, SFMono-Regular, monospace" }
+color-tokens:
+  light:
+    background: "#ffffff"
+    foreground: "#171a20"
+    card: "#ffffff"
+    card-foreground: "#171a20"
+    muted: "#f4f4f4"
+    muted-foreground: "#5c5e62"
+    border: "#eeeeee"
+    input: "#d0d1d2"
+    ring: "#3e6ae1"
+    primary: "#3e6ae1"
+    primary-foreground: "#ffffff"
+    accent: "#edf1fc"                # derived: faint wash of Electric Blue for selection/hover; brand has no blue-tint surface token
+    accent-foreground: "#3e6ae1"
+    destructive: "#dc2626"           # derived: Tesla's marketing site uses browser defaults for status; operator needs a real destructive red
+    destructive-foreground: "#ffffff"
+    success: "#16a34a"               # derived: Tesla avoids semantic color; an engineered green for operator status only
+    warning: "#d97706"               # derived: Tesla avoids semantic color; an amber for operator status only
+    popover: "#ffffff"
+    popover-foreground: "#171a20"
+    secondary: "#f4f4f4"             # Light Ash — the subtle alternate surface as secondary-button fill
+    secondary-foreground: "#393c41"  # Graphite — Tesla's secondary-CTA text tone
+    chart-1: "#3e6ae1"               # Electric Blue — the anchor
+    chart-2: "#171a20"               # derived: Carbon Dark — monochrome-plus-one, so charts run blue + the grayscale ink ramp
+    chart-3: "#393c41"               # derived: Graphite
+    chart-4: "#5c5e62"               # derived: Pewter
+    chart-5: "#8e8e8e"               # derived: Silver Fog
+    sidebar: "#f4f4f4"               # derived: Tesla has no dark chrome; the Light Ash subtle surface serves as the recessive rail
+    sidebar-foreground: "#171a20"
+    sidebar-primary: "#3e6ae1"
+    sidebar-primary-foreground: "#ffffff"
+    sidebar-accent: "#edf1fc"        # derived: faint Electric Blue wash for the active/hovered nav item
+    sidebar-accent-foreground: "#3e6ae1"
+    sidebar-border: "#eeeeee"
+    sidebar-ring: "#3e6ae1"
+spacing-scale: [4, 8, 12, 16, 24, 32, 48, 64]
+radius-scale: [0, 4, 12, 9999]
+shadow-levels: [none, sm]
+motion: { durations: [100, 200, 330], easings: ["cubic-bezier(0.4,0,0.2,1)", "cubic-bezier(0.5,0,0,0.75)"] }
+icons: { family: lucide, stroke: 1.5 }
+accent-count: 1
+```

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

@@ -0,0 +1,248 @@
+---
+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; judgments away from the
+editorial surfaces are annotated `# derived:` where the corpus is silent.
+
+## 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
+
+The manifest carries hex (the corpus's native format) in the default-emitted theme, valued with the
+brand's dark palette. 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.
+
+```yaml design-primitives
+radius: 8px                                        # derived: the Verge is emphatically never-square; controls stay softly rounded (scale offers 12/20px cards), the 24-40px marketing pill stays behind
+shadow-intensity: 0.2                              # derived: militantly flat color-as-elevation brand; on a dark canvas a shadow barely registers, so overlays get only the faintest ring
+border-weight: 1px                                 # corpus: 1px hairlines do the work shadows do elsewhere
+density-gap: 1
+density-inset: 1
+font-sans: PolySans, Space Grotesk, system-ui, sans-serif        # PolySans is the UI workhorse; Space Grotesk is the corpus-named substitute
+font-mono: PolySans Mono, Space Mono, ui-monospace, monospace    # PolySans Mono is the all-caps label voice; Space Mono substitute
+font-weight-normal: 400                            # derived: brand body runs 500 for editorial reading; dense operator body reads cleaner at 400
+font-weight-strong: 700                            # corpus: PolySans headlines run 700; the brand is punchy, not calm
+heading-tracking: 0                                # derived: PolySans operator headings track ~0; the signature positive tracking lives on the all-caps mono labels, applied by hand
+duration-unit: 50ms                                # derived: operator base; corpus documents "ease" transitions but not a unit
+duration-fast: 100ms                               # derived
+duration-normal: 150ms                             # corpus: cards, tiles, and inputs transition at 150ms ease
+duration-slow: 250ms                               # derived
+ease-default: cubic-bezier(0.4,0,0.2,1)            # corpus: transitions are "ease"; standard functional curve
+contrast-boost: 1                                  # derived: liberal hairlines plus the near-black surface ladder already carry the grid
+icon-stroke: 2                                     # derived: the Verge's bold, industrial character carries a full-weight 2px stroke, not the refined 1.75 default
+icon-size-base: 16px                               # derived: corpus silent on UI icons; operator standard
+sidebar-width-expanded: 248px                      # derived: corpus is an editorial homepage with no app shell; operator standard
+sidebar-width-collapsed: 56px                      # derived: no shell in corpus; operator standard icon rail
+topbar-height: 56px                                # derived: corpus top nav is "thin"; operator standard with room for the bold wordmark
+side-panel-width: 420px                            # derived: no shell in corpus; operator standard
+side-panel-width-rich: 640px                       # derived: content-heavy detail width
+modal-width-max: 560px                             # derived: confirmations only
+form-max-width: 640px                              # derived: corpus caps content at ~1280px; operator forms cap tighter
+table-row-height: 44px                             # derived: the brand's paced whitespace → rows breathe a touch over the dense 40px default
+verbosity: default                                 # derived: the mono-label voice likes visible labels, kickers, and tags
+feedback: subtle
+density-tier: standard                             # derived: an editorial-paced brand read to an honest operator tier; the console density is available per-archetype
+product-traits: [log-stream, dashboard, cms, content-queue, admin]
+```
+
+```yaml lever-manifest
+version: 1
+fonts: { sans: "PolySans, Space Grotesk, system-ui, sans-serif", mono: "PolySans Mono, Space Mono, ui-monospace, monospace" }
+color-tokens:
+  light:
+    background: "#131313"          # Canvas Black — the categorically-dark canvas fills the default-emitted theme slot
+    foreground: "#ffffff"          # Hazard White
+    card: "#1a1a1a"                # derived: a faint step off canvas so multi-card surfaces read; border still carries
+    card-foreground: "#ffffff"
+    muted: "#242424"               # derived: subtle fill / hover, between card and slate
+    muted-foreground: "#949494"    # Secondary Text
+    border: "#313131"              # Image Frame hairline — white/mint reserved for emphasis
+    input: "#313131"
+    ring: "#1eaedb"                # Focus Cyan — the brand's dedicated keyboard-focus hue
+    primary: "#3cffd0"             # Jelly Mint — the one accent
+    primary-foreground: "#000000"  # Absolute Black — the only place black appears
+    accent: "#2d2d2d"              # Surface Slate — neutral selection tint, never a mint wash
+    accent-foreground: "#ffffff"
+    destructive: "#ff3b5c"         # derived: brand has no red; a hazard-register red-pink so destructive reads as danger (corpus error-purple handed to charts)
+    destructive-foreground: "#ffffff"
+    success: "#22c55e"             # derived: brand has no green; a clear green distinct from the mint-cyan primary
+    warning: "#ffd23c"             # derived: echoes the brand's yellow story tile
+    popover: "#1a1a1a"
+    popover-foreground: "#ffffff"
+    secondary: "#2d2d2d"           # Surface Slate — secondary button fill
+    secondary-foreground: "#e9e9e9" # Muted Text
+    chart-1: "#3cffd0"             # mint
+    chart-2: "#5200ff"             # Verge Ultraviolet — a brand hazard, chart-only here
+    chart-3: "#ffd23c"             # yellow tile hue
+    chart-4: "#ff4da6"             # derived: pink tile hue
+    chart-5: "#1eaedb"             # electric blue / focus cyan doubling as a chart hue
+    sidebar: "#0f0f0f"             # derived: a hair darker than canvas so the nav reads as chrome
+    sidebar-foreground: "#ffffff"
+    sidebar-primary: "#3cffd0"     # mint active nav
+    sidebar-primary-foreground: "#000000"
+    sidebar-accent: "#2d2d2d"
+    sidebar-accent-foreground: "#ffffff"
+    sidebar-border: "#313131"
+    sidebar-ring: "#1eaedb"
+spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 64]
+radius-scale: [2, 4, 8, 12, 20, 9999]
+shadow-levels: [none, sm]
+motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
+icons: { family: lucide, stroke: 2 }
+accent-count: 1
+```