@stylecrib/cli 0.3.1 → 0.3.3

package/themes/news-tech/THEME.md

@@ -0,0 +1,75 @@
+# Design Direction — News-Tech
+
+## Ethos
+Stratechery long-form authority · The Information paywall gravity · Pragmatic Engineer technical depth · Ben Thompson essayist voice · Platformer independent-publisher restraint
+
+## Feel
+Cream paper. Business-formal serif at modest sizes. The page wears its paid-newsletter authority quietly — no marketing chrome, no SaaS pricing pillars. A single feature article gets the masthead; subscriber tiers live inline in prose, not in a tile grid. Authority comes from byline gravity and content density.
+
+## Reference brands
+- **Stratechery** → essayist single-author column, cream paper + business serif.
+- **The Information** → paid-newsletter tier explanation, executive-interview row.
+- **Pragmatic Engineer** → technical-depth feature articles, subscriber-tier breakdown.
+- **Ben Thompson** → Daily Update, Stratechery Plus voice — authoritative analysis.
+- **Platformer** → independent-publisher Substack restraint, sober palette.
+
+## Tokens
+HSL triples in `src/index.css`. Brand tokens: `--ink`, `--cream`, `--editorial-blue`, `--ink-soft`, `--subscriber-gold`. Foreground is a deep business-formal navy-black (`hsl(220 24% 14%)`); background is Stratechery cream (`hsl(38 24% 95%)`).
+
+Primary is **editorial blue** (`hsl(215 55% 32%)`) — used for inline links and the single Subscribe CTA. `--subscriber-gold` (`hsl(36 60% 42%)`) is a subtle gold accent for paid-tier labels and "PLUS" marks beside bylines — never used as a button fill.
+
+## Typography
+- **Display:** Lora (Stratechery-essay serif). Modest sizes — not magazine-grand. Tracking `-0.012em`.
+- **Body:** Source Serif Pro. 17px / `line-height: 1.68` — essay-comfortable for 4000-word reads.
+- **Mono:** JetBrains Mono. Datelines (`JUNE 24, 2026`), read-times (`14 MIN READ`), tag pills (`STRATEGY`, `ANTITRUST`), subscriber-tier labels.
+
+H1 uses `clamp(2rem, 4.5vw, 3.5rem)` — modest essay-headline scale, deliberately *not* magazine.
+
+## Spacing
+- **Container:** `max-w-5xl px-6 lg:px-10` — wider than editorial (room for list rows and interview grid), narrower than tabloid.
+- **Section padding:** hero `pt-16 pb-12 lg:pt-24 lg:pb-16`; default `py-16 lg:py-24`; tight `py-10 lg:py-14`.
+- **Scale:** 4 6 8 12 16 20 24 32 40 48 64 96.
+
+## Color
+No hex in components. Five tokens carry the entire page: ink, cream, editorial-blue, ink-soft, subscriber-gold.
+
+## Radius
+`--radius: 0.125rem` — very subtle, business-formal. Sharp print convention softened just enough to feel modern web. Pills allowed *only* for tag labels (`STRATEGY` / `ANTITRUST` / `MARKETS`) — never for buttons.
+
+## Shadows
+Minimal. Two utilities: `.panel-rule` (1px list-row divider) and `.tier-card` (inset rules above + below subscriber-tier panels). No drop shadows, no glows.
+
+## Motion
+Single keyframe: `fade-rise` (700ms). The only entrance — restrained, business-formal. Easing `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` honored.
+
+## Component patterns
+- **Buttons:** text-link CTAs in `--editorial-blue`, underline on hover. The single Subscribe is solid: `--editorial-blue` bg + `--cream` fg, 0.125rem radius. **No marketing-grade gradient buttons.**
+- **Cards:** hairline top + bottom rule, no fill differentiation. Tag-pill chips in mono uppercase. Title in Lora, byline in mono small caps with `--subscriber-gold` "PLUS" mark for paid-tier authors.
+- **Inputs:** border-bottom only. Email-capture is the canonical input — every page should make it findable.
+- **CTA links:** text-link in `--editorial-blue`, underline on hover. **Never SaaS pricing pillars.**
+
+## Bespoke section
+Three blocks composed as a paid-newsletter author page:
+1. **Subscription-feature card** — inline subscriber-tier explanation written as prose with two checklists ("Free" / "Plus"), not a 3-pillar SaaS pricing grid. Single Subscribe CTA + reassuring fine-print.
+2. **Recent articles list** — 5 rows, each: date (mono caps) · tag pill · title (Lora) · read-time (mono caps).
+3. **Executive-interview row** — 3 interviews: interviewee name + role, interviewer byline, mono-caps date and "PLUS" gold mark.
+
+The composition refuses generic SaaS feature cards. Density and gravity — the page should look like *Stratechery's About page*, not like a startup landing page.
+
+## Recommended rich media
+Sparse. The page is text-first. A single small headshot per executive-interview row is permitted (3:2, neutral background, professional photography). No hero photography on most pages. Charts and figures live in essay bodies — not on the landing.
+
+**AI tool recommendations:** Avoid Midjourney for this direction. Headshots should be sourced from actual photography. Charts use simple SVG / line-only treatments — no 3D, no gradient, no glow.
+
+**Avoid:** SaaS-pricing pillars, three-reasons grids, generic feature cards, gradient hero backgrounds, glassmorphic anything, marketing illustration, animated GIFs, drop shadows, oversized hero photos.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.18)`.
+- **Focus ring:** `1px solid hsl(var(--ring))`.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction.

package/themes/news-tech/tokens.ts

@@ -0,0 +1,149 @@
+import type { Direction } from "../schema";
+
+// Note: "news-tech" is not yet in the Direction["name"] enum.
+// The schema is closed; until it is extended this file casts the name.
+
+export const newsTech: Direction = {
+  name: "news-tech" as Direction["name"],
+  ethos: "Stratechery long-form authority · The Information paywall gravity · Pragmatic Engineer technical depth · Ben Thompson essayist voice · Platformer independent-publisher restraint",
+  references: [
+    { brand: "Stratechery", trait: "essayist single-author column, cream paper + business serif" },
+    { brand: "The Information", trait: "paid-newsletter tier explanation, executive-interview row" },
+    { brand: "Pragmatic Engineer", trait: "technical-depth feature articles, subscriber-tier breakdown" },
+    { brand: "Ben Thompson", trait: "Daily Update, Stratechery Plus voice — authoritative analysis" },
+    { brand: "Platformer", trait: "independent-publisher Substack restraint, sober palette" },
+  ],
+  feel:
+    "Cream paper. Business-formal serif at modest sizes. The page wears its paid-newsletter authority quietly — " +
+    "no marketing chrome, no SaaS pricing pillars. A single feature article gets the masthead; subscriber tiers " +
+    "live inline in prose, not in a tile grid. Authority comes from byline gravity and content density.",
+
+  fonts: {
+    display: {
+      family: "Lora",
+      fallback: ["Charter", "Source Serif Pro", "Georgia", "serif"],
+      from: "Stratechery/Pragmatic-Engineer essay-headline serif — business-formal, not editorial-grand",
+      googleFont: "Lora",
+      weights: [400, 500, 600, 700],
+    },
+    body: {
+      family: "Source Serif Pro",
+      fallback: ["Charter", "Iowan Old Style", "Georgia", "serif"],
+      from: "long-form business-prose serif — readable at 17px for 4000-word essays",
+      googleFont: "Source+Serif+Pro",
+      weights: [400, 600, 700],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "datelines, read-times, tag pills, subscriber-tier labels",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500, 600],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.012em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"liga", "onum", "tnum"',
+    h1ScaleClamp: "clamp(2rem, 4.5vw, 3.5rem)",   // modest — essay-headline scale, not magazine-cover
+    bodyBaseSize: "1.0625rem",                     // 17px essay-comfortable
+    bodyLineHeight: "1.68",
+  },
+
+  colors: {
+    background: { hsl: "38 24% 95%", from: "Stratechery cream paper stock — warm, business-formal" },
+    foreground: { hsl: "220 24% 14%", from: "deep ink — business-formal navy-black" },
+    card: { hsl: "38 26% 97%", from: "lighter cream card — subscriber-tier panels, executive-interview rows" },
+    popover: { hsl: "38 26% 97%", from: "same as card" },
+    primary: { hsl: "215 55% 32%", from: "Platformer/Stratechery deep editorial blue — link color and accent" },
+    primaryForeground: { hsl: "38 24% 95%", from: "cream on blue" },
+    secondary: { hsl: "38 18% 90%", from: "deeper cream — recent-articles list zebra rows" },
+    secondaryForeground: { hsl: "220 24% 14%", from: "ink on cream" },
+    muted: { hsl: "38 18% 90%", from: "same as secondary; differentiation by usage" },
+    mutedForeground: { hsl: "220 14% 38%", from: "slate ink — read-times, datelines, tag pills" },
+    accent: { hsl: "38 20% 88%", from: "hover surface — quiet" },
+    accentForeground: { hsl: "220 24% 14%", from: "ink on accent" },
+    border: { hsl: "220 14% 82%", from: "hairline rule — subscriber-tier panel divider" },
+    input: { hsl: "220 14% 82%", from: "same as border" },
+    ring: { hsl: "215 55% 32%", from: "primary blue, focus" },
+    destructive: { hsl: "0 60% 42%", from: "alert red — cancellation/warning, not a brand color" },
+    destructiveForeground: { hsl: "38 24% 95%", from: "cream on alert" },
+    brand: {
+      ink: { hsl: "220 24% 14%", from: "= foreground; deep business-formal ink" },
+      cream: { hsl: "38 24% 95%", from: "= background; Stratechery cream paper" },
+      "editorial-blue": { hsl: "215 55% 32%", from: "= primary; link/accent" },
+      "ink-soft": { hsl: "220 18% 26%", from: "secondary headings, executive-interview titles" },
+      "subscriber-gold": { hsl: "36 60% 42%", from: "subtle gold accent for paid-tier label, not for buttons" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 96],
+    containerMax: "max-w-5xl",         // wider than editorial — list rows + interview grid
+    containerPadding: "px-6 lg:px-10",
+    sectionPadding: {
+      hero: "pt-16 pb-12 lg:pt-24 lg:pb-16",
+      default: "py-16 lg:py-24",
+      tight: "py-10 lg:py-14",
+    },
+  },
+
+  radius: {
+    base: "0.125rem",                    // very subtle — business-formal, not sharp print
+    pillsAllowed: true,                  // pills for tag labels (Strategy / Antitrust / Markets)
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "panel-rule":
+        "0 1px 0 0 hsl(var(--border))",                  // list-row divider
+      "tier-card":
+        "0 1px 0 0 hsl(var(--border)) inset, 0 -1px 0 0 hsl(var(--border)) inset",  // subscriber-tier panel rules
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 700,
+      loop: 4000,
+      ambient: 20000,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(12px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 700,
+        iteration: "once",
+        purpose: "section entrance — restrained, business-formal",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Text-link CTAs in --editorial-blue with underline on hover. The single Subscribe CTA may be a solid --editorial-blue fill with --cream text. " +
+      "No marketing-grade gradient buttons — this is a paid-newsletter, not a SaaS landing page.",
+    card:
+      "Hairline top + bottom rule, no fill differentiation. Tag-pill chips in mono uppercase. " +
+      "Title in Lora display, byline in mono small caps with --subscriber-gold for paid-tier mark.",
+    input:
+      "Border-bottom only (1px --ink-soft). Label in mono small caps above. Email-capture is the canonical input.",
+    cta:
+      "Text-link in --editorial-blue, underline on hover. Subscribe is solid: --editorial-blue bg + --cream fg, modest 0.125rem radius.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.18)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/newsletter/THEME.md

@@ -0,0 +1,82 @@
+# Design Direction — Newsletter
+
+## Ethos
+Substack reading · Bear minimalism · The Browser typography · Granta editorial · Le Monde Diplomatique restraint · Pieter Levels essay-first plain page
+
+## Feel
+Reading-first. Narrow column, serif body, warm paper background, generous vertical rhythm. The page is designed to be read top-to-bottom for 10 minutes, not scanned. Buttons are foreign here; almost everything is a text link.
+
+This is the editorial direction's reading-first sibling — narrower, quieter, and serif-only. Where editorial mixes a display serif with a body sans, newsletter sets *everything* in the same family: the type is the design, and switching faces inside a reading layout breaks flow.
+
+## Reference brands
+- **Substack** → the reading view, not the marketing site. Single column, serif, warm background, no chrome.
+- **Bear blog (bearblog.dev)** → minimalism. The page is just the words.
+- **The Browser (thebrowser.com)** → typography. A weekly essay digest that respects the reader's eye.
+- **Granta** → editorial long-form. Pacing, captions, restraint with images.
+- **Le Monde Diplomatique** → restraint. Ink on paper, no decoration.
+- **Pieter Levels** → essay-first plain page. Indie, unembarrassed by simplicity.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names its brand origin. Surface stack is intentionally flat — `background`, `card`, and `secondary` all sit on the same warm paper, with `card` collapsed to the page itself. There is no card. Sections are separated by `.hairline-top` and vertical rhythm.
+
+Brand tokens: `--ink`, `--paper`, `--ink-soft`, `--link-visited`. Primary is **deep navy** (`220 70% 30%`) — the NYT-link-blue heritage. It is, primarily, the link color. Visited links shift to `--link-visited` purple (`280 50% 35%`) — the traditional, intentional convention.
+
+## Typography
+- **Display:** Lora. Same family as body — there is no separate display face. Tracking `-0.01em` (gentler than editorial's `-0.015em`; Lora is humanist).
+- **Body:** Lora, **18px**, line-height **1.75**. Body paragraphs are `max-w-[64ch]` — never wider.
+- **Mono:** JetBrains Mono. **Caption sizes only** — datelines, figure attributions, citations. Never used for body or headings.
+
+H1 uses `clamp(2.25rem, 5vw, 3.75rem)` — narrower column means narrower headline. Font features: `"liga", "kern"` only; no stylistic alternates, because body and display share the face.
+
+## Spacing
+- **Container:** `max-w-prose px-6 lg:px-8`. Body paragraphs are additionally `max-w-[64ch]`. A wide column kills a reading page.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-32 lg:pb-24`
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-12 lg:py-16`
+- **Allowed scale values:** 4 6 8 12 16 24 32 48 64 96 128. Note: no `20`, no `40`. The jump from 16 to 24 enforces the generous vertical rhythm.
+
+## Color
+No hex anywhere. Pure white and pure black are forbidden — `--paper` and `--ink` replace them. Background is warmer and slightly more saturated than the editorial direction (`40 25% 95%` vs `36 25% 96%`) — closer to Substack and Granta stock than to Kinfolk. Foreground carries a slight blue bias (`220 18% 14%`) so the navy link color reads as a tonal shift, not a foreign accent.
+
+## Radius
+`--radius: 0`. **Sharp corners only.** Pills disallowed (`pillsAllowed: false`) — print convention, no exception. The Subscribe button is also sharp.
+
+## Shadows
+**None.** Single utility: `.hairline-top` (`inset 0 1px 0 0 hsl(var(--foreground) / 0.15)`) — a 1px border-top in foreground/15, used to separate sections. No drop shadows. No glows. No bottom borders either — top-only enforces a downward reading rhythm.
+
+## Motion
+**Zero.** Newsletters do not animate. `keyframes: {}` is intentionally empty — there is nothing to suppress. `respectsReducedMotion: true` is honored as a contract, but the library ships no animations. If a future component needs motion, it does not belong in this direction.
+
+## Component patterns
+- **Buttons:** text-link primary; underlined on hover only (default state is link-color text, no underline). The **Subscribe button is the ONLY filled rect on the page** — navy bg + paper text, sharp corners. No other buttons exist in this language.
+- **Cards:** there is no card. Sections are separated by `.hairline-top` and vertical rhythm. If structure is needed, use a `<figure>` with a caption — not a bordered container.
+- **Inputs:** border-bottom only (1px `--border`). Used almost exclusively by the Subscribe form. Placeholder italic, label above in `--ink-soft` mono.
+- **CTAs:** text-link in `--primary` (navy). Underline on hover. Visited links shift to `--link-visited` (purple). Subscribe is the single exception.
+
+## Component families
+None at install time. Long-form posts ship with `<article>`, `<h1>`/`<h2>`/`<h3>`, `<p>`, `<blockquote>`, `<figure>`/`<figcaption>`, `<a>` — and that is, deliberately, almost the whole vocabulary.
+
+## Recommended rich media
+- **Cover:** single hero image per article (when used). Captioned figures within long-form. Occasional pull-quote photograph.
+- **Photography style:** editorial portraiture, environmental shots, **never stock**.
+- **AI tool recommendations:**
+  - **Midjourney / Flux** for illustrations and photographic compositions. Prompts like *"New Yorker magazine illustration, Pierre Mornet style"* for illustration; *"editorial portrait, Annie Leibovitz lighting, 50mm, slight grain"* for photography.
+  - **Recraft** for figurative line illustrations in the NYT op-ed style.
+  - For charts and diagrams, lean toward hand-drawn-style illustration over AI photorealism.
+- **Aspect ratios:** 3:2 landscape (photographic standard) or 4:5 portrait for environmental subjects. **Never 16:9 widescreen** — cinematic, off-feel. **Avoid square 1:1** — Instagram-feel.
+- **Captions:** every figure has a real caption, set in italic mono or sans. **Never a generic "Image: …" label.** The caption is part of the writing.
+- **Performance:** hero ≤150 KB AVIF, inline figures ≤80 KB.
+- **What to AVOID:** stock photography; dark moody product shots; video backgrounds (kills the reading flow); animated GIFs (visually noisy); AI-generated photos that look "off" (uncanny smile, weird hands, malformed jewellery).
+- **Accessibility:** long-form figure alt-text — describe the photograph as if for a blind reader. Three to five words is not enough for editorial photography.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.18)` background, foreground text.
+- **Focus ring:** `1px solid hsl(var(--ring))`. Quiet — does not scream.
+- **Scrollbar:** `auto` (default browser scrollbar). A reading page should not style its own chrome.
+
+## Exceptions
+- **Subscribe button.** The single filled rect on the page, by design. Navy background, paper text, sharp corners. Justified because the act of subscribing is the one transaction a newsletter page asks for, and it has to be unmissable in a layout that otherwise has no buttons at all.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/newsletter/tokens.ts

@@ -0,0 +1,138 @@
+import type { Direction } from "../schema";
+
+export const newsletter: Direction = {
+  name: "newsletter",
+  ethos:
+    "Substack reading · Bear minimalism · The Browser typography · Granta editorial · Le Monde Diplomatique restraint",
+  references: [
+    { brand: "Substack", trait: "reading view, not the marketing site" },
+    { brand: "Bear blog", trait: "minimalism — bearblog.dev" },
+    { brand: "The Browser", trait: "typography — thebrowser.com" },
+    { brand: "Granta", trait: "editorial long-form" },
+    { brand: "Le Monde Diplomatique", trait: "restraint" },
+    { brand: "Pieter Levels", trait: "essay-first plain page" },
+  ],
+  feel:
+    "Reading-first. Narrow column, serif body, warm paper background, generous " +
+    "vertical rhythm. The page is designed to be read top-to-bottom for 10 minutes, " +
+    "not scanned. Buttons are foreign here; almost everything is a text link.",
+
+  fonts: {
+    display: {
+      family: "Lora",
+      fallback: ["Iowan Old Style", "Charter", "Georgia", "serif"],
+      from: "Substack-feel serif — readable display weight, no decorative drama",
+      googleFont: "Lora",
+      weights: [400, 500, 600, 700],
+    },
+    body: {
+      family: "Lora",
+      fallback: ["Iowan Old Style", "Charter", "Georgia", "serif"],
+      from: "same family as display — the type is the design; mixing serifs in a reading layout breaks flow",
+      googleFont: "Lora",
+      weights: [400, 500, 600, 700],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "caption sizes only — datelines, citations, figure attributions",
+      googleFont: "JetBrains+Mono",
+      weights: [400],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.01em",         // Lora is humanist; needs gentle tightening, not editorial's -0.015em
+    bodyTracking: "0",
+    fontFeatureSettings: '"liga", "kern"',  // ligatures + kerning; no stylistic alts — body and display share the face
+    h1ScaleClamp: "clamp(2.25rem, 5vw, 3.75rem)",  // narrower column = narrower headline
+    bodyBaseSize: "1.125rem",            // 18px — newsletters are read, not skimmed
+    bodyLineHeight: "1.75",              // generous; an essay's pace
+  },
+
+  colors: {
+    background: { hsl: "40 25% 95%", from: "warm paper — slightly more saturated cream than editorial" },
+    foreground: { hsl: "220 18% 14%", from: "deep ink, slight blue bias — Granta/LMD ink" },
+    card: { hsl: "40 25% 95%", from: "same as paper — no card surface in a reading layout" },
+    popover: { hsl: "40 22% 97%", from: "footnote/tooltip — one tier brighter than paper" },
+    primary: { hsl: "220 70% 30%", from: "deep navy — NYT-link-blue heritage; this is the link color" },
+    primaryForeground: { hsl: "40 25% 95%", from: "paper on navy — only used by the Subscribe button" },
+    secondary: { hsl: "40 18% 91%", from: "warm paper, one tier deeper — block-quote ground" },
+    secondaryForeground: { hsl: "220 18% 14%", from: "ink on warm paper" },
+    muted: { hsl: "40 18% 91%", from: "same as secondary; differentiation by usage, not color" },
+    mutedForeground: { hsl: "220 16% 28%", from: "ink-soft — bylines and meta" },
+    accent: { hsl: "40 20% 89%", from: "warm paper, deeper still — hover ground for link blocks" },
+    accentForeground: { hsl: "220 18% 14%", from: "ink on warm paper" },
+    border: { hsl: "220 14% 84%", from: "hairline — barely visible, the divider between sections" },
+    input: { hsl: "220 14% 84%", from: "same as border — only Subscribe input uses this" },
+    ring: { hsl: "220 70% 30%", from: "primary navy, used for focus only" },
+    destructive: { hsl: "0 55% 38%", from: "errata red — restrained, never alarm" },
+    destructiveForeground: { hsl: "40 25% 95%", from: "paper on errata" },
+    brand: {
+      ink: { hsl: "220 18% 14%", from: "the deep ink — also semantic foreground" },
+      paper: { hsl: "40 25% 95%", from: "the warm paper — also semantic background" },
+      "ink-soft": { hsl: "220 16% 28%", from: "bylines, datelines, meta — the secondary voice" },
+      "link-visited": { hsl: "280 50% 35%", from: "purple — traditional visited-link, intentional heritage" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128],   // extremely generous vertical rhythm — note the jump from 16 to 24, no 20
+    containerMax: "max-w-prose",          // narrow reading column; body paragraphs max-w-[64ch]
+    containerPadding: "px-6 lg:px-8",
+    sectionPadding: {
+      hero: "pt-24 pb-16 lg:pt-32 lg:pb-24",
+      default: "py-16 lg:py-24",
+      tight: "py-12 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "0",                          // sharp — print convention
+    pillsAllowed: false,
+  },
+
+  shadows: {
+    style: "none",
+    utilities: {
+      "hairline-top":
+        "inset 0 1px 0 0 hsl(var(--foreground) / 0.15)",  // 1px border-top in foreground/15 — the section divider
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 0,                        // newsletters don't animate
+      loop: 0,
+      ambient: 0,
+    },
+    keyframes: {},                       // intentionally empty — there is no motion in this language
+    respectsReducedMotion: true,         // honored, though there's nothing to suppress
+  },
+
+  density: "low",
+
+  patterns: {
+    button:
+      "Text-link primary; underlined on hover only (default state is link-color text, no underline). " +
+      "The Subscribe button is the ONLY filled rect on the page — navy bg + paper text. No other buttons exist.",
+    card:
+      "There is no card. Sections are separated by `.hairline-top` and vertical rhythm. " +
+      "If structure is needed, use a `<figure>` with a caption — not a bordered container.",
+    input:
+      "Border-bottom only (1px `--border`). Used almost exclusively by the Subscribe form. " +
+      "Placeholder italic, label above in `--ink-soft` mono.",
+    cta:
+      "Text-link in `--primary` (navy). Underline on hover. Visited links shift to `--link-visited` (purple). " +
+      "Subscribe is the single exception — filled navy rect, paper text, sharp corners.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.18)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "auto",               // default browser scrollbar — a reading page should not style its own chrome
+  },
+};

package/themes/newspaper-classic/THEME.md

@@ -0,0 +1,74 @@
+# Design Direction — Newspaper-Classic
+
+## Ethos
+NYT Cheltenham · WaPo dignified daily · Le Monde five-column page · Guardian section ribbons · WSJ stipple authority
+
+## Feel
+Cream newsprint stock with deep ink. Tall stately display serif headlines over a wide five-column page. Section nav reads like the top of a folded broadsheet; bylines and read-times sit in small-caps mono. Restrained red is reserved for the breaking-news ticker and the masthead rule — never for decoration.
+
+## Reference brands
+- **The New York Times** → Cheltenham-style display serif, five-column front-page grid.
+- **The Washington Post** → Democracy-Dies-in-Darkness gravitas, breaking-news ticker.
+- **Le Monde** → broadsheet column rhythm, dateline as masthead anchor.
+- **The Guardian** → section ribbons across the page top, byline grids.
+- **The Wall Street Journal** → stippled portrait engravings, business-formal restraint.
+
+## Tokens
+All tokens are HSL triples in `src/index.css`. Every token's `from:` names a brand origin. Brand tokens: `--ink`, `--newsprint`, `--ink-soft`, `--rule-strong`, `--ticker-red`, `--stipple`.
+
+Surface stack: **newsprint cream** (background) → lighter cream (card) → deeper cream (secondary/muted/accent). Depth comes from rules, not from fill differentiation. The thick `--rule-strong` 3px line under the masthead is the single decorative move.
+
+Primary is a **restrained masthead red** (NYT op-ed / WaPo breaking) — used on the ticker strip, the masthead rule, and section kicker labels. Never on body copy. Never on photos.
+
+## Typography
+- **Display:** Playfair Display (Cheltenham-style display serif). h1–h4. Tracking `-0.018em` — broadsheet headlines need it tight.
+- **Body:** Source Serif Pro (WaPo/Guardian body serif). 17px / `line-height: 1.62` — long-form readable.
+- **Mono:** JetBrains Mono. Datelines, bylines (`BY JANE DOE`), read-times, section kickers — all uppercase, tracked.
+
+H1 uses `clamp(2.5rem, 6.5vw, 5.25rem)`. Numbers always `tabular-nums`. Font features: `"liga", "onum", "tnum"`.
+
+## Spacing
+- **Container:** `max-w-6xl px-6 lg:px-10` — wide; five-column grids need the room.
+- **Section padding:** hero `pt-16 pb-12 lg:pt-24 lg:pb-20`; default `py-16 lg:py-24`; tight `py-10 lg:py-14`.
+- **Scale:** 4 6 8 12 16 20 24 32 40 48 64 96. No arbitrary spacing.
+
+## Color
+No hex in components. White and pure black are forbidden — `--newsprint` and `--ink` replace them. Opacity via `/N` on the token.
+
+## Radius
+`--radius: 0`. **Sharp corners only.** Pills disallowed — newsprint convention. Section ribbons are flat-fill rects.
+
+## Shadows
+Minimal. Two utilities: `.rule-bottom` (1px column-divider rule) and `.rule-thick` (3px masthead rule). No drop shadows, no glows.
+
+## Motion
+Two keyframes. `fade-rise` (800ms) is the only entrance. `ticker-scroll` (30,000ms infinite) drives the breaking-news ticker strip — slow horizontal crawl, honors `prefers-reduced-motion` by pausing.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`.
+
+## Component patterns
+- **Buttons:** text-link CTAs in `--ink`, underline on hover. The single masthead Subscribe is the only solid: `--ink` bg + `--newsprint` fg, sharp rect. Section ribbons are `--ticker-red` flat fills.
+- **Cards:** top + bottom rules only, no side borders, no fill differentiation. Title in display serif, kicker in mono uppercase, byline in mono small caps. Padding `p-6 lg:p-8`.
+- **Inputs:** border-bottom only (1px `--ink-soft`). Mono small-caps label above.
+- **CTA links:** text-link in `--ink`, underline on hover. **Never a chip, never a pill.**
+
+## Bespoke section
+Section-nav ribbon (Front / Politics / Business / Opinion / Style) + leading-story big card with kicker / headline / deck / byline + four secondary stories in a 4-column grid + a breaking-news ticker strip across the bottom. The ticker uses `--ticker-red` background with `--newsprint` text and the `BREAKING` chip in a contrast box. The grid never collapses to feature cards; it remains a newsprint front page.
+
+## Recommended rich media
+Photography is photojournalistic — captured news moments, environmental portraits, courthouse steps. Color-grade for neutral newsprint reproduction (slight desaturation, true grays). One stipple-portrait engraving per page (WSJ heritage) is permitted for the lead op-ed byline.
+
+**AI tool recommendations:** Midjourney prompts like *"photojournalism, Associated Press wire, 35mm, neutral color, slight grain"*. Avoid glossy editorial lighting (magazine-glossy territory) and avoid moody dark-mode lighting (cinematic territory). Aspect ratio 3:2 photographic standard.
+
+**Avoid:** stock business photography, animated GIFs, gradient backgrounds, glassmorphic anything, any pill-shaped chip, drop shadows.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.2)` background, foreground text.
+- **Focus ring:** `1px solid hsl(var(--ring))`.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction.