@stylecrib/cli 0.0.0-stage → 0.3.2

package/themes/devtool-cli/tokens.ts

@@ -0,0 +1,195 @@
+import type { Direction } from "../schema";
+
+export const devtoolCli: Direction = {
+  name: "devtool-cli",
+  ethos:
+    "Cloudflare signal-orange · Fly.io Plex-Mono voice · Railway dark canvas · Vercel Geist restraint · Resend warm-yellow accent",
+  references: [
+    { brand: "Cloudflare", trait: "dark canvas + signal orange + JetBrains-Mono accents" },
+    { brand: "Fly.io", trait: "deep paper-cream + IBM Plex Mono brand voice" },
+    { brand: "Railway", trait: "deep dark + Inter + node-graph illustrations" },
+    { brand: "Vercel", trait: "black canvas + Geist sans + restrained chrome" },
+    { brand: "Resend", trait: "black canvas + warm yellow + minimal flourish" },
+  ],
+  feel:
+    "Near-black canvas with one signal accent — orange-amber, used like a status LED. " +
+    "Monospace is promoted to display: terminal prompts, version strings, and code excerpts " +
+    "do the heavy lifting that headlines normally would. The page reads like a status dashboard " +
+    "that happens to be marketing — we run the internet, but the surface is effortless.",
+
+  fonts: {
+    display: {
+      family: "JetBrains Mono",
+      fallback: ["IBM Plex Mono", "Berkeley Mono", "ui-monospace", "SFMono-Regular", "Menlo", "monospace"],
+      from: "Cloudflare/Fly.io devtool convention — mono as display, terminal prompt as headline",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["Geist", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+      from: "Railway/Vercel body sans — neutral, technical, legible on dark surfaces at 15px",
+      googleFont: "Inter",
+      weights: [400, 500, 600, 700],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["IBM Plex Mono", "Berkeley Mono", "ui-monospace", "SFMono-Regular", "Menlo", "monospace"],
+      from: "same family as display — code blocks, shell commands, metric counters",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.02em",       // mono display reads tighter at scale — counters Inter's looser default
+    bodyTracking: "0",
+    fontFeatureSettings: '"ss01", "ss02", "cv11", "calt", "zero", "tnum"',
+    h1ScaleClamp: "clamp(2.25rem, 5.5vw, 4.5rem)",  // restrained — mono at oversize loses readability fast
+    bodyBaseSize: "0.9375rem",        // 15px — Vercel/Railway standard for technical body
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: { hsl: "220 14% 6%", from: "Railway/Vercel deep canvas — near-black with a soft blue bias" },
+    foreground: { hsl: "210 14% 92%", from: "Cloudflare cool off-white — readable on dark, never pure white" },
+    card: { hsl: "220 14% 9%", from: "elevated card surface — one stop up, still feels like terminal pane" },
+    popover: { hsl: "220 14% 11%", from: "popover/command-palette surface — two stops up from canvas" },
+    primary: { hsl: "24 95% 56%", from: "Cloudflare signal orange — the canonical devtool accent, status-LED amber" },
+    primaryForeground: { hsl: "220 14% 6%", from: "canvas on signal — dark text on bright primary for contrast" },
+    secondary: { hsl: "220 12% 14%", from: "Railway elevated steel — secondary surface, hover panel base" },
+    secondaryForeground: { hsl: "210 14% 92%", from: "off-white on steel" },
+    muted: { hsl: "220 10% 16%", from: "muted surface — code-block background, one tier above secondary" },
+    mutedForeground: { hsl: "215 10% 62%", from: "Vercel secondary text — metadata, timestamps, file paths" },
+    accent: { hsl: "220 10% 18%", from: "hover lift on cards — minimal step above muted" },
+    accentForeground: { hsl: "210 14% 92%", from: "off-white on hover" },
+    border: { hsl: "220 10% 20%", from: "hairline panel rule — visible only at edge, never a frame" },
+    input: { hsl: "220 10% 20%", from: "same as border — single hairline language for chrome" },
+    ring: { hsl: "24 95% 56%", from: "signal-orange focus ring — the accent IS the focus indicator" },
+    destructive: { hsl: "0 72% 56%", from: "terminal stderr red — error log color, not decoration" },
+    destructiveForeground: { hsl: "210 14% 92%", from: "off-white on error red" },
+    brand: {
+      signal: { hsl: "24 95% 56%", from: "Cloudflare signal orange — the one accent, used as status LED" },
+      "signal-warm": { hsl: "38 92% 58%", from: "Resend warm yellow — gradient anchor partner for signal" },
+      success: { hsl: "142 70% 45%", from: "terminal stdout green — exit code 0, health check OK" },
+      info: { hsl: "200 88% 56%", from: "Railway info blue — info-level log, link color" },
+      canvas: { hsl: "220 14% 6%", from: "the deep canvas — semantic background, also pane behind hero terminal" },
+      ink: { hsl: "210 14% 92%", from: "the off-white ink — semantic foreground, also prompt text" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128],   // medium density — terminal-pane breathing
+    containerMax: "max-w-6xl",        // 1152px — wide enough for two-column code + prose
+    containerPadding: "px-5 lg:px-8",
+    sectionPadding: {
+      hero: "pt-20 pb-16 lg:pt-28 lg:pb-24",
+      default: "py-16 lg:py-24",
+      tight: "py-10 lg:py-14",
+    },
+  },
+
+  radius: {
+    base: "0.375rem",                 // 6px — Vercel/Railway standard, soft but not pillow
+    pillsAllowed: true,               // status pills allowed — "v2.4.1", "stable", "edge" — terminal convention
+  },
+
+  shadows: {
+    style: "glow",
+    utilities: {
+      "glow-signal":
+        "0 0 0 1px hsl(var(--signal) / 0.4), " +
+        "0 8px 24px hsl(var(--signal) / 0.18), " +
+        "0 24px 64px hsl(var(--signal) / 0.12)",
+      "panel-lift":
+        "0 1px 0 0 hsl(var(--border)), " +
+        "0 12px 32px hsl(0 0% 0% / 0.4)",
+      "terminal-inset":
+        "inset 0 1px 0 0 hsl(var(--border)), " +
+        "inset 0 0 0 1px hsl(var(--border))",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 600,
+      loop: 1200,
+      ambient: 8000,
+    },
+    keyframes: {
+      "caret-blink": {
+        css:
+          "0%, 49% { opacity: 1; }\n" +
+          "50%, 100% { opacity: 0; }",
+        defaultDuration: 1100,
+        iteration: "infinite",
+        purpose: "terminal cursor blink on hero prompt — the canonical devtool tell",
+      },
+      "type-in": {
+        css:
+          "from { width: 0; }\n" +
+          "to { width: 100%; }",
+        defaultDuration: 1800,
+        iteration: "once",
+        purpose: "typewriter reveal for hero command — paired with steps-12 timing function in usage",
+      },
+      "log-stream": {
+        css:
+          "from { opacity: 0; transform: translateY(8px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 400,
+        iteration: "once",
+        purpose: "stagger-in for log lines and status rows — each row delayed 60ms",
+      },
+      "status-pulse": {
+        css:
+          "0%, 100% { box-shadow: 0 0 0 0 hsl(var(--success) / 0.6); }\n" +
+          "50% { box-shadow: 0 0 0 6px hsl(var(--success) / 0); }",
+        defaultDuration: 2000,
+        iteration: "infinite",
+        purpose: "live status indicator — 'all systems operational' green dot, breathes",
+      },
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(16px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 600,
+        iteration: "once",
+        purpose: "section entrance — quiet rise, no bounce",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Default = ghost button: 1px border (--border), foreground text, no fill. Hover = bg-accent. " +
+      "Primary = solid signal-orange fill with canvas text (high contrast, status-LED energy) — used on the single hero CTA per page. " +
+      "Tertiary = text-link with foreground color and dotted underline-offset 4px. " +
+      "Mono labels allowed on buttons that represent commands (e.g. `npm install`). " +
+      "Never gradient on button faces — gradient is reserved for the signal→signal-warm headline accent only.",
+    card:
+      "Sharp-ish 0.375rem corners, hairline border (--border), bg-card. " +
+      "Terminal-pane variant: header strip with three dot-buttons (close/min/max) in --muted, prompt body uses mono. " +
+      "Padding p-5 lg:p-8. Glow-signal utility is reserved for the hero card only.",
+    input:
+      "Full box, 1px --border, bg-card, 0.375rem radius. " +
+      "Mono font-family by default — inputs in a devtool surface are command-shaped. " +
+      "Focus = signal ring (1px --ring), no glow. Label in body sans above; placeholder in --muted-foreground, mono.",
+    cta:
+      "Hero: solid signal-fill rectangle with canvas text and an inline arrow glyph. " +
+      "Secondary CTAs are ghost buttons in pairs (e.g. 'Read the docs' / 'Star on GitHub'). " +
+      "Status pills (--success, --info, --signal) accompany CTAs to communicate runtime state — never decorative.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--signal) / 0.35)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/devtool-docs/THEME.md

@@ -0,0 +1,105 @@
+# Design Direction — Devtool-Docs
+
+## Ethos
+Linear Docs cream-and-Inter · Cal.com DM-Sans clarity · Plausible JetBrains-Mono code · Mintlify structured sidebar · Stripe Docs density
+
+## Feel
+Warm cream paper, narrow reading column, generous code blocks. A sidebar of structure on the left, prose-and-code in the middle, an "on this page" rail on the right. Signal-color links are the only chrome. The whole surface is a documentation site that respects your time — every page answers a question, and the answer is one ctrl-F away.
+
+## Reference brands
+- **Linear Docs** → warm cream paper + Inter sans + sidebar-then-content. The canonical 2024+ docs feel.
+- **Cal.com Docs** → warm cream + DM Sans + clean rounded code blocks. Open-source warmth done right.
+- **Plausible Docs** → light paper + JetBrains Mono code + simple two-pane nav. Less structure, more clarity.
+- **Mintlify** → clean white + structured sidebar + tab-switchable code blocks. The framework standard.
+- **Stripe Docs** → cream + dense reference + multi-language code switching. The gold standard for API reference density.
+
+## Tokens
+All tokens live in `src/index.css` as HSL triples. Every token's `from:` comment names its brand origin. Do not introduce numbered or generic tokens — if a new color is needed, name a purpose (sidebar, callout, anchor-highlight) and a brand it traces to.
+
+Surface stack is **warm cream paper** (background) → **pure white card** (content panels, code-block frames) → **warm paper deeper** (secondary, sidebar) → **muted** (code-block fill). Depth comes from a single soft shadow utility, never heavy elevation. The signal-violet is the only chromatic accent — links, focus rings, primary CTA, current-page sidebar state.
+
+Brand tokens: `--paper`, `--ink`, `--signal` (the violet), `--callout-info`, `--callout-warn`, `--callout-success`. Admonitions (`> info:`, `> warning:`, `> tip:`) are styled with their own border-left + tint, but the docs body itself stays paper-and-ink.
+
+## Typography
+- **Display:** Inter. Same family as body — Linear/Cal.com convention. Hierarchy comes from weight (700 for h1, 600 for h2-h3) and scale, not from face change. Tracking `-0.015em` for headings.
+- **Body:** Inter. Base **16px** with line-height **1.65** — comfortable for long-form docs reading.
+- **Mono:** JetBrains Mono. Code blocks, inline code, kbd hints, file paths.
+
+H1 uses `clamp(1.875rem, 3.5vw, 2.75rem)` — **docs h1 is restrained on purpose**. The content is the headline; an oversized title wastes the first scroll. Numbers always use tabular figures.
+
+Inline code (`<code>`) gets `bg-muted`, no border, `0.25rem` radius, `px-1.5 py-0.5`, JetBrains Mono at 0.9em. **Inline code is the most touched element in docs — get the size and contrast right or the page reads broken.**
+
+## Spacing
+- **Outer container:** `max-w-7xl px-5 lg:px-8` — holds the three-pane shell (sidebar / content / on-this-page).
+- **Inner prose column:** constrained to `max-w-3xl` inside the content pane — 768px reading width, magazine-derived.
+- **Section padding tiers:**
+  - Hero: `pt-12 pb-8 lg:pt-16 lg:pb-12` (small — content begins fast in docs)
+  - Default: `py-10 lg:py-14`
+  - Tight: `py-6 lg:py-8`
+- **Allowed scale values:** 4 6 8 12 16 20 24 32 40 48 64 80 96. Medium density — reading rhythm, not magazine breathing.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier. Pure white IS allowed here (it's `--card`, the content-panel surface that sits on warm cream paper) — but pure black is forbidden; `--ink` (deep blue-ink) replaces it. The violet signal is the one chromatic accent in the chrome — adding a second link color or accent breaks the discipline.
+
+## Radius
+`--radius: 0.5rem` (8px). Linear/Cal.com modern-soft, never pillow. **Pills are allowed** for version badges (`v2.4.1`), "new" / "beta" / "deprecated" labels, and language switchers on code blocks — docs convention. Never a pill button.
+
+## Shadows
+**Soft style.** Three utilities ship:
+- `.card-soft` — 1px + 4px stack, very light. For elevated feature cards.
+- `.code-frame` — inset 1px `--border`. The default code-block frame.
+- `.popover-soft` — 8px + 2px stack. For dropdowns, search results, the command palette.
+
+No heavy elevation. No glow. Docs surfaces sit nearly flat — depth is for affordance, not flourish.
+
+## Motion
+Docs motion is **near-invisible by design** — three keyframes, all reactive to user action, none ambient.
+
+- `fade-in` — 200ms once. Page transitions, modal entrance. Must feel instant; docs reads break if pages stage themselves in.
+- `highlight-anchor` — 1500ms once. When the user clicks a `#heading` link, the target heading gets a violet `accent` wash that fades to transparent. The page tells you "you arrived at the right place."
+- `copy-confirm` — 1200ms once. The "copied!" toast on the code-block copy button. The only motion the user actively triggers — and the only one that earns a brief loop.
+
+No ambient motion. No marquee. No parallax. Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — anchor highlight becomes a brief static violet underline; copy-confirm becomes a static text swap.
+
+## Component patterns
+- **Buttons:** ghost-default (1px `--border`, foreground text, hover `bg-secondary`). **Primary = solid `--primary` fill** (Linear-violet, paper text) — reserved for the hero "Get started" and the primary action inside callout cards. Tertiary = inline text link, `--primary` color, underline on hover with 4px offset.
+- **Sidebar nav items:** styled links, NOT buttons. Hover = `bg-accent` (violet wash). Current page = `text-foreground font-medium` + `bg-accent`. Nested levels use a 2px `--border` left rule and indent of 16px.
+- **Cards:** soft `0.5rem` corners, hairline `--border`, `bg-card` (white on cream). `.card-soft` shadow for feature highlights only. Padding `p-5 lg:p-6`.
+- **Callouts (admonitions):** border-left 3px in `--callout-{info|warn|success}` + matching tinted background at 0.06 alpha + icon glyph. No full border — the left rule is the affordance. `> info:`, `> warning:`, `> tip:`, `> danger:` are the four allowed types.
+- **Inputs:** full box, 1px `--border`, `bg-card`, `0.5rem` radius. Search input in the top bar has a leading magnifying-glass and a trailing `Ctrl K` kbd hint. Focus = 2px `--ring` with 1px offset.
+- **Code blocks:** `.code-frame` inset border, `bg-card` or `bg-muted` (per theme), `0.5rem` radius. **Filename strip on top** (mono, `--muted-foreground`, `text-xs`). **Copy button** top-right corner, ghost style, 16px icon. **Language tabs** for multi-language examples (Linear/Stripe convention) — pill row above the code, active tab gets `--primary` underline.
+- **Tables:** zebra-striping disabled. Row separator = 1px `--border` bottom. Header row = `font-medium`, `text-muted-foreground`, `text-xs uppercase tracking-wide`. **Reference tables (prop name / type / default / description) are the docs workhorse — get the column rhythm right and the page reads itself.**
+- **`kbd` element:** 1px `--border`, `bg-card`, `0.375rem` radius, mono font, `text-xs`, `px-1.5 py-0.5`, slight bottom-shadow to feel keycap-like.
+
+## Recommended rich media
+Devtool-Docs is **text-and-code first** — images appear only when they answer a question prose cannot.
+
+1. **Architecture diagrams** — same vocabulary as Devtool-CLI's diagrams. Geometric, monochrome (`--ink` + `--muted-foreground`), one `--signal` highlight per diagram. Built in Excalidraw or Figma with the docs token palette. Embedded inline as SVG so they respond to light/dark theme.
+2. **Annotated screenshots** — when documenting a dashboard or UI feature. Crop tight, no chrome, with `--signal`-color numbered circles (1, 2, 3) keyed to a list below. **Never a full-window screenshot with browser chrome** — wastes pixels and dates fast.
+3. **Inline figures** — small SVG-only illustrations (a sequence diagram, a request lifecycle). Hand-drawn-feel acceptable (Excalidraw's default), CAD-clean acceptable (Figma) — pick one and stay consistent.
+
+**AI tool recommendations:** **Excalidraw** for diagrams, exported as SVG with the docs theme tokens applied. **CleanShot X** or **Shottr** for annotated screenshots — both have built-in numbered-circle annotations. **Mermaid** for sequence and flow diagrams that need to live in markdown source. Avoid Midjourney/Flux for docs — generated imagery is wrong-context for documentation.
+
+**Aspect ratios:** SVGs are intrinsic. Screenshots are 16:9 or 4:3, never portrait. Diagrams are usually wider than tall (request flows, architectures).
+
+**Video:** rarely. If used, an embedded YouTube player for a tutorial video on a getting-started page — never autoplay, always with a poster image.
+
+**Performance:** the docs are read on slow conference Wi-Fi, on phones, on flights. Inlined SVG is free; raster screenshots ≤60 KB AVIF each at 1600w. **Total page weight under 250 KB on a typical reference page** — search and navigation must feel instant.
+
+**Avoid:** stock illustration of "developer at laptop," gradient meshes, 3D isometric anything, animated GIFs (use video or static), screenshots with personal data not redacted, screenshots dated by a visible timestamp or version number that will rot.
+
+**Accessibility:** every image needs alt text that conveys the answer the image gives, not its appearance. *"Diagram: a request from the client passes through edge → origin → database, and the response returns via cache."* Code blocks must remain real `<pre><code>` — never images of code. Tables must use real `<table>` with `<th scope>` so screen readers narrate column headers correctly.
+
+## Component families
+None at install time. Expected first families as the project grows: `sidebar-nav`, `prose-typography`, `code-block`, `callout`, `reference-table`, `command-k-search`, `version-switcher`.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.22)` background, foreground text — soft violet highlight on the cream paper.
+- **Focus ring:** `2px solid hsl(var(--ring))` with 1px offset — visible, keyboard-first, never loud.
+- **Scrollbar:** thin. Track is `--paper`; thumb is `--border`. Hover thumb `--muted-foreground`. The sidebar gets its own scrollbar; the right rail does not (it's short enough not to need one).
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands, add it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/devtool-docs/tokens.ts

@@ -0,0 +1,177 @@
+import type { Direction } from "../schema";
+
+export const devtoolDocs: Direction = {
+  name: "devtool-docs",
+  ethos:
+    "Linear Docs cream-and-Inter · Cal.com DM-Sans clarity · Plausible JetBrains-Mono code · Mintlify structured sidebar · Stripe Docs density",
+  references: [
+    { brand: "Linear Docs", trait: "warm cream paper + Inter sans + sidebar-then-content reading pattern" },
+    { brand: "Cal.com Docs", trait: "warm cream + DM Sans + clean rounded code blocks" },
+    { brand: "Plausible Docs", trait: "light paper + JetBrains Mono code + simple two-pane nav" },
+    { brand: "Mintlify", trait: "clean white + structured sidebar + tab-switchable code" },
+    { brand: "Stripe Docs", trait: "cream + dense reference + multi-language code switching" },
+  ],
+  feel:
+    "Warm cream paper, narrow reading column, generous code blocks. A sidebar of structure on " +
+    "the left, prose-and-code in the middle, a 'on this page' rail on the right. Signal-color " +
+    "links are the only chrome. The whole surface is a documentation site that respects your " +
+    "time — every page answers a question, and the answer is one ctrl-F away.",
+
+  fonts: {
+    display: {
+      family: "Inter",
+      fallback: ["DM Sans", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+      from: "Linear/Cal.com docs sans — same family display and body, hierarchy by weight and scale",
+      googleFont: "Inter",
+      weights: [400, 500, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["DM Sans", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+      from: "Linear/Mintlify body sans — neutral, optimized for long-form reading at 16px",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["IBM Plex Mono", "Fira Code", "ui-monospace", "SFMono-Regular", "Menlo", "monospace"],
+      from: "Plausible/Stripe Docs code face — readable at code-block sizes, ligature-friendly",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.015em",      // Inter at heading scale wants a hair tighter — Linear/Vercel convention
+    bodyTracking: "0",
+    fontFeatureSettings: '"ss01", "cv11", "calt", "tnum"',
+    h1ScaleClamp: "clamp(1.875rem, 3.5vw, 2.75rem)",  // docs h1 is restrained — content is the headline
+    bodyBaseSize: "1rem",             // 16px — comfortable for long-form docs reading
+    bodyLineHeight: "1.65",
+  },
+
+  colors: {
+    background: { hsl: "36 30% 97%", from: "Linear/Cal.com warm cream paper — barely-there warmth, not white" },
+    foreground: { hsl: "220 22% 14%", from: "deep ink — Linear/Stripe Docs body color, never pure black" },
+    card: { hsl: "0 0% 100%", from: "card surface — pure white sits on the cream paper" },
+    popover: { hsl: "0 0% 100%", from: "popover/dropdown surface — same as card" },
+    primary: { hsl: "260 70% 56%", from: "Linear-violet signal link — restrained accent, used for links and primary actions" },
+    primaryForeground: { hsl: "36 30% 97%", from: "paper on violet" },
+    secondary: { hsl: "36 22% 93%", from: "warm paper, one tier deeper — sidebar surface, code-block background partner" },
+    secondaryForeground: { hsl: "220 22% 14%", from: "ink on warm paper" },
+    muted: { hsl: "36 18% 91%", from: "code-block fill — warm gray that sits on cream without fighting it" },
+    mutedForeground: { hsl: "220 12% 42%", from: "metadata text — file paths, last-updated stamps, secondary nav" },
+    accent: { hsl: "260 70% 96%", from: "violet hover wash — sidebar item hover, callout tint" },
+    accentForeground: { hsl: "260 65% 32%", from: "deep violet text on the wash" },
+    border: { hsl: "220 14% 88%", from: "hairline rule — sidebar divider, code-block frame, table row" },
+    input: { hsl: "220 14% 88%", from: "same as border — single hairline language" },
+    ring: { hsl: "260 70% 56%", from: "primary violet — focus ring matches link accent" },
+    destructive: { hsl: "0 70% 48%", from: "callout-warning red — danger admonition only, not decoration" },
+    destructiveForeground: { hsl: "36 30% 97%", from: "paper on warning" },
+    brand: {
+      paper: { hsl: "36 30% 97%", from: "the warm cream — semantic background, also content-area paper" },
+      ink: { hsl: "220 22% 14%", from: "the deep ink — semantic foreground, also prose body" },
+      signal: { hsl: "260 70% 56%", from: "Linear-violet signal — the canonical docs link/CTA color" },
+      "callout-info": { hsl: "200 88% 50%", from: "info admonition blue — > info: callouts" },
+      "callout-warn": { hsl: "38 92% 50%", from: "warning admonition amber — > warning: callouts" },
+      "callout-success": { hsl: "150 60% 42%", from: "success admonition green — > tip/note: callouts" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96],   // medium-low density — reading rhythm
+    containerMax: "max-w-7xl",        // outer shell holds 3 panes; inner prose column is constrained separately
+    containerPadding: "px-5 lg:px-8",
+    sectionPadding: {
+      hero: "pt-12 pb-8 lg:pt-16 lg:pb-12",       // docs heroes are small — content begins fast
+      default: "py-10 lg:py-14",
+      tight: "py-6 lg:py-8",
+    },
+  },
+
+  radius: {
+    base: "0.5rem",                   // 8px — Linear/Cal.com docs standard, modern-soft
+    pillsAllowed: true,               // version pills, status pills, "new" badges — docs convention
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "card-soft":
+        "0 1px 2px 0 hsl(220 22% 14% / 0.04), " +
+        "0 4px 12px 0 hsl(220 22% 14% / 0.04)",
+      "code-frame":
+        "inset 0 0 0 1px hsl(var(--border))",
+      "popover-soft":
+        "0 8px 24px 0 hsl(220 22% 14% / 0.08), " +
+        "0 2px 4px 0 hsl(220 22% 14% / 0.04)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 200,
+      loop: 1500,
+      ambient: 0,
+    },
+    keyframes: {
+      "fade-in": {
+        css:
+          "from { opacity: 0; }\n" +
+          "to { opacity: 1; }",
+        defaultDuration: 200,
+        iteration: "once",
+        purpose: "page transition and modal entrance — docs reveal must be near-instant, never theatrical",
+      },
+      "highlight-anchor": {
+        css:
+          "0% { background-color: hsl(var(--accent)); }\n" +
+          "100% { background-color: hsl(var(--accent) / 0); }",
+        defaultDuration: 1500,
+        iteration: "once",
+        purpose: "anchor-link landing — the violet wash fades to signal you arrived at the right heading",
+      },
+      "copy-confirm": {
+        css:
+          "0% { opacity: 0; transform: translateY(4px); }\n" +
+          "20%, 80% { opacity: 1; transform: translateY(0); }\n" +
+          "100% { opacity: 0; transform: translateY(-4px); }",
+        defaultDuration: 1200,
+        iteration: "once",
+        purpose: "'copied!' toast on code-block copy button — the only motion the user actively triggers",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Default = ghost: 1px --border, foreground text, hover bg-secondary. " +
+      "Primary = solid --primary fill (Linear-violet) with paper text — reserved for hero 'Get started' and primary CTA in callouts. " +
+      "Tertiary = inline text link, --primary color, underline on hover with 4px offset. " +
+      "Nav items in the sidebar are NOT buttons — they are styled links with hover bg-accent and current-page foreground-color.",
+    card:
+      "Soft 0.5rem corners, hairline border (--border), bg-card (pure white on cream). " +
+      "Card-soft shadow utility for elevated cards (feature highlights). " +
+      "Padding p-5 lg:p-6. Callout cards use callout-info/warn/success border-left 3px instead of full border.",
+    input:
+      "Full box, 1px --border, bg-card, 0.5rem radius. " +
+      "Search input in the top bar has a leading magnifying-glass icon and 'Ctrl K' kbd hint on the right. " +
+      "Focus = 2px --ring with 1px offset; visible but not loud.",
+    cta:
+      "Hero: solid --primary fill rectangle, 'Read the quickstart' style copy. " +
+      "Card CTAs are text-links with arrow glyph (→) inline. " +
+      "Callout CTAs use ghost buttons in the callout's tint family.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/editorial/THEME.md

@@ -0,0 +1,129 @@
+# Editorial
+
+> Photography-first quarterly register — off-white gallery canvas at
+
+**Slug:** `editorial` — **Surface:** web — **Density:** airy
+
+## Influence
+
+Fine-art photography quarterlies (Aperture at its most spartan,
+Foam Magazine, IMA Magazine, The Photographic Journal). Gallery
+publication design (Gagosian catalogues, David Zwirner books at
+the type-restrained end). Distinct from other Family C bases
+through PHOTOGRAPHY-AS-PRIMARY-DESIGN-ELEMENT — the image
+dominates the composition; type is reduced to caption weight.
+
+
+## Signature move
+
+Off-white gallery canvas at #fafafa — the register's non-negotiable
+base (deliberately NOT pure white, deliberately NOT claude-cream,
+deliberately NOT warm cream). Cold near-black ink at #0a0a0a. ONE
+vermilion accent at #b81a1a used ONLY for the reading-progress bar
+and hover states on essay-index rows. Sharp corners everywhere.
+Composition begins with a MINIMAL MASTHEAD — small Söhne-style
+wordmark left (HELIOGRAPH, 20px, uppercase, letter-spacing tight),
+center nav row (6-8 links, 13px), right-column shows ISSUE NAMEPLATE
+MARK (small caps "ISSUE 04 · MARCH 2026", 10px 0.14em tracked). Below
+the masthead: a FULL-BLEED HERO PHOTOGRAPH occupying the entire
+hero viewport (78-90vh) with a subtle bottom-gradient scrim; overlaid
+on the bottom-left are the essay title (24-32px display sans mixed
+case) + photographer credit line ("Photographs by Ren Havelock",
+Newsreader italic 14px). Below the hero: a NUMBERED TABLE OF
+CONTENTS with 6-10 numbered essay entries — each row is "01 · Essay
+title · photographer name" in a horizontal layout with a hairline
+bottom border and the vermilion hover-underline. Below the ToC: the
+FEATURED ESSAY block, which alternates SEQUENTIAL PHOTOGRAPH FRAMES
+at varied aspect ratios (3:2 wide, 4:5 tall, 1:1 square) with tiny
+caption strips beneath each frame ("PLATE 07 / 12 · location, year").
+A drop-cap opens the accompanying body text. Between essays: a PULL
+QUOTE BAND — full-width italic Newsreader at 40-56px display size
+centered on a cream inverted band. A CONTRIBUTOR BIO GRID follows
+with 4-6 headshots (140x140 sharp squares) + micro-bio (100 words
+max in body serif). A SUBSCRIBE/ORDER STRIP with a horizontal input
++ a black filled submit button. Footer opens with a giant
+wordmark repeat, colophon body block, and utility link column.
+Six bespoke SVG marks (issue-number seal, plate-number bracket,
+camera-shutter icon, photographer's dot mark, subscribe-form arrow,
+colophon separator glyph) are dropped as PUNCTUATION at specific
+compositional moments — never as a uniform icon row.
+
+## Palette
+
+- **bg:** `#fafafa`
+- **surface:** `#ffffff`
+- **ink:** `#0a0a0a`
+- **accent:** `#b81a1a`
+
+## Typography
+
+- **Display:** A precise geometric grotesk with quirky wide letterforms — the reference uses a Söhne / Grafik / Founders Grotesk / GT America family. Free fallback stack — "Neue Haas Grotesk Display", "Space Grotesk", "Inter", system-ui, sans-serif. Weight 500-700, mixed case for section titles + photographer names, UPPERCASE only for the nameplate wordmark. Top of scale ~48px for essay titles, 28px for section headings — deliberately RESTRAINED so the photograph carries the drama. Small caps at 10-11px for micro-labels (issue number, date, photographer credit).
+- **Body:** The reference uses a text-optimized serif for essay body copy — Newsreader / Newzald / Domine / EB Garamond family. Free fallback stack — "Newsreader", "Domine", "Georgia", serif. Weight 400 for body, 400 italic for photographer credit lines. 14-15px body copy, line-height 1.55. Small captions at 11-12px in the display sans, not the body serif.
+- **Mono:** none. Editorial is a consumer publication surface. Mono has no role.
+- **Scale:** 1.25 (perfect fourth — restrained, so composition and photography carry the drama)
+
+## Motion
+
+Ships live in the section renderer (no external dependencies):
+1. Hero photograph fade-in — the full-bleed cover image opens from opacity 0 + scale(1.02) to opacity 1 + scale(1) over 1400ms cubic-bezier(0.23,1,0.32,1) on first paint.
+2. Progressive image reveal — every photograph on the page transitions from blur(8px) + opacity 0.3 → blur(0) + opacity 1 on IntersectionObserver at 25% visibility, 900ms cubic-bezier.
+3. Caption strip fade — each photograph's tiny caption strip fades in 200ms AFTER its photograph finishes revealing, so the caption reads AFTER the image is seen.
+4. Sticky reading progress — a thin horizontal bar in the vermilion accent grows across the top of the viewport as the user scrolls, indicating essay progress. Fixed position, 2px height.
+5. Contributor headshot reveal — bios fade in with 100ms per-bio stagger + 500ms cubic-bezier on IntersectionObserver visibility.
+6. Small essay-index hover — each entry in the numbered table of contents shifts the horizontal accent line from 0 → 100% width over 240ms cubic-bezier on hover, then reverses on hover-out.
+7. Nav shrink on scroll — the top masthead reduces from 88px → 52px height after 200px of scroll, transitioning font-size and padding over 300ms cubic-bezier.
+8. prefers-reduced-motion: reduce — hero photo shows at final scale; progressive image reveal disabled (photos show at final blur:0); caption strips show immediately; progress bar still tracks; contributor bios show all at once; hover accent-line still animates (interaction feedback); nav still shrinks (state change).
+
+Motion character: gallery-quiet, precise, restrained. Custom cubic-bezier(0.23,1,0.32,1) for all reveals. The register lives in fine-art publication, not marketing web — motion should feel like turning a page in a printed quarterly, not like a SaaS product tour.
+
+
+## Imagery
+
+FULL-BLEED photography as the primary compositional element —
+the reference uses fine-art documentary + portrait + landscape
+photography shot at gallery/exhibition-print quality. FPO imagery
+here should read as intentional photography (composed framing,
+directional light, considered subject) — never generic stock, never
+gradient blobs, never radial glow fallbacks. Every photograph is a
+SHARP-EDGED rectangle with no border, no rounded corner, no drop
+shadow. Caption strips beneath photographs use tiny sans-serif
+labels (10-11px) with the PLATE number, subject, and year. NO stock
+photography that reads as marketing-stock. NO 3D-rendered "photo"
+placeholders. NO warm-glow gradient fills.
+
+## Best for
+
+- Fine-art photography journals and photobook publishers
+- Small-run print quarterlies and independent magazines
+- Gallery + museum publication websites (catalogues, exhibition sites)
+- Photographer portfolios that need editorial framing
+- Architecture / interior-design publications with photography focus
+- Documentary photo essay platforms and photojournalism sites
+
+## Reject if
+
+_Director grades each of the following as a pass/fail check. Any violation blocks the theme._
+
+- Warm cream canvas — Editorial's canvas is #fafafa (off-white gallery ground), deliberately COOLER and MORE NEUTRAL than the warm-cream family. Warm cream would collapse into a literary-quarterly register (which is a different theme).
+- Multi-color accent palette — the whole register's move is ONE vermilion accent doing everything (progress bar, hover underline, issue-number mark). Introducing amber / green / any second accent collapses the discipline.
+- Rounded corners on cards, buttons, inputs, photograph frames — 0px radius everywhere. The gallery-print register is uncompromising on sharp edges.
+- Uniform 3-column photograph grid — sequential photo essays use VARIED aspect ratios and offsets. Uniform grids collapse into stock-photo-gallery slop.
+- Big monumental hero display type — Editorial's type stays RESTRAINED. The photograph carries the drama; type is caption weight. Any hero-sized (80px+) display type overrides the photograph and collapses the register.
+- Sans-serif body copy — body must be a text-optimized serif (Newsreader / Domine / EB Garamond). Sans body reads as marketing-web, not publication.
+- Serif display type — display face MUST be a precise geometric grotesk (Söhne / Grafik / Space Grotesk fallback). Serif display collapses into a literary register (which is a different theme).
+- Drop shadows or glassmorphism on photographs — every photograph sits FLAT against the canvas with no shadow, no border. Frames are the AI-tell for placeholder imagery.
+- Mono-caps eyebrow labels outside the two legitimate use sites — ISSUE NAMEPLATE MARK (masthead) and PLATE-NUMBER STRIP (photo caption) are the ONLY permitted mono-caps uses. Any additional 'SECTION · X' / 'CHAPTER · Y' / 'READ TIME' plate is slop-blocklist violation.
+- Cycling headline words / auto-advancing sliders — no marketing motion. The photograph is STATIC, the pull quote is STATIC. Motion here is reveal-on-scroll + reading-progress bar + hover accent-line.
+
+## Banned defaults (inherited + theme-specific)
+
+- claude-cream (#F4F1EA + serif + #D97757) — this theme's canvas is off-white gallery ground #fafafa, distinct from claude-cream.
+- void+acid (near-black bg + single bright acid-green or vermilion accent) — this theme's canvas is LIGHT gallery ground with a saturated vermilion accent used SPARINGLY, not a void+acid register.
+- broadsheet-on-noneditorial (hairline rules + zero border-radius + newspaper columns on non-editorial content) — Editorial IS an editorial context so hairline rules and 0px radius are legitimate.
+- tech-bro purple gradient (purple→blue gradient hero + centered headline + double CTA + emoji icons)
+- uniform-everything (identical padding + one weight of one sans doing every job + rounded-2xl + shadow-md cards)
+- monumental-type-primary (Editorial's whole discipline is PHOTOGRAPHY-PRIMARY / TYPE-SECONDARY. Making the display type the compositional anchor inverts the register into a monumental-editorial base.)
+- sans-body-serif-display (Editorial pairs SERIF BODY with SANS DISPLAY — the opposite of the marketing-web default. Flipping this pairing collapses the register.)
+- photo-gallery-3col-grid (photograph sequences use VARIED aspect ratios and rhythmic offsets. Uniform 3-column photo grids are the AI-tell for stock-photo-gallery slop.)
+- multi-accent-punctuation (ONE vermilion accent doing 100% of the punctuation work. Introducing green / blue / amber as a secondary punctuation accent collapses the discipline.)
+- big-hero-marketing-copy (Editorial's essay-title overlay stays SMALL and RESTRAINED — this is a magazine cover, not a landing page hero. Any 80px+ hero-marketing display type collapses the register.)

package/themes/editorial/audit.log.jsonl

@@ -0,0 +1,2 @@
+{"slug":"editorial","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T23:42:51.195Z","dismissed":[]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T23:42:51.205Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":false,"failures":[{"rule":"AVOID-02","severity":"block","evidence":"Rule \"Multi-color accent palette — the whole register's move is ONE vermilion accent doing everything (progress bar, hover underline, issue-number mark). Introducing amber / green / any second accent collapses the discipline.\" — Palette exposes a second saturated accent alongside vermilion: `\"accent\": \"#b81a1a\"` AND `\"secondary\": \"#1e40af\"` (a saturated blue) in both tokens.ts and tailwind.snippet.ts colors. The rule requires ONE vermilion accent doing everything; introducing a second accent (here a blue secondary) collapses the discipline."}]},"ran_at":"2026-07-04T23:43:26.955Z","dismissed":[]}],"overall":"BLOCK","ran_at":"2026-07-04T23:42:51.195Z"}
+{"slug":"editorial","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T23:43:48.099Z","dismissed":[]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T23:43:48.109Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T23:44:21.062Z","dismissed":[]},{"gate":"anchor-compare","verdict":{"passed":true,"failures":[],"skipped":"Family C rubric.md missing at /Users/mattfrischer/Taste/site/design-system/golden-set/C/rubric.md — anchor-compare skipped."},"ran_at":"2026-07-04T23:44:21.063Z","dismissed":[]}],"overall":"PASS","ran_at":"2026-07-04T23:43:48.099Z"}

package/themes/editorial/tailwind.snippet.ts

@@ -0,0 +1,15 @@
+// Generated from theme.yml. Merge into your tailwind.config.ts under theme.extend.
+// slug: editorial
+export const editorialTailwindExtend = {
+  colors: {
+    bg: "#fafafa",
+    surface: "#ffffff",
+    ink: "#0a0a0a",
+    accent: "#b81a1a",
+  },
+  fontFamily: {
+    display: ["A precise geometric grotesk with quirky wide letterforms — the reference uses a Söhne / Grafik / Founders Grotesk / GT America family. Free fallback stack — \"Neue Haas Grotesk Display\", \"Space Grotesk\", \"Inter\", system-ui, sans-serif. Weight 500-700, mixed case for section titles + photographer names, UPPERCASE only for the nameplate wordmark. Top of scale ~48px for essay titles, 28px for section headings — deliberately RESTRAINED so the photograph carries the drama. Small caps at 10-11px for micro-labels (issue number, date, photographer credit)."],
+    body: ["The reference uses a text-optimized serif for essay body copy — Newsreader / Newzald / Domine / EB Garamond family. Free fallback stack — \"Newsreader\", \"Domine\", \"Georgia\", serif. Weight 400 for body, 400 italic for photographer credit lines. 14-15px body copy, line-height 1.55. Small captions at 11-12px in the display sans, not the body serif."],
+    mono: ["none. Editorial is a consumer publication surface. Mono has no role."],
+  },
+};