@nurix/etna 0.18.19 → 0.18.21

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

@@ -0,0 +1,140 @@
+---
+schema: design-md/v1
+product: Vercel
+provenance: library
+sourced: 2026-07-04
+---
+
+# Vercel — stark ink-on-near-white developer-platform operator design
+
+The operator reading of Vercel's design language. Vercel's own surface is a marketing deck for
+engineers — a near-white canvas broken at hero scale by a multi-stop mesh gradient (cyan / blue /
+magenta / amber) that is the entire decoration system. This entry keeps what survives at operator
+scale: the stark ink-on-near-white palette, the deliberate gray ramp, the two-tone canvas, the Geist
+type voice (via Inter), negative heading tracking, the 6px radius, and the calm stacked-shadow-plus-
+hairline elevation. The mesh gradient, the pill CTA, the hero display, and the dark bands stay behind.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. The system is achromatic to its core — ink `foreground` `#171717`
+on a two-tone near-white field: the page body is `#fafafa` (98% white) and cards sit on pure white
+`#ffffff`, separated by a `#ebebeb` hairline, not by brightness. Flat: hierarchy is carried by the
+gray ramp, hairline `border`, and type weight — never heavy shadow. The single accent is the ink
+itself — Vercel's primary action is a **black button** (`primary` `#171717` on white); one chromatic
+hue, link/focus blue `#0070f3`, is reserved for interaction. Density is `standard`; the anchor surface
+is a white canvas beside a faintly-tinted `sidebar`.
+
+## 2 Color Roles
+
+Light values. The identity is monochrome — ink + a deliberate gray ramp; the one chromatic accent is
+the interaction blue, and status speaks status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` | near-white `#fafafa` | the page body — 98% white, the dominant field |
+| `card` / `popover` | pure white `#ffffff` | cards, panels, and overlays — set off the body by a hairline, not brightness |
+| `foreground` | ink `#171717` | all primary ink and headlines |
+| `muted` / `secondary` | canvas-soft-2 `#f5f5f5` | hover rows, inset regions, secondary button fills |
+| `muted-foreground` | gray `#666666` | labels, captions, secondary text |
+| `border` / `input` | hairline `#ebebeb` | every separator, grid line, and field edge |
+| `primary` | ink `#171717` | the one primary action — the black button; active nav indicator |
+| `accent` | canvas-soft-2 `#f5f5f5` | selected / hovered rows and nav — a neutral gray wash, never coloured |
+| `ring` | interaction blue `#0070f3` | the focus outline — the one chromatic hue, unmistakable and keyboard-first |
+| `destructive` | red `#ee0000` | destructive actions and error state only |
+| `success` / `warning` | green `#16a34a` / amber `#f5a623` | status signalling only, never chrome |
+
+The mesh gradient (cyan `#50e3c2`, violet `#7928ca`, pink `#ff0080`, amber) is a hero-only marketing
+object with no operator role (see §7); its hues survive only as chart series.
+
+## 3 Typography
+
+One sans, one mono, single continuous voice. `font-sans` is **Geist** — the brand's custom geometric
+face — with **Inter** the corpus-named open substitute (`Geist, Inter, system-ui, sans-serif`); it
+carries display, body, button, and label. `font-mono` is Geist Mono (JetBrains Mono the substitute)
+for IDs, codes, timestamps, terminal mockups, and technical eyebrows. Numeric columns render `tabular-nums`.
+
+| 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` · -0.01em |
+| body | UI + prose | 14px / 1.45 | `font-weight-normal` · -0.28px |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| eyebrow | technical label, section eyebrow | 12px / 1.35 | `font-weight-normal`, mono |
+| code | IDs, logs, command snippets | 13px / 1.5 | `font-weight-normal`, mono |
+
+Weight 600 is the display ceiling — the sans never reaches 700, and the brand reads calm for it. Bump
+weight to emphasise, never size. Negative tracking is the voice (hero -0.05em stays behind; headings hold -0.03em).
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled ink on `primary-foreground`, `radius` 6px, no pill — the black button
+  is the signature, kept square. Secondary: white `card` fill, 1px `border`. Ghost: `accent` on hover.
+- **Input** — `background` fill, 1px `border`, `radius`; focus draws the blue `ring` at 2px, no glow (field 40px).
+- **Card** — pure white `card` on a 1px `border`, `radius`; a faint stacked shadow plus inset-hairline ring only when lifted.
+- **Table row** — height `table-row-height`; `border` grid; `muted` on hover; selection tints `accent`; `tabular-nums` on numerics.
+- **Side panel** — detail and edit open in the panel (`side-panel-width`, `side-panel-width-rich`), beside the work, not over it.
+- **Badge** — hairline `border`, `muted`/status fill; status uses `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing unit 4px (corpus `--geist-space`); the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 ·
+48 · 64` — the marketing 96 / 128 / 192px section rhythm stays behind. Shell dimensions map one-to-one
+to the layout primitives: sidebar `sidebar-width-expanded` (256px) / `sidebar-width-collapsed` (56px),
+topbar `topbar-height` (64px, the corpus nav height), side panel `side-panel-width` (440px) /
+`side-panel-width-rich` (640px), modal `modal-width-max`, forms `form-max-width`, tables full-width.
+The page reads engineered — large gaps between regions, tight interior stacks. Density is governed by
+`density-tier`, stepped per archetype by the surface catalog, never by absolute overrides.
+
+## 6 Depth
+
+Flat, calm, achromatic. Rank comes from the gray ladder and hairlines, never a heavy drop:
+
+- **0 — canvas** `background` (`#fafafa`), no border.
+- **1 — card / panel** pure white `card` set off the body by a 1px `border` + inset hairline ring.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft
+  stacked `md` shadow, kept subtle (corpus elevation rides 4–12% black, never a single 8px blur).
+
+Focus is a 2px blue `ring` outline (never a glow) on every interactive element — the one place a
+chromatic hue appears, because the achromatic ink would vanish on the black button. Three z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** anchor on the two-tone near-white field — `#fafafa` page, `#ffffff` cards, set off by a hairline.
+- **Do** make the primary action a square black button (`primary` ink, `radius` 6px); it is the brand.
+- **Do** carry hierarchy with the gray ramp, hairlines, and type weight — the system is flat.
+- **Do** set every ID, code, timestamp, and technical eyebrow in `font-mono`; mono is the platform's voice.
+- **Don't** introduce a second chromatic accent — the interaction blue is focus and links only.
+- **Don't** render the CTA as a 100px pill or mix pill with 6px radii — pick the 6px in-app scale and hold it.
+- **Don't** bring the mesh gradient in at all — it is a hero-scale object, never an icon or a swatch.
+- **Don't** promote the geometric sans past weight 600, set body in mono, or signal elevation with a heavy drop.
+
+## 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; nav → hamburger |
+| 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 terminal panels keep mono legibility at every breakpoint by scrolling horizontally, not wrapping.
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Anchor on the two-tone near-white field — `#fafafa` page, white cards set off by a hairline; never
+  pure-white everywhere, never a coloured page.
+- Make the one primary action a square black button; accent nothing else. Reserve the interaction blue
+  `#0070f3` for the focus `ring` and inline links only — never a fill, never a second accent.
+- Set page titles in the geometric sans with negative tracking (never past weight 600); set every ID,
+  code, timestamp, and technical eyebrow in `font-mono`; every numeric column is `tabular-nums`.
+- Carry depth with the gray ladder, hairlines, and the inset-hairline card ring — past a hairline only
+  for a real overlay. Every workflow completes from the keyboard; the blue `ring` is always visible.
+- Leave marketing behind entirely: the mesh gradient, the 100px pill CTA, the 48px hero display, the
+  dark bands, and the 96 / 128 / 192px section rhythm.

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

@@ -0,0 +1,130 @@
+---
+schema: design-md/v1
+product: VoltAgent
+provenance: library
+sourced: 2026-07-04
+---
+
+# VoltAgent — near-black electric-green developer-console operator design
+
+The *operator* reading of VoltAgent — a near-black IDE dressed as a documentation site: an
+unrelenting `#101010` canvas with no light counterpart, one electric-green accent, hairline-bordered
+cards, code-editor mockups. **Categorically dark**, like the source: dark is the signature, a valued
+light daytime mode ships alongside. What carries — the near-black canvas, the single accent held
+scarce, hairline-only flat depth, Inter + SF Mono, the 6px radius, near-black text on green (never
+white); what stays behind — the 60px hero, the code-editor mockups, the 48px band rhythm, the green
+divider band. One green does everything, so `success` is the brand's own deeper emerald `#10b981`
+(its inline-link green), never the accent.
+
+## 1 Visual Theme
+
+Dark by default; light is the opt-in daytime mode. The UI floats on the near-black canvas `background` (`#101010`) —
+no gradient, no glow, no illustration, just the surface and its hairlines. Emphatically flat: hierarchy comes from
+1px `border` hairlines, type weight, and the off-white/near-black contrast, never a drop shadow (only true overlays
+lift). A single accent, electric-green `primary` (`#00d992`), is reserved for the one primary action, live-status
+indicators, the active-nav mark, and the focus `ring`; ink is a strain-reducing off-white `foreground` (`#f2f2f2`).
+Density is `standard`, dense-capable from the engineered-documentation heritage, stepping denser per archetype. The
+anchor surface is the near-black canvas beside a hair-darker `sidebar`, separated by a hairline, not a band.
+
+## 2 Color Roles
+
+The signature is dark; both themes are valued. One chromatic accent — `primary` is the only hue that
+carries the primary-action meaning; status hues speak only status; the deeper emerald `success` is
+deliberately not the accent green.
+
+| Role | Light (daytime) | Dark (signature) | Allowed where |
+| --- | --- | --- | --- |
+| `background` / `card` | `#ffffff` / `#ffffff` | `#101010` / `#1a1a1a` | page canvas; panels a hairline above it |
+| `foreground` | `#101010` | `#f2f2f2` | all primary ink (off-white on dark to ease strain) |
+| `muted` / `secondary` | `#f4f4f5` | `#242424` | hover rows, quiet fills, secondary-button fill |
+| `muted-foreground` | `#6b7280` | `#8b949e` | labels, captions, secondary text |
+| `border` / `input` | `#e4e4e7` | `#3d3a39` | every separator, grid line, and field edge |
+| `primary` | `#00d992` | `#00d992` | the one primary action; live indicators; active nav; `ring` |
+| `primary-foreground` | `#101010` | `#101010` | text on the green — near-black, never white (brand mandate) |
+| `accent` | `#ececed` | `#2e2e2e` | selected / hovered rows and nav — a neutral surface lift, never green |
+| `ring` | `#00d992` | `#00d992` | the focus outline — unmistakable, because keyboard-first |
+| `destructive` | `#dc2626` | `#f04438` | destructive actions and error state only |
+| `success` / `warning` | `#10b981` / `#d97706` | `#10b981` / `#f59e0b` | status only, never chrome; `success` is the deeper emerald, not the accent |
+
+## 3 Typography
+
+Two faces. `font-sans` is Inter (weights 400 / 500 / 600 / 700) — display, body, UI, button, and every uppercase
+eyebrow ride it; a second family never does the label work. `font-mono` is SF Mono (`SFMono-Regular` with Menlo /
+Monaco / Consolas fallbacks; JetBrains Mono or Geist Mono the free substitutes) for IDs, codes, timestamps, log
+lines, and metric counters; numeric columns render `tabular-nums`. The signature label is the **uppercase Inter
+eyebrow with wide positive tracking** (`+0.18em`, the source's `2.52px` at `14px`) — the brand's one flourish.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.35 | `font-weight-strong` (600) · `heading-tracking` |
+| h2 | section head | 20px / 1.4 | `font-weight-strong` (600) · `heading-tracking` |
+| h3 | card / group head | 16px / 1.5 | `font-weight-strong` (600) · 0 |
+| body | UI + prose | 14px / 1.45 | `font-weight-normal` (400) |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow | 12px / 1.3 | `font-weight-strong`, `+0.18em`, uppercase |
+| code | IDs, logs, amounts | mono 13px / 1.4 | `font-weight-normal` |
+
+The calm 60px/400 hero display stays behind — operator headings top out at a 24px title, emphasized by
+weight, never by a heavier display.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — primary: filled green `primary` on near-black `primary-foreground`, `radius` (6px), never a pill. Secondary: `card` fill, 1px `border`, `foreground`. Ghost: transparent, green `primary` label (the one place a green *label* is allowed), `accent` on hover.
+- **Input** — `muted` fill on dark, `background` fill on light; 1px `border` (`border-weight`), `radius`; focus draws the green `ring` at full 2px, no glow.
+- **Card** — `card` surface on a 1px `border`; the hairline carries the edge, not a shadow; inset by `density-inset`. Featured cards take a 3px `border` or a 2px `primary` green edge, never a fill.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on numeric columns; row selection tints `accent` (neutral, never green).
+- **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`, live pills take `primary`.
+
+## 5 Layout
+
+Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` (the marketing
+48px band rhythm stays behind). Shell dimensions map one-to-one to the layout primitives: sidebar
+`sidebar-width-expanded` (248px) / `sidebar-width-collapsed` (56px), topbar `topbar-height` (52px),
+side panel `side-panel-width` (420px) / `side-panel-width-rich` (640px), modal `modal-width-max`, forms
+`form-max-width`, tables full-width — the source has only a marketing top-nav, so these are the operator
+standard. Density is governed globally by `density-tier` and stepped per archetype by the surface catalog.
+
+## 6 Depth
+
+Flat and hairline-first. Depth comes from the surface ladder and hairlines, not shadow:
+
+- **0 — canvas** `background` (`#101010` dark / `#ffffff` light), no border.
+- **1 — panel / card** `card` a hairline above the canvas on a 1px `border` — the source seats marketing cards directly on the canvas with only a hairline; the operator reading lifts panels one surface step so dense tables read, keeping the hairline as the primary edge.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft lift; rank is border, surface, and position, never a heavier shadow.
+
+A 2px `primary` green border marks a featured or active card; the dashed divider stays behind. Focus is a 2px green `ring` outline (never a glow) on every interactive element; three z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** anchor the signature on the near-black canvas (`#101010`); ship the light daytime mode as the opt-in, never the default read.
+- **Do** reserve electric-green `primary` for the single primary action, live indicators, the active-nav mark, and the focus `ring` — its scarcity is what reads as voltage.
+- **Do** render code, log, and terminal surfaces in `font-mono` (SF Mono) with `tabular-nums`; carry the uppercase Inter eyebrow at `+0.18em` for section labels.
+- **Don't** fill a decorative surface with the accent green — it is action, live-status, and the focus ring only; a green *label* is allowed only on the ghost button.
+- **Don't** let a status green equal the accent green — `success` is the deeper emerald `#10b981`, never a CTA.
+- **Don't** pill the primary CTA or use a radius outside `radius-scale` (buttons/inputs 6px, cards 8px; pill is badges and live tags only), and don't signal elevation with drop shadows — hairlines and the one-step surface lift carry depth.
+
+## 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 surfaces keep mono legibility by scrolling horizontally, not wrapping.
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Wear the near-black canvas as the signature; the light daytime mode is opt-in only — never make light the default for this brand. Panels sit a hairline above the canvas.
+- Spend the electric green once per surface: the primary action, live indicators, the active-nav mark, the focus `ring`. If two things want the green, one is not primary. Never fill a decorative surface with it; text on the green is near-black (`#101010`), never white.
+- `success` is the deeper emerald `#10b981`, never the accent green — keep status legible against a brand whose accent is already green.
+- Render every code, log, terminal, and metric surface in `font-mono` (SF Mono); every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`; section labels wear the uppercase Inter eyebrow at `+0.18em`.
+- Depth is hairlines and one surface step, never shadow; reach for the overlay lift only for a true modal or popover. Detail and edit go in the side panel, never a modal. The green `ring` focus outline is always visible. Leave behind the 60px hero, the code-editor mockups, the 48px band rhythm, and the green divider.

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

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

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

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