@nurix/etna 0.18.19 → 0.18.21

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

@@ -0,0 +1,142 @@
+---
+schema: design-md/v1
+product: OpenCode
+provenance: library
+sourced: 2026-07-04
+---
+
+# OpenCode — the terminal-native monospace operator design
+
+OpenCode's marketing site is a manpage rendered at modern resolution: every word sits in one monospaced
+face on a warm cream canvas, ASCII `[+]`/`[-]` markers stand in for icons, and a single dark card mocks
+up the OpenCode TUI. This entry is the *operator* reading of that brand — an internal tool (agent-ops
+console, run queue, log stream, dashboard) in OpenCode's language. What carries: the warm cream canvas
+(never pure white), near-black ink, the monospace-everywhere type voice, the sharp-container /
+4px-interactive radius character, the single reserved Apple-Blue accent, and categorically-flat hairline
+depth. What stays behind: the full-bleed dark hero TUI mockup, the 38px display headline, the 96px
+section rhythm, the block-pixel ASCII wordmark, and the bracket markers used as bullets.
+
+**Monochrome chrome, one held accent.** The chrome is ink-on-cream monochrome; the primary action is
+a near-black ink button, not a colored one (the Vercel/Geist dialect), and Apple Blue (`#007aff`) is
+the one chromatic accent — reserved, as the source reserves it, for interactive and data signal
+only. It reads *light*, so the light-default floor holds.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. The whole UI floats on OpenCode's warm cream `background` (`#fdfcfc`)
+— a faintly-blushed off-white, never the cool gray the category defaults to. Emphatically flat:
+hierarchy is carried by hairline `border`, type weight, and the near-black/cream contrast — never a drop
+shadow (the source has none; nothing lifts, nothing floats). The type voice is the identity: one
+monospaced face carries every role (Berkeley Mono in the source, proprietary; JetBrains Mono the shipped
+substitute) — no sans anywhere. The primary action is a near-black ink button; Apple Blue is the single
+chromatic accent, held scarce. Density is `dense` — the surface reads like a terminal. The anchor
+surface is a cream canvas seated beside a barely-warmer `sidebar`, separated by a hairline, not a band.
+
+## 2 Color Roles
+
+Light values. One chromatic accent — Apple Blue is the only hue that carries interactive meaning;
+the primary action is neutral ink; status speaks status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | warm cream `#fdfcfc` | page, cards, and overlays — one warm off-white, no surface bands |
+| `foreground` | near-black ink `#201d1d` | all primary ink; the primary button fill |
+| `muted` / `secondary` | soft warm `#f8f7f7` | hover rows, subtle fills, secondary-button fill |
+| `muted-foreground` | warm gray `#646262` | labels, captions, secondary text |
+| `border` / `input` | warm hairline `#e0dddd` | every separator, grid line, field edge (solid form of the source's `rgba(15,0,0,0.12)`) |
+| `primary` | near-black ink `#201d1d` | the one primary action — a dark button, never blue |
+| `accent` | warm selection `#f1eeee` | selected / hovered rows and nav — a warm step, never blue |
+| `ring` | `primary` ink `#201d1d` | the focus outline — an ink border, no glow (keyboard-first) |
+| Apple Blue (the accent hue) | `#007aff` | interactive: active-nav, links, selected emphasis, `chart-1` — held scarce |
+| `destructive` | Apple red `#ff3b30` | destructive actions and error state only |
+| `success` / `warning` | Apple green `#30d158` / amber `#ff9f0a` | status signalling only, never chrome |
+
+The Apple HIG semantic ramp is the brand's own; in the source it lives in the in-product TUI, and the operator surface *is* that context.
+
+## 3 Typography
+
+There is no sans/mono split — `font-sans` and `font-mono` are the same monospaced family (JetBrains
+Mono, the corpus's substitute for the proprietary Berkeley Mono). One face carries body, headings,
+labels, IDs, and every numeric column; numerals align natively (monospace figures are already tabular),
+so `tabular-nums` is inherent. Weights are 400 / 500 / 700, and — the defining detail — tracking is `0`
+on every role: monospace does not track. The 38px display headline stays behind; a page title tops at 24px.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.4 | `font-weight-strong` (700) · `heading-tracking` (0) |
+| h2 | section head | 18px / 1.4 | `font-weight-strong` (700) · 0 |
+| h3 | card / group head | 16px / 1.4 | `font-weight-strong` (700) · 0 |
+| body | UI + prose | 14px / 1.5 | `font-weight-normal` (400) |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| caption | footer, badge, eyebrow | 12px / 1.4 | 500 (medium) |
+| code | IDs, logs, amounts | 13px / 1.5 | `font-weight-normal` |
+
+Emphasise by stepping weight 400 → 500 → 700; never by tracking, and never by swapping the face — there
+is no other face.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — primary: filled ink `primary` on cream `primary-foreground`, `radius` (4px), never a pill. Secondary: `secondary` fill, 1px `border`, `foreground`. Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius` (4px); focus draws the ink `ring` at 2px — a flat border, no glow.
+- **Card** — `card` surface on a 1px `border`, **sharp corners** (containers are 0px); the hairline carries the lift, never a shadow; inset by `density-inset`.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; numerics align natively in the mono face; selection tints `accent`, active rows mark with the blue accent.
+- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich` for content-heavy), beside the work, not over it.
+- **Badge** — 4px `radius`, `muted` / status fill, uppercase caption; status badges take `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing unit 8px with fine 1 / 4px steps (the source's own base); the on-scale ramp is `1 · 4 · 8 ·
+12 · 16 · 24 · 32 · 48` — the marketing 96px section rhythm stays behind. Shell dimensions map to the
+layout primitives: sidebar `sidebar-width-expanded` (248px) / `sidebar-width-collapsed` (56px), topbar
+`topbar-height` (56px, the source's nav height), side panel `side-panel-width` (420px) /
+`side-panel-width-rich` (640px), modal `modal-width-max`, forms `form-max-width`, tables full-width. The
+grid runs tight — a terminal-native brand earns its density, governed globally by `density-tier`
+(`dense`) and stepped per archetype by the surface catalog.
+
+## 6 Depth
+
+Categorically flat — the source has no drop shadows; hierarchy comes from hairlines, the surface ladder,
+and one color inversion:
+
+- **0 — canvas** `background`, no border.
+- **1 — panel / card** `card` on a 1px `border`, sharp corners; the hairline alone carries the lift. Selected / hover rows warm to `accent`.
+- **2 — overlay** `popover` / side panel / modal — a strong hairline and position carry rank; `shadow-intensity` earns only the faintest whisper to float a true overlay off the cream.
+- **inlay — terminal / log / console** dark `#201d1d` with cream `on-dark` text, `#302c2c` elevated rows, and the mono face — the source's single dark moment (the hero TUI mockup) carried as the console inlay.
+
+Focus is a 2px ink `ring` outline (never a glow), visible on every interactive element; three z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** anchor every surface on the warm cream canvas — pure white reads as any-other-tool; the faint blush is OpenCode.
+- **Do** render every role in the one monospaced face — body, headings, labels, and numerics alike; the single-face decision is the entire identity.
+- **Do** keep the primary action a near-black ink button, and keep Apple Blue scarce — interactive, active-nav, links, and chart series only.
+- **Do** keep containers sharp (0px) and interactive elements at 4px; that two-value split is the radius vocabulary.
+- **Don't** introduce a sans-serif or a display face — there is one face, and it is monospaced.
+- **Don't** fill the primary button blue, promote a second chromatic accent, or signal elevation with drop shadows.
+- **Don't** open detail or edit in a modal when the side panel fits — a modal is a confirmation.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440.
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
+| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
+| 1024 | sidebar expands; two-pane queue+detail holds side by side |
+| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
+
+Terminal, log, and console inlays keep mono legibility at every breakpoint by scrolling horizontally, never wrapping.
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Reach for the warm cream canvas first — never pure white; the faint blush is the brand. Cards are the same cream, seated by a hairline.
+- Render every text role in the one monospaced face (JetBrains Mono) — there is no sans. Numerics align natively; no `tabular-nums` toggle is needed.
+- Keep the primary action an ink button. Spend Apple Blue only on interactive and data signal: active-nav, links, selected emphasis, chart series. If two things want the blue, one is not primary.
+- Keep containers sharp (0px) and interactive elements at 4px — that split is the brand's whole geometry.
+- Depth is hairline, surface, and position — never shadow. Dress terminal, log, and console panels in the dark inlay (`#201d1d`, mono, cream text) — real console chrome, not a light mockup of it.
+- Keyboard-first: the ink `ring` focus outline is always visible. Leave behind the dark hero TUI mockup, the 38px display, the 96px rhythm, the ASCII wordmark, and the bracket bullets — use real lucide icons.

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

@@ -0,0 +1,152 @@
+---
+schema: design-md/v1
+product: PostHog
+provenance: library
+sourced: 2026-07-04
+---
+
+# PostHog — operator reading
+
+The operator distillation of PostHog's engineering-sketchbook brand. The source is a marketing
+system: a warm cream canvas dotted with hand-drawn hedgehog mascots, hero-scale display type, and a
+single loud yellow-orange CTA pill. This entry keeps the temperature and voice that make it PostHog
+— the cream canvas, the olive ink, the one yellow accent, IBM Plex Sans, the flat hairline depth,
+the dark code island — and leaves the decoration behind: no mascots, no 36px/800 hero type, no
+pastel callout bands, no pill CTAs on operator chrome. What remains is a warm, calm, flat dev-tools
+console.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. The signature is the **warm cream canvas** (`background` `#eeefe9`) —
+never plain white — with true-white cards (`card`) floating on it. Flat: hierarchy is carried by
+hairline olive `border`, type weight, and color, never by shadow. A single loud accent — PostHog yellow
+(`primary` `#f7a501`) — carries the one action that matters on a surface, and it wears **dark olive ink**
+(`primary-foreground`), never white. The neutral ramp is a warm olive-gray, so the whole UI reads like a
+friendly engineering blog rather than cold gray tooling. Density is `standard` and steps denser per
+archetype — dense-capable, warm, not cramped.
+
+## 2 Color Roles
+
+Light values first. One loud accent — `primary` yellow is the only saturated hue that carries a call
+to action; blue is a quiet functional signal; status hues speak only status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` | warm cream `#eeefe9` | the page canvas — end to end, never substituted with white |
+| `card` / `popover` | white `#ffffff` | cards, panels, and overlays floating on the cream |
+| `foreground` | deep olive-charcoal `#23251d` | headlines and primary ink |
+| `muted` / `secondary` | soft greige `#e5e7e0` | hover rows, subtle fills, secondary buttons |
+| `muted-foreground` | olive `#6c6e63` | labels, captions, metadata, secondary text |
+| `border` / `input` | olive hairline `#bfc1b7` | every separator, grid line, and field edge |
+| `primary` | PostHog yellow `#f7a501` | the one primary action; wears dark ink, never white |
+| `accent` | pale yellow wash `#f7eccf` | selected / hovered rows and nav, on-accent surfaces only |
+| `ring` | focus blue `#2c84e0` | the focus outline — the brand focuses in blue, not yellow |
+| `destructive` | red `#cd4239` | destructive actions and error state only |
+| `success` | green `#2c8c66` | positive status only |
+| `warning` | gold-amber `#b17816` | caution status only — deliberately deeper than the CTA yellow |
+
+Link/info blue `#2c84e0` and the pastel callout family (`accent-blue-soft`, `-green-soft`, `-red-soft`,
+`-purple-soft`) are marketing/doc vocabulary: they carry no operator chrome role (see §7).
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is IBM Plex Sans Variable — UI, body, and headings all ride it, and the
+brand's signature is that hierarchy is built from **weight**, not a second family. `font-mono` is
+Source Code Pro for IDs, codes, timestamps, and log lines. Numeric columns render `tabular-nums` so
+figures align down a column.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.3 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 20px / 1.4 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 16px / 1.45 | `font-weight-strong` |
+| body | UI + prose | 14px / 1.45 | `font-weight-normal` |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow | 12px / 1.33 | `font-weight-strong`, `+0.02em`, uppercase |
+
+Bump weight one step for emphasis; never change size to emphasize. The marketing hero (36px / 800) and
+the 800-weight display tier stay behind — operator headings top out at `font-weight-strong`.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled `primary` yellow on dark `primary-foreground` ink, `radius`, no pill.
+  Secondary: `secondary` greige fill, `border`, `foreground`. Ghost: transparent, `accent` on hover.
+- **Input** — `card` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring` (blue) at
+  full 2px, no glow.
+- **Card** — `card` white surface, 1px `border` hairline, `radius`, **flat — no shadow**; inset by
+  `density-inset`. Flat cards on cream is the brand.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; row selection tints
+  `accent`; `tabular-nums` on numeric columns; `font-mono` on IDs and timestamps.
+- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`
+  for content-heavy), beside the work, not over it.
+- **Badge** — hairline `border`, `muted` / status fill, uppercase caption; status badges take `success`
+  / `warning` / `destructive`, never `primary`.
+- **Code / log surface** — the brand's signature inverted moment: dark olive-charcoal (`foreground`
+  `#23251d`) fill with white text in `font-mono`. The one place a surface goes dark on the light UI.
+
+## 5 Layout
+
+Base spacing unit 4px (Tailwind `--spacing` 0.25rem); the brand's rhythm centers on the 8px step. The
+on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64`. Shell dimensions map one-to-one to the
+layout primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height`,
+side panel `side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms
+`form-max-width`, tables full-width. Density is governed globally by `density-tier` (rewriting the
+spacing scale through `density-gap`) and stepped per archetype by the surface catalog — never by
+absolute overrides. The 80px marketing section rhythm stays behind.
+
+## 6 Depth
+
+Flat — this is where the brand and operator restraint agree completely. Hierarchy comes from the surface
+ladder and hairlines, never shadow:
+
+- **0 — canvas** `background` cream, no border.
+- **1 — panel / card** `card` white on a 1px `border` hairline; flat, no shadow.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
+  shadow to lift off the cream. The dark code / log surface is the brand's other "elevated" moment, and
+  it lifts with **color, not shadow**.
+
+Focus is a 2px `ring` outline in blue (never a glow), visible on every interactive element. Three
+z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** keep the cream `background` (`#eeefe9`) as the app canvas — never flatten it to plain white.
+- **Do** reserve `primary` yellow for the single most important action, and carry dark ink on it — the
+  yellow pill never takes white text.
+- **Do** carry hierarchy with hairlines, weight, and whitespace — the brand is flat, no drop shadows.
+- **Do** render code and log surfaces on the dark olive-charcoal `foreground` fill with `font-mono`.
+- **Don't** pill operator buttons — the pill is the marketing nav CTA only; operator buttons are `radius`.
+- **Don't** promote a second loud chromatic accent. Blue stays a quiet link / focus signal; the pastel
+  callout family and the hedgehog mascots are marketing decoration and do not enter operator chrome.
+- **Don't** bring the 36px / 800 hero display tier into operator surfaces — headings stop at
+  `font-weight-strong`.
+- **Don't** signal elevation with heavy shadows; reach past a hairline only for a real overlay.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440.
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
+| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
+| 1024 | sidebar expands; two-pane queue+detail holds side by side |
+| 1440 | content caps at `form-max-width` for forms; tables and dashboards use the full width |
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- The cream `background` (`#eeefe9`) is the app canvas — white cards float on it; never flatten to plain
+  white. This warmth is the brand's whole identity once the mascots are gone.
+- Reserve the yellow `primary` for the one primary action per surface, always with dark ink; if two
+  things want the accent, one is not primary.
+- IBM Plex Sans across every role; build hierarchy from weight (`400` / `600`), not size jumps; every
+  numeric column is `tabular-nums`; every ID, code, and timestamp is `font-mono`.
+- Stay flat — hairline olive `border` and weight before shadow. The dark `#23251d` code / log surface is
+  the only "elevated" surface, and it lifts with color, not shadow.
+- Blue is links and focus only; green / red / amber are status only; one loud color (yellow).
+- Leave behind: hedgehog mascots, 36px / 800 hero type, pill CTAs on chrome, pastel callout bands, the
+  80px marketing section rhythm.

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

@@ -0,0 +1,137 @@
+---
+schema: design-md/v1
+product: Raycast
+provenance: library
+sourced: 2026-07-04
+---
+
+# Raycast — operator reading of a categorically-dark developer system
+
+Raycast is the rare brand where the doctrine's light default yields: it is *categorically dark* —
+one continuous near-black canvas with no light variant in the source. This entry carries that
+identity onto operator surfaces: the chrome of Raycast's own command palette (near-black surfaces,
+hairline borders, a single white action, ss03-Inter), with the marketing theatre left behind.
+
+## 1 Visual Theme
+
+Dark by default; there is no light variant. Flat and shadowless — hierarchy is a four-step surface
+ladder (`background` → `card` → `muted` → overlay), never a drop shadow. Chrome is monochrome: white is
+the single action color, and every primary button is a white rounded-rect on near-black. Color is
+reserved — four saturated hues (blue, green, yellow, red) speak status and category only, never chrome.
+The anchor surface is the near-black canvas carrying hairline-bordered cards; the single accent is
+white. Density is `dense` — Raycast's command-palette chrome runs tight, and operator surfaces inherit it.
+
+## 2 Color Roles
+
+One monochrome action — white — carries every primary; the saturated hues speak only status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` | near-black `#07080a` (canvas) | the dominant page surface, edge to edge |
+| `foreground` | off-white `#f4f4f6` (ink) | primary ink on the canvas |
+| `card` / `popover` | `#0d0d0d` (surface) | cards and overlays — one notch above canvas |
+| `muted` / `secondary` | `#101111` (elevated) | inputs, tertiary buttons, active chips |
+| `muted-foreground` | `#9c9c9d` (mute) | labels, captions, metadata |
+| `border` / `input` | hairline `#242728` | every card edge, grid line, and field border |
+| `primary` | white `#ffffff` | the one primary action — a white pill on black |
+| `primary-foreground` | black `#000000` | text on the white action |
+| `accent` | `#121212` (surface-card) | selected/active rows and nav — a surface lift, not a hue |
+| `ring` | white `#ffffff` | focus outline — the action color, unmistakable |
+| `destructive` | `#ff6161` | destructive actions and error status |
+| `success` / `warning` | `#59d499` / `#ffc533` | status signalling only, never chrome |
+
+The four saturated category hues (blue `#57c1ff`, green `#59d499`, yellow `#ffc533`, red `#ff6161`)
+are status/illustration only — never a chrome button, never body text. White carries every action.
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is Inter with `font-feature-settings: "calt","kern","liga","ss03"`
+enabled globally — the ss03 alternate `g` is the brand's signature and must stay on; without it the
+type reads as plain Inter and loses the voice. `font-mono` is JetBrains Mono for IDs, codes,
+timestamps, log lines (Raycast's marketing rarely shows mono; operator work needs it). Letter spacing
+is *positive* — Raycast opens type rather than tightening it, so headings track `+0.01em`, the rare
+operator system that does. Numeric columns render `tabular-nums`.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.3 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 20px / 1.4 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 16px / 1.4 | `font-weight-strong` |
+| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow | 12px / 1.5 | `font-weight-strong`, `+0.03em`, uppercase |
+
+Hero display (56–64px) stays behind. Emphasise by weight one step, never by size.
+
+## 4 Component Stylings
+
+- **Button** — `primary`: filled white `primary` on `primary-foreground`, `radius`, a rounded rect,
+  never a 9999 pill. Secondary: transparent, `foreground`. Tertiary: `secondary` (elevated) fill.
+- **Input** — `secondary` (elevated) fill, 1px `border` (`border-weight`), `radius`; focus *brightens
+  the border* to the `ring`, never a glow.
+- **Card** — `card` surface, 1px `border`, `radius`; no shadow (the surface ladder carries lift),
+  inset by `density-inset`.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; row selection
+  tints `accent` (the surface-card lift); `tabular-nums` on numeric columns.
+- **Side panel** — detail and edit open beside the work (`side-panel-width`, `side-panel-width-rich`),
+  not over it.
+- **Badge** — hairline `border`, `muted`/status fill; status badges take `success` / `warning` /
+  `destructive`, never `primary`; info renders as `accent`-blue on a translucent tint.
+- **Keycap** — a signature primitive: keyboard-shortcut hints render as small keycap glyphs (surface
+  fill, faint gradient, tight `radius`). Carry them onto operator shortcut affordances.
+
+## 5 Layout
+
+Base unit 8px with 2/4/12px tight steps; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 ·
+64` (the 96px marketing section rhythm stays behind). Shell dimensions map one-to-one to the layout
+primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height` (56px,
+the brand's own nav height), side panel `side-panel-width` / `side-panel-width-rich`, modal cap
+`modal-width-max`, forms `form-max-width`, tables full-width. Density is `dense` globally
+(`density-tier`), stepped per archetype by the surface catalog — never by absolute overrides.
+
+## 6 Depth
+
+Flat and shadowless — the defining trait. Hierarchy comes from the surface ladder, not shadow:
+
+- **0 — canvas** `background` `#07080a`, no border.
+- **1 — surface / card** `card` `#0d0d0d` on a 1px `border`, one notch above canvas.
+- **2 — elevated** `muted` `#101111` for inputs, active chips, and nav selection.
+- **3 — overlay** `popover` / side panel / modal — separated by the surface lift plus a hairline;
+  `shadow-intensity` is 0, because the brand has no drop shadows at all.
+
+Focus is a `ring` outline in white (the action color), always visible; three z-levels: content, chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** keep the canvas near-black and build every elevation from the surface ladder.
+- **Do** keep chrome monochrome — white is the one action color; reserve it for the single primary.
+- **Do** enable Inter's `ss03` (with `calt`/`kern`/`liga`) globally; without it the type loses its voice.
+- **Do** carry shortcut hints as keycap glyphs; `tabular-nums` on numerics, `font-mono` on IDs/codes/timestamps.
+- **Don't** add a drop shadow — depth is the surface ladder, never shadow.
+- **Don't** promote a second chromatic action — the four saturated hues are status/category only, never chrome.
+- **Don't** fully-round the CTA — the primary is a rounded rect at `radius`, not a 9999 pill.
+- **Don't** reach for the red diagonal-stripe hero gradient or hero-scale display type — they stay behind.
+- **Don't** pad cards 32px+; run tight at 16–24px.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440.
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; the near-black canvas holds |
+| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
+| 1024 | sidebar expands; two-pane list+detail holds side by side |
+| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
+
+## 9 Agent Prompt Guide
+
+- Treat the default theme as dark — the color map already resolves to near-black; synthesize no light variant.
+- Build depth from the surface ladder (`background` → `card` → `muted` → overlay); never a drop shadow.
+- Keep chrome monochrome: white is the action. If two elements want white, one of them is not primary.
+- Enable Inter's `ss03` (with `calt`/`kern`/`liga`) globally; render shortcut hints as keycap glyphs.
+- The four saturated hues are status/category only — `success`/`warning`/`destructive`/info — never chrome.
+- **Carries over:** near-black canvas + surface ladder, hairline borders, the monochrome white action,
+  tight 6–10px radius, ss03-Inter, positive heading tracking, keycap shortcut glyphs.
+- **Stays behind:** the red diagonal-stripe hero gradient, hero-scale display (56–64px), full-bleed
+  product-screenshot heroes, the 96px marketing section rhythm.

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

@@ -0,0 +1,140 @@
+---
+schema: design-md/v1
+product: Replicate
+provenance: library
+sourced: 2026-07-04
+---
+
+# Replicate — the warm-cream operator reading
+
+Replicate's public surfaces read as an ML lab notebook crossed with a print zine: a warm cream
+canvas, ink-dark type, dark monospace code wells, and one hot-orange accent used like a stamp. This
+entry is the *operator* reading of that brand — the same warmth and single accent, carried onto a
+CRM, a queue, or a dashboard. The hero-scale display grotesque, full-bleed orange bands, the
+gradient mesh, and contributor mosaics stay behind as marketing furniture. What carries: the
+cream-not-white temperature, the ink foreground, the scarce orange, the soft-rounded corners, and
+the strict font lanes.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. Flat: hierarchy is color-blocking and hairlines, not shadow — surfaces
+step warm (bone sidebar → cream canvas → white cards) and elevation is a surface swap, never a heavy drop.
+A single accent, Replicate `primary` (hot orange `#ea2804`), is reserved for the one action that matters on
+a surface — treated as a stamp, one orange element per view. The field is warm: the canvas is cream `#f9f7f3`,
+never pure white, and ink is `#202020`, a warm near-black. Corners are soft (`radius` 10px) — the brand has
+no sharp edges — but the marketing full-pill treatment stays behind except on badges. Density is `standard`:
+editorial warmth wants a little air, operator restraint keeps it from sprawling.
+
+## 2 Color Roles
+
+Light values first. One accent — `primary` is the only chromatic hue that carries meaning; status
+and focus hues speak only their function.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` | cream `#f9f7f3` | the page canvas — the dominant warm surface, never pure white |
+| `card` / `popover` | white `#ffffff` | data cards, tables, inputs, overlays — the only place white appears |
+| `foreground` | warm ink `#202020` | all primary text |
+| `muted` / `secondary` | bone `#f3f0e8` | hover rows, subtle fills, secondary buttons, inset groups |
+| `muted-foreground` | charcoal `#575757` | labels, captions, metadata, secondary text |
+| `border` / `input` | hairline `#dfddda` | every separator, grid line, and field edge |
+| `primary` | orange `#ea2804` | the one primary action; active nav; inline links |
+| `accent` | pale peach `#fbe9e3` | selected/hovered rows and nav, on-accent surfaces only |
+| `ring` | focus blue `#3b82f6` | the keyboard focus outline — deliberately cool, so focus never reads as the orange CTA |
+| `destructive` | red `#b3261e` | destructive actions and error state only |
+| `success` / `warning` | green `#2b9a66` / gold `#b7791f` | status signalling only, never chrome |
+
+The hero glow, hero pink, and orange bands are marketing graces: they carry no role here (see §7).
+
+## 3 Typography
+
+Two lanes, strictly kept. `font-sans` is basier-square (Geist or Inter substitute) — UI, body, and headings
+all ride it; heading weight and tight tracking, not a second family, carry emphasis. `font-mono` is JetBrains
+Mono for IDs, model slugs, codes, timestamps, and log lines. The hero display grotesque `rb-freigeist-neue`
+is hero-scale (72px+) and stays behind. Numeric columns render `tabular-nums` so figures align down a column.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.3 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 20px / 1.4 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 16px / 1.4 | `font-weight-strong` · `heading-tracking` |
+| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| caption | eyebrow / footnote | 12px / 1.33 | `font-weight-strong`, uppercase |
+
+Body weight stays 400 — emphasis is weight-to-strong or a switch to `font-mono`, never a bump to 500.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled `primary` on `primary-foreground`, `radius`, soft-cornered, not pill.
+  Secondary: `secondary` fill, `border`, `foreground`. Ghost: transparent, `accent` on hover. Pressed
+  darkens `primary` one step.
+- **Input** — `card` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring` at 2px, no glow.
+- **Card** — white `card` on the cream canvas, 1px `border`, `radius`; shadow only when a true overlay lifts
+  (`shadow-intensity`); inset by `density-inset`.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
+  numeric columns; row selection tints `accent`.
+- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich` for
+  content-heavy), beside the work, not over it.
+- **Badge** — pill (`radius-scale` 9999) is allowed here as a brand grace; hairline `border` or status fill,
+  uppercase caption; status badges take `success` / `warning` / `destructive`, never `primary`. Code and log
+  panels invert to an ink-dark fill with `font-mono` — the one place dark blocking appears in operator chrome.
+
+## 5 Layout
+
+Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96`. Shell dimensions
+map one-to-one to the layout primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar
+`topbar-height` (the brand's 60px nav rhythm), side panel `side-panel-width` / `side-panel-width-rich`, modal
+cap `modal-width-max`, forms `form-max-width`, tables full-width. Rows ride `table-row-height` (44px — the
+brand's touch-comfortable button height, an airier operator rhythm). Density is governed globally by
+`density-tier` and stepped per archetype by the surface catalog.
+
+## 6 Depth
+
+Flat, color-blocked. Hierarchy comes from the warm surface ladder and hairlines, not shadow:
+
+- **0 — canvas** `background` cream, no border.
+- **1 — panel / card** `card` white on a 1px `border`; a surface swap to `muted` bone marks an inset group.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md` shadow.
+
+No level stacks a heavier shadow to signal rank; rank is surface color, border, and position. Focus is a 2px
+`ring` outline (never a glow), deliberately cool blue so it never collides with the orange CTA. Three
+z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** keep the cream `background` as the page canvas; white is for cards, inputs, and overlays only.
+- **Do** reserve `primary` orange for the single most important action, active nav, and inline links —
+  three roles, treated as a stamp: at most one orange element per view.
+- **Do** apply `tabular-nums` to every numeric column and `font-mono` to IDs, codes, slugs, and timestamps.
+- **Don't** replace cream with pure white at the page level — the brand temperature lives in the canvas.
+- **Don't** promote a second chromatic accent. The hot orange is the only accent; success green, warning
+  gold, and focus blue are functional, not decorative.
+- **Don't** pill the primary CTA — the full-pill treatment is a marketing signature; operator CTAs keep the
+  soft `radius`, and pills stay on badges. Don't reach for the hero display grotesque or heavy drop shadows.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440.
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
+| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
+| 1024 | sidebar expands; two-pane queue+detail holds side by side |
+| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Lead every list surface with its table; lead every entity with its primary read, not its chrome.
+- Set the page on the cream `background`; float white `card` surfaces on it — never pure white at page level.
+  Accent only the primary action with orange `primary`; if two things want the orange, one is not primary.
+- Every numeric column is `tabular-nums`; every ID, slug, code, and timestamp is `font-mono`.
+- Every workflow completes from the keyboard; the cool-blue `ring` focus outline is always visible. Stay
+  flat — warm surface swaps and hairlines before shadow; reach past a hairline only for a real overlay.
+- Leave the marketing furniture behind: no hero grotesque, no full-bleed orange bands, no gradient mesh, no
+  contributor mosaics, no pill CTAs. Palette, temperature, soft corners, and font lanes carry; the rest does not.