@nurix/etna 0.18.18 → 0.18.20

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

@@ -0,0 +1,220 @@
+---
+schema: design-md/v1
+product: Warp
+provenance: library
+sourced: 2026-07-04
+---
+
+# Warp — the warm-monochrome terminal operator design
+
+Warp is an agentic development environment — a terminal wrapping an AI agent — and its marketing site
+mirrors the product: a single warm near-charcoal band running the whole page (warmer than pure black),
+copy almost entirely in Inter, DM Mono for the terminal mockups, no gradient, no chromatic accent
+anywhere. This entry is the *operator* reading of that brand — an internal tool (agent-run console,
+session queue, deploy stream) in Warp's language. What carries: the warm brown-beige temperature on
+every neutral, the extremely tight near-rectangular radius, the Inter + DM Mono voice, the quiet display
+(weight 400, negative tracking, never heavy), hairline-only flat depth, and — the defining trait — a
+**monochrome** system with no chromatic accent. What stays behind: the 64px hero display, the 96px
+section rhythm, the full-page terminal-mockup imagery, and the always-dark marketing band.
+
+**Warm, light, and monochrome.** Warp's identity is the warmth, not the darkness — `oklch` hue 84.6, a
+brown-beige tint on every neutral. This theme keeps that warmth on a **light** paper floor so the
+light-default floor holds cleanly; the brand's own warm-charcoal `#2b2622` survives as the code / log /
+terminal inlay (Warp is a terminal — that surface is real chrome, not a mockup). With no chromatic
+accent, the one operator accent is **ink**: the primary action is a filled warm-charcoal button. Both
+machine blocks are fully valued; judgments away from the brand are annotated `# derived:`.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. The whole UI floats on a warm paper `background` (`#f2efe8`); cards
+lift to Warp's own off-white `card` (`#f7f5f0`), so a panel reads by a hair of brightness plus its warm
+hairline, never a shadow. Emphatically flat: hierarchy is carried by warm hairline `border`, type
+weight, and the paper-to-off-white surface step. There is **no chromatic accent** — the single accent is
+monochrome ink, warm near-charcoal `primary` (`#2b2622`, Warp's own canvas color), reserved for the one
+primary action, the active-nav indicator, and the focus `ring`. Density is `standard`; the temperature
+and near-rectangular radius keep the terminal-dialect tightness.
+
+## 2 Color Roles
+
+Light values (the manifest carries hex — the corpus's native format). No chromatic accent: `primary` is
+monochrome ink; the chart series live only in charts (see §7); status hues speak only status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` | warm paper `#f2efe8` | the page floor and content canvas — the dominant surface |
+| `card` / `popover` | Warp off-white `#f7f5f0` | cards and overlays — a bright warm lift off the paper, differentiated by hairline |
+| `foreground` | warm charcoal `#2b2622` | display and all primary ink — Warp's own canvas color, inverted to ink |
+| `muted` / `secondary` | soft warm fill `#eae6dd` | hover rows, quiet band tints, secondary-button fill |
+| `muted-foreground` | warm gray `#6b655c` | labels, captions, secondary text |
+| `border` / `input` | warm hairline `#e2ddd2` | every separator, grid line, and field edge — one warm step, not an ink line |
+| `primary` | warm charcoal `#2b2622` | the one primary action; the focus `ring`; the active-nav indicator — ink, not a hue |
+| `primary-foreground` | off-white `#f7f5f0` | text on the charcoal action — the brand's own light tone |
+| `accent` | warm selection lift `#e4dfd4` | selected / hovered rows and nav — a neutral warm step, never ink-filled |
+| `ring` | `primary` charcoal | the focus outline — unmistakable, because keyboard-first |
+| `destructive` | warm brick-red `#c0392b` | destructive actions and error state only |
+| `success` / `warning` | warm green `#5b8a45` / warm amber `#b8791f` | status signalling only, never chrome |
+
+The warm-charcoal `#2b2622` is not only ink — it is also the code / log / terminal inlay surface (§6).
+
+## 3 Typography
+
+`font-sans` is Inter — one sans carries body, UI, labels, and headings, weights 400 / 500 the working
+pair. `font-mono` is DM Mono for IDs, codes, timestamps, log lines, and every terminal surface; numeric
+columns render `tabular-nums`. The defining typographic trait is the **quiet display**: page titles wear
+weight 400 with negative tracking — never a billboard — while smaller component heads step up to the
+strong 500. The 64px hero display and rare Instrument Serif italic stay behind; a surface tops out at a
+24px page title.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.25 | `font-weight-normal` (400) · `heading-tracking` |
+| h2 | section head | 20px / 1.3 | `font-weight-normal` (400) · `heading-tracking` |
+| h3 | card / group head | 15px / 1.4 | `font-weight-strong` (500) · 0 |
+| body | UI + prose | 14px / 1.45 | `font-weight-normal` |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow | 12px / 1.4 | `font-weight-strong`, `+0.04em`, uppercase |
+| code | IDs, logs, amounts | mono 13px / 1.4 | `font-weight-normal` |
+
+Keep page titles at 400 with negative tracking — the quiet voice; never a heading at 700+, and emphasise by size, never heavy weight.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+- **Button** — primary: filled charcoal `primary` on off-white `primary-foreground`, `radius` (near-rectangular), never a pill. Secondary: off-white `card` fill, 1px `border`, `foreground`. Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the charcoal `ring` at full 2px, no glow.
+- **Card** — off-white `card` surface on a 1px `border` — the bright step off the paper carries the lift; shadow only when a true overlay must separate; inset by `density-inset`.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on numeric columns; row selection warms to `accent`.
+- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich` for content-heavy), beside the work, not over it.
+- **Badge** — pill radius (badges only), `muted`/status fill, uppercase caption; status badges take `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` — the marketing
+96px section rhythm stays behind. Shell dimensions map one-to-one to the layout primitives: sidebar
+`sidebar-width-expanded` (240px) / `sidebar-width-collapsed` (56px), topbar `topbar-height` (52px, the
+brand's nav height), side panel `side-panel-width` (420px) / `side-panel-width-rich` (640px), modal cap
+`modal-width-max`, forms `form-max-width`, tables full-width — a touch tight, the terminal dialect
+through the shell. Density is governed globally by `density-tier` and stepped per archetype by the
+surface catalog — never by absolute overrides.
+
+## 6 Depth
+
+Flat and hairline-only. Depth comes from the paper-to-off-white surface step and warm hairlines, not shadow:
+- **0 — canvas** `background` (`#f2efe8`), no border.
+- **1 — panel / card** off-white `card` (`#f7f5f0`) on a 1px `border`; the bright step off the paper plus the hairline carries the lift. Selected / hover rows warm to `accent` (`#e4dfd4`).
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns the faintest soft lift, enough to float an overlay above the paper. Rank is surface, border, and position — never a heavier shadow.
+- **inlay — code / log / terminal** warm charcoal `#2b2622` with off-white text and `font-mono` — Warp's own terminal chrome carried into a light UI.
+
+Focus is a 2px charcoal `ring` outline (never a glow), visible on every interactive element; three z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** anchor every surface on the warm paper canvas — pure white as the page floor reads as any-other-tool; the brown-beige tint is Warp.
+- **Do** keep the accent monochrome — the primary action, the focus `ring`, and the active-nav indicator are warm-charcoal ink. There is no chromatic accent, by design.
+- **Do** keep page titles at weight 400 with negative tracking, and render every code, log, and terminal surface in `font-mono` (DM Mono) on the warm-charcoal inlay, with `tabular-nums` on numeric columns.
+- **Don't** introduce a chromatic brand accent — the off-white-and-charcoal monochrome IS Warp's voice; a colored CTA breaks the brand.
+- **Don't** render a heading at 700+ or reach for a generous pill radius — the display is quiet at 400 and the button radius is near-rectangular (3–4px); pill is badges only.
+- **Don't** drop a soft drop-shadow on cards or replace the warm paper with a cool gray or pure white — hairlines and the surface step carry depth, and the warmth is the identity.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440.
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
+| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
+| 1024 | sidebar expands; two-pane queue+detail holds side by side |
+| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
+
+Code and log inlays keep mono legibility at every breakpoint by scrolling, not wrapping.
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+- Reach for the warm paper canvas first — never pure white or a cool gray for the page floor; the brown-beige tint is Warp. Cards are the off-white bright step above it.
+- The accent is monochrome ink: spend warm-charcoal once per surface on the primary action, the focus `ring`, and the active-nav indicator. There is no chromatic accent — do not introduce one. Color otherwise belongs to data and status.
+- Page titles wear weight 400 with negative tracking — the quiet voice; component heads and labels earn the strong 500. Never render a heading at 700+.
+- Render code, log, and terminal panels in `font-mono` (DM Mono) on the warm-charcoal `#2b2622` inlay — show real terminal chrome, not a light mockup of it. Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`.
+- Keep the geometry near-rectangular — the button/input radius is 3–4px; pill is badges only. Depth is the paper-to-off-white step and warm hairlines, never shadow; reach for the faint overlay lift only for a true modal or popover. Detail and edit go in the side panel beside the work, never a modal.
+- Keyboard-first: the charcoal `ring` focus outline is always visible. Leave behind the 64px hero display, the 96px section rhythm, the full-page terminal-mockup imagery, and the always-dark marketing band.
+
+```yaml design-primitives
+radius: 4px                                        # corpus: --radius base is rounded.md (4px); buttons run tighter at rounded.sm (3px); the brand is near-rectangular, never a generous pill
+shadow-intensity: 0.15                             # derived: brand is hairline-only ("no drop shadows on cards"); only true overlays earn the faintest lift
+border-weight: 1px                                 # corpus: 1px warm hairlines carry all depth
+density-gap: 1                                     # derived: spacious marketing (96px sections) read to an honest standard operator tier; terminal tightness carried by radius/temperature, not the grid
+density-inset: 1                                   # derived: matches density-gap for coherent component insets
+font-sans: Inter, system-ui, -apple-system, sans-serif   # corpus: Inter carries every display, body, button, and label role (weights 400/500)
+font-mono: DM Mono, ui-monospace, SFMono-Regular, Menlo, monospace   # corpus: DM Mono on every terminal mockup and code surface
+font-weight-normal: 400                            # corpus: body and — defining trait — the quiet display both sit at 400
+font-weight-strong: 500                            # corpus: nav links, buttons, body-strong at 500; the display stays 400 and the brand never goes heavy (700+ forbidden)
+heading-tracking: -0.02em                          # corpus: negative tracking is part of the voice (-1.6px at 64px hero); ~-0.02em at operator heading scale
+duration-unit: 50ms                                # derived: corpus declares no motion system on the marketing surface; operator-standard functional base
+duration-fast: 100ms                               # derived: corpus silent on motion; functional tempo
+duration-normal: 150ms                             # derived: corpus silent on motion; standard functional tempo
+duration-slow: 250ms                               # derived: corpus silent on motion; overlay/panel transition
+ease-default: cubic-bezier(0.4,0,0.2,1)            # derived: corpus silent on motion; standard functional ease
+contrast-boost: 1                                  # derived: the soft warm hairlines are the intended restraint; no boost
+icon-stroke: 1.5                                   # derived: corpus silent on icons; a light refined stroke suits the quiet, minimal feel
+icon-size-base: 16px                               # derived: corpus silent on icon size; operator standard
+sidebar-width-expanded: 240px                      # derived: corpus has no app shell (marketing nav only); terminal-dialect tightness → a dense rail
+sidebar-width-collapsed: 56px                      # derived: standard operator icon rail
+topbar-height: 52px                                # corpus: nav padding md/xl (10px/24px) resolves to a ~52px bar — the brand's nav height
+side-panel-width: 420px                            # derived: corpus has no shell; dense terminal read holds a tight detail panel
+side-panel-width-rich: 640px                       # derived: content-heavy detail panel
+modal-width-max: 560px                             # derived: corpus's CTA bands are full-bleed marketing; operator confirmation cap
+form-max-width: 640px                              # derived: corpus max content ~1200px is marketing; single-column reading caps forms at 640
+table-row-height: 40px                             # derived: terminal-dialect density → the dense 40px default, not the roomier editorial 44
+verbosity: default
+feedback: subtle                                   # derived: brand is quietly understated but keeps a visible keyboard focus ring; gentle present feedback, not austere silence
+density-tier: standard                             # derived: spacious marketing read down to an honest operator tier; terminal tightness carried by radius/temperature, not whitespace
+product-traits: [terminal, dev-tools, ai-console, agent-ops, dashboard]
+```
+
+```yaml lever-manifest
+version: 1
+fonts: { sans: "Inter, system-ui, -apple-system, sans-serif", mono: "DM Mono, ui-monospace, SFMono-Regular, Menlo, monospace" }
+color-tokens:
+  light:
+    background: "#f2efe8"                     # derived: warm paper floor one step below Warp's off-white, holding the brown-beige temperature in a light theme
+    foreground: "#2b2622"                     # corpus: Warp's warm-charcoal canvas, inverted to ink for the light theme
+    card: "#f7f5f0"                           # corpus: Warp off-white — the brand's literal light tone, as the lifted card surface
+    card-foreground: "#2b2622"
+    muted: "#eae6dd"                          # derived: soft warm fill for hover rows and quiet bands, one step below the paper
+    muted-foreground: "#6b655c"               # derived: Warp's light mute (#aea69c reads for dark bg); darkened to a warm gray for light-mode text contrast
+    border: "#e2ddd2"                         # derived: warm hairline inverted from Warp's dark hairline (#3f3a36) for a light surface
+    input: "#e2ddd2"
+    ring: "#2b2622"
+    primary: "#2b2622"                        # corpus: no chromatic accent — the monochrome ink action is Warp's own canvas color
+    primary-foreground: "#f7f5f0"             # corpus: off-white text on the charcoal action (Warp's inverted button-primary)
+    accent: "#e4dfd4"                         # derived: warm selection lift one step past muted, so selection reads over hover; never ink-filled
+    accent-foreground: "#2b2622"
+    destructive: "#c0392b"                    # derived: corpus has no error hue; a warm brick-red matching the palette temperature
+    destructive-foreground: "#f7f5f0"         # derived: off-white on the warm red, holding temperature
+    success: "#5b8a45"                        # derived: corpus has no success hue; a warm-leaning green
+    warning: "#b8791f"                        # derived: corpus has no warning hue; a warm amber matching the brown-beige temperature
+    popover: "#f7f5f0"
+    popover-foreground: "#2b2622"
+    secondary: "#eae6dd"
+    secondary-foreground: "#2b2622"
+    chart-1: "#b0724e"                        # derived: monochrome brand has no chart palette; a warm categorical set (terracotta) holds temperature
+    chart-2: "#8a8250"                        # derived: warm olive
+    chart-3: "#5f7d5a"                        # derived: muted warm sage green
+    chart-4: "#a98a3f"                        # derived: muted warm gold
+    chart-5: "#6b655c"                        # derived: warm taupe neutral, echoing the ink for spread
+    sidebar: "#efece5"                        # derived: a faint warm step below the paper so the nav rail reads as chrome
+    sidebar-foreground: "#2b2622"
+    sidebar-primary: "#2b2622"
+    sidebar-primary-foreground: "#f7f5f0"
+    sidebar-accent: "#e4dfd4"                 # derived: hover/selected nav lift, matches accent
+    sidebar-accent-foreground: "#2b2622"
+    sidebar-border: "#e2ddd2"
+    sidebar-ring: "#2b2622"
+spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 64]
+radius-scale: [0, 2, 3, 4, 6, 9999]
+shadow-levels: [none, sm, md]
+motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
+icons: { family: lucide, stroke: 1.5 }
+accent-count: 1
+```

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

@@ -0,0 +1,220 @@
+---
+schema: design-md/v1
+product: Webflow
+provenance: library
+sourced: 2026-07-04
+---
+
+# Webflow — the visual-builder operator reading
+
+A deliberate operator reading of the Webflow brand: engineered, near-monochrome, hairline-first. The
+marketing site breathes 80px hero display type and full-saturation category cards; an operator surface
+keeps the near-black primary, the pure-gray neutrals, and the single crisp blue, and leaves the
+display type and chromatic fills behind. Judgments away from the brand are annotated `# derived:`.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. Flat and engineered: a generous white canvas (`background`
+`#ffffff`) carries near-black ink (`foreground` `#080808` — deeper than pure black, so it reads as
+branded, not default). Hierarchy comes from hairline `border` (`#d8d8d8`), type weight, and contrast —
+never heavy shadow; the brand's layered drop-shadow is a marketing flourish operator surfaces reserve
+for true overlays. The primary action is a near-black fill, not a color; a single chromatic accent — a
+crisp blue `#146ef5` — is reserved for interactive state (focus, selection, active nav). The neutral
+ramp is pure achromatic gray, no temperature. Density is `standard`; the anchor surface is white
+content beside a barely-tinted `sidebar`.
+
+## 2 Color Roles
+
+Light values first. One chromatic accent — the blue carries interactive meaning; near-black is the
+action ink; status hues speak only status. The five brand hues live only in charts (§9).
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | white `#ffffff` | page, cards, and overlays — the dominant surface |
+| `foreground` | near-black `#080808` | all primary ink, headings, wordmark |
+| `muted` / `secondary` | light gray `#f4f4f4` | hover rows, subtle fills, secondary buttons |
+| `muted-foreground` | mid gray `#5a5a5a` | labels, captions, secondary text |
+| `border` / `input` | hairline `#d8d8d8` | every separator, grid line, and field edge |
+| `primary` | near-black `#080808` | the one primary action; every primary CTA |
+| `primary-foreground` | white `#ffffff` | ink on the near-black action |
+| `accent` | faint blue tint `#eaf1fe` | selected/hovered rows and nav, on-accent surfaces only |
+| `accent-foreground` / `ring` | blue `#146ef5` | active nav ink, link emphasis, and the focus outline |
+| `destructive` | red `#ee1d36` | destructive actions and error state only |
+| `success` / `warning` | green `#00d722` / amber `#ffae13` | status signalling only, never chrome |
+
+The purple / pink / blue / orange / green category palette is marketing fill; it carries no operator role except as the chart series (§7).
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is WF Visual Sans Variable (falling back to Inter) — a single family
+carries UI, body, and headings; weight and tracking, not a second face, carry the display voice. The
+brand's ceiling is `font-weight-strong` 600 — it never goes heavier. `font-mono` is WFVisualSans-Mono
+(Inconsolata fallback) for IDs, codes, timestamps, and log lines. Display tracks negative
+(`heading-tracking` `-0.01em`) — tight kerning is part of the voice. Numeric columns render
+`tabular-nums` so figures align down a column (floor P4).
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.3 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 20px / 1.4 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 16px / 1.5 | `font-weight-strong` |
+| body | UI + prose, dense table | 14px / 1.6 | `font-weight-normal` |
+| caption | uppercase eyebrow | 12px / 1.2 | `font-weight-strong`, `+0.6px`, uppercase |
+
+Bump weight one step for emphasis — never past 600, never by resizing. Badge labels take the brand's signature semibold caption; the marketing eyebrow (`+1.5px` uppercase) survives as the section label.
+
+## 4 Component Stylings
+
+Every recurring component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled `primary` (near-black) on `primary-foreground`, `radius` 4px, no pill.
+  Secondary: `background` fill, 1px `border`, `foreground`. Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring`
+  (blue) at 2px, no glow.
+- **Card** — `card` surface, 1px `border`, `radius` steps up to the 8px card radius; shadow only when
+  lifted (`shadow-intensity`); inset by `density-inset`.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
+  numeric columns; row selection tints `accent`.
+- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`
+  for content-heavy), beside the work, not over it (floor P3).
+- **Badge** — hairline `border`, `muted`/status fill, uppercase caption; status badges take
+  `success` / `warning` / `destructive`, never `primary`; the info badge fills `ring` blue.
+
+## 5 Layout
+
+Base spacing unit 4px (Tailwind `--spacing` 0.25rem); the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 20 ·
+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 scale through
+`density-gap`) and stepped per archetype by the surface catalog — never by absolute overrides.
+
+## 6 Depth
+
+Flat. Hierarchy comes from the surface ladder and hairlines, not shadow:
+
+- **0 — canvas** `background`, no border.
+- **1 — panel / card** `card` on a 1px `border`; shadow only when it must lift off the canvas.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
+  shadow. The brand's five-stop layered drop-shadow collapses to this single restrained lift; rank is
+  border and position, never a heavier stack.
+
+Focus is a 2px `ring` (blue) outline, never a glow, on every interactive element (floor P6). Three
+z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve `primary` (near-black) for the single most important action; everything else is
+  neutral or status, and hierarchy rides hairlines, weight, and whitespace — the brand is flat.
+- **Do** keep one chromatic accent: blue `#146ef5` for interactive state; nothing else competes.
+- **Do** apply `tabular-nums` to numeric columns, `font-mono` to IDs/codes/timestamps, and cap type
+  weight at 600 — emphasize by weight, never by resizing or a heavier face.
+- **Don't** use the purple / pink / blue / orange / green category palette as button or chrome fills —
+  those stay in the chart series; a chromatic CTA is off-brand.
+- **Don't** pill the primary CTA or reach for a radius outside `radius-scale` (buttons 4px, cards 8px).
+- **Don't** open detail or edit in a modal when the side panel fits — modals are confirmations only.
+- **Don't** import the 80px hero display type or marketing gutters into an operator surface.
+
+## 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 / 1440 | sidebar expands; two-pane queue+detail holds; forms cap at `form-max-width`, tables full-width |
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- What carries: the near-black `primary` action, pure achromatic gray neutrals, the single blue
+  interactive accent, 4px button / 8px card radius, the WF Visual Sans → Inter voice at weights
+  400–600 with negative tracking, and the five brand hues as the chart series. What stays behind: the
+  80px hero display type, full-saturation category-card fills, and marketing gutters.
+- Accent only the primary action with near-black; reserve blue for focus, selection, and active nav.
+  If two things want emphasis, one of them is not primary.
+- Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono` (P4).
+- Every workflow completes from the keyboard; the 2px blue `ring` is always visible (P6). Stay flat —
+  hairline and weight before shadow; reach past a hairline only for a real overlay.
+
+```yaml design-primitives
+radius: 4px                                        # derived: brand's canonical button/badge radius; cards step to the 8px card radius via the scale
+shadow-intensity: 0.5                              # derived: brand's signature is layered drop-shadow on featured cards; operator stays hairline-first, mid intensity lifts true overlays only
+border-weight: 1px
+density-gap: 1
+density-inset: 1
+font-sans: WF Visual Sans Variable, Inter, system-ui, -apple-system, sans-serif
+font-mono: WFVisualSans-Mono, Inconsolata, ui-monospace, SFMono-Regular, Menlo, monospace
+font-weight-normal: 400
+font-weight-strong: 600
+heading-tracking: -0.01em                          # derived: brand display tracking is -0.16px/16px ≈ -0.01em; negative kerning is the voice
+duration-unit: 50ms                                # derived: corpus has no motion spec; standard operator base
+duration-fast: 100ms                               # derived: no corpus motion
+duration-normal: 150ms                             # derived: no corpus motion
+duration-slow: 250ms                               # derived: no corpus motion
+ease-default: cubic-bezier(0.4,0,0.2,1)            # derived: standard operator ease
+contrast-boost: 1
+icon-stroke: 1.75                                  # derived: one step under lucide's 2 for a refined, engineered operator stroke
+icon-size-base: 16px
+sidebar-width-expanded: 248px                      # derived: brand is a website with no app shell; standard operator rail
+sidebar-width-collapsed: 56px                      # derived: no brand shell
+topbar-height: 56px                                # derived: brand nav-bar 16px vertical padding + 22px line ≈ 54, rounded
+side-panel-width: 420px                            # derived: no brand shell
+side-panel-width-rich: 640px                       # derived: no brand shell
+modal-width-max: 560px                             # derived: no brand shell
+form-max-width: 640px                              # derived: no brand shell
+table-row-height: 44px                             # derived: brand's ~44px touch-target rhythm; cell padding 12/16
+verbosity: default
+feedback: subtle
+density-tier: standard                             # derived: marketing surface is spacious, but a general operator default balances legibility and density; archetypes step denser
+product-traits: [cms, dashboard, builder, admin, content-ops]
+```
+
+```yaml lever-manifest
+version: 1
+fonts: { sans: "WF Visual Sans Variable, Inter, system-ui, -apple-system, sans-serif", mono: "WFVisualSans-Mono, Inconsolata, ui-monospace, SFMono-Regular, Menlo, monospace" }
+color-tokens:
+  light:
+    background: "#ffffff"
+    foreground: "#080808"
+    card: "#ffffff"
+    card-foreground: "#080808"
+    muted: "#f4f4f4"                               # derived: light neutral fill; brand neutrals are pure achromatic
+    muted-foreground: "#5a5a5a"
+    border: "#d8d8d8"
+    input: "#d8d8d8"
+    ring: "#146ef5"                                # derived: brand info blue is the interactive/focus accent
+    primary: "#080808"
+    primary-foreground: "#ffffff"
+    accent: "#eaf1fe"                              # derived: faint tint of the info blue for selection/hover surfaces
+    accent-foreground: "#146ef5"
+    destructive: "#ee1d36"
+    destructive-foreground: "#ffffff"
+    success: "#00d722"
+    warning: "#ffae13"
+    popover: "#ffffff"
+    popover-foreground: "#080808"
+    secondary: "#f4f4f4"                           # derived: matches the secondary-button neutral fill
+    secondary-foreground: "#080808"
+    chart-1: "#7a3dff"
+    chart-2: "#3b89ff"
+    chart-3: "#00d722"
+    chart-4: "#ff6b00"
+    chart-5: "#ed52cb"
+    sidebar: "#fafafa"                             # derived: faint neutral to seat the rail against the white canvas
+    sidebar-foreground: "#080808"
+    sidebar-primary: "#080808"                     # derived: brand app-shell active indicator uses the near-black primary
+    sidebar-primary-foreground: "#ffffff"
+    sidebar-accent: "#eaf1fe"                      # derived: selected-nav tint matches the content accent
+    sidebar-accent-foreground: "#146ef5"
+    sidebar-border: "#d8d8d8"
+    sidebar-ring: "#146ef5"
+spacing-scale: [2, 4, 8, 12, 16, 20, 24, 32, 48, 64]
+radius-scale: [0, 2, 4, 8, 9999]
+shadow-levels: [none, sm, md]
+motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
+icons: { family: lucide, stroke: 1.75 }
+accent-count: 1
+```