@nurix/etna 0.19.50 → 0.19.52

package/data/harnesses/apollo/skills/design/design-md/library/ollama.md

@@ -1,213 +0,0 @@
----
-schema: design-md/v2
-id: ollama
-tier: brand
-segments: [dev-tools, ai-infra]
-keywords: [monochrome, minimal, rounded, white, flat, readme]
-sourced: 2026-07-12
-sources: "design-md/v1 ollama entry (2026-07-04) + token twin; 2026-07-12 re-audit of ollama.com; Nunito substitutes the proprietary SF Pro Rounded (the v1 corpus's named substitute)"
-license: open
----
-
-# ollama — a README on an empty pine desk
-
-## 1 Visual Theme
-A README printed on bright paper and stapled at the corner, lying on an otherwise
-empty pine desk; one line circled in black ink, a `curl` command in the margin.
-Light default; aggressively flat — hierarchy is hairline `border`, type weight, and
-pure-contrast ink, never shadow (the brand has no drop-shadow language at all). The
-system is monochrome: `primary` is the ink itself, the only hue that carries
-interactive meaning; the single non-neutral note is the functional blue focus
-`ring`, a deliberate exception, not a second accent. The type voice is rounded and
-approachable, the radius soft, the rhythm airy — whitespace is the brand's whole
-layout. Dark is an authored terminal-at-night ladder, not inverted paper.
-
-## 2 Color Roles
-Ink `foreground` on the white `background`, one continuous sheet — `card` sits level
-with the canvas, separated by hairline alone. `primary` is the ink action: one black
-(light) or paper-bright (dark) button per surface. `accent` is the pale selection
-step past `muted`, so selection reads distinct from hover. The blue `ring` is focus
-only — never a fill, never a link color that competes. Status hues speak only
-status: `destructive` red, `success` green, `warning` amber. The neutral ramp holds
-a barely-cool paper tint at the perceptual floor so it never turns pure gray. The
-`sidebar` is the faint off-white rail beside the sheet.
-
-## 3 Typography
-Nunito (display and UI — the open rounded face standing in for SF Pro Rounded; it is
-the one thing that makes the surface read as Ollama) / JetBrains Mono (data, IDs,
-install snippets). Headings and body share the rounded sans; tracking 0 on every
-step — the rounded face needs no tightening. Register scope: the display step
-touches page titles and empty states; mono owns every ID, code, timestamp, and log
-line, with `tabular-nums` on numeric columns. Emphasis bumps weight one step, never
-size.
-
-## 4 Component Stylings
-Buttons `radius-md`, ink `primary` fill on paper text, soft-cornered — never the
-marketing full pill (pills stay on chips and one singular hero action). Secondary:
-`secondary` fill, hairline `border`. Inputs `background` fill, hairline `border`;
-focus draws the blue `ring` at 2px, no glow. Cards `card` on hairline, flat on the
-canvas. Table rows `muted` hover, `accent` selection, mono IDs. Detail opens in the
-side panel beside the work. Badges may keep the full pill — a monochrome nod —
-status fills only.
-
-## 5 Layout
-4px base with the brand's 88px signature rhythm reserved for major section breaks;
-sidebar 248/56px; topbar 56px; side panel 420/640px; content max 1200px — a reading
-measure, not a cockpit. Density is spacious globally and steps denser only per
-archetype; generous air between groups is the identity.
-
-## 6 Depth
-Flat. Hierarchy comes from hairlines, weight, and one inverted device — never
-shadow. Light: `card` sits level with the sheet; only true overlays earn a whisper
-of ink-tinted shadow. The dark spotlight surface (the brand's single "look here"
-device) is earned once per view, never twice. Dark: the authored ladder does depth —
-`background` 0.17 L, `surface-raised` +0.05, `surface-overlay` +0.09, hue held at
-260. Focus is the 2px blue `ring` outline; three z-levels.
-
-## 7 Motion
-Gentle and unhurried, like the brand's voice. Named moments: `ink-press`
-(primary-action press, 120ms), `sheet-fade` (page content arrival, 180ms),
-`panel-slide` (side panel, 240ms, interruptible). Physicality is granted to auth and
-the first-run empty state only. Lists, tables, and keyboard-driven actions never
-animate; hover is instant.
-
-## 8 Iconography & Charts
-Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default — line icons only,
-matching the rounded, friendly weight. Charts: hairline axes, no gridline fills; the
-categorical ramp is monochrome-first — ink, the functional blue, a mid gray, then
-the two status-adjacent hues (`chart-1..5`); tooltips on `surface-overlay` with mono
-numerals. If a series wants color, it is either status or nothing.
-
-## 9 Voice
-Plainspoken and helpful, like a good README: short sentences, no exclamation, the
-command shown rather than described. "Pull model" · "No models yet — run `ollama
-pull llama3` to get started" · "Download failed: manifest not found for tag 8b-q4."
-
-## 10 Do's & Don'ts
-Do stay monochrome — ink is the accent; one ink action per surface. Do keep the
-rounded sans voice; it is the brand's only personality. Do keep whitespace generous.
-Don't introduce a second chromatic accent, a gradient, or an atmospheric background.
-Don't full-pill working buttons. Don't lift cards with shadow — hairline or the one
-dark spotlight surface. Don't swap in a display face.
-
-## 11 Responsive
-375: sidebar → off-canvas drawer; two-pane stacks; side panel → full sheet; section
-air tightens. 768: sidebar collapses to the icon rail; tables scroll their overflow.
-1024: two-pane queue+detail holds. 1440: forms cap; reading surfaces center under
-the 1200px measure.
-
-## 12 Agent Prompt Guide
-Lead every list surface with its table; lead every entity with its primary read.
-Ink is the accent — if two things want ink, one is not primary. Flat before shadow;
-spend the dark spotlight surface once per view. Keep the rounded sans; keep the blue
-ring visible. Every numeric column is tabular mono. Dark is authored — consult the
-block, never derive.
-
-```yaml design-values
-color:
-  light:
-    background: oklch(0.99 0.005 260)
-    foreground: oklch(0.13 0.006 260)
-    card: oklch(0.99 0.005 260)
-    card-foreground: oklch(0.13 0.006 260)
-    popover: oklch(0.995 0.005 260)
-    popover-foreground: oklch(0.13 0.006 260)
-    primary: oklch(0.13 0.006 260)
-    primary-foreground: oklch(0.99 0.005 260)
-    secondary: oklch(0.975 0.005 260)
-    secondary-foreground: oklch(0.18 0.006 260)
-    muted: oklch(0.975 0.005 260)
-    muted-foreground: oklch(0.47 0.008 260)
-    accent: oklch(0.965 0.005 260)
-    accent-foreground: oklch(0.13 0.006 260)
-    destructive: oklch(0.546 0.195 27)
-    destructive-foreground: oklch(0.98 0.008 27)
-    success: oklch(0.524 0.140 148)
-    warning: oklch(0.555 0.146 49)
-    border: oklch(0.925 0.005 260)
-    input: oklch(0.925 0.005 260)
-    ring: oklch(0.623 0.188 260)
-    surface-raised: oklch(0.995 0.005 260)
-    surface-overlay: oklch(0.995 0.005 260)
-    chart-1: oklch(0.35 0.006 260)
-    chart-2: oklch(0.623 0.188 260)
-    chart-3: oklch(0.62 0.008 260)
-    chart-4: oklch(0.524 0.140 148)
-    chart-5: oklch(0.555 0.146 49)
-    sidebar: oklch(0.975 0.005 260)
-    sidebar-foreground: oklch(0.25 0.006 260)
-    sidebar-primary: oklch(0.13 0.006 260)
-    sidebar-primary-foreground: oklch(0.99 0.005 260)
-    sidebar-accent: oklch(0.945 0.005 260)
-    sidebar-accent-foreground: oklch(0.13 0.006 260)
-    sidebar-border: oklch(0.92 0.005 260)
-    sidebar-ring: oklch(0.623 0.188 260)
-  dark:
-    background: oklch(0.17 0.005 260)
-    foreground: oklch(0.95 0.005 260)
-    card: oklch(0.22 0.006 260)
-    card-foreground: oklch(0.95 0.005 260)
-    popover: oklch(0.26 0.006 260)
-    popover-foreground: oklch(0.95 0.005 260)
-    primary: oklch(0.95 0.005 260)
-    primary-foreground: oklch(0.15 0.005 260)
-    secondary: oklch(0.24 0.006 260)
-    secondary-foreground: oklch(0.90 0.005 260)
-    muted: oklch(0.23 0.006 260)
-    muted-foreground: oklch(0.72 0.005 260)
-    accent: oklch(0.27 0.006 260)
-    accent-foreground: oklch(0.95 0.005 260)
-    destructive: oklch(0.62 0.19 27)
-    destructive-foreground: oklch(0.13 0.020 27)
-    success: oklch(0.66 0.14 148)
-    warning: oklch(0.70 0.14 55)
-    border: oklch(0.28 0.006 260)
-    input: oklch(0.28 0.006 260)
-    ring: oklch(0.68 0.17 260)
-    surface-raised: oklch(0.22 0.006 260)
-    surface-overlay: oklch(0.26 0.006 260)
-    chart-1: oklch(0.85 0.005 260)
-    chart-2: oklch(0.68 0.17 260)
-    chart-3: oklch(0.55 0.006 260)
-    chart-4: oklch(0.66 0.14 148)
-    chart-5: oklch(0.70 0.14 55)
-    sidebar: oklch(0.15 0.005 260)
-    sidebar-foreground: oklch(0.88 0.005 260)
-    sidebar-primary: oklch(0.95 0.005 260)
-    sidebar-primary-foreground: oklch(0.15 0.005 260)
-    sidebar-accent: oklch(0.22 0.006 260)
-    sidebar-accent-foreground: oklch(0.95 0.005 260)
-    sidebar-border: oklch(0.25 0.006 260)
-    sidebar-ring: oklch(0.68 0.17 260)
-typography:
-  display: { family: "Nunito Variable", fallback: "system-ui, sans-serif", weights: [700] }
-  sans: { family: "Nunito Variable", fallback: "system-ui, sans-serif", weights: [400, 700] }
-  mono: { family: "JetBrains Mono Variable", fallback: "ui-monospace, monospace", weights: [400] }
-  ramp:
-    display: { size: 30px, line: 36px, weight: 700, family: display, tracking: 0 }
-    h1: { size: 24px, line: 32px, weight: 700, family: sans, tracking: 0 }
-    h2: { size: 18px, line: 25px, weight: 700, family: sans, tracking: 0 }
-    body: { size: 14px, line: 20px, weight: 400, family: sans }
-    small: { size: 13px, line: 18px, weight: 400, family: sans }
-    caption: { size: 12px, line: 16px, weight: 400, family: sans }
-    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, snippets, logs] }
-elevation:
-  radius: { sm: 6px, md: 8px, lg: 12px }
-  hairline: border
-  shadow:
-    overlay: "0 8px 24px oklch(0.20 0.01 260 / 0.10)"
-    popover: "0 4px 12px oklch(0.20 0.01 260 / 0.08)"
-  dark-ladder: { background: 0.17, raised: 0.22, overlay: 0.26, hue-held: 260 }
-motion:
-  duration: { press: 120ms, fade: 180ms, 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: success }
-layout: { base: 4px, sidebar: [248px, 56px], topbar: 56px, side-panel: [420px, 640px], content-max: 1200px }
-```

package/data/harnesses/apollo/skills/design/design-md/library/opencode-ai.md

@@ -1,216 +0,0 @@
----
-schema: design-md/v2
-id: opencode-ai
-tier: brand
-segments: [dev-tools, ai-infra, terminal]
-keywords: [monospace, terminal, cream, warm, dense, manpage]
-sourced: 2026-07-12
-sources: "design-md/v1 opencode-ai entry (2026-07-04) + token twin; 2026-07-12 re-audit of opencode.ai; JetBrains Mono substitutes the proprietary Berkeley Mono (the v1 corpus's shipped substitute)"
-license: open
----
-
-# opencode-ai — tractor-feed paper in one monospace column
-
-## 1 Visual Theme
-A tidy workbench: a mechanical keyboard, a sheet of warm cream tractor-feed printer
-paper with every character sitting in the same monospace column, and one blue LED on
-the keyboard's mod key. Light default — the whole UI floats on the faintly-blushed
-cream `background`, never the category's cool gray. Emphatically flat: hierarchy is
-hairline `border`, weight, and near-black-on-cream contrast — nothing lifts, nothing
-floats. The type voice IS the identity: one monospaced face carries every role, no
-sans anywhere. The primary action is an ink button; Apple Blue is the single
-chromatic accent, held scarce. Dense — the surface reads like a terminal. Dark is
-the brand's own TUI, authored as a warm charcoal ladder.
-
-## 2 Color Roles
-Near-black ink `foreground` on the warm cream `background`; `card` is the same cream
-seated by a hairline, no surface bands. `primary` is the ink button — dark in light,
-cream in dark — never blue. `accent` is the warm selection step; the blue accent hue
-lives in active-nav marks, links, and `chart-1`, held scarce. The focus `ring` is
-ink — a flat border, keyboard-first, no glow. Status is the Apple HIG ramp:
-`destructive` red, `success` green, `warning` amber — status only, never chrome. All
-neutrals hold the warm blush (hue 17) at a whisper of chroma; pure white and pure
-gray are both off-brand.
-
-## 3 Typography
-One face: JetBrains Mono (the open substitute for the proprietary Berkeley Mono)
-carries display, body, headings, labels, IDs, and every numeric column — there is no
-sans/mono split, and numerals align natively so tabular figures are inherent.
-Weights 400 / 500 / 700; tracking 0 on every role — monospace does not track.
-Register scope is trivially total: the display step touches page titles only, and
-"mono" owns everything. Emphasis steps weight 400 → 500 → 700, never tracking, never
-a second face. Page titles top out at 24px; the 38px marketing display stays behind.
-
-## 4 Component Stylings
-Buttons `radius-md` (4px), ink `primary` fill on cream text, never a pill.
-Secondary: `secondary` fill, hairline `border`. Inputs `background` fill, hairline
-`border`; focus draws the ink `ring` at 2px — a flat border. Cards `card` on a
-hairline with **sharp corners** (`radius-sm` 0) — containers sharp, interactive
-elements 4px: that two-value split is the whole geometry. Table rows `muted` hover,
-`accent` selection, blue active-row marks. Terminal, log, and console panels wear
-the dark inlay: `popover`-dark charcoal, cream mono text. Badges 4px, uppercase
-caption, status fills only.
-
-## 5 Layout
-8px base with fine 1/4px steps (the source's own scale; the 96px marketing rhythm
-stays behind); sidebar 248/56px; topbar 56px; side panel 420/640px; content max
-1280px. The grid runs tight — a terminal-native brand earns its density; the cream
-sidebar is barely warmer than the canvas, split by a hairline, not a band.
-
-## 6 Depth
-Categorically flat — the source has no drop shadows. Light: hairlines and one color
-inversion (the dark console inlay) carry all hierarchy; true overlays earn only the
-faintest warm-tinted whisper. Dark: the authored ladder does depth — `background`
-0.20 L (the TUI charcoal), `surface-raised` +0.05, `surface-overlay` +0.10, hue held
-at 17. Focus is the 2px ink `ring`; three z-levels: content, sticky chrome, overlay.
-
-## 7 Motion
-Terminal-instant: state changes snap, transitions only smooth what would otherwise
-flicker. Named moments: `caret-press` (primary-action press, 80ms), `column-fade`
-(page content arrival, 120ms), `panel-slide` (side panel, 180ms, interruptible).
-Physicality is granted to auth only. Tables, logs, and every keyboard-initiated
-action render instantly — a terminal does not tween.
-
-## 8 Iconography & Charts
-Lucide, 1.5px stroke, 16/20px grid — real icons, not the source's ASCII `[+]`
-bracket markers, which stay behind. Charts: hairline axes, no gridline fills;
-categorical ramp leads with the Apple Blue (`chart-1`), then warm ink, green, amber,
-and a muted slate (`chart-2..5`); tooltips on `surface-overlay`, numerals aligned
-natively in the mono face.
-
-## 9 Voice
-Manpage terse: lowercase-leaning commands, flags spelled out, no cheer. "run agent"
-· "no sessions — `opencode run` starts one" · "exit 1: config not found at
-~/.opencode/config.json."
-
-## 10 Do's & Don'ts
-Do anchor every surface on the warm cream — pure white reads as any-other-tool. Do
-render every role in the one monospaced face. Do keep the primary an ink button and
-Apple Blue scarce: interactive signal, links, `chart-1` only. Do keep containers
-sharp (0) and controls at 4px. Don't introduce a sans or display face. Don't fill
-the primary blue. Don't signal elevation with shadow. Don't wrap log lines — they
-scroll.
-
-## 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. Terminal and log inlays keep mono legibility at every breakpoint by
-scrolling horizontally, never wrapping.
-
-## 12 Agent Prompt Guide
-Reach for the warm cream first — never pure white; the faint blush is the brand.
-One monospaced face for every text role; numerals align natively. The primary action
-is an ink button; spend the blue only on interactive and data signal — if two things
-want the blue, one is not primary. Containers sharp, controls 4px. Dress terminal
-and log panels in the dark inlay — real console chrome. Dark is authored — consult
-the block, never derive.
-
-```yaml design-values
-color:
-  light:
-    background: oklch(0.99 0.005 17)
-    foreground: oklch(0.23 0.006 17)
-    card: oklch(0.99 0.005 17)
-    card-foreground: oklch(0.23 0.006 17)
-    popover: oklch(0.995 0.005 17)
-    popover-foreground: oklch(0.23 0.006 17)
-    primary: oklch(0.23 0.006 17)
-    primary-foreground: oklch(0.99 0.005 17)
-    secondary: oklch(0.975 0.005 17)
-    secondary-foreground: oklch(0.28 0.006 17)
-    muted: oklch(0.975 0.005 17)
-    muted-foreground: oklch(0.47 0.006 17)
-    accent: oklch(0.95 0.006 17)
-    accent-foreground: oklch(0.23 0.006 17)
-    destructive: oklch(0.55 0.22 29)
-    destructive-foreground: oklch(0.98 0.010 29)
-    success: oklch(0.60 0.17 147)
-    warning: oklch(0.70 0.16 67)
-    border: oklch(0.90 0.005 17)
-    input: oklch(0.90 0.005 17)
-    ring: oklch(0.23 0.006 17)
-    surface-raised: oklch(0.995 0.005 17)
-    surface-overlay: oklch(0.995 0.005 17)
-    chart-1: oklch(0.603 0.218 257)
-    chart-2: oklch(0.35 0.006 17)
-    chart-3: oklch(0.60 0.17 147)
-    chart-4: oklch(0.70 0.16 67)
-    chart-5: oklch(0.55 0.070 257)
-    sidebar: oklch(0.975 0.005 17)
-    sidebar-foreground: oklch(0.28 0.006 17)
-    sidebar-primary: oklch(0.23 0.006 17)
-    sidebar-primary-foreground: oklch(0.99 0.005 17)
-    sidebar-accent: oklch(0.945 0.006 17)
-    sidebar-accent-foreground: oklch(0.23 0.006 17)
-    sidebar-border: oklch(0.90 0.005 17)
-    sidebar-ring: oklch(0.23 0.006 17)
-  dark:
-    background: oklch(0.20 0.006 17)
-    foreground: oklch(0.96 0.005 17)
-    card: oklch(0.245 0.007 17)
-    card-foreground: oklch(0.96 0.005 17)
-    popover: oklch(0.30 0.008 17)
-    popover-foreground: oklch(0.96 0.005 17)
-    primary: oklch(0.96 0.005 17)
-    primary-foreground: oklch(0.20 0.006 17)
-    secondary: oklch(0.27 0.007 17)
-    secondary-foreground: oklch(0.92 0.005 17)
-    muted: oklch(0.26 0.007 17)
-    muted-foreground: oklch(0.72 0.006 17)
-    accent: oklch(0.31 0.008 17)
-    accent-foreground: oklch(0.96 0.005 17)
-    destructive: oklch(0.654 0.232 29)
-    destructive-foreground: oklch(0.13 0.030 29)
-    success: oklch(0.756 0.208 147)
-    warning: oklch(0.782 0.171 67)
-    border: oklch(0.31 0.008 17)
-    input: oklch(0.31 0.008 17)
-    ring: oklch(0.96 0.005 17)
-    surface-raised: oklch(0.25 0.007 17)
-    surface-overlay: oklch(0.30 0.008 17)
-    chart-1: oklch(0.65 0.190 257)
-    chart-2: oklch(0.80 0.006 17)
-    chart-3: oklch(0.756 0.208 147)
-    chart-4: oklch(0.782 0.171 67)
-    chart-5: oklch(0.65 0.070 257)
-    sidebar: oklch(0.18 0.006 17)
-    sidebar-foreground: oklch(0.92 0.005 17)
-    sidebar-primary: oklch(0.96 0.005 17)
-    sidebar-primary-foreground: oklch(0.20 0.006 17)
-    sidebar-accent: oklch(0.24 0.007 17)
-    sidebar-accent-foreground: oklch(0.96 0.005 17)
-    sidebar-border: oklch(0.28 0.007 17)
-    sidebar-ring: oklch(0.96 0.005 17)
-typography:
-  display: { family: "JetBrains Mono Variable", fallback: "ui-monospace, SFMono-Regular, monospace", weights: [700] }
-  sans: { family: "JetBrains Mono Variable", fallback: "ui-monospace, SFMono-Regular, monospace", weights: [400, 500, 700] }
-  mono: { family: "JetBrains Mono Variable", fallback: "ui-monospace, SFMono-Regular, monospace", weights: [400, 500] }
-  ramp:
-    display: { size: 24px, line: 34px, weight: 700, family: display, tracking: 0 }
-    h1: { size: 24px, line: 34px, weight: 700, family: sans, tracking: 0 }
-    h2: { size: 18px, line: 25px, weight: 700, family: sans, tracking: 0 }
-    body: { size: 14px, line: 21px, weight: 400, family: sans }
-    small: { size: 13px, line: 18px, weight: 400, family: sans }
-    caption: { size: 12px, line: 17px, weight: 500, family: sans }
-    data: { size: 13px, line: 20px, weight: 400, family: mono }
-  register-scope: { display: [page-title], sans: [chrome, controls, body, headings], mono: [data, ids, timestamps, logs, everything] }
-elevation:
-  radius: { sm: 0px, md: 4px, lg: 4px }
-  hairline: border
-  shadow:
-    overlay: "0 6px 20px oklch(0.20 0.010 17 / 0.08)"
-    popover: "0 3px 10px oklch(0.20 0.010 17 / 0.06)"
-  dark-ladder: { background: 0.20, raised: 0.25, overlay: 0.30, hue-held: 17 }
-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/apollo/skills/design/design-md/library/posthog.md

@@ -1,218 +0,0 @@
----
-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 }
-```