@nurix/etna 0.18.18 → 0.18.20

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

@@ -0,0 +1,285 @@
+---
+schema: design-md/v1
+product: Resend
+provenance: library
+sourced: 2026-07-04
+---
+
+# Resend — editorial-noir developer console
+
+Resend's marketing surfaces are a developer tool wearing the typography of a print magazine: a
+true-black canvas, off-white ink, oversized Domaine Display serif headlines, and depth built entirely
+from translucent-white hairlines instead of shadow. This entry is the *operator* reading of that brand —
+an internal tool (sending-logs stream, API-key console, audience table, deliverability dashboard) in
+Resend's language. What carries: the pure-black `#000000` canvas, off-white ink, the single white-hot
+`primary` (a white surface that is the brightest pixel — the inverted accent), translucent-white hairline
+depth with no shadow, the 8px button / 12px card radius vocabulary, Geist Mono on every code surface, the
+Inter UI voice, and the six atmospheric accents repurposed as chart/status hues. What stays behind: the
+76–96px Domaine Display serif hero, ABC Favorit marketing body, the full-section glow washes, the
+96–128px section bands, and the print-magazine email-mockup insets.
+
+**Categorically dark, and truly black.** Two doctrine-floor overrides are legitimate here and recorded
+plainly: the brand is dark by default (`data-theme="dark"` is the signature; a derived light daytime
+floor ships alongside per schema), and its canvas is exactly `#000000`, never a near-black. Both blocks
+value every token in light *and* dark; judgments away from the brand are annotated `# derived:`.
+
+## 1 Visual Theme
+
+Dark by default; a light daytime mode is the opt-in floor. Emphatically flat: hierarchy is carried by
+translucent-white hairline `border`, type weight, and a surface ladder that steps by luminance, never
+shadow — the system has no drop-shadow language. A single accent — but the accent is *white*. `primary`
+is an off-white surface with black text, the brightest pixel on the black canvas and the one solid anchor
+(in the light floor it inverts to near-black-on-white, the same highest-contrast invariant). The anchor
+surface is a pure `#000000` canvas with cards a hairline-and-luminance-step above it; ink is off-white
+`foreground`, faintly blue-cool so it reads as printed paper. Density is `standard` — dense-capable and
+technical, editorial breathing carried in the shell dimensions, not the data grid.
+
+## 2 Color Roles
+
+Both themes are valued; dark is the signature (listed second, but it is the default the tool wears).
+One action accent — `primary` is the only solid that carries interactive meaning; the six atmospheric
+accents live only in charts and status (see §7); status hues speak only status.
+
+| Role | Light (floor) | Dark (signature) | Allowed where |
+| --- | --- | --- | --- |
+| `background` | `#ffffff` | canvas `#000000` | the page floor — the dominant surface |
+| `card` / `popover` | `#ffffff` | card `#0a0a0c`, popover `#101012` | panels and overlays, one luminance step up |
+| `foreground` | `#000000` | off-white ink `#fcfdff` | all primary ink |
+| `muted` / `secondary` | `#f1f7fe` | `#101012` | hover fills, quiet bands, ghost/secondary buttons |
+| `muted-foreground` | `#5b6066` | `#a1a4a5` | labels, captions, secondary text |
+| `border` / `input` | `#e4e8ee` | hairline-strong `rgba(255,255,255,0.14)` | every card edge, field edge, and grid line |
+| `primary` | near-black `#000000` | white-hot `#fcfdff` | the one primary action; active nav; the brightest solid |
+| `primary-foreground` | `#ffffff` | `#000000` | label on the primary surface — black on the white pill |
+| `accent` | `#eef4fc` | wash `rgba(255,255,255,0.09)` | selected / hovered rows and nav — a neutral lift, never colored |
+| `ring` | `#000000` | ink `#fcfdff` | focus outline — the border thickens to ink, no separate glow |
+| `destructive` | `#e11d3f` | brand red `#ff2047` | destructive actions and error state only |
+| `success` / `warning` | `#0a9d63` / `#b8790a` | `#11ff99` / `#ffc53d` | status signalling only, never chrome |
+
+The atmospheric glow colours (orange, blue, green, yellow, red) are marketing backdrops; here they carry
+`chart-1..5` and semantic status, never full-section washes or solid buttons.
+
+## 3 Typography
+
+One UI sans, one mono. `font-sans` is Inter — the corpus's own UI face — carrying body, tables, labels,
+and every heading; ABC Favorit (marketing body) and the 76–96px Domaine Display serif hero both stay
+behind, since operator surfaces top out at a 24px title where the serif never appears. `font-mono` is
+Geist Mono for IDs, codes, timestamps, log lines, and every code well; numeric columns render
+`tabular-nums`. Hierarchy is size and family, not weight — body holds at 400 and the brand never bolds
+past the strong 500.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.5 | `font-weight-strong` (500) · `heading-tracking` |
+| h2 | section head | 20px / 1.3 | `font-weight-strong` (500) · `heading-tracking` |
+| h3 | card / group head | 16px / 1.4 | `font-weight-strong` (500) · 0 |
+| body | UI + prose | 14px / 1.5 | `font-weight-normal` (400) |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| caption | eyebrow, footer meta | 12px / 1.5 | `font-weight-normal` |
+| code | IDs, logs, amounts | mono 13px / 1.6 | `font-weight-normal` |
+
+Emphasise by size or family (sans → mono), never by bumping body weight to 600 — the corpus forbids it.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — primary: filled `primary` (white on dark / near-black on light), `primary-foreground`,
+  `radius` (8px), never a pill — the one brightest solid per surface. Secondary/ghost: `secondary` fill,
+  1px `border`; outline: transparent on `background`, 1px `border`.
+- **Input** — `card` fill, 1px `border` (`border-weight`), `radius`; focus thickens the edge to the ink
+  `ring` — no glow, no separate ring colour.
+- **Card** — `card` a luminance step above canvas on a 1px hairline `border`, `radius` stepping to 12px
+  for large panels and code wells; depth is the hairline plus the step, never a shadow.
+- **Table row** — height `table-row-height`; `border` grid lines (soft dividers may drop to a 6%
+  hairline); `muted` on hover; `tabular-nums` on numeric columns; selection washes to `accent`.
+- **Code / log well** — the darkest, coolest surface (`#06060a` on dark, a step below canvas), 1px
+  `border`, `radius`, `font-mono` — depth by temperature, not blur.
+- **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 (badges only), `muted`/status fill; 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 / 128px section bands stay behind. Shell dimensions map one-to-one to the layout primitives: sidebar
+`sidebar-width-expanded` (248px) / `sidebar-width-collapsed` (56px), topbar `topbar-height` (64px, the
+brand's nav height), side panel `side-panel-width` (420px) / `side-panel-width-rich` (640px, the corpus's
+email-inset max width), modal `modal-width-max`, forms `form-max-width`, tables full-width. Density is
+governed globally by `density-tier` and stepped per archetype by the surface catalog.
+
+## 6 Depth
+
+Flat, hairline-and-luminance only — no drop-shadow language on this canvas:
+
+- **0 — canvas** `background` (`#000000` dark / `#ffffff` light), no border.
+- **1 — panel / card** `card` a luminance step above canvas on a 1px hairline `border`; step plus
+  hairline carries the lift.
+- **2 — overlay** `popover` / side panel / modal — a further luminance step (dark) or the faintest
+  `shadow-intensity` lift (light floor). Rank is surface, hairline, and position.
+- **inlay — code / log well** the darkest, coolest surface (`#06060a` on dark) — depth by temperature.
+
+Focus is an ink `ring` — the border thickens to `foreground`, never a glow — visible on every
+interactive element. Three z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** anchor every dark surface on true `#000000` — never a near-black; the corpus is emphatic the
+  brand sits on pure black, not `#0a0a0a`.
+- **Do** reserve the white-hot `primary` as the single brightest solid per surface — one primary action,
+  the active nav, the focus `ring`. Its scarcity is what makes white read as the accent.
+- **Do** carry depth with translucent-white hairlines and the luminance ladder; render every code, log,
+  and terminal surface in `font-mono` (Geist Mono) with `tabular-nums` on numeric columns.
+- **Don't** introduce a second solid brand accent — white (or its light-floor near-black) is the brand;
+  the six atmospheric colours are chart/status only, never buttons or full-section washes.
+- **Don't** signal elevation with drop shadows — hairlines and luminance carry depth on the black canvas.
+- **Don't** pill the primary CTA or reach for a radius outside `radius-scale` — buttons/inputs are 8px,
+  cards and code wells 12px; pill is badges only.
+- **Don't** bring the serif or ABC Favorit into operator surfaces — Inter carries the UI; the display
+  serif is a hero-scale marketing signature that stays behind.
+
+## 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; nav → hamburger; 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 wells keep mono legibility at every breakpoint by scrolling horizontally, not wrapping.
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Wear the dark theme by default (`data-theme="dark"`); the light map is the opt-in daytime floor. On
+  dark the canvas is exactly `#000000` — never a near-black.
+- Spend the white-hot `primary` once per surface: the primary action, the active nav, the focus `ring`.
+  If two things want the white, one is not primary. Everything else is neutral or status.
+- Lead every list surface with its table; render code, log, and terminal panels in `font-mono` (Geist
+  Mono) as the darkest/coolest surface. Every numeric column is `tabular-nums`; every ID / code /
+  timestamp is `font-mono`.
+- The six atmospheric accents (orange / blue / green / yellow / red) are the sanctioned multi-hue set —
+  chart series and semantic status only, never solid buttons or full-section glow washes.
+- Depth is the luminance ladder and translucent-white hairlines, never shadow; the focus ring is the
+  border thickened to ink. Detail and edit go in the side panel beside the work, never a modal.
+- Keep the UI on Inter; leave behind the Domaine Display serif hero, ABC Favorit body, the full-section
+  glows, the 96–128px section bands, and the email-mockup insets.
+
+```yaml design-primitives
+radius: 8px                                        # corpus: buttons/inputs at rounded.md (8px); cards and code wells step to 12px (lg), 16px large; pill is badges-only
+shadow-intensity: 0.1                              # derived: corpus has no drop-shadow language ("hairlines carry the role drop shadows would"); only the light floor's overlays earn the faintest lift
+border-weight: 1px                                 # corpus: all borders are 1px translucent-white hairlines
+density-gap: 1                                     # derived: marketing is spacious-editorial (96-128px bands); operator reads down to an honest standard tier, breathing carried by shell dims not the grid
+density-inset: 1                                   # derived: matches density-gap for coherent component insets
+font-sans: Inter, system-ui, sans-serif           # corpus: Inter is the documented open-source UI face; ABC Favorit (marketing body) and Domaine Display (hero serif) stay behind
+font-mono: Geist Mono, ui-monospace, SFMono-Regular, monospace   # corpus: Geist Mono in every code well
+font-weight-normal: 400                            # corpus: body weight stays at 400; hierarchy is family/size change, never a weight bump
+font-weight-strong: 500                            # corpus: headings and button labels at 500; the brand never bolds body to 600
+heading-tracking: -0.015em                         # corpus: negative letter-spacing on headings (heading-md -0.4px at 24px) scaled to em; the -0.96px hero display tracking stays behind
+duration-unit: 50ms                                # derived: corpus documents no motion (marketing site); operator-standard functional base
+duration-fast: 100ms                               # derived: corpus silent on motion; functional tempo
+duration-normal: 150ms                             # derived: corpus silent on motion; standard functional tempo
+duration-slow: 250ms                               # derived: corpus silent on motion; overlay/panel transition
+ease-default: cubic-bezier(0.4,0,0.2,1)            # derived: corpus silent on easing; standard functional ease
+contrast-boost: 1                                  # derived: the translucent-white hairlines are the intentional depth language; the structural 14% border reads on black without a boost
+icon-stroke: 1.5                                   # derived: corpus silent on icons; a fine precise stroke suits the minimal editorial-technical feel
+icon-size-base: 16px                               # derived: corpus silent on icon size; operator standard
+sidebar-width-expanded: 248px                      # derived: corpus has no app shell (marketing nav only); standard expanded rail
+sidebar-width-collapsed: 56px                      # derived: standard operator icon rail
+topbar-height: 64px                                # corpus: nav-bar height 64px (the brand's nav height)
+side-panel-width: 420px                            # derived: corpus has no shell; standard detail-panel width
+side-panel-width-rich: 640px                       # corpus: email-mockup inset max width 640px, reused for the content-heavy panel
+modal-width-max: 560px                             # derived: corpus's CTA/bands are full-bleed marketing; operator confirmation cap
+form-max-width: 640px                              # derived: corpus max content ~1200px is marketing; readable single-column form cap
+table-row-height: 40px                             # derived: technical dark grid at standard density; dense archetypes step down via the surface catalog
+verbosity: default
+feedback: subtle                                   # derived: the brand is quiet and precise (pressed/active states barely documented); functional present feedback, not austere silence
+density-tier: standard                             # derived: a spacious-editorial marketing brand read down to an honest, dense-capable operator tier
+product-traits: [dev-tools, email-api, dashboard, log-stream, admin]
+```
+
+```yaml lever-manifest
+version: 1
+fonts: { sans: "Inter, system-ui, sans-serif", mono: "Geist Mono, ui-monospace, SFMono-Regular, monospace" }
+color-tokens:
+  light:
+    background: "#ffffff"                          # derived: no documented light mode; daytime inversion of the black canvas
+    foreground: "#000000"                          # corpus: on-light ink is #000000
+    card: "#ffffff"
+    card-foreground: "#000000"
+    muted: "#f1f7fe"                               # corpus: surface-light, the one documented light-tinted off-white
+    muted-foreground: "#5b6066"                    # derived: mid cool gray for secondary text on white (corpus on-light-mute is navy-tinted)
+    border: "#e4e8ee"                              # derived: light cool hairline
+    input: "#e4e8ee"
+    ring: "#000000"                                # derived: focus thickens to ink; on light that ink is black
+    primary: "#000000"                             # derived: the white-hot primary inverts to near-black — the highest-contrast solid anchor on white
+    primary-foreground: "#ffffff"
+    accent: "#eef4fc"                              # derived: cool light selection wash, a tint of muted; never colored
+    accent-foreground: "#000000"
+    destructive: "#e11d3f"                         # derived: brand red #ff2047 darkened for white-bg contrast
+    destructive-foreground: "#ffffff"
+    success: "#0a9d63"                             # derived: brand neon green #11ff99 darkened for readable status on white
+    warning: "#b8790a"                             # derived: brand yellow #ffc53d darkened to amber for white-bg contrast
+    popover: "#ffffff"
+    popover-foreground: "#000000"
+    secondary: "#f1f7fe"
+    secondary-foreground: "#000000"
+    chart-1: "#0075ff"                             # derived: brand accent-blue for light readability (corpus glow rgba(0,117,255))
+    chart-2: "#0a9d63"                             # derived: brand green darkened for light
+    chart-3: "#e06600"                             # derived: brand orange #ff801f darkened for light
+    chart-4: "#c2870a"                             # derived: brand yellow darkened for light
+    chart-5: "#e11d3f"                             # derived: brand red darkened for light
+    sidebar: "#f7f9fc"                             # derived: faint cool tint below the white canvas so the rail reads as chrome
+    sidebar-foreground: "#000000"
+    sidebar-primary: "#000000"
+    sidebar-primary-foreground: "#ffffff"
+    sidebar-accent: "#eef4fc"
+    sidebar-accent-foreground: "#000000"
+    sidebar-border: "#e4e8ee"
+    sidebar-ring: "#000000"
+  dark:
+    background: "#000000"                          # corpus: canvas is true black #000000, never a near-black — the brand's hard rule
+    foreground: "#fcfdff"                          # corpus: ink, faintly blue-cool off-white
+    card: "#0a0a0c"                                # corpus: surface-card, one luminance step above canvas
+    card-foreground: "#fcfdff"
+    muted: "#101012"                               # corpus: surface-elevated — subtle fills and hover, a step above card
+    muted-foreground: "#a1a4a5"                    # corpus: mute, supporting text and inactive labels
+    border: "rgba(255,255,255,0.14)"              # corpus: hairline-strong, the structural border on cards, code wells, inputs
+    input: "rgba(255,255,255,0.14)"
+    ring: "#fcfdff"                                # corpus: focus thickens the border to ink; no separate ring colour
+    primary: "#fcfdff"                             # corpus: the white pill is the brightest pixel and the one accent
+    primary-foreground: "#000000"                 # corpus: black label on the white primary
+    accent: "rgba(255,255,255,0.09)"              # derived: translucent-white selection wash (the brand's depth idiom); neutral, never colored
+    accent-foreground: "#fcfdff"
+    destructive: "#ff2047"                         # corpus: accent-red, inline error red
+    destructive-foreground: "#fcfdff"
+    success: "#11ff99"                             # corpus: accent-green, status dots
+    warning: "#ffc53d"                             # corpus: accent-yellow
+    popover: "#101012"                             # corpus: surface-elevated, overlays and menus
+    popover-foreground: "#fcfdff"
+    secondary: "#101012"                           # corpus: button-ghost surface is surface-elevated
+    secondary-foreground: "#fcfdff"
+    chart-1: "#3b9eff"                             # corpus: accent-blue
+    chart-2: "#11ff99"                             # corpus: accent-green
+    chart-3: "#ff801f"                             # corpus: accent-orange
+    chart-4: "#ffc53d"                             # corpus: accent-yellow
+    chart-5: "#ff2047"                             # corpus: accent-red
+    sidebar: "#000000"                             # corpus: nav-bar background is canvas
+    sidebar-foreground: "rgba(252,253,255,0.86)"  # corpus: nav-bar text is body off-white at 86%
+    sidebar-primary: "#fcfdff"                     # corpus: the white accent in nav
+    sidebar-primary-foreground: "#000000"
+    sidebar-accent: "rgba(255,255,255,0.09)"      # derived: selected-nav wash, matches accent
+    sidebar-accent-foreground: "#fcfdff"
+    sidebar-border: "rgba(255,255,255,0.06)"      # corpus: hairline, the nav's soft bottom border
+    sidebar-ring: "#fcfdff"
+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.5 }
+accent-count: 1
+```

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

@@ -0,0 +1,225 @@
+---
+schema: design-md/v1
+product: Revolut
+provenance: library
+sourced: 2026-07-04
+---
+
+# Revolut — operator reading
+
+The operator translation of Revolut's fintech-meets-brochure system — a two-mode marketing canvas
+(true-black storytelling bands alternating with white catalogue bands, oversized Aeonik Pro headlines,
+pill buttons, eight saturated illustration colours). This entry keeps the operator-durable core and
+leaves the hero scale behind; §9 lists exactly what carries and what stays. Both machine blocks are
+fully valued; judgments away from the marketing brand are annotated `# derived:`.
+
+## 1 Visual Theme
+
+Light by default: the working canvas is the white catalogue mode — the surface Revolut reserves for its
+comparison tables and download tiles. Beside it stands a signature **true-black `sidebar`** (`#000000`):
+Revolut's nav and footer are pure black, so the one piece of persistent operator chrome carries the
+brand's dark identity while the work stays on white. Flat — no drop-shadow language; hierarchy comes
+from surface-luminance shifts and 1px hairlines. A single accent, cobalt violet `primary` (`#494fdf`),
+is reserved for the one action that matters; ink is warm near-black (`#191c1f`), never pure black.
+Components are distinctly rounded (12px working, 20px cards) without the marketing pill; density is
+`standard` and comfortable, the way Revolut's tall inputs feel.
+
+## 2 Color Roles
+
+Light values first; one chromatic accent. Cobalt violet is the only brand stamp that carries meaning —
+status hues speak status, the illustration palette lives in charts.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | white `#ffffff` | page, cards, and overlays — the dominant surface |
+| `foreground` | warm near-black `#191c1f` (brand ink) | all primary ink; softer than pure black on purpose |
+| `muted` / `secondary` | off-white `#f4f4f4` (surface-soft) | hover rows, soft-button fills, inset groups |
+| `muted-foreground` | mid-slate `#505a63` (brand mute) | labels, captions, secondary text |
+| `border` / `input` | hairline `#e2e2e7` | every separator, grid line, and field edge |
+| `primary` | cobalt violet `#494fdf` | the one primary action; active nav; key interactive detail |
+| `accent` | pale cobalt tint `#edeefc` | selected / hovered rows and nav on the light canvas |
+| `accent-foreground` | cobalt deep `#3a40c4` | ink on the accent tint |
+| `ring` | `primary` `#494fdf` | the focus outline — always visible, keyboard-first |
+| `destructive` | danger red `#e23b4a` | destructive actions and error state only |
+| `success` / `warning` | green `#428619` / orange `#ec7e00` | status signalling only, never chrome |
+
+The eight saturated illustration colours (teal, light-blue, pink, light-green, yellow, brown) carry no
+UI role — they appear only as chart series (see §7).
+
+## 3 Typography
+
+Two families, one voice. `font-sans` leads with **Aeonik Pro** (the brand's editorial display face),
+falling through its documented substitutes — Inter Display, General Sans, Söhne — to **Inter**, the
+workhorse for body, labels, and tables. Headings carry Aeonik's tight negative tracking; body rides
+Inter with a faint positive tracking that reads mechanical and fintech-precise. `font-mono` is JetBrains
+Mono for amounts, IDs, and timestamps; numeric columns render `tabular-nums`.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 28px / 1.2 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 22px / 1.3 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 18px / 1.35 | `font-weight-strong` · `heading-tracking` |
+| body | UI + prose | 15px / 1.5 | `font-weight-normal` |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow | 12px / 1.2 | `font-weight-strong`, `+0.02em`, uppercase |
+
+Bump weight for emphasis, never size. Aeonik's hero sizes (80–136px) stay behind — voice carries, scale does not.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled cobalt `primary` on `primary-foreground`, `radius` (rounded, not pilled
+  — the marketing pill stays behind). Secondary: `secondary` fill, `border`. Ghost: `accent` on hover.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring` at
+  full 2px, no glow; comfortable height, echoing Revolut's tall fields.
+- **Card** — `card` surface, 1px `border`, the larger radius step (20px, Revolut's card corner), no
+  shadow — depth is the hairline and the surface.
+- **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 beside the work (`side-panel-width`, `side-panel-width-rich` for
+  content-heavy), not over it.
+- **Badge** — full pill (`radius-scale` max, the one controlled Revolut pill nod), hairline `border` or
+  status fill, uppercase caption; status badges take `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing unit 4px; the on-scale ramp is `4 · 6 · 8 · 14 · 16 · 24 · 32 · 48 · 64` (6px and 14px are
+Revolut's own off-grid comfort steps, kept). Shell dimensions map one-to-one to the layout primitives:
+sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height` (64px, Revolut's
+nav-bar height), side panel `side-panel-width` / `side-panel-width-rich`, modal `modal-width-max`, forms
+`form-max-width`, tables full-width. Density is governed globally by `density-tier` and stepped per
+archetype by the surface catalog.
+
+## 6 Depth
+
+Flat, and more so than most — Revolut has **no traditional drop-shadow language**. Hierarchy comes from
+surface-luminance shifts and hairlines:
+
+- **0 — canvas** `background` white, no border.
+- **1 — panel / card** `card` on a 1px `border`; to lift off a band, the band steps to `muted`
+  (`#f4f4f4`) rather than casting a shadow.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a low `md`.
+
+The black `sidebar` runs its own dark ladder: `#000000` chrome, `#16181a` hovered/selected nav row,
+`#ffffff1f` dividers. Focus is a 2px cobalt `ring` outline (never a glow) on every interactive element;
+three z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve cobalt `primary` for the single most important action — a stamp, not a theme. If two things want it, one is not primary.
+- **Do** keep the `sidebar` true black `#000000` — Revolut's black is `#000000`, not near-black; a deliberate override of the light-surface default.
+- **Do** carry depth with surface-luminance and hairlines; keep body ink warm `#191c1f`, not pure black.
+- **Do** apply `tabular-nums` to every numeric column and `font-mono` to amounts, IDs, and timestamps.
+- **Don't** promote a second chromatic accent — the eight illustration colours are chart series only, never chrome.
+- **Don't** full-pill buttons or CTAs — the marketing pill stays behind; buttons take `radius`, only badges pill.
+- **Don't** add drop shadows to cards; colour-block and surface-luminance carry elevation.
+- **Don't** open detail or edit in a modal when the side panel fits — modals are confirmations only.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440.
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | black `sidebar` → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
+| 768 | sidebar collapses to the black 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
+
+**Carries over:** cobalt violet `primary` as the single accent · warm-black `#191c1f` ink · the black
+`#000000` sidebar chrome · rounded character (12px working, 20px cards) · Aeonik heading voice with tight
+tracking over an Inter body · flat, shadowless depth · `tabular-nums` money.
+
+**Stays behind:** the black canvas as the *working* surface · hero-scale Aeonik (80–136px) · the
+white-pill-on-black CTA (a dark-canvas device — the operator primary is the cobalt fill) · full-pill
+buttons · the band-switching rhythm · the illustration palette as chrome.
+
+- Lead every list surface with its table; the black sidebar is the persistent left chrome.
+- Accent only the primary action with cobalt; everything else is neutral or status.
+- Detail and edit go in the side panel; a modal is a confirmation, not a workspace.
+- Every numeric column is `tabular-nums`; every amount / ID / timestamp is `font-mono`, and every
+  workflow completes from the keyboard with the cobalt `ring` outline always visible.
+- Stay flat — hairline and surface before shadow; illustration colours are chart series, not chrome.
+
+```yaml design-primitives
+radius: 12px                                       # derived: Revolut's input radius (rounded.md) — the working-component corner; rounder than a typical operator base to carry the brand
+shadow-intensity: 0.3                              # derived: Revolut has no drop-shadow language; shadow barely lifts a true overlay
+border-weight: 1px
+density-gap: 1
+density-inset: 1
+font-sans: Aeonik Pro, Inter Display, General Sans, Inter, system-ui, sans-serif
+font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace   # derived: corpus ships no mono; a clean geometric mono for amounts/IDs, pairing with Inter
+font-weight-normal: 400
+font-weight-strong: 600                            # derived: brand display is Aeonik 500, but operator headings at 18–28px read cleaner at 600 (Revolut's own bold/button weight)
+heading-tracking: -0.02em                          # derived: Revolut's display-xxl ratio (-2.72px/136px); carries the signature tight tracking at operator heading sizes
+duration-unit: 50ms                                # derived: corpus silent on motion; functional operator defaults
+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 operator ease
+contrast-boost: 1
+icon-stroke: 1.75                                  # derived: corpus has no icon spec; one step under lucide's 2 for a refined operator stroke
+icon-size-base: 16px                               # derived: corpus has no icon spec; operator default
+sidebar-width-expanded: 256px                      # derived: Revolut is a top-nav marketing site; comfortable operator sidebar
+sidebar-width-collapsed: 56px                      # derived: standard operator icon rail
+topbar-height: 64px                                # Revolut nav-bar height
+side-panel-width: 420px                            # derived: no side panels in the marketing corpus; operator default
+side-panel-width-rich: 640px                       # derived: operator default for content-heavy detail
+modal-width-max: 560px                             # derived: operator default
+form-max-width: 640px                              # derived: operator default
+table-row-height: 44px                             # derived: Revolut's comfortable feel (tall inputs) → a touch taller than the 40px operator norm
+verbosity: default
+feedback: subtle
+density-tier: standard                             # derived: Revolut's generous marketing whitespace stays behind; operator density is standard-comfortable, not dense-terminal
+product-traits: [fintech, payments, transaction-queue, dashboard, crm]
+```
+
+```yaml lever-manifest
+version: 1
+fonts: { sans: "Aeonik Pro, Inter Display, General Sans, Inter, system-ui, sans-serif", mono: "JetBrains Mono, ui-monospace, SFMono-Regular, monospace" }
+color-tokens:
+  light:
+    background: "#ffffff"
+    foreground: "#191c1f"
+    card: "#ffffff"
+    card-foreground: "#191c1f"
+    muted: "#f4f4f4"
+    muted-foreground: "#505a63"
+    border: "#e2e2e7"
+    input: "#e2e2e7"
+    ring: "#494fdf"
+    primary: "#494fdf"
+    primary-foreground: "#ffffff"
+    accent: "#edeefc"                              # derived: pale cobalt tint for selected/hovered rows; corpus gives no light tint of primary
+    accent-foreground: "#3a40c4"
+    destructive: "#e23b4a"
+    destructive-foreground: "#ffffff"
+    success: "#428619"
+    warning: "#ec7e00"
+    popover: "#ffffff"
+    popover-foreground: "#191c1f"
+    secondary: "#f4f4f4"
+    secondary-foreground: "#191c1f"
+    chart-1: "#494fdf"
+    chart-2: "#00a87e"
+    chart-3: "#007bc2"
+    chart-4: "#ec7e00"
+    chart-5: "#e61e49"
+    sidebar: "#000000"
+    sidebar-foreground: "#ffffff"
+    sidebar-primary: "#494fdf"
+    sidebar-primary-foreground: "#ffffff"
+    sidebar-accent: "#16181a"
+    sidebar-accent-foreground: "#ffffff"
+    sidebar-border: "#ffffff1f"                    # derived: hairline-dark rgba(255,255,255,0.12) as 8-digit hex
+    sidebar-ring: "#494fdf"
+spacing-scale: [4, 6, 8, 14, 16, 24, 32, 48, 64]
+radius-scale: [0, 8, 12, 20, 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
+```