@nurix/etna 0.19.11 → 0.19.13

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

@@ -0,0 +1,218 @@
+---
+schema: design-md/v2
+id: posthog
+tier: brand
+segments: [analytics, dev-tools, product]
+keywords: [warm, cream, yellow, olive, friendly, flat]
+sourced: 2026-07-12
+sources: "design-md/v1 posthog entry (2026-07-04) + token twin; 2026-07-12 re-audit of posthog.com; IBM Plex Sans and Source Code Pro are the brand's own open faces"
+license: open
+---
+
+# posthog — an engineering sketchbook with one yellow highlighter
+
+## 1 Visual Theme
+An engineer's sketchbook open on a warm cream desk pad: pencil grid lines, an
+olive-ink fountain pen, white index cards taped flat to the page, and one yellow
+highlighter that marks exactly one thing per spread. Light default — the warm cream
+`background` is the signature, never plain white, with true-white-reading cards
+floating on it. Flat: hierarchy is hairline olive `border`, weight, and color,
+never shadow. One loud accent — PostHog yellow `primary` — carries the one action
+that matters, always wearing dark olive ink, never white. The whole neutral ramp is
+warm olive-gray: a friendly engineering blog, not cold gray tooling. Dark is an
+authored olive-charcoal ladder grown from the brand's dark code island.
+
+## 2 Color Roles
+Deep olive-charcoal `foreground` on the cream `background`; `card` is the white
+step that floats on it. `primary` yellow is the only saturated hue that carries a
+call to action — dark ink on the fill, one element per surface. `accent` is the
+pale-yellow selection wash. The focus `ring` is the quiet functional blue — the
+brand focuses in blue, not yellow — and blue otherwise stays a link-and-focus
+signal, never chrome. Status hues speak only status: `destructive` red, `success`
+green, `warning` a gold-amber deliberately deeper than the CTA yellow so caution
+never impersonates the accent. The pastel callout family and the hedgehogs are
+marketing decoration with no role here.
+
+## 3 Typography
+IBM Plex Sans (UI, body, headings) / Source Code Pro (data) — the brand's own open
+pair. The signature is hierarchy built from weight (400/600), never a second
+family and never size jumps; the 36px/800 hero tier stays behind. Register scope:
+the display step touches page titles and empty states only; mono owns IDs, codes,
+timestamps, and log lines, with `tabular-nums` on every numeric column. The caption
+step is the uppercase eyebrow with +0.02em tracking.
+
+## 4 Component Stylings
+Buttons `radius-md`, `primary` yellow fill with dark ink, no pill — the pill is the
+marketing nav CTA only. Secondary: greige `secondary` fill, hairline `border`.
+Inputs `card` fill, hairline `border`; focus draws the blue `ring` at 2px, no glow.
+Cards white `card` on hairline, flat — flat cards on cream is the brand. Table rows
+`muted` hover, `accent` selection, mono IDs. Detail opens in the side panel. Badges
+hairline border, uppercase caption, status fills never `primary`. Code and log
+surfaces invert to the dark olive-charcoal fill with mono text — the one dark
+moment on the light UI.
+
+## 5 Layout
+4px base with the brand's rhythm centered on the 8px step (the 80px marketing
+rhythm stays behind); sidebar 248/56px; topbar 56px; side panel 420/640px; content
+max 1320px. Density is standard — dense-capable, warm, never cramped; the cream
+sidebar sits a shade deeper than the canvas.
+
+## 6 Depth
+Flat — the brand and operator restraint agree completely. Light: cream canvas,
+white cards on hairlines, no shadow; only true overlays earn a soft olive-tinted
+lift, and the dark code surface "elevates" with color, not shadow. Dark: the
+authored ladder does depth — `background` 0.19 L, `surface-raised` +0.04,
+`surface-overlay` +0.09, hue held at 119. Focus is the 2px blue `ring`; three
+z-levels.
+
+## 7 Motion
+Friendly but working: motion warms transitions without ever delaying data. Named
+moments: `highlight-press` (primary-action press, 120ms), `card-fade` (page
+content arrival, 160ms), `panel-slide` (side panel, 220ms, interruptible).
+Physicality is granted to auth and the first-run empty state — the one place the
+brand's playfulness may surface. Tables, charts, and keyboard actions never
+animate.
+
+## 8 Iconography & Charts
+Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default; no mascots, no
+hand-drawn ornament. Charts: hairline axes on the cream, no gridline fills;
+categorical ramp leads blue then yellow, green, red, purple (`chart-1..5`) — the
+insight palette, kept off chrome; tooltips on `surface-overlay` with mono numerals;
+`warning` gold stays deeper than the CTA yellow even in charts.
+
+## 9 Voice
+A helpful engineer who writes docs for fun: plain verbs, concrete numbers, dry
+warmth without exclamation. "Create insight" · "No events yet — install the
+snippet and refresh" · "Query timed out at 30s; narrow the date range or sample
+the events."
+
+## 10 Do's & Don'ts
+Do keep the cream canvas — never flatten it to plain white; the warmth is the
+identity once the mascots are gone. Do reserve yellow for the single most
+important action, always with dark ink. Do render code and log surfaces on the
+dark olive fill. Don't pill operator buttons. Don't promote blue past links and
+focus. Don't bring the 800-weight hero tier or pastel callout bands into chrome.
+Don't shadow cards.
+
+## 11 Responsive
+375: sidebar → off-canvas drawer; two-pane stacks; side panel → full sheet;
+density holds. 768: sidebar collapses to the icon rail; tables scroll their
+overflow. 1024: two-pane queue+detail holds. 1440: forms cap; tables and
+dashboards use the full width under the 1320px cap.
+
+## 12 Agent Prompt Guide
+The cream is the app canvas; white cards float on it. Spend the yellow once per
+surface, always with dark ink — if two things want it, one is not primary. Build
+hierarchy from weight 400/600 on Plex Sans; every numeric column is tabular mono.
+Blue is links and focus only; one loud color. Stay flat — the dark code surface is
+the only "elevated" thing and it lifts with color. Dark is authored — consult the
+block, never derive.
+
+```yaml design-values
+color:
+  light:
+    background: oklch(0.95 0.008 114)
+    foreground: oklch(0.26 0.015 119)
+    card: oklch(0.99 0.005 114)
+    card-foreground: oklch(0.26 0.015 119)
+    popover: oklch(0.995 0.005 114)
+    popover-foreground: oklch(0.26 0.015 119)
+    primary: oklch(0.783 0.166 73.5)
+    primary-foreground: oklch(0.26 0.015 119)
+    secondary: oklch(0.924 0.010 119)
+    secondary-foreground: oklch(0.30 0.015 119)
+    muted: oklch(0.924 0.010 119)
+    muted-foreground: oklch(0.45 0.015 115)
+    accent: oklch(0.944 0.040 90)
+    accent-foreground: oklch(0.28 0.015 119)
+    destructive: oklch(0.55 0.180 28)
+    destructive-foreground: oklch(0.98 0.010 28)
+    success: oklch(0.574 0.107 163)
+    warning: oklch(0.617 0.124 74)
+    border: oklch(0.806 0.014 116)
+    input: oklch(0.806 0.014 116)
+    ring: oklch(0.609 0.162 253)
+    surface-raised: oklch(0.99 0.005 114)
+    surface-overlay: oklch(0.995 0.005 114)
+    chart-1: oklch(0.609 0.162 253)
+    chart-2: oklch(0.783 0.166 73.5)
+    chart-3: oklch(0.574 0.107 163)
+    chart-4: oklch(0.55 0.180 28)
+    chart-5: oklch(0.55 0.180 300)
+    sidebar: oklch(0.93 0.010 114)
+    sidebar-foreground: oklch(0.28 0.015 119)
+    sidebar-primary: oklch(0.783 0.166 73.5)
+    sidebar-primary-foreground: oklch(0.26 0.015 119)
+    sidebar-accent: oklch(0.885 0.012 114)
+    sidebar-accent-foreground: oklch(0.26 0.015 119)
+    sidebar-border: oklch(0.83 0.012 114)
+    sidebar-ring: oklch(0.609 0.162 253)
+  dark:
+    background: oklch(0.19 0.010 119)
+    foreground: oklch(0.93 0.010 105)
+    card: oklch(0.23 0.012 119)
+    card-foreground: oklch(0.93 0.010 105)
+    popover: oklch(0.28 0.012 119)
+    popover-foreground: oklch(0.93 0.010 105)
+    primary: oklch(0.783 0.166 73.5)
+    primary-foreground: oklch(0.22 0.020 119)
+    secondary: oklch(0.26 0.012 119)
+    secondary-foreground: oklch(0.90 0.010 105)
+    muted: oklch(0.25 0.012 119)
+    muted-foreground: oklch(0.72 0.012 115)
+    accent: oklch(0.32 0.045 95)
+    accent-foreground: oklch(0.95 0.020 95)
+    destructive: oklch(0.64 0.170 28)
+    destructive-foreground: oklch(0.13 0.020 28)
+    success: oklch(0.68 0.120 163)
+    warning: oklch(0.72 0.130 74)
+    border: oklch(0.30 0.012 119)
+    input: oklch(0.30 0.012 119)
+    ring: oklch(0.68 0.150 253)
+    surface-raised: oklch(0.23 0.012 119)
+    surface-overlay: oklch(0.28 0.012 119)
+    chart-1: oklch(0.68 0.150 253)
+    chart-2: oklch(0.80 0.160 78)
+    chart-3: oklch(0.68 0.120 163)
+    chart-4: oklch(0.64 0.170 28)
+    chart-5: oklch(0.65 0.170 300)
+    sidebar: oklch(0.17 0.010 119)
+    sidebar-foreground: oklch(0.90 0.010 105)
+    sidebar-primary: oklch(0.783 0.166 73.5)
+    sidebar-primary-foreground: oklch(0.22 0.020 119)
+    sidebar-accent: oklch(0.24 0.012 119)
+    sidebar-accent-foreground: oklch(0.93 0.010 105)
+    sidebar-border: oklch(0.27 0.012 119)
+    sidebar-ring: oklch(0.68 0.150 253)
+typography:
+  display: { family: "IBM Plex Sans Variable", fallback: "system-ui, sans-serif", weights: [600] }
+  sans: { family: "IBM Plex Sans Variable", fallback: "system-ui, sans-serif", weights: [400, 600] }
+  mono: { family: "Source Code Pro Variable", fallback: "ui-monospace, monospace", weights: [400] }
+  ramp:
+    display: { size: 28px, line: 36px, weight: 600, family: display, tracking: -0.01em }
+    h1: { size: 24px, line: 31px, weight: 600, family: sans }
+    h2: { size: 20px, line: 28px, weight: 600, family: sans }
+    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, transform: uppercase }
+    data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
+  register-scope: { display: [page-title, empty-state], sans: [chrome, controls, body, headings], mono: [data, ids, timestamps, code, logs] }
+elevation:
+  radius: { sm: 4px, md: 6px, lg: 8px }
+  hairline: border
+  shadow:
+    overlay: "0 8px 24px oklch(0.26 0.020 119 / 0.12)"
+    popover: "0 4px 12px oklch(0.26 0.020 119 / 0.09)"
+  dark-ladder: { background: 0.19, raised: 0.23, overlay: 0.28, hue-held: 119 }
+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-1 }
+  diverging: { negative: destructive, mid: muted, positive: success }
+layout: { base: 4px, sidebar: [248px, 56px], topbar: 56px, side-panel: [420px, 640px], content-max: 1320px }
+```

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

@@ -0,0 +1,214 @@
+---
+schema: design-md/v2
+id: raycast
+tier: brand
+segments: [dev-tools, productivity]
+keywords: [dark, monochrome, command-palette, dense, keyboard, shadowless]
+sourced: 2026-07-12
+sources: "design-md/v1 raycast entry (2026-07-04) + token twin; 2026-07-12 re-audit of raycast.com; Inter with ss03 is the brand's own face — the light theme is an authored daytime floor (the source ships none)"
+license: open
+---
+
+# raycast — a backlit keyboard in a dark studio
+
+## 1 Visual Theme
+A darkened studio at 2 a.m.: black glass desk, a single backlit keyboard, and one
+key glowing white — press it and the palette opens. Dark by default and dark by
+conviction; the light theme is an authored daytime floor, not the brand. Flat and
+shadowless: hierarchy is a four-step surface ladder (`background` → `card` →
+`muted` → overlay), never a drop shadow — the brand has none at all. Chrome is
+monochrome: white is the single action color; every primary is a white rounded
+rect on near-black. The four saturated hues speak status and category only, never
+chrome. Dense — command-palette chrome runs tight, and operator surfaces inherit
+it.
+
+## 2 Color Roles
+Off-white `foreground` on the near-black `background`; `card` one notch up,
+`muted`/`secondary` the elevated notch for inputs and active chips, `accent` the
+surface lift for selection — a lift, not a hue. `primary` is white — the one
+action, the brightest pixel, black text on it — and the `ring` is the same white,
+unmistakable and keyboard-first. The four saturated hues hold strict lanes:
+`destructive` red, `success` green, `warning` yellow, and blue leading the chart
+ramp; none of them ever becomes a button. Neutrals hold a whisper of cool tint at
+the perceptual floor. In the daytime floor the action inverts to near-black on
+porcelain — the same highest-contrast invariant.
+
+## 3 Typography
+Inter with `ss03` (plus `calt`/`kern`/`liga`) enabled globally — the alternate `g`
+is the brand's signature; without it the type reads as plain Inter and loses the
+voice. JetBrains Mono for IDs, codes, timestamps, and logs. Letter spacing is
+*positive* — Raycast opens type rather than tightening it; headings track +0.01em,
+the rare operator system that does. Register scope: display touches page titles
+and empty states; mono owns data with `tabular-nums`. Emphasis bumps weight one
+step, never size; hero display stays behind.
+
+## 4 Component Stylings
+Buttons `radius-md`, white `primary` fill with black text, a rounded rect — never
+a 9999 pill. Secondary: transparent with `foreground`; tertiary: elevated
+`secondary` fill. Inputs elevated `secondary` fill on hairline `border`; focus
+*brightens the border* to the white `ring`, never a glow. Cards `card` on
+hairline; the ladder carries lift. Table rows `muted` hover, `accent` selection
+lift. Keycap — the signature primitive: keyboard-shortcut hints render as small
+keycap glyphs (surface fill, tight radius); carry them onto every shortcut
+affordance. Badges status fills only; info renders blue on a translucent tint.
+
+## 5 Layout
+8px base with 2/4/12px tight steps (the 96px marketing rhythm stays behind);
+sidebar 248/56px; topbar 56px (the brand's own nav height); side panel 420/640px;
+content max 1280px. Density is dense globally; cards pad 16–24px, never 32+.
+
+## 6 Depth
+Shadowless — the defining trait. Depth is the authored ladder in both themes: dark
+`background` 0.14 L, `card`/`surface-raised` +0.04, `muted` elevated +0.07,
+`surface-overlay` +0.09, hue held at 260; overlays separate by the lift plus a
+hairline, and the "shadow" tokens are hairline rings, not blurs. Focus is the
+white `ring` outline, always visible. Three z-levels: content, chrome, overlay.
+
+## 7 Motion
+The fastest package in the library — a launcher must feel pre-rendered. Named
+moments: `palette-pop` (overlay arrival, 120ms, scale 0.98→1), `key-press`
+(action press, 80ms), `panel-slide` (side panel, 180ms, interruptible).
+Physicality is granted to auth only. Every keyboard-initiated action lands the
+next frame; lists never stagger; hover is instant.
+
+## 8 Iconography & Charts
+Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default; keycap glyphs
+accompany shortcuts everywhere. Charts: hairline axes, no gridline fills;
+categorical ramp runs the four category hues then a neutral (`chart-1..5` — blue,
+green, yellow, red, gray); tooltips on `surface-overlay` with mono numerals; no
+hue ever leaves the chart for chrome.
+
+## 9 Voice
+Launcher-brief: verbs first, objects second, everything skimmable at palette
+speed. "Run command" · "No results — press ⌘K to search all extensions" ·
+"Extension failed to load: manifest version 2 required."
+
+## 10 Do's & Don'ts
+Do keep the canvas near-black and build every elevation from the ladder. Do keep
+chrome monochrome — white is the one action; if two things want white, one is not
+primary. Do enable ss03 globally. Do render shortcut hints as keycaps. Don't add
+a drop shadow — ever. Don't promote a category hue to a button. Don't full-round
+the CTA. Don't pad cards past 24px. Don't reach for the marketing gradient or
+hero display.
+
+## 11 Responsive
+375: sidebar → off-canvas drawer; two-pane stacks; side panel → full sheet; the
+near-black canvas holds. 768: sidebar collapses to the icon rail; tables scroll
+their overflow. 1024: two-pane list+detail holds. 1440: forms cap; tables and
+dashboards use the full width under the 1280px cap.
+
+## 12 Agent Prompt Guide
+Default the shell to dark — the brand is categorically dark; the light block is
+the daytime floor, authored, not derived. Depth is the surface ladder; never
+shadow. White is the action — spend it once. Enable Inter ss03 with calt/kern/
+liga; track headings positive. Keycaps on every shortcut affordance; tabular mono
+on every numeric column. The four saturated hues are status and charts only.
+
+```yaml design-values
+color:
+  light:
+    background: oklch(0.975 0.005 260)
+    foreground: oklch(0.16 0.008 260)
+    card: oklch(0.99 0.005 260)
+    card-foreground: oklch(0.16 0.008 260)
+    popover: oklch(0.995 0.005 260)
+    popover-foreground: oklch(0.16 0.008 260)
+    primary: oklch(0.16 0.008 260)
+    primary-foreground: oklch(0.975 0.005 260)
+    secondary: oklch(0.945 0.006 260)
+    secondary-foreground: oklch(0.22 0.008 260)
+    muted: oklch(0.945 0.006 260)
+    muted-foreground: oklch(0.45 0.008 260)
+    accent: oklch(0.925 0.007 260)
+    accent-foreground: oklch(0.16 0.008 260)
+    destructive: oklch(0.55 0.200 23.5)
+    destructive-foreground: oklch(0.98 0.010 23.5)
+    success: oklch(0.55 0.130 160)
+    warning: oklch(0.62 0.140 85)
+    border: oklch(0.895 0.006 260)
+    input: oklch(0.895 0.006 260)
+    ring: oklch(0.16 0.008 260)
+    surface-raised: oklch(0.99 0.005 260)
+    surface-overlay: oklch(0.995 0.005 260)
+    chart-1: oklch(0.55 0.140 238)
+    chart-2: oklch(0.55 0.130 160)
+    chart-3: oklch(0.62 0.140 85)
+    chart-4: oklch(0.55 0.200 23.5)
+    chart-5: oklch(0.50 0.008 260)
+    sidebar: oklch(0.955 0.006 260)
+    sidebar-foreground: oklch(0.22 0.008 260)
+    sidebar-primary: oklch(0.16 0.008 260)
+    sidebar-primary-foreground: oklch(0.975 0.005 260)
+    sidebar-accent: oklch(0.91 0.007 260)
+    sidebar-accent-foreground: oklch(0.16 0.008 260)
+    sidebar-border: oklch(0.88 0.006 260)
+    sidebar-ring: oklch(0.16 0.008 260)
+  dark:
+    background: oklch(0.14 0.006 260)
+    foreground: oklch(0.96 0.005 260)
+    card: oklch(0.18 0.006 260)
+    card-foreground: oklch(0.96 0.005 260)
+    popover: oklch(0.23 0.007 260)
+    popover-foreground: oklch(0.96 0.005 260)
+    primary: oklch(0.985 0.005 260)
+    primary-foreground: oklch(0.13 0.006 260)
+    secondary: oklch(0.21 0.007 260)
+    secondary-foreground: oklch(0.90 0.005 260)
+    muted: oklch(0.21 0.007 260)
+    muted-foreground: oklch(0.72 0.005 260)
+    accent: oklch(0.23 0.007 260)
+    accent-foreground: oklch(0.96 0.005 260)
+    destructive: oklch(0.698 0.193 23.5)
+    destructive-foreground: oklch(0.13 0.030 23.5)
+    success: oklch(0.785 0.140 160)
+    warning: oklch(0.853 0.162 85)
+    border: oklch(0.27 0.007 260)
+    input: oklch(0.27 0.007 260)
+    ring: oklch(0.985 0.005 260)
+    surface-raised: oklch(0.18 0.006 260)
+    surface-overlay: oklch(0.23 0.007 260)
+    chart-1: oklch(0.774 0.132 238)
+    chart-2: oklch(0.785 0.140 160)
+    chart-3: oklch(0.853 0.162 85)
+    chart-4: oklch(0.698 0.193 23.5)
+    chart-5: oklch(0.70 0.005 260)
+    sidebar: oklch(0.12 0.006 260)
+    sidebar-foreground: oklch(0.90 0.005 260)
+    sidebar-primary: oklch(0.985 0.005 260)
+    sidebar-primary-foreground: oklch(0.13 0.006 260)
+    sidebar-accent: oklch(0.19 0.007 260)
+    sidebar-accent-foreground: oklch(0.95 0.005 260)
+    sidebar-border: oklch(0.24 0.007 260)
+    sidebar-ring: oklch(0.985 0.005 260)
+typography:
+  display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [600], features: [ss03, calt, liga] }
+  sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 600], features: [ss03, calt, liga] }
+  mono: { family: "JetBrains Mono Variable", fallback: "ui-monospace, monospace", weights: [400] }
+  ramp:
+    display: { size: 28px, line: 34px, weight: 600, family: display, tracking: 0.01em }
+    h1: { size: 24px, line: 31px, weight: 600, family: sans, tracking: 0.01em }
+    h2: { size: 20px, line: 28px, weight: 600, 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: 18px, weight: 600, family: sans, tracking: 0.03em, transform: uppercase }
+    data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
+  register-scope: { display: [page-title, empty-state], sans: [chrome, controls, body, headings], mono: [data, ids, timestamps, logs] }
+elevation:
+  radius: { sm: 6px, md: 8px, lg: 10px }
+  hairline: border
+  shadow:
+    overlay: "0 0 0 1px oklch(0.27 0.007 260 / 0.90)"
+    popover: "0 0 0 1px oklch(0.27 0.007 260 / 0.70)"
+  dark-ladder: { background: 0.14, raised: 0.18, overlay: 0.23, hue-held: 260 }
+motion:
+  duration: { press: 80ms, fade: 120ms, panel: 180ms }
+  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: destructive, mid: muted, positive: success }
+layout: { base: 8px, sidebar: [248px, 56px], topbar: 56px, side-panel: [420px, 640px], content-max: 1280px }
+```

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

@@ -0,0 +1,202 @@
+---
+schema: design-md/v2
+id: replicate
+tier: brand
+segments: [ai, dev-tools, ml-platform]
+keywords: [warm, cream, orange, stamp, cool-focus, zine]
+sourced: 2026-07-12
+sources: "design-md/v1 replicate entry (2026-07-04); 2026-07-12 re-audit of Replicate public brand; Geist substitutes the square sans, JetBrains Mono for code; the hot orange primary is deepened one step so its white label clears body contrast at operator scale; the focus ring is a deliberate cool blue, distinct from the orange CTA"
+license: open
+---
+
+# replicate — an ML lab notebook on cream, one orange stamp, cool-blue focus
+
+## 1 Visual Theme
+An ML lab notebook crossed with a print zine: a warm cream working canvas — never pure
+white — warm ink, white data cards floating on it, and one hot orange used like a
+stamp, at most one orange element per view. Light by default; elevation is a surface
+swap (bone → cream → white), never a heavy drop. The focus outline is a deliberate cool
+blue so keyboard focus never reads as the orange CTA. The dark theme is the same warmth
+after dark, a cream-toned ladder. The hero grotesque and full-bleed orange bands stay
+behind.
+
+## 2 Color Roles
+Warm ink `foreground` on a cream `background`; white appears only in `card`, `popover`,
+and overlays. `primary` orange is the one chromatic accent — the primary action, active
+nav, and inline links, treated as a stamp. The focus `ring` is a cool blue, held
+distinct from the orange on purpose. `accent` is a pale-peach selection lift; the hero
+glow and orange bands survive nowhere here; status hues speak only status.
+
+## 3 Typography
+Geist (the open substitute for the square marketing sans) over JetBrains Mono for
+IDs, model slugs, codes, and log lines. UI, body, and heads all ride the sans; weight
+and tight tracking, not a second family, carry emphasis — body holds at 400, emphasis
+is weight-to-600 or a switch to mono. Register scope: the display register speaks in
+page titles, section heads, empty states, and auth; mono owns data, slugs, codes, IDs,
+and timestamps. Numerals are always `tabular-nums`.
+
+## 4 Component Stylings
+Buttons `radius-md` (10px, soft-cornered, never pill), orange `primary` fill with a
+white label; secondary is bone `secondary` on a hairline. Inputs sit on white `card`
+with a hairline; focus draws the cool-blue `ring` at 2px, no glow. Cards are white
+`card` on the cream canvas at `radius-lg`, hairline-edged, shadowed only under a true
+overlay. Table rows carry `border` grid lines, `muted` hover, peach `accent` selection.
+Detail opens in the side panel; badges alone pill. Code and log wells invert to an
+ink-dark fill in mono — the one place dark blocking appears in chrome.
+
+## 5 Layout
+4px base; sidebar 256/56px; topbar 60px (the brand's nav rhythm); side panel 440/640px;
+content max 1320px. Rows ride a touch-comfortable 44px — editorial warmth wants a little
+air, operator restraint keeps it from sprawling.
+
+## 6 Depth
+Light: the warm surface ladder (bone → cream → white) and hairlines carry all rank; a
+soft warm-tinted lift appears only under a true overlay. Dark: the surface ladder does
+depth — `background` 0.19 L, `surface-raised` +0.05, `surface-overlay` +0.10, hue held
+at 80. Focus is always the 2px cool-blue `ring`, kept apart from the orange, keyboard-
+first.
+
+## 7 Motion
+Reserved and brief. Named moments: `panel-slide` (side panel, 240ms, interruptible),
+`fade-arrive` (page content, 160ms), `stamp-press` (primary-action press, 120ms).
+Physicality is granted only to auth and first-run empty states; nothing animates in
+tables, log streams, or keyboard-initiated actions.
+
+## 8 Iconography & Charts
+Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes,
+no gridline fills; the categorical ramp runs orange, teal, blue, gold, green
+(`chart-1..5`); tooltips on `surface-overlay` with mono numerals.
+
+## 9 Voice
+Plain and technical, a lab-notebook register: short declaratives, numbers flat, no
+cheer. "New prediction" · "No runs yet — push a model or pick one from the catalog" ·
+"This model cold-started; the first prediction may take 30 seconds."
+
+## 10 Do's & Don'ts
+Do keep the cream `background` as the page canvas — white is for cards, inputs, and
+overlays only. Do reserve orange for the primary action, active nav, and inline links,
+one stamp per view. Do keep the focus ring cool blue, apart from the orange. Don't
+replace cream with pure white at the page level. Don't pill the CTA — pills stay on
+badges. Don't promote a second chromatic accent or reach for the hero grotesque.
+
+## 11 Responsive
+375: sidebar → off-canvas drawer; side panel → full sheet; tables → card rows with
+mono figures. 768: sidebar collapses to the icon rail; tables scroll their overflow.
+1024: two-pane queue+detail holds. 1440: forms cap; tables and dashboards use the full
+width. Code and log wells scroll horizontally, never wrap.
+
+## 12 Agent Prompt Guide
+Set every page on the cream `background`; float white `card` surfaces on it — never
+pure white at page level. Spend orange once per surface across its three roles; if two
+things want it, one is not primary. Keep focus a cool blue, apart from the CTA. Every
+numeric column is `tabular-nums`; every ID, slug, code, and timestamp is mono. Dark is
+authored — consult the block, never derive.
+
+```yaml design-values
+color:
+  light:
+    background: oklch(0.977 0.006 85)
+    foreground: oklch(0.25 0.008 80)
+    card: oklch(0.998 0.002 85)
+    card-foreground: oklch(0.25 0.008 80)
+    popover: oklch(0.998 0.002 85)
+    popover-foreground: oklch(0.25 0.008 80)
+    primary: oklch(0.56 0.225 32)
+    primary-foreground: oklch(0.99 0.006 40)
+    secondary: oklch(0.955 0.011 88)
+    secondary-foreground: oklch(0.3 0.008 80)
+    muted: oklch(0.955 0.011 88)
+    muted-foreground: oklch(0.46 0.008 80)
+    accent: oklch(0.947 0.021 39)
+    accent-foreground: oklch(0.25 0.008 80)
+    destructive: oklch(0.501 0.178 29)
+    destructive-foreground: oklch(0.98 0.01 29)
+    success: oklch(0.611 0.127 158)
+    warning: oklch(0.626 0.125 70)
+    border: oklch(0.898 0.005 78)
+    input: oklch(0.898 0.005 78)
+    ring: oklch(0.623 0.188 260)
+    surface-raised: oklch(0.99 0.003 85)
+    surface-overlay: oklch(0.998 0.002 85)
+    chart-1: oklch(0.6 0.2 32)
+    chart-2: oklch(0.62 0.11 190)
+    chart-3: oklch(0.6 0.14 250)
+    chart-4: oklch(0.7 0.13 75)
+    chart-5: oklch(0.6 0.12 155)
+    sidebar: oklch(0.955 0.012 88)
+    sidebar-foreground: oklch(0.3 0.008 80)
+    sidebar-primary: oklch(0.56 0.225 32)
+    sidebar-primary-foreground: oklch(0.99 0.006 40)
+    sidebar-accent: oklch(0.92 0.025 39)
+    sidebar-accent-foreground: oklch(0.3 0.008 80)
+    sidebar-border: oklch(0.9 0.008 85)
+    sidebar-ring: oklch(0.623 0.188 260)
+  dark:
+    background: oklch(0.19 0.006 80)
+    foreground: oklch(0.93 0.006 85)
+    card: oklch(0.23 0.007 80)
+    card-foreground: oklch(0.93 0.006 85)
+    popover: oklch(0.27 0.008 80)
+    popover-foreground: oklch(0.93 0.006 85)
+    primary: oklch(0.56 0.225 33)
+    primary-foreground: oklch(0.99 0.006 40)
+    secondary: oklch(0.25 0.008 80)
+    secondary-foreground: oklch(0.9 0.006 85)
+    muted: oklch(0.24 0.008 80)
+    muted-foreground: oklch(0.71 0.01 82)
+    accent: oklch(0.3 0.03 40)
+    accent-foreground: oklch(0.93 0.01 60)
+    destructive: oklch(0.62 0.18 29)
+    destructive-foreground: oklch(0.15 0.02 29)
+    success: oklch(0.68 0.13 158)
+    warning: oklch(0.72 0.13 75)
+    border: oklch(0.28 0.008 80)
+    input: oklch(0.28 0.008 80)
+    ring: oklch(0.65 0.18 260)
+    surface-raised: oklch(0.24 0.007 80)
+    surface-overlay: oklch(0.29 0.008 80)
+    chart-1: oklch(0.65 0.2 32)
+    chart-2: oklch(0.7 0.11 190)
+    chart-3: oklch(0.68 0.14 250)
+    chart-4: oklch(0.78 0.13 75)
+    chart-5: oklch(0.68 0.12 155)
+    sidebar: oklch(0.17 0.006 80)
+    sidebar-foreground: oklch(0.9 0.006 85)
+    sidebar-primary: oklch(0.56 0.225 33)
+    sidebar-primary-foreground: oklch(0.99 0.006 40)
+    sidebar-accent: oklch(0.25 0.012 50)
+    sidebar-accent-foreground: oklch(0.92 0.006 85)
+    sidebar-border: oklch(0.23 0.008 80)
+    sidebar-ring: oklch(0.65 0.18 260)
+typography:
+  display: { family: "Geist Variable", fallback: "system-ui, sans-serif", weights: [500, 600] }
+  sans: { family: "Geist Variable", fallback: "system-ui, sans-serif", weights: [400, 500, 600] }
+  mono: { family: "JetBrains Mono Variable", fallback: "ui-monospace, monospace", weights: [400] }
+  ramp:
+    display: { size: 30px, line: 38px, weight: 600, family: display, tracking: -0.02em }
+    h1: { size: 24px, line: 31px, weight: 600, family: display, tracking: -0.015em }
+    h2: { size: 20px, line: 28px, weight: 600, family: display, 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.06em, transform: uppercase }
+    data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
+  register-scope: { display: [page-title, section-head, empty-state, auth], sans: [chrome, controls, body], mono: [data, slugs, codes, ids, timestamps] }
+elevation:
+  radius: { sm: 8px, md: 10px, lg: 14px }
+  hairline: border
+  shadow:
+    overlay: "0 8px 30px oklch(0.25 0.02 60 / 0.14)"
+    popover: "0 4px 16px oklch(0.25 0.02 60 / 0.1)"
+  dark-ladder: { background: 0.19, raised: 0.24, overlay: 0.29, hue-held: 80 }
+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-5 }
+layout: { base: 4px, sidebar: [256px, 56px], topbar: 60px, side-panel: [440px, 640px], content-max: 1320px }
+```