@nurix/etna 0.19.11 → 0.19.12

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

@@ -0,0 +1,209 @@
+---
+schema: design-md/v2
+id: cal
+tier: brand
+segments: [scheduling, b2b-saas, dev-tools]
+keywords: [monochrome, near-black, spacious, soft-rounded, minimal, ink-focus]
+sourced: 2026-07-12
+sources: "v1 library entry (design-md/v1, sourced 2026-07-04) + 2026-07-12 re-audit; Cal Sans — licensed at v1 sourcing — has since been released openly on Google Fonts and is restored as the display face (weight 600); Inter Variable body, JetBrains Mono data"
+license: open
+---
+
+# cal — a concierge desk in a minimalist hotel lobby
+
+## 1 Visual Theme
+A concierge desk in a minimalist hotel lobby: a white counter with soft-rounded edges,
+a near-black leather ledger, a brass bell with no engraving — no color anywhere, and
+the generosity is in the space between things. Light by default; dark is the lobby at
+night, an authored cool ladder, not inverted marble. Near-monochrome: the one action
+that matters wears near-black, not a chromatic accent — the system reads confidently
+engineered without spending color on chrome. Flat but soft: hairlines, weight, and a
+light-gray ladder, with soft shadows lifting only elevated cards. Density is spacious
+— the whitespace is the signature.
+
+## 2 Color Roles
+`primary` is near-black — the action layer is monochrome, and `ring` is ink too: the
+border shifts to ink on focus, never a colored glow. Neutrals are cool-slate-tinted
+whites and grays, never pure gray. `accent` is the achromatic soft-gray selection
+tint. The one chromatic brand color, the link blue, rides inline links only and never
+a CTA — it appears here solely as `chart-1`. One scarce near-black surface frames or
+closes a view — the operator descendant of Cal's dark footer — at most one per view.
+Status hues speak only status; in light they deepen one step so labels hold AA. The
+badge pastels are the chart palette — the one place this monochrome brand spends
+color.
+
+## 3 Typography
+Cal Sans — licensed at v1 sourcing, since released openly on Google Fonts — is
+restored as the display voice: geometric, weight 600, tight negative tracking, worn by
+page titles and empty states only. Inter Variable carries body, tables, buttons, nav,
+and captions; heading emphasis is 600 with negative tracking, never bolder. JetBrains
+Mono carries IDs, codes, and timestamps; numeric columns render `tabular-nums`. Hero
+display (48–64px) stays behind; operator headings top out at 24px.
+
+## 4 Component Stylings
+Buttons: near-black `primary` fill, `radius-sm` (8px), no pill; press deepens one
+step. Secondary: `background` fill, hairline, `foreground`. Inputs: `background` fill,
+hairline; focus shifts the edge to the ink `ring` at 2px, no glow. Cards: `card` with
+hairline, `radius-md` (12px) on content cards, soft shadow only when lifted. Table
+rows: hairline grid, `muted` hover, `accent` selection, mono figures. Badges: pill
+radius, `muted` or status fill, uppercase caption, never `primary`. Detail opens in
+the side panel.
+
+## 5 Layout
+4px base; sidebar 248/56px; topbar 64px — Cal's airier nav band; side panel 420/640px;
+content max 1280px. Density is spacious — generous whitespace is the brand — stepping
+denser per archetype without cramming. The 96px marketing rhythm stays behind.
+
+## 6 Depth
+Soft and modern: the surface ladder and hairlines first, soft slate-tinted shadow
+reserved for true lift — no heavy drops, no neumorphism, no glass. The scarce
+near-black surface elevates by color contrast, not a heavier shadow. Dark is an
+authored ladder: `background` 0.16 L, `surface-raised` +0.055, `surface-overlay`
++0.10, hue held at 264. Focus is the ink `ring`, visible on every interactive
+element. Three z-levels: content, sticky chrome, overlay.
+
+## 7 Motion
+Unhurried and precise. Named moments: `slot-settle` (availability grid updates,
+150ms), `panel-slide` (side panel, 250ms, interruptible), `ledger-press`
+(primary-action press, 100ms). Physicality is granted to auth and first-run empty
+states only. Calendars and keyboard-initiated actions never animate.
+
+## 8 Iconography & Charts
+Lucide, 1.75px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline
+axes, no gridline fills; the categorical ramp is where the badge pastels live — link
+blue, orange, pink, violet, emerald. Tooltips on `surface-overlay` with mono numerals.
+
+## 9 Voice
+Front-desk brevity: polite, exact, no exclamation. "Create booking" · "Nothing
+scheduled — your next opening is Tuesday 09:00" · "This event type is linked to 4
+routing forms; reassign them before archiving."
+
+## 10 Do's & Don'ts
+Do keep the action layer monochrome — near-black `primary`, ink `ring`. Do hold
+display at Cal Sans 600 with tight tracking; body stays Inter. Do keep geometry soft:
+8px controls, 12px cards. Don't promote the link blue to a CTA — it is inline-link and
+chart-only. Don't exceed 16px radius on a card — larger reads consumer-toy. Don't
+scatter the near-black surface — one framing element per view. Don't add heavy drop
+shadows or any gradient.
+
+## 11 Responsive
+375: sidebar → off-canvas drawer; list+detail stacks; side panel → full sheet; density
+holds. 768: sidebar → icon rail; tables scroll overflow. 1024: two-pane queue+detail
+holds. 1440: forms cap at 640px; tables and dashboards use the full width under the
+1280px cap.
+
+## 12 Agent Prompt Guide
+Reach first for white canvas, hairline, and the light-gray ladder — a grayscale
+system. Accent only the primary action, in near-black; if two things want it, one is
+not primary. Page titles wear Cal Sans 600 tight; never scale to hero sizes. Charts
+are the only place color spends. The near-black framing surface appears at most once
+per view. Dark is authored — consult the block, never derive.
+
+```yaml design-values
+color:
+  light:
+    background: oklch(0.99 0.005 264)
+    foreground: oklch(0.19 0.005 264)
+    card: oklch(0.995 0.005 264)
+    card-foreground: oklch(0.19 0.005 264)
+    popover: oklch(0.995 0.005 264)
+    popover-foreground: oklch(0.19 0.005 264)
+    primary: oklch(0.19 0.005 264)
+    primary-foreground: oklch(0.99 0.005 264)
+    secondary: oklch(0.97 0.005 264)
+    secondary-foreground: oklch(0.19 0.005 264)
+    muted: oklch(0.97 0.005 264)
+    muted-foreground: oklch(0.51 0.023 264)
+    accent: oklch(0.96 0.007 264)
+    accent-foreground: oklch(0.19 0.005 264)
+    destructive: oklch(0.55 0.19 27)
+    destructive-foreground: oklch(0.99 0.005 27)
+    success: oklch(0.55 0.13 162)
+    warning: oklch(0.62 0.15 66)
+    border: oklch(0.928 0.006 264)
+    input: oklch(0.928 0.006 264)
+    ring: oklch(0.19 0.005 264)
+    surface-raised: oklch(0.995 0.005 264)
+    surface-overlay: oklch(0.995 0.005 264)
+    chart-1: oklch(0.623 0.188 260)
+    chart-2: oklch(0.65 0.15 45)
+    chart-3: oklch(0.62 0.16 350)
+    chart-4: oklch(0.55 0.16 295)
+    chart-5: oklch(0.60 0.13 162)
+    sidebar: oklch(0.975 0.005 264)
+    sidebar-foreground: oklch(0.19 0.005 264)
+    sidebar-primary: oklch(0.19 0.005 264)
+    sidebar-primary-foreground: oklch(0.99 0.005 264)
+    sidebar-accent: oklch(0.955 0.006 264)
+    sidebar-accent-foreground: oklch(0.19 0.005 264)
+    sidebar-border: oklch(0.928 0.006 264)
+    sidebar-ring: oklch(0.19 0.005 264)
+  dark:
+    background: oklch(0.16 0.006 264)
+    foreground: oklch(0.95 0.005 264)
+    card: oklch(0.20 0.007 264)
+    card-foreground: oklch(0.95 0.005 264)
+    popover: oklch(0.26 0.008 264)
+    popover-foreground: oklch(0.95 0.005 264)
+    primary: oklch(0.95 0.005 264)
+    primary-foreground: oklch(0.18 0.006 264)
+    secondary: oklch(0.24 0.008 264)
+    secondary-foreground: oklch(0.92 0.005 264)
+    muted: oklch(0.23 0.007 264)
+    muted-foreground: oklch(0.70 0.015 264)
+    accent: oklch(0.27 0.008 264)
+    accent-foreground: oklch(0.93 0.005 264)
+    destructive: oklch(0.62 0.19 27)
+    destructive-foreground: oklch(0.13 0.02 27)
+    success: oklch(0.68 0.13 162)
+    warning: oklch(0.72 0.14 66)
+    border: oklch(0.27 0.008 264)
+    input: oklch(0.27 0.008 264)
+    ring: oklch(0.95 0.005 264)
+    surface-raised: oklch(0.215 0.007 264)
+    surface-overlay: oklch(0.26 0.008 264)
+    chart-1: oklch(0.65 0.17 260)
+    chart-2: oklch(0.72 0.14 45)
+    chart-3: oklch(0.70 0.15 350)
+    chart-4: oklch(0.65 0.14 295)
+    chart-5: oklch(0.70 0.12 162)
+    sidebar: oklch(0.14 0.006 264)
+    sidebar-foreground: oklch(0.92 0.005 264)
+    sidebar-primary: oklch(0.95 0.005 264)
+    sidebar-primary-foreground: oklch(0.18 0.006 264)
+    sidebar-accent: oklch(0.21 0.007 264)
+    sidebar-accent-foreground: oklch(0.92 0.005 264)
+    sidebar-border: oklch(0.21 0.007 264)
+    sidebar-ring: oklch(0.95 0.005 264)
+typography:
+  display: { family: "Cal Sans", fallback: "system-ui, sans-serif", weights: [600] }
+  sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 600] }
+  mono: { family: "JetBrains Mono Variable", fallback: "ui-monospace, monospace", weights: [400] }
+  ramp:
+    display: { size: 32px, line: 38px, weight: 600, family: display, tracking: -0.02em }
+    h1: { size: 24px, line: 30px, weight: 600, family: sans, tracking: -0.02em }
+    h2: { size: 18px, line: 25px, weight: 600, family: sans, tracking: -0.02em }
+    body: { size: 14px, line: 21px, weight: 400, family: sans }
+    small: { size: 13px, line: 18px, weight: 400, family: sans }
+    caption: { size: 12px, line: 14px, weight: 600, family: sans, tracking: 0.02em, transform: uppercase }
+    data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
+  register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body], mono: [data, ids, timestamps] }
+elevation:
+  radius: { sm: 8px, md: 12px, lg: 16px }
+  hairline: border
+  shadow:
+    overlay: "0 4px 12px oklch(0.20 0.01 264 / 0.08)"
+    popover: "0 1px 2px oklch(0.20 0.01 264 / 0.05)"
+  dark-ladder: { background: 0.16, raised: 0.215, overlay: 0.26, hue-held: 264 }
+motion:
+  duration: { press: 100ms, fade: 150ms, panel: 250ms }
+  easing: { standard: "cubic-bezier(0.4, 0, 0.2, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
+  entrance-never: ease-in
+  identity-moments: [auth, first-run-empty]
+iconography: { set: lucide, stroke: 1.75px, grid: [16px, 20px] }
+charts:
+  categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
+  sequential: { from: background, to: chart-1 }
+  diverging: { negative: destructive, mid: muted, positive: chart-5 }
+layout: { base: 4px, sidebar: [248px, 56px], topbar: 64px, side-panel: [420px, 640px], content-max: 1280px }
+```

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

@@ -0,0 +1,204 @@
+---
+schema: design-md/v2
+id: clay
+tier: brand
+segments: [gtm-data, crm, sales-tools]
+keywords: [warm, cream, near-black, rounded, playful-restrained, spacious]
+sourced: 2026-07-12
+sources: "design-md/v1 clay entry (2026-07-04) + 2026-07-12 re-audit of Clay's public brand; Inter Variable + JetBrains Mono per the v1 substitution (Plain Black hero display and 3D claymation stay behind); the saturated six-hue feature palette demoted to chart encodings; dark theme authored as a warm reading room (v1 shipped light only)"
+license: open
+---
+
+# clay — a ceramicist's daylit studio at the worktable
+
+## 1 Visual Theme
+A ceramicist's daylit studio: cream paper laid on the worktable, one tool inked
+near-black, forms rounded and generous, and all the color kept in the glaze samples
+on the shelf. Light by default and warm, never cool — the cream `background` is the
+non-negotiable signal that separates this from every cool-gray data platform. Flat:
+rank is warm surface steps, hairline `border`, and type weight, never heavy shadow.
+One reserved action tone — near-black `primary` — carries emphasis in the chrome.
+The dark theme is the same studio after dusk: a warm-charcoal ladder, never inverted
+paper. Density breathes; the tool breathes with it.
+
+## 2 Color Roles
+Ink `foreground` on cream `background`; `primary` is near-black, the single tone the
+chrome spends on emphasis — the one primary action and active nav, nothing else. The
+saturated six — teal, pink, lavender, ochre, coral — are Clay's brand voltage, carried
+here only as `chart-1..5`, never chrome. `accent` is a warmer cream for selection and
+hover, a surface shift not a color. Status hues (`destructive`, `success`, `warning`)
+speak status only. Sidebar sits a faint cream step off the canvas in both themes.
+
+## 3 Typography
+Inter (single voice — the open substitute for Clay's UI face) / JetBrains Mono (IDs,
+codes, timestamps, log lines). Register scope: no marketing display face — Inter at 600
+carries every heading, and Plain Black stays hero-scale marketing. Emphasis bumps weight
+one step, never size. Every numeric column renders `tabular-nums`; uppercase eyebrows
+are the one tracked register.
+
+## 4 Component Stylings
+Buttons `radius-md` (12px, generous, no pill), near-black `primary` fill, hover deepens
+one step; secondary takes `secondary` cream with a hairline; ghost goes `accent` on
+hover. Inputs on `background` with a hairline `input` edge and a 2px near-black `ring`,
+no glow. Cards flat on `card` with a hairline, stepping to `radius-lg` for large panels;
+shadow only when a true overlay must lift. Table rows `muted` hover, `accent` selection,
+mono numerals. Detail opens in the side panel. Badges alone pill — `muted` or status
+fills, uppercase caption, never `primary`.
+
+## 5 Layout
+4px base; ramp 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64. Sidebar 260/60px; topbar 56px; side
+panel 440/680px; content max 1320px; tables full-width. Spacious globally — the luxury is
+cream space, not ornament — stepped denser per archetype, never absolute overrides.
+
+## 6 Depth
+Flat — warm surface steps and hairlines carry all rank; the cream-to-white ladder does
+the work a shadow would elsewhere. Light: shadows only on true overlays (popover,
+dialog), warm-tinted toward hue 85, never black. Dark: the authored ladder —
+`background` 0.19 L, `surface-raised` +0.04, `surface-overlay` +0.09, hue held at 85.
+Focus is a 2px near-black `ring`, always visible; three z-levels: content, chrome, overlay.
+
+## 7 Motion
+Calm and small. Named moments: `panel-slide` (side panel, 220ms, interruptible),
+`page-fade` (content arrive, 160ms), `press` (primary action, 120ms). Physicality is
+granted only to auth and first-run empty states; nothing animates in tables, palettes,
+or any keyboard-initiated action.
+
+## 8 Iconography & Charts
+Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes,
+no gridline fills; the categorical ramp spends Clay's demoted feature palette as
+encodings — teal, pink, lavender, ochre, coral (`chart-1..5`); tooltips on
+`surface-overlay` with mono numerals.
+
+## 9 Voice
+Warm and plain — a friendly operator that never shouts. "Add record" · "All caught up —
+nothing needs review today" · "This list is still importing; give it a minute before you
+enrich."
+
+## 10 Do's & Don'ts
+Do anchor every surface on the cream `background` — the warm tint is the identity. Do
+reserve near-black `primary` for the single most important action. Do keep radius
+generous — the rounded character is the brand. Don't cool the neutrals to gray — a gray
+canvas is a different brand. Don't bring the saturated feature fills into chrome (no
+hot-pink button, no teal panel) — they live only in charts. Don't pill the primary CTA
+or signal elevation with heavy shadow.
+
+## 11 Responsive
+375: sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet;
+density holds. 768: sidebar → icon rail; tables scroll their overflow. 1024: two-pane
+queue+detail holds side by side. 1440: forms cap; tables and dashboards take the full
+width with generous cream gutters.
+
+## 12 Agent Prompt Guide
+Reach for the cream canvas first — it is what makes the tool read as Clay. Accent only
+the primary action, and the accent is near-black; if two want it, one is not primary.
+The saturated palette lives only in charts. Keep radius generous; every numeric column is
+mono `tabular-nums`. Dark is authored — consult the block, never derive.
+
+```yaml design-values
+color:
+  light:
+    background: oklch(0.985 0.012 85)
+    foreground: oklch(0.16 0.006 85)
+    card: oklch(0.995 0.006 85)
+    card-foreground: oklch(0.16 0.006 85)
+    popover: oklch(0.995 0.006 85)
+    popover-foreground: oklch(0.16 0.006 85)
+    primary: oklch(0.16 0.006 85)
+    primary-foreground: oklch(0.985 0.012 85)
+    secondary: oklch(0.955 0.012 88)
+    secondary-foreground: oklch(0.22 0.008 85)
+    muted: oklch(0.965 0.013 88)
+    muted-foreground: oklch(0.50 0.014 82)
+    accent: oklch(0.925 0.014 90)
+    accent-foreground: oklch(0.22 0.008 85)
+    destructive: oklch(0.58 0.20 25)
+    destructive-foreground: oklch(0.985 0.008 25)
+    success: oklch(0.60 0.13 150)
+    warning: oklch(0.72 0.15 70)
+    border: oklch(0.905 0.012 88)
+    input: oklch(0.905 0.012 88)
+    ring: oklch(0.16 0.006 85)
+    surface-raised: oklch(0.99 0.008 85)
+    surface-overlay: oklch(0.995 0.006 85)
+    chart-1: oklch(0.62 0.13 190)
+    chart-2: oklch(0.68 0.16 350)
+    chart-3: oklch(0.58 0.15 290)
+    chart-4: oklch(0.70 0.13 75)
+    chart-5: oklch(0.65 0.17 30)
+    sidebar: oklch(0.965 0.014 88)
+    sidebar-foreground: oklch(0.16 0.006 85)
+    sidebar-primary: oklch(0.16 0.006 85)
+    sidebar-primary-foreground: oklch(0.985 0.012 85)
+    sidebar-accent: oklch(0.925 0.014 90)
+    sidebar-accent-foreground: oklch(0.22 0.008 85)
+    sidebar-border: oklch(0.905 0.012 88)
+    sidebar-ring: oklch(0.16 0.006 85)
+  dark:
+    background: oklch(0.19 0.010 85)
+    foreground: oklch(0.94 0.010 85)
+    card: oklch(0.23 0.011 85)
+    card-foreground: oklch(0.94 0.010 85)
+    popover: oklch(0.27 0.012 85)
+    popover-foreground: oklch(0.94 0.010 85)
+    primary: oklch(0.94 0.010 85)
+    primary-foreground: oklch(0.19 0.010 85)
+    secondary: oklch(0.25 0.011 85)
+    secondary-foreground: oklch(0.90 0.010 85)
+    muted: oklch(0.24 0.011 85)
+    muted-foreground: oklch(0.72 0.014 82)
+    accent: oklch(0.28 0.013 88)
+    accent-foreground: oklch(0.92 0.010 85)
+    destructive: oklch(0.64 0.19 25)
+    destructive-foreground: oklch(0.15 0.02 25)
+    success: oklch(0.68 0.13 150)
+    warning: oklch(0.76 0.15 70)
+    border: oklch(0.29 0.012 85)
+    input: oklch(0.29 0.012 85)
+    ring: oklch(0.94 0.010 85)
+    surface-raised: oklch(0.23 0.011 85)
+    surface-overlay: oklch(0.28 0.012 85)
+    chart-1: oklch(0.70 0.13 190)
+    chart-2: oklch(0.74 0.15 350)
+    chart-3: oklch(0.66 0.15 290)
+    chart-4: oklch(0.76 0.13 75)
+    chart-5: oklch(0.72 0.16 30)
+    sidebar: oklch(0.17 0.010 85)
+    sidebar-foreground: oklch(0.90 0.010 85)
+    sidebar-primary: oklch(0.94 0.010 85)
+    sidebar-primary-foreground: oklch(0.19 0.010 85)
+    sidebar-accent: oklch(0.26 0.012 88)
+    sidebar-accent-foreground: oklch(0.92 0.010 85)
+    sidebar-border: oklch(0.25 0.011 85)
+    sidebar-ring: oklch(0.94 0.010 85)
+typography:
+  display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [600] }
+  sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 600] }
+  mono: { family: "JetBrains Mono", fallback: "ui-monospace, monospace", weights: [400] }
+  ramp:
+    display: { size: 30px, line: 38px, weight: 600, family: display, tracking: -0.01em }
+    h1: { size: 24px, line: 31px, weight: 600, family: sans }
+    h2: { size: 18px, line: 25px, weight: 600, family: sans }
+    body: { size: 16px, line: 25px, weight: 400, family: sans }
+    small: { size: 14px, line: 21px, weight: 400, family: sans }
+    caption: { size: 12px, line: 16px, weight: 600, family: sans, tracking: 0.08em, transform: uppercase }
+    data: { size: 14px, line: 22px, weight: 400, family: mono, features: [tnum] }
+  register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body, headings], mono: [data, ids, timestamps] }
+elevation:
+  radius: { sm: 8px, md: 12px, lg: 16px }
+  hairline: border
+  shadow:
+    overlay: "0 8px 30px oklch(0.20 0.02 85 / 0.10)"
+    popover: "0 4px 16px oklch(0.20 0.02 85 / 0.08)"
+  dark-ladder: { background: 0.19, raised: 0.23, overlay: 0.28, hue-held: 85 }
+motion:
+  duration: { press: 120ms, fade: 160ms, panel: 220ms }
+  easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
+  entrance-never: ease-in
+  identity-moments: [auth, first-run-empty]
+iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
+charts:
+  categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
+  sequential: { from: background, to: chart-3 }
+  diverging: { negative: destructive, mid: muted, positive: chart-1 }
+layout: { base: 4px, sidebar: [260px, 60px], topbar: 56px, side-panel: [440px, 680px], content-max: 1320px }
+```

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

@@ -0,0 +1,205 @@
+---
+schema: design-md/v2
+id: clickhouse
+tier: brand
+segments: [data-platform, analytics, dev-tools]
+keywords: [dark, electric-yellow, monochrome, dense, high-contrast, engineered]
+sourced: 2026-07-12
+sources: "design-md/v1 clickhouse entry (2026-07-04) + 2026-07-12 re-audit of the black-canvas / electric-yellow system; Inter Variable (700, tight tracking) + JetBrains Mono per v1; dark is the signature theme (the brand ships no light surface) — a light counterpart is authored for the rare daytime need; full-bleed yellow bands and 56px stat numerals stay behind"
+license: open
+---
+
+# clickhouse — a darkened ops room lit by one voltage lamp
+
+## 1 Visual Theme
+A darkened ops room at 2am: a matte near-black console, one electric-yellow status
+lamp, white readouts set in tight monospace, and nothing lit that isn't load-bearing.
+**Dark is the signature theme** — the near-black canvas is the identity, and the light
+counterpart is a rare daytime mode, not the default flipped. Emphatically flat: rank is
+the surface ladder, hairline `border`, and white-on-black contrast, never shadow. One
+accent — electric-yellow `primary` — is held scarce: the one primary action, the focus
+`ring`, the active-nav indicator, nothing else. Neutrals are near-achromatic so the UI
+reads engineered and monochrome, yellow its only voltage. Density is dense.
+
+## 2 Color Roles
+White `foreground` on near-black `background`; `primary` electric-yellow is the only
+chromatic hue that carries meaning, with black `primary-foreground` for the
+high-contrast brand signal. `accent` is an elevated neutral grey for hover and selected
+rows — a lift, never a hue. Status hues (`destructive`, `success`, `warning`) speak
+status only. The yellow's power is its scarcity at element scale; full-bleed yellow is
+marketing voltage and carries no operator role. Sidebar sits a step below the canvas.
+
+## 3 Typography
+Inter (single voice — the open substitute for the brand cut) / JetBrains Mono (IDs,
+codes, timestamps, log lines, SQL). Register scope: no separate display face — Inter at
+700 with tight negative tracking is the defining trait, carried at operator sizes even as
+the 72/56/40px hero scale stays behind. Every numeric column renders `tabular-nums`;
+show the real query, not an illustration. Emphasis bumps weight, never size.
+
+## 4 Component Stylings
+Buttons `radius-md` (8px, never pill), yellow `primary` fill on black; secondary takes
+the dim-panel `secondary` with a hairline; ghost goes `accent` on hover. Inputs on
+`background` with a hairline `input` edge and a 2px yellow `ring`, no glow. Cards a
+dim-panel step above the canvas on a hairline, `radius-lg` for large panels; depth is
+the surface lift, never shadow. Table rows dense on `border` grid, `accent` hover,
+`accent` selection with a yellow left-indicator, mono numerals. Detail opens in the side
+panel. Badges: hairline, `muted`/status fill, uppercase caption, never `primary`.
+
+## 5 Layout
+4px base; ramp 2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64. Sidebar 240/56px; topbar 64px
+(the brand's nav height); side panel 420/640px; content max 1280px; tables full-width.
+Dense globally — engineering-grade rhythm — stepped per archetype, never absolute overrides.
+
+## 6 Depth
+Flat and shadowless — the surface ladder and hairlines carry all rank. Dark: the
+authored ladder — `background` 0.15 L, `surface-raised` +0.06, `surface-overlay` +0.10,
+hue held at 105; overlays earn the faintest tinted lift over a scrim, never a heavier
+shadow. Light: white canvas, hairlines, and the rare soft yellow-tinted shadow only on
+true overlays. Focus is a 2px yellow `ring`, always visible; three z-levels: content,
+sticky chrome, overlay.
+
+## 7 Motion
+Near-instant — speed is the brand. Named moments: `query-run` (press feedback, 90ms),
+`panel-glide` (side panel, 200ms, interruptible), `row-fade` (content arrive, 130ms).
+Physicality is granted only to auth. Nothing animates in tables, log streams, or any
+keyboard-initiated action.
+
+## 8 Iconography & Charts
+Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes,
+no gridline fills; the categorical ramp leads with the yellow voltage then reaches for
+distinct counterpoints — yellow, blue, green, coral, violet (`chart-1..5`); tooltips on
+`surface-overlay` with mono numerals.
+
+## 9 Voice
+Terse engineer — no ceremony, no exclamation. "Run query" · "No running queries — the
+cluster is idle" · "This query scanned 4.2B rows; add a PREWHERE to narrow it."
+
+## 10 Do's & Don'ts
+Do wear the near-black canvas — this brand is categorically dark, with no light surface
+to fall back to. Do reserve yellow `primary` for the primary action, the focus `ring`,
+and the active-nav indicator — nothing else. Do carry hierarchy with the surface ladder,
+hairlines, weight, and size. Don't introduce a second brand color — monochrome plus one
+yellow. Don't fill large surfaces with yellow or set body text in it. Don't pill controls
+or signal elevation with drop shadows.
+
+## 11 Responsive
+375: sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet;
+density holds. 768: sidebar → icon rail; tables scroll their overflow. 1024: two-pane
+queue+detail holds side by side. 1440: content caps for forms; tables and dashboards take
+the full width.
+
+## 12 Agent Prompt Guide
+Wear the near-black canvas by default — cards and panels are the dim-panel lift off it,
+not white. Spend yellow once per surface: primary action, focus ring, active-nav
+indicator; if two things want it, one is not primary. Depth is surface contrast and
+hairlines, never shadow. Every ID, timestamp, and SQL block is mono; show the real query.
+Dark is authored — consult the block, never derive.
+
+```yaml design-values
+color:
+  light:
+    background: oklch(0.99 0.004 105)
+    foreground: oklch(0.17 0.006 105)
+    card: oklch(0.995 0.004 105)
+    card-foreground: oklch(0.17 0.006 105)
+    popover: oklch(0.995 0.004 105)
+    popover-foreground: oklch(0.17 0.006 105)
+    primary: oklch(0.17 0.006 105)
+    primary-foreground: oklch(0.99 0.004 105)
+    secondary: oklch(0.96 0.006 105)
+    secondary-foreground: oklch(0.24 0.007 105)
+    muted: oklch(0.965 0.006 105)
+    muted-foreground: oklch(0.48 0.008 105)
+    accent: oklch(0.93 0.008 108)
+    accent-foreground: oklch(0.24 0.007 105)
+    destructive: oklch(0.58 0.20 25)
+    destructive-foreground: oklch(0.99 0.008 25)
+    success: oklch(0.60 0.14 150)
+    warning: oklch(0.72 0.15 75)
+    border: oklch(0.91 0.007 105)
+    input: oklch(0.91 0.007 105)
+    ring: oklch(0.17 0.006 105)
+    surface-raised: oklch(0.985 0.005 105)
+    surface-overlay: oklch(0.995 0.004 105)
+    chart-1: oklch(0.80 0.16 108)
+    chart-2: oklch(0.55 0.16 250)
+    chart-3: oklch(0.56 0.14 150)
+    chart-4: oklch(0.58 0.18 30)
+    chart-5: oklch(0.56 0.15 300)
+    sidebar: oklch(0.965 0.006 105)
+    sidebar-foreground: oklch(0.17 0.006 105)
+    sidebar-primary: oklch(0.17 0.006 105)
+    sidebar-primary-foreground: oklch(0.99 0.004 105)
+    sidebar-accent: oklch(0.93 0.008 108)
+    sidebar-accent-foreground: oklch(0.24 0.007 105)
+    sidebar-border: oklch(0.91 0.007 105)
+    sidebar-ring: oklch(0.17 0.006 105)
+  dark:
+    background: oklch(0.15 0.006 105)
+    foreground: oklch(0.99 0.004 105)
+    card: oklch(0.21 0.007 105)
+    card-foreground: oklch(0.99 0.004 105)
+    popover: oklch(0.24 0.008 105)
+    popover-foreground: oklch(0.99 0.004 105)
+    primary: oklch(0.97 0.17 111)
+    primary-foreground: oklch(0.15 0.006 105)
+    secondary: oklch(0.21 0.007 105)
+    secondary-foreground: oklch(0.92 0.006 105)
+    muted: oklch(0.19 0.007 105)
+    muted-foreground: oklch(0.66 0.010 105)
+    accent: oklch(0.26 0.008 105)
+    accent-foreground: oklch(0.92 0.006 105)
+    destructive: oklch(0.64 0.20 25)
+    destructive-foreground: oklch(0.15 0.02 25)
+    success: oklch(0.70 0.16 150)
+    warning: oklch(0.78 0.15 75)
+    border: oklch(0.29 0.008 105)
+    input: oklch(0.29 0.008 105)
+    ring: oklch(0.97 0.17 111)
+    surface-raised: oklch(0.21 0.007 105)
+    surface-overlay: oklch(0.25 0.008 105)
+    chart-1: oklch(0.90 0.17 108)
+    chart-2: oklch(0.72 0.15 250)
+    chart-3: oklch(0.72 0.15 150)
+    chart-4: oklch(0.70 0.17 30)
+    chart-5: oklch(0.72 0.13 300)
+    sidebar: oklch(0.13 0.006 105)
+    sidebar-foreground: oklch(0.92 0.006 105)
+    sidebar-primary: oklch(0.97 0.17 111)
+    sidebar-primary-foreground: oklch(0.15 0.006 105)
+    sidebar-accent: oklch(0.22 0.008 105)
+    sidebar-accent-foreground: oklch(0.92 0.006 105)
+    sidebar-border: oklch(0.24 0.008 105)
+    sidebar-ring: oklch(0.97 0.17 111)
+typography:
+  display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [700] }
+  sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 700] }
+  mono: { family: "JetBrains Mono", fallback: "ui-monospace, monospace", weights: [400] }
+  ramp:
+    display: { size: 28px, line: 34px, weight: 700, family: display, tracking: -0.02em }
+    h1: { size: 24px, line: 30px, weight: 700, family: sans, tracking: -0.015em }
+    h2: { size: 18px, line: 24px, weight: 700, family: sans, tracking: -0.01em }
+    body: { size: 14px, line: 21px, weight: 400, family: sans }
+    small: { size: 13px, line: 18px, weight: 400, family: sans }
+    caption: { size: 12px, line: 16px, weight: 600, family: sans, tracking: 0.08em, transform: uppercase }
+    data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
+  register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body, headings], mono: [data, ids, timestamps, logs, sql] }
+elevation:
+  radius: { sm: 6px, md: 8px, lg: 12px }
+  hairline: border
+  shadow:
+    overlay: "0 10px 34px oklch(0.12 0.012 105 / 0.55)"
+    popover: "0 4px 16px oklch(0.12 0.012 105 / 0.45)"
+  dark-ladder: { background: 0.15, raised: 0.21, overlay: 0.25, hue-held: 105 }
+motion:
+  duration: { press: 90ms, fade: 130ms, panel: 200ms }
+  easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
+  entrance-never: ease-in
+  identity-moments: [auth]
+iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
+charts:
+  categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
+  sequential: { from: background, to: chart-1 }
+  diverging: { negative: chart-4, mid: muted, positive: chart-3 }
+layout: { base: 4px, sidebar: [240px, 56px], topbar: 64px, side-panel: [420px, 640px], content-max: 1280px }
+```