@nurix/etna 0.18.19 → 0.18.20

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

@@ -0,0 +1,255 @@
+---
+schema: design-md/v1
+product: Supabase
+provenance: library
+sourced: 2026-07-04
+---
+
+# Supabase — an operator reading of the white-canvas, emerald-green system
+
+Supabase's web system is the quietly-technical brand in the database category: a committed white
+canvas, near-black ink that is never pure black, one emerald-green voltage held for the CTA, and real
+product UI (dashboard tables, SQL editors, log streams) doing the decorative work. This entry is the
+*operator* reading — an internal tool (query console, project dashboard, job queue, log stream) in
+Supabase's language. What carries: the white canvas, the single emerald accent held scarce, the
+near-black ink, the idiosyncratic near-black-on-green button, flat hairline-first depth, the 6px
+not-pill radius, the near-black `#1c1c1c` inlay for code and logs (the developer DNA), and Circular's
+mid-weight-500 humanist voice with tight negative tracking. What stays behind: the 64/48px hero
+display, the composited product-mockup float shadows, the dark inverted featured pricing tier, and the
+64–96px marketing section rhythm.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in — the white `background` (`#ffffff`) is the committed floor, and the
+white-canvas commitment is the brand (no atmospheric gradient, no dark marketing track). Flat:
+hierarchy comes from a fine greyscale hairline ladder, type weight, and near-black-on-white contrast —
+never heavy shadow. A single accent, emerald `primary` (`#3ecf8e`), is the only chromatic event on a
+surface: it wears the one primary action, the focus `ring`, and the active-nav indicator, nothing else.
+Ink is near-black `foreground` (`#171717`) — never pure `#000000`. The neutral ramp is a calibrated
+achromatic grey (white through `#fafafa`, `#ededed`, `#dfdfdf` down to `#171717`). Density is
+`standard` and steps denser per archetype — the product's tables and log streams read technical.
+
+## 2 Color Roles
+
+Light values first (the manifest carries the exact hex — the corpus's native format). One accent —
+emerald `primary` is the only chromatic hue that carries meaning; status hues speak only status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | white `#ffffff` (canvas) | page, cards, and overlays — the dominant surface, differentiated by hairline not brightness |
+| `foreground` | near-black `#171717` (ink) | all primary ink and headlines — never pure black |
+| `muted` | barely-tinted `#fafafa` (canvas-soft) | hover rows, subtle fills, quiet band tints |
+| `secondary` | light grey `#f2f2f2` | secondary-button and segmented fills, one step below canvas |
+| `muted-foreground` | mid grey `#707070` (ink-mute) | labels, captions, secondary text |
+| `border` / `input` | hairline `#dfdfdf` | every separator, grid line, and field edge |
+| `primary` | emerald `#3ecf8e` | the one primary action; active-nav indicator; the signature CTA and dot |
+| `primary-foreground` | near-black `#171717` (on-primary) | text on the green action — the button reads "lit" with dark type, not a colored chip |
+| `accent` | grey lift `#ededed` (hairline-cool) | selected/hovered rows and nav — a neutral lift, never coloured green |
+| `ring` | emerald `#3ecf8e` | the focus outline — unmistakable, because keyboard-first |
+| `destructive` | clean red `#dc2626` | destructive actions and error state only |
+| `success` / `warning` | deep-emerald `#24b47e` / status-yellow `#ffdb13` | status signalling only, never chrome |
+
+The emerald's power is its scarcity at element level; the rich accent set (purple, violet, pink,
+indigo, tomato, crimson) is chart-and-logo voltage and carries no operator role beyond charts (see §7).
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is Circular — the brand's proprietary geometric humanist sans; the
+corpus's own shippable substitute is **Inter at weight 500** (Geist Sans an alternative), so the
+manifest carries Inter as the single sans slot for body, UI, and headings. `font-mono` is the brand's
+**system mono** stack (`ui-monospace`, Menlo / Monaco / Consolas — the corpus ships no proprietary mono
+webfont) for IDs, codes, timestamps, log lines, and SQL; numeric columns render `tabular-nums`. The
+marketing display scale (64/48px) stays behind — an operator surface tops out at a 28px page title.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 28px / 1.2 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 22px / 1.2 | `font-weight-strong` · -0.01em |
+| h3 | card / group head | 18px / 1.4 | `font-weight-strong` |
+| body | UI + prose | 16px / 1.5 | `font-weight-normal` |
+| small | labels, meta, dense table | 13px / 1.45 | `font-weight-normal` |
+| caption | uppercase eyebrow | 12px / 1.45 | `font-weight-strong`, +0.02em, uppercase |
+| code | IDs, logs, SQL | 14px / 1.5 | `font-weight-normal` |
+
+Display weight caps at 500 — the brand's calibrated mid-weight reads engineered, and breaks at 600+.
+Negative tracking on headings is the signature; build hierarchy on size and tight tracking, never a
+second family or a heavier-than-500 weight.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — primary: filled emerald `primary` with near-black `primary-foreground`, `radius` (6px),
+  never a pill; pressed lifts to deep-emerald. Secondary: `secondary` fill, 1px `border`, `foreground`.
+  Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the emerald
+  `ring` at full 2px, no glow.
+- **Card** — `card` surface on a 1px `border`, `radius`; depth is the hairline, not shadow — shadow
+  only when it must lift off the canvas; inset by `density-inset`.
+- **Table row** — height `table-row-height`; `border` grid lines carry the grid; `muted` on hover;
+  `tabular-nums` on numeric columns; selection tints `accent` (neutral, never green).
+- **Side panel** — detail and edit open in the panel (`side-panel-width`, `side-panel-width-rich` for
+  content-heavy), beside the work, not over it.
+- **Badge** — pill radius, `muted`/status fill, uppercase caption; status badges take `success` /
+  `warning` / `destructive`, never `primary`. Pill radius is badges-only.
+
+## 5 Layout
+
+Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` — the marketing
+64–96px section rhythm stays behind. 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` (standard, rewriting the spacing scale
+through `density-gap`) and stepped per archetype by the surface catalog — the data-heavy console and
+log stream step denser, never the whole app.
+
+## 6 Depth
+
+Flat, hairline-first. Hierarchy comes from the greyscale ladder and 1px hairlines, not drop shadows:
+
+- **0 — canvas** `background` (`#ffffff`), no border.
+- **1 — panel / card** `card` on a 1px `border`; the hairline carries rank — shadow only when a card
+  must genuinely lift off the canvas (the faintest `sm`).
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
+  shadow, enough to separate an overlay from the canvas above a scrim. Rank is border and position,
+  never a heavier shadow.
+- **inlay — code / log / SQL** near-black `#1c1c1c` (canvas-night, `#202020` for nested chrome) with
+  white text and `font-mono` — the developer DNA carried even in a light UI (the SQL editor and log
+  stream wear it).
+
+Focus is a 2px emerald `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 white canvas; the white-canvas commitment is the brand — no
+  atmospheric gradient, no dark marketing track.
+- **Do** reserve emerald `primary` for the primary action, the focus `ring`, and the active-nav
+  indicator — nothing else. Its scarcity is what reads as the one chromatic event.
+- **Do** set near-black `primary-foreground` on the green button — the brand's idiosyncratic "lit"
+  read, dark type on green, never white.
+- **Do** carry hierarchy with the greyscale ladder, hairlines, weight, and tight tracking — the brand
+  is flat.
+- **Do** dress code, log, and SQL panels in the near-black inlay (`#1c1c1c`, `font-mono`) — show the
+  real query, not an illustration of one.
+- **Do** apply `tabular-nums` to numeric columns and `font-mono` to IDs, codes, timestamps, and SQL.
+- **Don't** promote a second chromatic accent — purple, yellow, pink, and indigo belong in charts and
+  logos only, never as system or UI colours.
+- **Don't** bump display weight above 500, or set white text on the green button — both break the brand.
+- **Don't** pill controls or reach for a radius outside `radius-scale` — the button/input radius is 6px.
+- **Don't** signal elevation with heavy drop shadows, or open detail in a modal when the panel fits.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440.
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
+| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
+| 1024 | sidebar expands; two-pane queue+detail holds side by side |
+| 1440 | content caps at `form-max-width` for forms; tables and dashboards use the full width |
+
+Code, log, and SQL inlays keep mono legibility at every breakpoint by scrolling horizontally, not
+wrapping.
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Wear the white canvas by default; the white-canvas commitment is Supabase — no gradient, no dark
+  marketing band. Panels read by their hairline, not by brightness.
+- Spend emerald once per surface: the primary action, the focus ring, the active-nav indicator. If two
+  things want the green, one is not primary. Colour otherwise belongs to charts and status.
+- Set near-black type on the green button (`primary-foreground` `#171717`), never white — the "lit"
+  green with dark type is the brand's signature.
+- Headings ride Inter at weight 500 with tight negative tracking; the display scale (64/48px) stays
+  behind — operator headings top out at 28px, hierarchy is size and tracking. Never exceed weight 500.
+- Dress code, log, and SQL panels in the near-black `#1c1c1c` inlay with `font-mono`; show the real
+  query, not a mockup of one.
+- Every numeric column is `tabular-nums`; every ID / code / timestamp / log line and SQL block is
+  `font-mono` (system mono, no webfont).
+- Detail and edit go in the side panel beside the work; a modal is a confirmation, not a workspace.
+- Keyboard-first: the emerald `ring` focus outline is always visible.
+- Leave behind: the 64/48px hero display, the composited product-mockup float shadows, the dark
+  featured pricing tier, and the 64–96px section rhythm — marketing chrome, not operator chrome.
+
+```yaml design-primitives
+radius: 6px                                        # corpus: signature button/input radius (rounded.sm 6px); scale offers 8/12/16 for cards and modals; pill is badges-only
+shadow-intensity: 0.4                              # derived: operator depth is hairline-first; the corpus's Level 2/3 float shadows are marketing-mockup only, so only true overlays lift
+border-weight: 1px
+density-gap: 1                                     # derived: standard tier — the clean/generous marketing read translated down to an honest operator density; data archetypes step denser
+density-inset: 1                                   # derived: matches the standard density-gap for coherent component insets
+font-sans: Inter, system-ui, sans-serif           # corpus: brand face Circular is proprietary; Inter at weight 500 is the corpus's own shippable substitute
+font-mono: ui-monospace, Menlo, Monaco, Consolas, monospace   # corpus: brand ships no proprietary mono webfont — system mono for code, logs, SQL
+font-weight-normal: 400                            # corpus: body weight 400
+font-weight-strong: 500                            # corpus: display/emphasis weight 500, capped — the calibrated mid-weight breaks at 600+
+heading-tracking: -0.02em                          # corpus: the signature negative display tracking (-1.92px at 64px scaling down to -0.42px at 28px) resolves to ~-0.02em at operator heading sizes
+duration-unit: 50ms                                # derived: corpus documents no motion; functional operator 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 brand's fine greyscale hairline ladder is deliberately calibrated; hairlines carry the grid, no boost
+icon-stroke: 1.75                                  # derived: corpus silent on icon stroke; precise/technical operator stroke one step under lucide's 2, matching the dev-tool voice
+icon-size-base: 16px                               # derived: corpus silent on icon size; operator default
+sidebar-width-expanded: 248px                      # derived: brand has no app sidebar (marketing top nav); standard operator rail (~brand dashboard width)
+sidebar-width-collapsed: 56px                      # derived: standard operator icon rail
+topbar-height: 56px                                # derived: from the corpus nav padding (16px/24px) resolving to ~56px
+side-panel-width: 420px                            # derived: brand has no app side panel; standard operator detail panel
+side-panel-width-rich: 640px                       # derived: content-heavy detail panel
+modal-width-max: 560px                             # derived: corpus modal chrome (xl 16px radius) gives no width; operator confirmation cap
+form-max-width: 640px                              # derived: brand's ~1280px marketing container is marketing; operator form cap
+table-row-height: 40px                             # derived: the brand's dense product tables and 8px/12px control padding read at a 40px operator row; dense archetypes step down via the surface catalog
+verbosity: default
+feedback: subtle                                   # derived: the brand is quietly technical and calm — gentle present feedback, not austere silence
+density-tier: standard                             # derived: the clean/generous marketing read down to an honest operator tier; data-heavy archetypes step denser, never the whole app
+product-traits: [dev-tools, database, dashboard, admin]
+```
+
+```yaml lever-manifest
+version: 1
+fonts: { sans: "Inter, system-ui, sans-serif", mono: "ui-monospace, Menlo, Monaco, Consolas, monospace" }
+color-tokens:
+  light:
+    background: "#ffffff"
+    foreground: "#171717"
+    card: "#ffffff"
+    card-foreground: "#171717"
+    muted: "#fafafa"
+    muted-foreground: "#707070"
+    border: "#dfdfdf"
+    input: "#dfdfdf"
+    ring: "#3ecf8e"
+    primary: "#3ecf8e"
+    primary-foreground: "#171717"          # corpus: near-black on the green button, never white — the "lit" read is the brand's idiosyncratic choice
+    accent: "#ededed"                       # derived: hairline-cool grey lift for selection/hover; neutral, never green (green stays reserved for CTAs)
+    accent-foreground: "#171717"
+    destructive: "#dc2626"                  # derived: corpus's reds (tomato #ff2201, crimson #e2005a) are logo/chart-only and too loud for a destructive fill; clean operator red
+    destructive-foreground: "#ffffff"
+    success: "#24b47e"                      # derived: brand deep-emerald (the CTA pressed state) doubles as a status green distinct from the mint #3ecf8e CTA
+    warning: "#ffdb13"                      # corpus: the brand's documented status yellow (accent-yellow, "status indicator only")
+    popover: "#ffffff"
+    popover-foreground: "#171717"
+    secondary: "#f2f2f2"                    # derived: a clean step below canvas-soft for secondary-button/segmented fills
+    secondary-foreground: "#171717"
+    chart-1: "#3ecf8e"                      # corpus: emerald — primary data series
+    chart-2: "#644fc1"                      # corpus: accent-violet
+    chart-3: "#054cff"                      # corpus: accent-indigo
+    chart-4: "#c7007e"                      # corpus: accent-pink
+    chart-5: "#ffdb13"                      # corpus: accent-yellow
+    sidebar: "#fafafa"                      # derived: brand has no app sidebar; a faint canvas-soft tint separates the rail from the white content canvas
+    sidebar-foreground: "#171717"
+    sidebar-primary: "#3ecf8e"              # derived: emerald active-nav indicator
+    sidebar-primary-foreground: "#171717"   # derived: near-black on green, matching the button's on-primary read
+    sidebar-accent: "#ededed"               # derived: neutral hover/selected nav lift, matching accent
+    sidebar-accent-foreground: "#171717"
+    sidebar-border: "#dfdfdf"
+    sidebar-ring: "#3ecf8e"
+spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 64]
+radius-scale: [0, 4, 6, 8, 12, 16, 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
+```

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

@@ -0,0 +1,226 @@
+---
+schema: design-md/v1
+product: Superhuman
+provenance: library
+sourced: 2026-07-04
+---
+
+# Superhuman — the warm-editorial operator reading
+
+An operator translation of Superhuman's fast-productivity brand: a warm, quiet, editorial system
+whose content body is white with off-black warm-grey ink, anchored by a single deep indigo-navy accent.
+The marketing surfaces are theatrical — a violet-sky atmospheric hero, hero-scale display type, a
+deep-teal closing band that resolves every page. None of that theatre belongs on a queue or a case
+detail; what carries is the warmth (warm neutrals, sub-default type weights, off-black ink), the
+8px rounded-rectangle radius character, and the one-accent indigo discipline. Both machine blocks are
+fully valued; every judgment away from the marketing brand is annotated `# derived:` where it lands.
+
+## 1 Visual Theme
+
+Light by default — the brand's content body *is* white; dark is opt-in. Warm and quiet: the neutral
+ramp leans warm-grey, ink is `foreground` warm off-black `#292827` (never pure black), the canvas is
+white, and hairlines are a warm grey `#e8e4dd`. Flat — hierarchy comes from hairline, type weight, and
+whitespace, not shadow. A single accent, `primary` deep indigo-navy `#1b1938` (near-black), is reserved
+for the one action that matters and for active nav; it is the brand's own CTA color. The radius
+character is the signature: 8px rounded rectangles, never a pill on a working surface. Density is
+`standard` and editorial-roomy — it steps denser per archetype, never cramped. The violet-sky hero
+gradient, hero-scale display type, and the teal closing band stay behind as marketing (see §7).
+
+## 2 Color Roles
+
+Light values first. One accent — `primary` is the only chromatic hue that carries meaning; status hues
+speak only status. Violet-soft and teal are marketing surfaces and carry no operator role.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | white `#ffffff` | page, cards, and overlays — the dominant surface |
+| `foreground` | warm off-black `#292827` | all primary ink — never pure black |
+| `muted` / `secondary` | warm off-white `#f4f2ed` | hover rows, subtle fills, secondary buttons |
+| `muted-foreground` | warm grey `#73706d` | labels, captions, secondary text |
+| `border` / `input` | warm hairline `#e8e4dd` | every separator, grid line, and field edge |
+| `primary` | indigo-navy `#1b1938` | the one primary action; active nav; key interactive detail |
+| `accent` | pale indigo tint `#edecf2` | selected / hovered rows and nav, on-accent surfaces only |
+| `ring` | `primary` indigo | the focus outline — unmistakable, because keyboard-first |
+| `destructive` | warm red `#c0362b` | destructive actions and error state only |
+| `success` / `warning` | green `#157a52` / amber `#b5791f` | status signalling only, never chrome |
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is Super Sans VF — the proprietary variable display sans; Inter
+Variable is the documented open substitute, run at the same sub-default weights. The brand's warmth
+signature is the *in-between* weight: body sits at `font-weight-normal` 460 (not 400), headings at
+`font-weight-strong` 600. Display tracking is negative and tight; operator headings inherit a
+proportioned `heading-tracking` of `-0.02em`. `font-mono` is derived (the marketing brand ships none)
+for IDs, codes, timestamps, and log lines. Numeric columns render `tabular-nums` so figures align.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.2 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 19px / 1.25 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 15px / 1.35 | `font-weight-strong` · `heading-tracking` |
+| body | UI + prose | 14px / 1.5 | `font-weight-normal` (460) |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow | 12px / 1.3 | `font-weight-strong`, `+0.02em`, uppercase |
+
+Keep the sub-default weight — the quiet warmth is the type voice. Bump weight for emphasis, never size.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled `primary` indigo on `primary-foreground` white, `radius` 8px, never a
+  pill. Secondary: `secondary` fill, 1px `border`, `foreground`. Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring` at a
+  full 2px, no glow.
+- **Card** — `card` surface, 1px `border`, `radius`; shadow only when it must lift (`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.
+- **Badge** — hairline `border`, `muted` / status fill, uppercase caption; status badges take
+  `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing unit 8px (the brand's base, with 2 / 4 / 12 sub-tokens for fine work); 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` 256 / `sidebar-width-collapsed` 56, topbar `topbar-height` 56, side
+panel `side-panel-width` 440 / `side-panel-width-rich` 640, modal cap `modal-width-max` 560, forms
+`form-max-width` 640, tables full-width. Density is governed globally by `density-tier` and stepped per
+archetype by the surface catalog — never by absolute overrides. The editorial roominess is carried by
+the 8px base, the taller `table-row-height`, and the larger radius, not by inflating the global tier.
+
+## 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 —
+  `0 1px 3px rgba(0,0,0,0.08)` (riding `shadow-intensity`).
+- **2 — overlay** `popover` / side panel / modal — the one place shadow earns its keep,
+  `0 8px 24px rgba(0,0,0,0.12)`.
+
+The hero's violet-sky atmospheric backdrop (the marketing depth medium) stays behind. Focus is a 2px
+`ring` outline in indigo, never a glow, visible on every interactive element. Three z-levels: content,
+sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve `primary` indigo for the single most important action on a surface; everything else is
+  neutral or status.
+- **Do** carry hierarchy with warm hairlines, sub-default weight steps, and whitespace — the brand is flat.
+- **Do** hold ink at warm off-black `foreground` `#292827`; pure black breaks the brand's quiet warmth.
+- **Do** apply `tabular-nums` to every numeric column and `font-mono` to IDs, codes, and timestamps.
+- **Don't** wear the marketing theatre: no violet-sky hero gradient, no deep-teal closing band, no
+  hero-scale display type on a working surface — those are brochure devices, not operator chrome.
+- **Don't** promote a second chromatic accent. Teal and violet-soft stay marketing-decorative; status
+  uses `success` / `warning` / `destructive`.
+- **Don't** pill the primary CTA — 8px rounded rectangle is the button shape; the pill is hero-only.
+- **Don't** signal elevation with heavy drop shadows, or open detail in a modal when the side panel fits.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440.
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
+| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
+| 1024 | sidebar expands; two-pane queue+detail holds side by side |
+| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- What carries from Superhuman: the warm neutral palette and warm off-black ink, the single indigo
+  accent, the 8px rounded-rectangle radius, and the sub-default type weights (460 body / 600 strong).
+- What stays behind: the violet-sky hero gradient, the deep-teal closing band, hero-scale display type,
+  and the pill CTA — every one is a marketing device with no operator role.
+- Lead every list surface with its table; lead every entity with its primary read, not its chrome.
+- Accent only the primary action with indigo. If two things want the accent, one is not primary.
+- Detail and edit go in the side panel; a modal is a confirmation, not a workspace.
+- Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`.
+- Every workflow completes from the keyboard; the indigo `ring` focus outline is always visible.
+- Stay flat and warm — hairline and weight before shadow; never pure black, never a pill on a CTA.
+
+```yaml design-primitives
+radius: 8px                                        # brand signature button radius (rounded rectangle, never pill)
+shadow-intensity: 0.4                              # derived: brand body is flat; shadow reserved for true overlays
+border-weight: 1px
+density-gap: 1
+density-inset: 1
+font-sans: Super Sans VF, Inter, system-ui, -apple-system, sans-serif   # brand face; Inter Variable is the documented substitute at sub-default weights
+font-mono: Geist Mono, ui-monospace, SFMono-Regular, monospace   # derived: marketing brand ships no mono; operator IDs/codes/timestamps need one
+font-weight-normal: 460                            # brand's sub-default body weight — the warmth signature (not 400)
+font-weight-strong: 600                            # brand's label weight (button-cap); clearer operator heading than the softer display 540
+heading-tracking: -0.02em                          # brand's negative display tracking, proportioned to operator heading sizes
+duration-unit: 50ms                                # derived: corpus documents no motion
+duration-fast: 100ms                               # derived: functional operator motion
+duration-normal: 150ms                             # derived
+duration-slow: 250ms                               # derived
+ease-default: cubic-bezier(0.4,0,0.2,1)            # derived
+contrast-boost: 1
+icon-stroke: 1.5                                   # derived: refined editorial character → one step under lucide's 2
+icon-size-base: 16px                               # derived
+sidebar-width-expanded: 256px                      # derived: editorial roominess
+sidebar-width-collapsed: 56px                      # derived
+topbar-height: 56px                                # derived: from the brand nav padding 16px x 24px
+side-panel-width: 440px                            # derived: roomier editorial detail panel
+side-panel-width-rich: 640px                       # derived
+modal-width-max: 560px                             # derived
+form-max-width: 640px                              # derived: narrower than the ~960px marketing column, capped for form legibility
+table-row-height: 44px                             # derived: editorial roominess + the corpus's 44px touch-target floor
+verbosity: default                                 # derived
+feedback: subtle                                   # derived: editorial calm
+density-tier: standard                             # derived: editorial-spacious brand read as a comfortable operator standard; roominess carried by radius/rows/spacing, archetypes step denser
+product-traits: [productivity, inbox, crm, queue]
+```
+
+```yaml lever-manifest
+version: 1
+fonts: { sans: "Super Sans VF, Inter, system-ui, -apple-system, sans-serif", mono: "Geist Mono, ui-monospace, SFMono-Regular, monospace" }
+color-tokens:
+  light:
+    background: "#ffffff"
+    foreground: "#292827"
+    card: "#ffffff"
+    card-foreground: "#292827"
+    muted: "#f4f2ed"                # derived: warm off-white one step deeper than canvas-soft #fafaf8 for a perceptible hover/fill
+    muted-foreground: "#73706d"
+    border: "#e8e4dd"
+    input: "#e8e4dd"
+    ring: "#1b1938"
+    primary: "#1b1938"
+    primary-foreground: "#ffffff"
+    accent: "#edecf2"               # derived: pale indigo tint of primary for selected/hover rows and nav
+    accent-foreground: "#1b1938"
+    destructive: "#c0362b"          # derived: warm red; brand ships no error hue
+    destructive-foreground: "#ffffff"
+    success: "#157a52"              # derived: status green tuned toward the brand's teal family
+    warning: "#b5791f"              # derived: warm amber matching the warm-grey temperature
+    popover: "#ffffff"
+    popover-foreground: "#292827"
+    secondary: "#f4f2ed"            # derived: aligned with muted warm off-white
+    secondary-foreground: "#292827"
+    chart-1: "#1b1938"
+    chart-2: "#155555"              # derived: brand surface-teal-mid as a chart hue
+    chart-3: "#8b6fd6"              # derived: saturated violet from the surface-violet-soft family
+    chart-4: "#b5791f"              # derived: warm amber (warning family)
+    chart-5: "#157a52"              # derived: green (success family)
+    sidebar: "#fafaf8"              # derived: warm off-white (brand canvas-soft), one tint off the white canvas
+    sidebar-foreground: "#292827"
+    sidebar-primary: "#1b1938"
+    sidebar-primary-foreground: "#ffffff"
+    sidebar-accent: "#edecf2"       # derived: matches the accent tint
+    sidebar-accent-foreground: "#1b1938"
+    sidebar-border: "#e8e4dd"
+    sidebar-ring: "#1b1938"
+spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 64]
+radius-scale: [4, 6, 8, 12, 16, 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
+```