@nurix/etna 0.19.11 → 0.19.13

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

@@ -0,0 +1,205 @@
+---
+schema: design-md/v2
+id: ibm
+tier: brand
+segments: [enterprise, business-tools, data]
+keywords: [carbon, square, ibm-blue, plex, dense, flat]
+sourced: 2026-07-12
+sources: "design-md/v1 ibm entry (2026-07-04) + 2026-07-12 re-audit of IBM's Carbon Design System; IBM Plex Sans + IBM Plex Mono kept (both open, OFL, the brand's own faces); the 76/60/42px weight-300 hero display, full-bleed blue CTA banner, inverted footer, and hero gradient stay behind; dark theme authored from Carbon's Gray 100"
+license: open
+---
+
+# ibm — an engineer's ruled drafting sheet on the square grid
+
+## 1 Visual Theme
+An engineer's drafting sheet under even light: white paper ruled in fine gray, every
+element set on a square grid, one blue plotter line, and nothing rounded. Light by
+default; flat and square — every button, card, input, and container sits at 0px corners,
+and rank is carried by a 1px hairline `border` and surface change, never shadow. A single
+accent, IBM Blue `primary`, is reserved for the one action that matters, links, and the
+focus rule. The neutral ramp is charcoal ink on white with fine gray doing the structural
+work. Dense by design — Carbon expects a lot on the page, not a lot of air. The dark
+theme is Carbon's Gray 100, authored as a ladder.
+
+## 2 Color Roles
+Charcoal `foreground` on white `background`; `primary` IBM Blue is the only chromatic hue
+that carries meaning — the one primary action, links, active nav, and the focus rule,
+treated as scarce. `accent` is a blue-10 tint for selected and hovered rows, a surface
+step not a fill. Status hues (`destructive`, `success`, `warning`) speak status only.
+Sections separate by thin gray rows, not large gaps — Carbon spends alignment, not air.
+Sidebar sits a faint gray step off the white in both themes.
+
+## 3 Typography
+IBM Plex Sans carries UI, body, and headings — rank comes from size and weight, never a
+second face; IBM Plex Mono returns for IDs, codes, timestamps, and log lines. Register
+scope: operator headings run weight 600, and the marketing weight-300 hero display stays
+behind. Body keeps Carbon's signature +0.16px positive tracking. Eyebrows stay sentence
+case — Carbon resists the all-caps tracked eyebrow. Every numeric column renders
+`tabular-nums`; emphasis bumps weight, never size.
+
+## 4 Component Stylings
+Buttons `radius-sm` (0px, square, never pill), IBM Blue `primary` fill; secondary follows
+Carbon's charcoal treatment, `foreground` fill with `primary-foreground` text; ghost is a
+1px `primary` border, fill only on hover. Inputs take a `muted` fill and a 1px bottom
+`border`; focus swaps it for the signature 2px `ring` underline plus the full outline,
+square. Cards flat on `card` with a hairline, 0px corners, no shadow; a recommended tile
+lifts by moving to `muted`, not by elevation. Table rows dense on `border` grid, `muted`
+hover, `accent` selection, mono figures. Detail opens in the side panel. Badges square,
+hairline, status fill, never `primary`.
+
+## 5 Layout
+4px base (Carbon's grid); ramp 2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96. Side nav
+256/48px; topbar 48px; side panel 420/640px; content max 1312px; tables full-width. Dense
+globally — Carbon spends alignment, not air — stepped per archetype, never absolute overrides.
+
+## 6 Depth
+Flat — the surface ladder and hairlines carry all rank. Light: `background` → `muted`
+surface change and 1px hairlines do the work; overlays earn the one soft blue-tinted
+tier. Dark: the authored Gray 100 ladder — `background` 0.20 L, `surface-raised` +0.06,
+`surface-overlay` +0.10, hue held at 262. Focus is Carbon's 2px `primary` outline (with a
+strong underline on fields), always visible; three z-levels: content, sticky chrome, overlay.
+
+## 7 Motion
+Productive and quick. Named moments: `press` (primary action, 110ms), `panel-slide`
+(side panel, 240ms, interruptible), `tile-fade` (content arrive, 150ms). Physicality is
+granted only to auth; nothing animates in tables or any keyboard-initiated action.
+
+## 8 Iconography & Charts
+Lucide, 1.75px stroke (Carbon-weight), 16/20px grid, `muted-foreground` default. Charts:
+hairline axes, no gridline fills; the Carbon categorical ramp — blue, purple, cyan,
+magenta, gold (`chart-1..5`); tooltips on `surface-overlay` with mono numerals.
+
+## 9 Voice
+Plain and enterprise-clear — no exclamation, no marketing lift. "Create resource" · "No
+instances running in this account" · "This action can't be undone; deleting removes 3
+attached volumes."
+
+## 10 Do's & Don'ts
+Do keep every button, card, input, and container at 0px square — the flat geometry is the
+brand. Do reserve IBM Blue `primary` for the single action, links, and the focus rule.
+Do carry rank with surface change and 1px hairlines, and keep the +0.16px body tracking
+with sentence-case eyebrows. Don't round corners — even 4px breaks the Carbon look.
+Don't bold headings past weight 600 or reach for the marketing weight-300 hero. Don't
+promote a second chromatic accent or signal rank with shadow.
+
+## 11 Responsive
+375: side nav → hamburger overlay; utility meta hides; two-pane list+detail stacks; side
+panel → full sheet; density holds. 768: side nav → 48px icon rail; tables scroll overflow;
+card grid → 2-up. 1024: side nav expands; two-pane queue+detail holds; grid up to 4-up.
+1440: content caps for forms; tables and dashboards take the full width.
+
+## 12 Agent Prompt Guide
+Lead every list surface with its data table; keep it square and dense. Accent only the
+primary action — IBM Blue is scarce (links, primary CTA, focus). Keep 0px corners
+everywhere; a rounded corner reads as a different brand. IDs and timestamps in Plex Mono;
+body keeps +0.16px tracking and sentence-case eyebrows. Dark is authored — consult the
+block, never derive.
+
+```yaml design-values
+color:
+  light:
+    background: oklch(0.995 0.004 262)
+    foreground: oklch(0.21 0.006 262)
+    card: oklch(0.995 0.004 262)
+    card-foreground: oklch(0.21 0.006 262)
+    popover: oklch(0.995 0.004 262)
+    popover-foreground: oklch(0.21 0.006 262)
+    primary: oklch(0.56 0.24 262)
+    primary-foreground: oklch(0.99 0.004 262)
+    secondary: oklch(0.967 0.005 262)
+    secondary-foreground: oklch(0.25 0.007 262)
+    muted: oklch(0.967 0.005 262)
+    muted-foreground: oklch(0.44 0.008 262)
+    accent: oklch(0.965 0.016 254)
+    accent-foreground: oklch(0.45 0.20 262)
+    destructive: oklch(0.57 0.22 26)
+    destructive-foreground: oklch(0.99 0.008 26)
+    success: oklch(0.62 0.16 148)
+    warning: oklch(0.83 0.16 90)
+    border: oklch(0.907 0.005 262)
+    input: oklch(0.907 0.005 262)
+    ring: oklch(0.56 0.24 262)
+    surface-raised: oklch(0.985 0.005 262)
+    surface-overlay: oklch(0.995 0.004 262)
+    chart-1: oklch(0.56 0.24 262)
+    chart-2: oklch(0.55 0.20 300)
+    chart-3: oklch(0.60 0.12 200)
+    chart-4: oklch(0.60 0.22 350)
+    chart-5: oklch(0.70 0.13 90)
+    sidebar: oklch(0.967 0.005 262)
+    sidebar-foreground: oklch(0.21 0.006 262)
+    sidebar-primary: oklch(0.56 0.24 262)
+    sidebar-primary-foreground: oklch(0.99 0.004 262)
+    sidebar-accent: oklch(0.94 0.015 254)
+    sidebar-accent-foreground: oklch(0.40 0.18 262)
+    sidebar-border: oklch(0.907 0.005 262)
+    sidebar-ring: oklch(0.56 0.24 262)
+  dark:
+    background: oklch(0.20 0.006 262)
+    foreground: oklch(0.96 0.004 262)
+    card: oklch(0.26 0.007 262)
+    card-foreground: oklch(0.96 0.004 262)
+    popover: oklch(0.30 0.008 262)
+    popover-foreground: oklch(0.96 0.004 262)
+    primary: oklch(0.54 0.22 262)
+    primary-foreground: oklch(0.99 0.004 262)
+    secondary: oklch(0.28 0.008 262)
+    secondary-foreground: oklch(0.92 0.005 262)
+    muted: oklch(0.26 0.007 262)
+    muted-foreground: oklch(0.70 0.010 262)
+    accent: oklch(0.32 0.05 258)
+    accent-foreground: oklch(0.85 0.09 258)
+    destructive: oklch(0.64 0.20 26)
+    destructive-foreground: oklch(0.15 0.02 26)
+    success: oklch(0.68 0.15 148)
+    warning: oklch(0.80 0.15 90)
+    border: oklch(0.32 0.008 262)
+    input: oklch(0.32 0.008 262)
+    ring: oklch(0.66 0.18 258)
+    surface-raised: oklch(0.26 0.007 262)
+    surface-overlay: oklch(0.30 0.008 262)
+    chart-1: oklch(0.66 0.20 258)
+    chart-2: oklch(0.64 0.18 300)
+    chart-3: oklch(0.68 0.11 200)
+    chart-4: oklch(0.68 0.20 350)
+    chart-5: oklch(0.78 0.13 90)
+    sidebar: oklch(0.17 0.006 262)
+    sidebar-foreground: oklch(0.92 0.005 262)
+    sidebar-primary: oklch(0.54 0.22 262)
+    sidebar-primary-foreground: oklch(0.99 0.004 262)
+    sidebar-accent: oklch(0.30 0.045 258)
+    sidebar-accent-foreground: oklch(0.85 0.09 258)
+    sidebar-border: oklch(0.28 0.008 262)
+    sidebar-ring: oklch(0.66 0.18 258)
+typography:
+  display: { family: "IBM Plex Sans", fallback: "system-ui, sans-serif", weights: [600] }
+  sans: { family: "IBM Plex Sans", fallback: "system-ui, sans-serif", weights: [400, 600] }
+  mono: { family: "IBM Plex Mono", fallback: "ui-monospace, monospace", weights: [400] }
+  ramp:
+    display: { size: 42px, line: 50px, weight: 600, family: display }
+    h1: { size: 32px, line: 40px, weight: 600, family: sans }
+    h2: { size: 24px, line: 32px, weight: 600, family: sans }
+    body: { size: 16px, line: 24px, weight: 400, family: sans, tracking: 0.16px }
+    small: { size: 14px, line: 18px, weight: 400, family: sans, tracking: 0.16px }
+    caption: { size: 12px, line: 16px, weight: 400, family: sans, tracking: 0.32px }
+    data: { size: 14px, line: 20px, weight: 400, family: mono, features: [tnum] }
+  register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body, headings], mono: [data, ids, codes, timestamps] }
+elevation:
+  radius: { sm: 0px, md: 0px, lg: 0px }
+  hairline: border
+  shadow:
+    overlay: "0 8px 28px oklch(0.20 0.02 262 / 0.10)"
+    popover: "0 4px 14px oklch(0.20 0.02 262 / 0.08)"
+  dark-ladder: { background: 0.20, raised: 0.26, overlay: 0.30, hue-held: 262 }
+motion:
+  duration: { press: 110ms, fade: 150ms, panel: 240ms }
+  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.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-3 }
+layout: { base: 4px, sidebar: [256px, 48px], topbar: 48px, side-panel: [420px, 640px], content-max: 1312px }
+```

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

@@ -0,0 +1,204 @@
+---
+schema: design-md/v2
+id: intercom
+tier: brand
+segments: [customer-service, support, saas]
+keywords: [cream, warm, fin-orange, editorial, calm, restrained]
+sourced: 2026-07-12
+sources: "design-md/v1 intercom entry (2026-07-04) + 2026-07-12 re-audit of the calm editorial customer-service brand; Inter Variable (emphasis capped at weight 500) substitutes Saans, JetBrains Mono substitutes SaansMono; the 72px hero, pure-black quote strip, pill tab toggles, and 96px section rhythm stay behind; Brand Blue and the report palette survive only as chart hues; dark theme authored (public web is light only)"
+license: open
+---
+
+# intercom — a quiet publishing office after the mail run
+
+## 1 Visual Theme
+A quiet publishing office after the mail run: a warm cream desk, white cards laid on top,
+charcoal ink, and one orange wax stamp held in reserve. Light by default; the anchor
+surface is not white — it is a soft warm cream `background`, the brand's defining signal.
+Panels and cards lift onto white `card`: the depth strategy is a surface change, not a
+shadow. Flat throughout — the cream-to-white ladder, warm hairline `border`, and type
+weight carry rank. A single chromatic voltage, Fin Orange `primary`, is held in reserve
+for the one action that matters. The dark theme is the same room by lamplight, a warm
+charcoal ladder — never inverted paper. Density is calm and editorial.
+
+## 2 Color Roles
+Charcoal `foreground` on cream `background`; cards and panels lift onto white `card` — the
+white-on-cream shift is the elevation. `primary` Fin Orange is the single chromatic hue
+that carries meaning — the one primary action per surface, held in reserve. `accent` is a
+deeper cream for selection and hover — a warm-neutral shift, not color. Status hues speak
+status only; Brand Blue and the report palette survive only in charts. Sidebar sits a
+faint cream step off the canvas in both themes.
+
+## 3 Typography
+Inter (single voice — the open substitute for Saans) / JetBrains Mono (IDs, timestamps,
+log lines — substitute for SaansMono). Register scope: no hero display face — Inter
+carries headings, and the signature is restraint, with emphasis capped at weight 500;
+the brand never bolds past it. Negative tracking scales with size. Eyebrows are sentence
+case, never all-caps tracked. Every numeric column renders `tabular-nums`.
+
+## 4 Component Stylings
+Buttons `radius-md` (8px, never pill), Fin Orange `primary` fill on white; secondary
+takes warm-cream `secondary` with a hairline and a charcoal label; ghost goes `accent` on
+hover. Inputs take a white `card` fill with a hairline `input` edge and a 2px Fin Orange
+`ring`, no glow. Cards white lifting off the cream on a hairline, `radius-lg` for larger
+panels; shadow only when a true overlay floats. Table rows `muted` hover, `accent`
+selection (warm-neutral, not orange), mono numerals. Detail opens in the side panel.
+Badges pill, hairline, `muted`/status fill, sentence-case label, never `primary`.
+
+## 5 Layout
+8px base; ramp 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64. Sidebar 248/56px; topbar 56px; side
+panel 420/640px; content max 1280px; tables full-width; card interiors a calm 24px.
+Standard density, calm and editorial, stepped per archetype, never absolute overrides.
+
+## 6 Depth
+Flat, surface-change-first — the cream-to-white ladder and warm hairlines carry rank;
+Intercom resists drop shadows. Light: cards lift by turning white on the cream; overlays
+earn one faint warm-tinted tier over a scrim. Dark: the authored ladder — `background`
+0.19 L, `surface-raised` +0.04, `surface-overlay` +0.09, hue held at 60. Focus is a 2px
+Fin Orange `ring`, always visible; three z-levels: content, sticky chrome, overlay.
+
+## 7 Motion
+Calm and editorial. Named moments: `panel-slide` (side panel, 240ms, 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 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 report palette runs as encodings — Fin Orange, brand blue, green,
+pink, gold (`chart-1..5`); tooltips on `surface-overlay` with mono numerals.
+
+## 9 Voice
+Warm and human — a calm concierge, never breathless. "Start conversation" · "You're all
+caught up — no open conversations" · "This customer hasn't replied in 3 days; a nudge may
+help."
+
+## 10 Do's & Don'ts
+Do anchor on the warm cream canvas — pure white reads as ordinary SaaS; the cream is the
+brand. Do lift panels onto white `card` off the cream — the surface change is the depth.
+Do reserve Fin Orange for the single most important action. Don't use pure white as the
+canvas or add drop shadows to floating cards. Don't spread Fin Orange — no orange section
+fills, no orange on secondary actions, no second chromatic accent. Don't bold past weight
+500, pill the primary CTA, or write all-caps tracked eyebrows.
+
+## 11 Responsive
+375: sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet;
+density holds. 768: sidebar → icon rail; tables scroll overflow; card grids → 2-up. 1024:
+two-pane queue+detail holds; card grids 3-up. 1440: forms cap; tables and dashboards take
+the full width; the cream breathing widens.
+
+## 12 Agent Prompt Guide
+Reach for the warm cream canvas first — never pure white; the cream tint is Intercom. Lift
+cards by turning them white on the cream, not by casting a shadow. Accent only the primary
+action in Fin Orange; if two things want it, one is not primary. Type stays at weight 500
+for emphasis, never bold; eyebrows are sentence case. Every numeric column is mono
+`tabular-nums`. Dark is authored — consult the block, never derive.
+
+```yaml design-values
+color:
+  light:
+    background: oklch(0.96 0.008 74)
+    foreground: oklch(0.18 0.004 74)
+    card: oklch(0.995 0.003 74)
+    card-foreground: oklch(0.18 0.004 74)
+    popover: oklch(0.995 0.003 74)
+    popover-foreground: oklch(0.18 0.004 74)
+    primary: oklch(0.65 0.215 37)
+    primary-foreground: oklch(0.99 0.01 60)
+    secondary: oklch(0.93 0.009 78)
+    secondary-foreground: oklch(0.24 0.005 74)
+    muted: oklch(0.93 0.009 78)
+    muted-foreground: oklch(0.50 0.006 78)
+    accent: oklch(0.91 0.013 80)
+    accent-foreground: oklch(0.24 0.005 74)
+    destructive: oklch(0.53 0.20 28)
+    destructive-foreground: oklch(0.99 0.01 28)
+    success: oklch(0.60 0.15 150)
+    warning: oklch(0.67 0.16 58)
+    border: oklch(0.85 0.012 80)
+    input: oklch(0.85 0.012 80)
+    ring: oklch(0.65 0.215 37)
+    surface-raised: oklch(0.99 0.004 74)
+    surface-overlay: oklch(0.995 0.003 74)
+    chart-1: oklch(0.65 0.215 37)
+    chart-2: oklch(0.55 0.15 265)
+    chart-3: oklch(0.60 0.14 150)
+    chart-4: oklch(0.62 0.16 340)
+    chart-5: oklch(0.70 0.13 90)
+    sidebar: oklch(0.945 0.010 74)
+    sidebar-foreground: oklch(0.18 0.004 74)
+    sidebar-primary: oklch(0.65 0.215 37)
+    sidebar-primary-foreground: oklch(0.99 0.01 60)
+    sidebar-accent: oklch(0.91 0.013 80)
+    sidebar-accent-foreground: oklch(0.24 0.005 74)
+    sidebar-border: oklch(0.85 0.012 80)
+    sidebar-ring: oklch(0.65 0.215 37)
+  dark:
+    background: oklch(0.19 0.008 60)
+    foreground: oklch(0.95 0.006 74)
+    card: oklch(0.23 0.009 60)
+    card-foreground: oklch(0.95 0.006 74)
+    popover: oklch(0.27 0.010 60)
+    popover-foreground: oklch(0.95 0.006 74)
+    primary: oklch(0.70 0.20 41)
+    primary-foreground: oklch(0.16 0.02 41)
+    secondary: oklch(0.25 0.009 60)
+    secondary-foreground: oklch(0.90 0.007 74)
+    muted: oklch(0.24 0.009 60)
+    muted-foreground: oklch(0.71 0.010 74)
+    accent: oklch(0.28 0.011 60)
+    accent-foreground: oklch(0.92 0.006 74)
+    destructive: oklch(0.62 0.20 28)
+    destructive-foreground: oklch(0.15 0.02 28)
+    success: oklch(0.68 0.15 150)
+    warning: oklch(0.74 0.15 58)
+    border: oklch(0.30 0.011 60)
+    input: oklch(0.30 0.011 60)
+    ring: oklch(0.70 0.20 41)
+    surface-raised: oklch(0.23 0.009 60)
+    surface-overlay: oklch(0.28 0.010 60)
+    chart-1: oklch(0.72 0.19 41)
+    chart-2: oklch(0.64 0.15 265)
+    chart-3: oklch(0.68 0.14 150)
+    chart-4: oklch(0.70 0.16 340)
+    chart-5: oklch(0.78 0.13 90)
+    sidebar: oklch(0.17 0.008 60)
+    sidebar-foreground: oklch(0.90 0.007 74)
+    sidebar-primary: oklch(0.70 0.20 41)
+    sidebar-primary-foreground: oklch(0.16 0.02 41)
+    sidebar-accent: oklch(0.26 0.011 60)
+    sidebar-accent-foreground: oklch(0.92 0.006 74)
+    sidebar-border: oklch(0.26 0.011 60)
+    sidebar-ring: oklch(0.70 0.20 41)
+typography:
+  display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [500] }
+  sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 500] }
+  mono: { family: "JetBrains Mono", fallback: "ui-monospace, monospace", weights: [400] }
+  ramp:
+    display: { size: 28px, line: 34px, weight: 500, family: display, tracking: -0.02em }
+    h1: { size: 24px, line: 30px, weight: 500, family: sans, tracking: -0.015em }
+    h2: { size: 20px, line: 26px, weight: 500, 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: 13px, line: 17px, weight: 500, family: sans }
+    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] }
+elevation:
+  radius: { sm: 6px, md: 8px, lg: 12px }
+  hairline: border
+  shadow:
+    overlay: "0 8px 28px oklch(0.20 0.02 60 / 0.10)"
+    popover: "0 4px 14px oklch(0.20 0.02 60 / 0.08)"
+  dark-ladder: { background: 0.19, raised: 0.23, overlay: 0.28, hue-held: 60 }
+motion:
+  duration: { press: 120ms, fade: 160ms, panel: 240ms }
+  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-1 }
+  diverging: { negative: destructive, mid: muted, positive: chart-3 }
+layout: { base: 8px, sidebar: [248px, 56px], topbar: 56px, side-panel: [420px, 640px], content-max: 1280px }
+```

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

@@ -0,0 +1,200 @@
+---
+schema: design-md/v2
+id: kraken
+tier: brand
+segments: [fintech, crypto, trading]
+keywords: [purple, crypto, exchange, cool, rounded, trustworthy]
+sourced: 2026-07-12
+sources: "design-md/v1 kraken entry (2026-07-04) + 2026-07-12 re-audit of the public Kraken identity; proprietary Kraken-Brand/Kraken-Product faces substituted with IBM Plex Sans (the corpus's own documented fallback)"
+license: open
+---
+
+# kraken — a marble exchange lobby with one purple seal
+
+## 1 Visual Theme
+A marble-and-glass exchange lobby: white stone underfoot, cool steel fittings, and a
+single deep-purple banner hung where every visitor's eye lands. Light default; dark is
+the same lobby after close — cool charcoal holding the blue-violet cast, never flipped
+paper. Flat: hierarchy rides hairline `border`, weight, and contrast; shadows stay at
+whisper level. One accent — Kraken Purple `primary` — commands the one action that
+matters. Density is standard; geometry firmly rounded, never a pill.
+
+## 2 Color Roles
+Cool near-black `foreground` on a white `background`; the neutral field is a cool
+blue-gray ladder that reads engineered, not warm. `primary` purple is the only
+chromatic hue carrying brand meaning: the primary action, active nav, the inline brand
+link. `accent` is the light purple wash for selected rows and nav — a tint, never a
+fill. Trading direction rides `success` (up) / `destructive` (down) as text color only;
+`warning` is caution status, never chrome. `ring` focus is always the purple.
+
+## 3 Typography
+IBM Plex Sans (single sans — the documented open fallback for the proprietary
+Kraken-Brand/Kraken-Product pair) / IBM Plex Mono (the fintech number voice). Register
+scope: the heavy display cut touches auth and first-run empty states only; Plex Sans at
+600 with negative tracking carries every operator heading; Plex Mono owns prices,
+percent changes, IDs, and timestamps — every numeric column `tabular-nums`. Emphasis
+bumps weight, never size.
+
+## 4 Component Stylings
+Buttons `radius-md` (12px), `primary` fill, no pill; outlined variant takes a
+`primary` hairline with `primary` text; subtle variant is the `accent` wash. Inputs
+hairline `border` with a 2px `ring` focus, no glow. Cards flat on `card` with a
+hairline; the whisper shadow only when a card must lift. Table rows dense with
+`border` grid lines, `muted` hover, `accent` selection; direction cells color text
+with `success`/`destructive`, never fills. Detail opens in the side panel. Badges:
+hairline `border`, low-alpha status fill, uppercase caption, 6px corner.
+
+## 5 Layout
+4px base; ramp 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48. Sidebar 248/56px; topbar 56px;
+side panel 440/680px; content max 1440px; tables full-width. Clean and calm, never
+cramped — the marketing's odd 3/5/13px steps stay behind.
+
+## 6 Depth
+Flat, hairline-first. Light: cool hairlines carry all structure; two whisper tiers
+only — a micro lift for cards that must rise, a soft tier for true overlays — both
+purple-tinted, never black. Dark: the surface ladder does depth — `background` 0.15 L,
+`surface-raised` +0.05, `surface-overlay` +0.10, hue held at 286. Focus is a 2px
+purple `ring`, never a glow; three z-levels: content, sticky chrome, overlay.
+
+## 7 Motion
+Composed. Named moments: `panel-dock` (side panel, 220ms, interruptible), `row-settle`
+(list refresh fade, 140ms), `purple-press` (primary-action press, 100ms). Physicality
+is granted only to auth and first-run empty states. Nothing animates in price tables,
+order books, or any keyboard-initiated action.
+
+## 8 Iconography & Charts
+Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes,
+no gridline fills; categorical ramp runs purple-led (`chart-1..5`); up/down series
+take `chart-2`/`chart-3`; tooltips on `surface-overlay` with mono numerals.
+
+## 9 Voice
+Steady desk officer: precise verbs, figures stated without flourish, no exclamation.
+"Place order" · "No open positions — funding settles at 04:00 UTC" · "This withdrawal
+exceeds your daily limit; verify to continue."
+
+## 10 Do's & Don'ts
+Do reserve Kraken Purple for exactly one action per viewport, active nav, and inline
+brand links. Do keep controls at the 12px `radius-md` ceiling — badges step down,
+nothing pills. Do carry every figure in mono with `tabular-nums`. Don't reach for an
+off-scale purple — off-scale purples read off-brand. Don't signal elevation with heavy
+or stacked shadows. Don't let up/down hues become fills or chrome.
+
+## 11 Responsive
+375: sidebar → off-canvas drawer, side panel → full sheet, asset rows stack ticker
+over price. 768: sidebar → icon rail; tables scroll overflow. 1024: two-pane
+queue+detail holds. 1440: forms cap; tables and dashboards take the full width.
+
+## 12 Agent Prompt Guide
+Anchor on the white canvas; if two things want the purple, one is not primary. Keep
+the cool blue-gray temperature — never warm the neutrals. Every price, ID, and
+timestamp is mono; direction is text color, never a fill. Stay flat — hairline and
+surface before shadow. Dark is authored — consult the block, never derive.
+
+```yaml design-values
+color:
+  light:
+    background: oklch(0.99 0.005 286)
+    foreground: oklch(0.18 0.008 275)
+    card: oklch(0.995 0.005 286)
+    card-foreground: oklch(0.18 0.008 275)
+    popover: oklch(0.995 0.005 286)
+    popover-foreground: oklch(0.18 0.008 275)
+    primary: oklch(0.53 0.26 289)
+    primary-foreground: oklch(0.985 0.005 286)
+    secondary: oklch(0.972 0.005 286)
+    secondary-foreground: oklch(0.25 0.02 280)
+    muted: oklch(0.962 0.006 286)
+    muted-foreground: oklch(0.48 0.032 279)
+    accent: oklch(0.934 0.034 294)
+    accent-foreground: oklch(0.36 0.18 289)
+    destructive: oklch(0.55 0.196 21)
+    destructive-foreground: oklch(0.98 0.008 21)
+    success: oklch(0.55 0.13 157)
+    warning: oklch(0.68 0.155 68)
+    border: oklch(0.903 0.009 286)
+    input: oklch(0.903 0.009 286)
+    ring: oklch(0.53 0.26 289)
+    surface-raised: oklch(0.993 0.005 286)
+    surface-overlay: oklch(0.995 0.005 286)
+    chart-1: oklch(0.53 0.26 289)
+    chart-2: oklch(0.62 0.14 157)
+    chart-3: oklch(0.56 0.19 21)
+    chart-4: oklch(0.5 0.21 282)
+    chart-5: oklch(0.68 0.027 278)
+    sidebar: oklch(0.975 0.006 286)
+    sidebar-foreground: oklch(0.25 0.015 280)
+    sidebar-primary: oklch(0.53 0.26 289)
+    sidebar-primary-foreground: oklch(0.985 0.005 286)
+    sidebar-accent: oklch(0.93 0.025 292)
+    sidebar-accent-foreground: oklch(0.33 0.14 289)
+    sidebar-border: oklch(0.903 0.009 286)
+    sidebar-ring: oklch(0.53 0.26 289)
+  dark:
+    background: oklch(0.15 0.01 286)
+    foreground: oklch(0.93 0.008 286)
+    card: oklch(0.19 0.012 286)
+    card-foreground: oklch(0.93 0.008 286)
+    popover: oklch(0.25 0.014 286)
+    popover-foreground: oklch(0.93 0.008 286)
+    primary: oklch(0.58 0.24 289)
+    primary-foreground: oklch(0.985 0.005 286)
+    secondary: oklch(0.23 0.013 286)
+    secondary-foreground: oklch(0.89 0.01 286)
+    muted: oklch(0.22 0.012 286)
+    muted-foreground: oklch(0.68 0.022 280)
+    accent: oklch(0.29 0.055 289)
+    accent-foreground: oklch(0.92 0.03 293)
+    destructive: oklch(0.62 0.19 22)
+    destructive-foreground: oklch(0.14 0.02 22)
+    success: oklch(0.66 0.13 157)
+    warning: oklch(0.74 0.14 68)
+    border: oklch(0.27 0.013 286)
+    input: oklch(0.27 0.013 286)
+    ring: oklch(0.68 0.18 289)
+    surface-raised: oklch(0.2 0.012 286)
+    surface-overlay: oklch(0.25 0.014 286)
+    chart-1: oklch(0.62 0.2 289)
+    chart-2: oklch(0.7 0.13 157)
+    chart-3: oklch(0.64 0.17 21)
+    chart-4: oklch(0.58 0.18 282)
+    chart-5: oklch(0.72 0.03 278)
+    sidebar: oklch(0.13 0.01 286)
+    sidebar-foreground: oklch(0.9 0.008 286)
+    sidebar-primary: oklch(0.58 0.24 289)
+    sidebar-primary-foreground: oklch(0.985 0.005 286)
+    sidebar-accent: oklch(0.2 0.02 289)
+    sidebar-accent-foreground: oklch(0.9 0.02 292)
+    sidebar-border: oklch(0.22 0.012 286)
+    sidebar-ring: oklch(0.68 0.18 289)
+typography:
+  display: { family: "IBM Plex Sans Variable", fallback: "system-ui, sans-serif", weights: [600, 700] }
+  sans: { family: "IBM Plex Sans Variable", fallback: "system-ui, sans-serif", weights: [400, 600] }
+  mono: { family: "IBM Plex Mono", fallback: "ui-monospace, monospace", weights: [400, 500] }
+  ramp:
+    display: { size: 32px, line: 38px, weight: 700, family: display, tracking: -0.02em }
+    h1: { size: 24px, line: 30px, weight: 600, family: sans, tracking: -0.01em }
+    h2: { size: 20px, line: 26px, weight: 600, family: sans, tracking: -0.01em }
+    body: { size: 14px, line: 20px, weight: 400, family: sans }
+    small: { size: 13px, line: 18px, weight: 400, family: sans }
+    caption: { size: 12px, line: 16px, weight: 600, family: sans, tracking: 0.02em }
+    data: { size: 14px, line: 20px, weight: 500, family: mono, features: [tnum] }
+  register-scope: { display: [auth, empty-state], sans: [chrome, controls, body, headings], mono: [data, prices, ids, timestamps] }
+elevation:
+  radius: { sm: 6px, md: 12px, lg: 16px }
+  hairline: border
+  shadow:
+    overlay: "0 4px 24px oklch(0.3 0.04 286 / 0.08)"
+    popover: "0 1px 4px oklch(0.3 0.04 286 / 0.05)"
+  dark-ladder: { background: 0.15, raised: 0.2, overlay: 0.25, hue-held: 286 }
+motion:
+  duration: { press: 100ms, fade: 140ms, 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-1 }
+  diverging: { negative: chart-3, mid: muted, positive: chart-2 }
+layout: { base: 4px, sidebar: [248px, 56px], topbar: 56px, side-panel: [440px, 680px], content-max: 1440px }
+```