@nurix/etna 0.18.19 → 0.18.20

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

@@ -0,0 +1,244 @@
+---
+schema: design-md/v1
+product: Sentry
+provenance: library
+sourced: 2026-07-04
+---
+
+# Sentry — the violet-and-lime developer-console operator design
+
+Sentry's design language reads like a debugging console wearing a leather jacket: a deep purple-violet
+midnight canvas, electric-lime keyword highlights, sticker mascots, a chunky display sans. But the
+brand is explicitly *two-polarity* — dark violet owns marketing and feature pages, while **white owns
+the dense, scannable, transactional surfaces** (pricing, contact, reference) where developers scan
+tables. That white polarity is exactly operator territory, so this entry wears it. What carries: the
+violet palette and its cool temperature, the authoritative near-black-violet primary button that reads
+as the strongest affordance on either polarity, the Rubik UI voice with uppercase `+0.2px` caps, Monaco
+on every code/log surface, the 8px developer-dialect radius, and lime held scarce as a signature
+highlight. What stays behind: the 88px display hero, the starfield texture, the floating mascots, the
+lime squiggle divider, and the dark-canvas marketing atmosphere. Judgments away from the corpus are
+annotated `# derived:` where it is silent.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. The operator UI sits on Sentry's white transactional canvas
+(`#ffffff`) — the polarity the brand reserves for dense reference content, not its atmospheric dark
+marketing hero. Flat: hierarchy is carried by a cool `#e5e7eb` hairline grid, type weight, and violet
+temperature — never heavy shadow. A single accent — the authoritative midnight-violet `primary`
+(`#150f23`), a near-black button with a violet undertone — carries the one action that matters, and
+reads as the most authoritative affordance on any canvas, so it is never softened to a bright
+brand-violet. Ink is deep ink-violet `foreground` (`#1f1633`), one hair lifted from the button. Lime
+stays scarce — a signature highlight glyph, never a fill (§7). The **dark violet console remains the
+opt-in iconic read** for a monitoring surface that wants it, but light is the default. Density is
+`standard`, dense-capable from the console heritage, stepping denser per archetype.
+
+## 2 Color Roles
+
+Light values (the manifest carries hex — the corpus's native format). One accent — midnight-violet
+`primary` is the only hue that carries the primary-action meaning; lime, pink, and the violet family
+speak charts and the scarce highlight, status hues speak only status. The dark-console value is noted where it defines the identity.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | white `#ffffff` (dark console: `#1f1633`) | page, cards, and overlays — the dominant surface |
+| `foreground` | deep ink-violet `#1f1633` (dark console: `#ffffff`) | all primary ink — the brand's single token doing double duty as dark canvas and light ink |
+| `muted` / `secondary` | faint violet tint `#f3f1f8` | hover rows, subtle fills, secondary-button fill |
+| `muted-foreground` | violet-gray `#6b6577` | labels, captions, secondary text |
+| `border` | cool hairline `#e5e7eb` | every divider and grid line on the light canvas |
+| `input` | field hairline `#cfcfdb` | text-field and form-control edges — one step firmer than the divider grid |
+| `primary` | midnight violet `#150f23` | the one primary action; active nav; nowhere decorative |
+| `primary-foreground` | white `#ffffff` | text on the near-black action |
+| `accent` | faint violet wash `#e9e5f4` | selected / hovered rows and nav — a violet tint, never a lime or pink wash |
+| `ring` | focus blue `#3b82f6` | the focus outline — the corpus's one documented blue, reserved for keyboard focus |
+| `destructive` | cool crimson `#e11d48` | destructive actions and error state only |
+| `success` / `warning` | green `#16a34a` / amber `#d97706` | status signalling only, never chrome |
+
+Lime `#c2ef4e`, hot-pink `#fa7faa`, and the violet family live in charts and the one scarce highlight device (§7) — never a button, a fill, or body text.
+
+## 3 Typography
+
+One UI sans, one mono. `font-sans` is **Rubik** (fallbacks `-apple-system, system-ui, Segoe UI,
+Helvetica, Arial`) — it carries every body, caption, button, and eyebrow role. `font-mono` is **Monaco**
+(Menlo, Ubuntu Mono fallbacks) for IDs, codes, timestamps, log lines, stack traces, and event payloads.
+The proprietary chunky display sans and its 88px hero stay behind — an operator surface tops out at a
+24px page title in Rubik. The brand's signature is **uppercase caps with `+0.2px` tracking** on buttons
+and eyebrows — a console-prompt cadence carried on the caption step by hand. Functional copy rides the
+denser 1.5 leading ("reads like a log"); the airy 2.0 marketing leading stays behind. Numeric columns
+render `tabular-nums` (floor P4).
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 20px / 1.25 | `font-weight-strong` · 0 |
+| h3 | card / group head | 16px / 1.3 | `font-weight-strong` · 0 |
+| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
+| small | labels, meta, dense table | 13px / 1.45 | `font-weight-normal` |
+| caption | uppercase eyebrow / button cap | 12px / 1.3 | `font-weight-strong`, `+0.2px`, uppercase |
+| code | IDs, logs, payloads | mono 13px / 1.5 | `font-weight-normal` |
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — primary: filled midnight-violet `primary` on white `primary-foreground`, `radius` (8px),
+  uppercase `+0.2px` caption label, no pill. Secondary: `secondary` fill, 1px `border`, `foreground`.
+  Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `input` border (`border-weight`), `radius` (inputs step to 6px);
+  focus draws the blue `ring` at full 2px, no glow.
+- **Card** — `card` surface on a 1px `border`, cards step to 12px radius; shadow only when a true overlay must lift off the canvas; 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 payloads), beside the work, not over it.
+- **Badge** — hairline `border`, `muted`/status fill, uppercase caption, 4px pill-ish radius; 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 corpus's
+`2 / 4 / 8 / 12 / 16 / 24 / 32` map direct and the 96px marketing section 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` (56px), side panel `side-panel-width` (420px) /
+`side-panel-width-rich` (640px), modal cap `modal-width-max`, forms `form-max-width` (the brand's
+~1152px container is marketing), tables full-width. Density is governed globally by `density-tier` and
+stepped per archetype — never by absolute overrides.
+
+## 6 Depth
+
+Flat. Hierarchy comes from the surface ladder and cool 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 corpus's level-2 light-canvas card shadow). Rank is border and position; the marketing
+  glow-halo CTA stays behind.
+- **inlay — code / log / terminal** near-black `#150f23` with white text and `font-mono` — the corpus's
+  `code-block` carried as the surface for log streams, stack traces, and event payloads inside a light UI.
+
+Focus is a 2px blue `ring` outline (never a glow), visible on every interactive element (floor P6).
+Three z-levels: content, sticky chrome, overlay. The full **dark violet console** is the opt-in iconic
+read for a monitoring surface that wants it — same tokens, inverted polarity.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve midnight-violet `primary` for the single most important action and active nav — never
+  soften it to a bright brand-violet; the near-black is the point, authoritative on any canvas.
+- **Do** carry hierarchy with cool hairlines, weight, and whitespace, keep every button and eyebrow
+  uppercase with `+0.2px` tracking, and dress code/log/payload panels in the near-black inlay
+  (`#150f23`, Monaco) with `tabular-nums` on numeric columns.
+- **Don't** make lime a fill. `#c2ef4e` is a scarce highlight glyph (a matched-keyword chip, a single
+  "live" marker — one per viewport) and a chart hue; a lime "success" reads yellow and fails contrast,
+  so status uses `success` / `warning` / `destructive`.
+- **Don't** promote a second brand accent — pink and the violet family are chart/decorative graces, not
+  UI action colors; keep crimson `destructive` distinct from decorative pink.
+- **Don't** pill the primary CTA or reach outside `radius-scale` (buttons 8px; pill is badges only),
+  blend the two canvas polarities on one content band, signal rank with heavy shadow, 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 |
+
+Code, log, and payload inlays keep Monaco legibility at every breakpoint by scrolling horizontally, not wrapping.
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Reach for the white transactional canvas first — Sentry's dense polarity, not the dark marketing
+  hero (which is the opt-in iconic read, not the default). Spend the accent once: midnight-violet
+  `primary` marks THE action and active nav, never softened to a bright violet.
+- Keep every button and eyebrow uppercase with `+0.2px` tracking — the console cadence is the brand;
+  emphasise by weight, never size. Lime is scarce: one highlight glyph per viewport (matched keyword,
+  a single "live" marker) plus the chart series — never a button, fill, or body text.
+- Dress code, log, and event-payload panels in the near-black inlay (`#150f23`, Monaco) — real product
+  chrome, not a light mock. Every numeric column is `tabular-nums`; every ID / timestamp is `font-mono`.
+- Stay flat — cool hairlines and the surface ladder before shadow; reach past a hairline only for a
+  real overlay. Keyboard-first: the blue `ring` focus outline is always visible.
+- Leave behind the starfield texture, the floating mascots, the lime squiggle divider, and the 96px
+  marketing rhythm. What carries: the violet palette and cool temperature, the authoritative near-black
+  button, the Rubik caps cadence, Monaco, and the 8px radius character.
+
+```yaml design-primitives
+radius: 8px                                        # corpus: buttons/code/selects at rounded.md (8px); inputs 6px, cards 12px, badges 4px — no sharp corners
+shadow-intensity: 0.4                              # derived: light-canvas floating cards/modals take real level-2 drop shadows (~0.1 alpha); dark depth is texture (left behind); operator keeps shadow to overlays
+border-weight: 1px                                 # corpus: every border is 1px
+density-gap: 1                                     # derived: console heritage is dense-capable, but corpus functional body is a roomier 16px/1.5; honest standard tier, archetypes step denser
+density-inset: 1                                   # derived: matches density-gap for coherent component insets
+font-sans: Rubik, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif   # corpus: Rubik carries every body/caption/button/eyebrow role
+font-mono: Monaco, Menlo, "Ubuntu Mono", monospace   # corpus: Monaco on code blocks, install snippets, inline tokens
+font-weight-normal: 400                            # derived: corpus default UI body-md is 500 (display-tuned); operator dense body/table chrome reads cleaner at 400
+font-weight-strong: 600                            # corpus: heading-sm/body-strong at 600; the 700 button-cap and 700/88px hero display stay behind
+heading-tracking: 0                                # corpus: every Rubik heading tier tracks 0; the +0.2px tracking signature lives on uppercase caps, applied to the caption/button step by hand
+duration-unit: 50ms                                # derived: corpus documents no motion timings; operator-standard functional base
+duration-fast: 100ms                               # derived: corpus silent on motion
+duration-normal: 150ms                             # derived: corpus silent on motion
+duration-slow: 250ms                               # derived: corpus silent on motion
+ease-default: cubic-bezier(0.4,0,0.2,1)            # derived: corpus silent on motion; standard functional ease
+contrast-boost: 1                                  # derived: the corpus hairline-cloud grid lines already read as a grid; no boost
+icon-stroke: 1.75                                  # derived: corpus iconography is illustrated sticker mascots (marketing, left behind); operator line-icon stroke one step under lucide's 2
+icon-size-base: 16px                               # derived: corpus has no UI icon size; operator standard
+sidebar-width-expanded: 248px                      # derived: corpus has no app shell (marketing top-nav only); operator standard
+sidebar-width-collapsed: 56px                      # derived: standard operator icon rail
+topbar-height: 56px                                # derived: corpus nav padding 16/24px is marketing-generous; operator tightens to 56px
+side-panel-width: 420px                            # derived: corpus has no shell; operator standard
+side-panel-width-rich: 640px                       # derived: content-heavy detail (event payload / stack trace)
+modal-width-max: 560px                             # derived: corpus dialogs are marketing; operator confirmation cap
+form-max-width: 640px                              # derived: corpus contact form is a single light panel; 640 caps operator forms (the ~1152px container is marketing)
+table-row-height: 40px                             # derived: standard operator; dense archetypes (log-stream) step down via the surface catalog
+verbosity: default                                 # derived: the console cadence is terse, but the brand narrates (playful, not austere); default suits a developer operator surface
+feedback: subtle                                   # derived: present-but-quiet operator feedback
+density-tier: standard                             # derived: observability-console heritage is dense-capable, but corpus functional body is roomier than a trading terminal; honest standard, archetypes step denser
+product-traits: [dev-tools, observability, dashboard, log-stream]
+```
+
+```yaml lever-manifest
+version: 1
+fonts: { sans: "Rubik, -apple-system, system-ui, \"Segoe UI\", Helvetica, Arial, sans-serif", mono: "Monaco, Menlo, \"Ubuntu Mono\", monospace" }
+color-tokens:
+  light:
+    background: "#ffffff"
+    foreground: "#1f1633"
+    card: "#ffffff"
+    card-foreground: "#1f1633"
+    muted: "#f3f1f8"                        # derived: a faint violet tint over the corpus press-gray (#f0f0f0), holding the cool violet temperature on light
+    muted-foreground: "#6b6577"             # derived: corpus documents only dark-surface muted; a violet-leaning mid gray reads as secondary text on white
+    border: "#e5e7eb"                        # corpus hairline-cloud — light-canvas dividers and grid lines
+    input: "#cfcfdb"                         # corpus hairline-cool — text-field and form-control edges
+    ring: "#3b82f6"                          # derived: corpus documents a dedicated translucent blue focus ring rgba(59,130,246,0.5) — "the only blue in the system"; carried as solid #3b82f6
+    primary: "#150f23"                       # corpus Midnight Violet — the authoritative near-black action, "strongest UI affordance regardless of polarity"
+    primary-foreground: "#ffffff"
+    accent: "#e9e5f4"                        # derived: faint violet selection wash, one step past muted so selection reads over hover; never lime/pink
+    accent-foreground: "#1f1633"
+    destructive: "#e11d48"                   # derived: corpus documents no error red (pink is decorative punctuation, never a signal); a cool crimson carries destruction on-temperature, distinct from the decorative pink
+    destructive-foreground: "#ffffff"
+    success: "#16a34a"                       # derived: corpus has no status green (lime is a decorative highlight, fails as a signal); a clean green carries success
+    warning: "#d97706"                       # derived: corpus has no caution hue; amber carries warning, kept distinct from the decorative lime
+    popover: "#ffffff"
+    popover-foreground: "#1f1633"
+    secondary: "#f3f1f8"                      # matches muted — secondary-button fill
+    secondary-foreground: "#1f1633"
+    chart-1: "#6a5fc1"                        # corpus Violet Link — the brand's own accent family carries the chart series
+    chart-2: "#c2ef4e"                        # corpus Electric Lime — the signature, scoped to charts + the scarce highlight glyph
+    chart-3: "#fa7faa"                        # corpus Hot Pink
+    chart-4: "#422082"                        # corpus Deep Violet
+    chart-5: "#79628c"                        # corpus Mid Violet
+    sidebar: "#f7f6fb"                        # derived: a faint violet-tinted step below the white canvas so the nav rail reads as chrome
+    sidebar-foreground: "#1f1633"
+    sidebar-primary: "#150f23"                # active-nav marker = the primary action color
+    sidebar-primary-foreground: "#ffffff"
+    sidebar-accent: "#e9e5f4"                 # hover/selected nav lift, matches accent
+    sidebar-accent-foreground: "#1f1633"
+    sidebar-border: "#e5e7eb"
+    sidebar-ring: "#3b82f6"
+spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 64]
+radius-scale: [4, 6, 8, 10, 12, 18, 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/shopify.md

@@ -0,0 +1,227 @@
+---
+schema: design-md/v1
+product: Shopify
+provenance: library
+sourced: 2026-07-04
+---
+
+# Shopify — operator reading
+
+Shopify's brand runs two canvases that never blend: a cinematic near-black marketing track (full-bleed
+merchant photography, 96px thin display type, one white-stroked black pill) and a warm-cream
+transactional track (pricing, signup, dashboards) in pastel greens with pill buttons and Inter body. An
+operator surface wears the **transactional** track: the cinematic black canvas, the photography, and the
+hero-scale thin display type stay behind; the cream/white layering, pure-black ink, the single
+mint-green accent, the soft paper-halo shadow, and the pill button character carry across — a
+comfortable, editorial, high-contrast translation, not a marketing transcription.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. The anchor surface is a faintly warm cream `background` carrying
+crisp white `card` panels — that cream-page / white-card layering is the brand's editorial warmth. Ink
+is pure black; a single chromatic accent, mint-green `accent`, marks growth and selection. Depth is not
+flat — white cards lift on a soft layered "paper halo" (`shadow`), the light track's signature.
+Comfortable `standard` density; the pill button shape carries in from the brand.
+
+## 2 Color Roles
+
+Light values first (exact values in the manifest). One chromatic accent — the mint-green family;
+black is ink/primary, a neutral, not a second color.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` | warm cream `#fbfbf5` | the page canvas — editorial warmth under white cards |
+| `card` / `popover` | white `#ffffff` | cards, panels, overlays — the crisp surface on the cream page |
+| `foreground` | pure black `#000000` | all primary ink on light (the brand's `ink`) |
+| `muted` / `secondary` | light zinc `#f4f4f5` | hover rows, subtle fills, secondary chips |
+| `muted-foreground` | mid zinc `#71717a` | labels, captions, secondary text |
+| `border` / `input` | hairline zinc `#e4e4e7` | every separator, grid line, and field edge |
+| `primary` | black `#000000` | the one primary action (a black pill); active nav |
+| `primary-foreground` | white `#ffffff` | labels on the black pill |
+| `accent` | aloe mint `#c1fbd4` | selected/hovered rows, growth highlight, featured tint — a fill, never behind type |
+| `accent-foreground` | black `#000000` | ink on the mint fill |
+| `ring` | black `#000000` | the focus outline — matches `primary`, unmistakable |
+| `destructive` | commerce red `#d82c0d` | destructive actions and error state only |
+| `success` | commerce green `#008060` | positive status text and badges |
+| `warning` | amber `#b45309` | caution status only |
+
+The pale aloe/pistachio greens are surface fills, never text colors — a status "success" reads on the
+saturated `#008060`. The cool zinc text ladder against the warm cream canvas is the temperature signature.
+
+## 3 Typography
+
+The brand's display face, **Neue Haas Grotesk Display** at a thin cut (weight 330), is a marketing
+signature and its hero scale stays behind. The operator workhorse is **Inter** (`font-sans`): body, UI,
+tables, labels, and headings all ride it, so one sans serves dense chrome. `font-mono` is the system
+monospace for IDs, codes, timestamps, and log lines. Numeric columns render `tabular-nums`.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.2 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 20px / 1.3 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 16px / 1.35 | `font-weight-strong` · `heading-tracking` |
+| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
+| small | labels, meta, dense rows | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow | 12px / 1.2 | `font-weight-strong`, `+0.06em`, uppercase |
+
+Headings track slightly **open** (`heading-tracking` positive) — the editorial voice runs opposite to
+the tight tracking most operator UIs use; keep it. The OpenType `ss03` stylistic set is the brand's
+character-level signature: apply `font-feature-settings: "ss03"` on the root so it tracks across every
+role. Bump weight for emphasis; never change size.
+
+## 4 Component Stylings
+
+- **Button** — `primary`: filled black `primary` on `primary-foreground`, **pill** (the brand
+  signature, not `radius`). Secondary: white `card` fill, 1px `border`, `foreground` ink — outlined,
+  also pill. Featured/positive: `accent` mint fill, `foreground`, pill.
+- **Input** — `card` fill, 1px `border` (`border-weight`), `radius`; focus draws the black `ring` at 2px.
+- **Card** — white `card` on the cream `background`, 1px `border`, `radius` (larger step for content
+  cards); lifts on the soft layered `shadow` — the paper halo, not a hard drop.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
+  numeric columns; selection tints `accent`.
+- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`),
+  beside the work, not over it.
+- **Badge** — hairline `border`, `muted`/status fill, uppercase caption; status badges take `success` /
+  `warning` / `destructive`, never `primary`; the mint `accent` marks featured, not status.
+
+## 5 Layout
+
+Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` (the brand's own
+8px-family scale, extended down for fine operator work). 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. Card and section insets run generous (the brand pads comfortably) but the global
+tier stays `standard` — governed by `density-tier`, stepped per archetype, never by absolute overrides.
+
+## 6 Depth
+
+Not flat — the light track carries hierarchy partly with a soft shadow:
+
+- **0 — canvas** cream `background`, no shadow.
+- **1 — card / panel** white `card` on a 1px `border`, lifted by the soft layered "paper halo"
+  (`shadow` at `sm`/`md`) — many tiny low-opacity shadows, never one hard drop.
+- **2 — overlay** `popover` / side panel / modal — the `md`/`lg` shadow, the strongest lift.
+
+Focus is a 2px black `ring` outline (never a glow), on every interactive element. Three z-levels:
+content, sticky chrome, overlay. Rank is border, position, and the soft halo — never a harsh shadow.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve black `primary` for the single most important action; buttons take the **pill** — the
+  one place the brand overrides the operator no-pill default; honor it.
+- **Do** keep the single chromatic accent the mint-green family — a fill for selection, growth, and the
+  featured tier, never behind type.
+- **Do** lift white cards on the cream canvas with the soft layered paper halo, and apply
+  `font-feature-settings: "ss03"` at the root with `tabular-nums` on every numeric column.
+- **Don't** promote a second chromatic accent, or use the pale aloe/pistachio as a status color —
+  status uses `success` / `warning` / `destructive`.
+- **Don't** reach for a rounded-rectangle button — the pill is the brand's non-negotiable button shape.
+- **Don't** bring the cinematic black canvas, full-bleed photography, or 96px thin display type into
+  operator chrome — they stay on the marketing track.
+
+## 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:
+
+- Layer white `card` panels on the cream `background`; lift them with the soft layered paper halo
+  (`shadow`), not a hard drop; overlays one step up.
+- `primary` is black ink; the primary action is a black pill, and buttons keep the pill everywhere —
+  this brand overrides the no-pill default.
+- One chromatic accent: mint-green `accent`, a fill for selection, growth, and featured — never behind
+  type, never as status.
+- Apply `font-feature-settings: "ss03"` at the root and keep headings tracked slightly open; body and
+  tables ride Inter, the thin display face stays behind.
+- Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`; the black `ring`
+  focus outline is always visible and every workflow completes from the keyboard.
+- Leave the cinematic black track and its photography on marketing surfaces — never the operator UI.
+
+```yaml design-primitives
+radius: 8px                                        # derived: brand inputs 8px / cards 12px; 8px is the default component radius (buttons pill via the scale)
+shadow-intensity: 0.6                              # derived: the light track's signature soft "paper halo" carries real card hierarchy, not a flat brand
+border-weight: 1px
+density-gap: 1
+density-inset: 1
+font-sans: Inter, system-ui, sans-serif           # derived: brand splits Neue Haas Grotesk Display (thin display, stays behind) + Inter (UI/body); the single sans slot takes Inter, the operator workhorse
+font-mono: ui-monospace, SFMono-Regular, Menlo, monospace   # brand code face is the system monospace
+font-weight-normal: 400                            # derived: brand variable body 420 is display-tuned; dense operator body reads cleaner at 400
+font-weight-strong: 600                            # derived: brand strong 550 collapses to the standard operator 600
+heading-tracking: 0.01em                           # derived: Shopify headings track open (~+0.015em), inverted from the typical tight operator heading; a restrained +0.01em carries that editorial voice
+duration-unit: 50ms                                # derived: corpus documents no motion; functional operator base
+duration-fast: 120ms                               # derived: corpus silent on motion; functional
+duration-normal: 200ms                             # derived: corpus silent on motion; functional
+duration-slow: 320ms                               # derived: corpus silent on motion; functional
+ease-default: cubic-bezier(0.4,0,0.2,1)            # derived: corpus silent on motion; standard functional easing
+contrast-boost: 1                                  # black ink on cream is already high-contrast; no boost needed
+icon-stroke: 1.75                                  # derived: corpus silent on icons; refined operator stroke
+icon-size-base: 16px                               # derived: corpus silent on icons; operator norm
+sidebar-width-expanded: 240px                      # derived: marketing corpus has no admin shell; comfortable operator sidebar
+sidebar-width-collapsed: 64px                      # derived: comfortable icon rail matching the brand's roomier density
+topbar-height: 56px                                # derived: comfortable operator topbar
+side-panel-width: 440px                            # derived: comfortable detail panel
+side-panel-width-rich: 640px                       # derived: content-heavy panel
+modal-width-max: 560px                             # derived: matches the brand's generous card width
+form-max-width: 720px                              # derived: echoes the brand's ~720px reading column
+table-row-height: 44px                             # derived: the brand's 44px touch minimum reads comfortable, not dense
+verbosity: default
+feedback: subtle
+density-tier: standard                             # derived: consumer-commerce brand reads comfortable, not terminal-dense; archetypes step denser
+product-traits: [commerce, admin, dashboard, crm]
+```
+
+```yaml lever-manifest
+version: 1
+fonts: { sans: "Inter, system-ui, sans-serif", mono: "ui-monospace, SFMono-Regular, Menlo, monospace" }
+color-tokens:
+  light:
+    background: "#fbfbf5"
+    foreground: "#000000"
+    card: "#ffffff"
+    card-foreground: "#000000"
+    muted: "#f4f4f5"
+    muted-foreground: "#71717a"
+    border: "#e4e4e7"
+    input: "#e4e4e7"
+    ring: "#000000"
+    primary: "#000000"
+    primary-foreground: "#ffffff"
+    accent: "#c1fbd4"
+    accent-foreground: "#000000"
+    destructive: "#d82c0d"          # derived: corpus documents no error hue; a warm commerce red
+    destructive-foreground: "#ffffff"
+    success: "#008060"              # derived: pale aloe/pistachio are fills, not status; a saturated commerce green carries success with contrast
+    warning: "#b45309"              # derived: corpus silent on caution; readable amber
+    popover: "#ffffff"
+    popover-foreground: "#000000"
+    secondary: "#f4f4f5"
+    secondary-foreground: "#000000"
+    chart-1: "#008060"              # derived: corpus has no chart palette; commerce-green-forward categorical ramp
+    chart-2: "#5c6ac4"              # derived: chart ramp
+    chart-3: "#47c1bf"              # derived: chart ramp
+    chart-4: "#b45309"              # derived: chart ramp (matches warning)
+    chart-5: "#d82c0d"              # derived: chart ramp (matches destructive)
+    sidebar: "#f7f7f2"              # derived: light rail, a hair off the cream canvas; the black track stays on marketing
+    sidebar-foreground: "#000000"
+    sidebar-primary: "#000000"
+    sidebar-primary-foreground: "#ffffff"
+    sidebar-accent: "#d4f9e0"       # pistachio — the softer green for nav hover
+    sidebar-accent-foreground: "#000000"
+    sidebar-border: "#e4e4e7"
+    sidebar-ring: "#000000"
+spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 64]
+radius-scale: [0, 4, 8, 12, 20, 9999]
+shadow-levels: [none, sm, md, lg]
+motion: { durations: [120, 200, 320], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
+icons: { family: lucide, stroke: 1.75 }
+accent-count: 1
+```