@stylecrib/cli 0.0.0-stage → 0.3.2

package/themes/podcast-warm/THEME.md

@@ -0,0 +1,103 @@
+# Design Direction — Podcast-Warm
+
+## Ethos
+Overcast warm orange · Pocket Casts deep red · Castro deep teal-green · Goodpods community warmth · Snipd purple clip-cards
+
+## Feel
+Warm off-white canvas, generously rounded chrome, oversized artwork tiles in a subscribed-shows grid. Friendly secondary palette of teal-green and clip-card purple. The independent-listener counterpoint to Spotify's cold corporate dark — this surface feels like a curated shelf of shows, not a streaming dashboard. The page is a library, not a player.
+
+## Reference brands
+- **Overcast** → warm orange accent with friendly system sans and soft cards. The independent-listener default.
+- **Pocket Casts** → deep red action color with smooth animations and warm surfaces. Considered library-management UX.
+- **Castro** → deep teal-green chrome with a friendly, library-shelf feel. Inbox-style queue.
+- **Goodpods** → community-warm Plus Jakarta Sans, recommendation-led layout. Social discovery.
+- **Snipd** → purple clip-cards and friendly AI-generated chapter chrome. Clip-as-share-unit.
+
+## 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 brand it traces to.
+
+Surface stack is **warm-cream** (background, HSL `32 30% 96%` — library-shelf cream) → **white card** (`0 0% 100%`) → **deeper cream** (secondary/muted). Depth comes from soft warm shadows on cards lifted above the cream canvas — the cards feel like physical tiles on a shelf.
+
+Brand tokens: `--overcast-orange` (primary, the canonical play color), `--castro-teal` (accent, friendly secondary), `--pocketcasts-red` (subscribed/badge accent), `--snipd-purple` (clip-card chrome), `--goodpods-pink` (recommendation highlight), `--warm-cream`, `--shelf-brown`. Primary is `--overcast-orange` — used for all play affordances and the hero subscribe CTA.
+
+## Typography
+- **Display:** Plus Jakarta Sans (Goodpods display). Friendly geometric humanist, soft terminals — podcast-app warm. Tracking `-0.015em`.
+- **Body:** Inter (Overcast/Pocket Casts system-feel sans). Neutral, screen-comfortable for episode descriptions. Body base **16px** with **line-height 1.6**.
+- **Mono:** JetBrains Mono. Episode runtimes, chapter timestamps, playback speed — tabular numerics.
+
+H1 uses `clamp(2.25rem, 6vw, 4.5rem)` — friendly hero scale, not cinematic-large. Font features: `"ss01"`, `"cv11"`, `"tnum"`.
+
+## Spacing
+- **Container:** `max-w-6xl px-5 lg:px-8` — wide enough for a four-column subscribed-shows grid but not as wide as music-streaming.
+- **Section padding tiers:**
+  - Hero: `pt-20 pb-14 lg:pt-32 lg:pb-20`
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-10 lg:py-14`
+- **Allowed scale values:** 4 8 12 16 20 24 32 40 48 64 80 96 128. No arbitrary spacing.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier on token. Pure white is reserved for `--card` only — the warm-cream canvas is the default page surface. Pure black is forbidden — `--shelf-brown` (warm brown-ink) replaces it.
+
+**Overcast orange is the canonical play color.** Castro-teal is the friendly secondary used for "Subscribed" toggles, category chips, and hover accents — it is the only place teal-green appears. Pocket-casts-red is reserved for "Subscribed" badges and library-management accents — never a CTA color. Snipd-purple sits on clip-cards and AI-summary chrome only. Goodpods-pink is for recommendation-card highlights only.
+
+## Radius
+`--radius: 1rem`. **Generously rounded — the warm-chrome signal.** Pills are core (`pillsAllowed: true`): category chips, subscribe toggles, playback-speed selectors, search input all use `rounded-full`. Icon buttons use `1rem`. Cards use `1rem`. The rounding is the warm signal.
+
+## Shadows
+**Soft style.** Three utilities:
+- `.tile-soft` — show-artwork tile lift; warm soft drop in `--shelf-brown` at low opacity, never colored
+- `.tile-lift` — hover state; the tile rises with a deeper soft shadow
+- `.subscribe-glow` — hero subscribe button warm glow in overcast-orange, single instance per page
+
+Shadows are always warm (cast from `--shelf-brown` brown-ink), never neutral gray. This is the "tile on a wooden shelf" lighting model.
+
+## Motion
+Five keyframes, all friendly:
+- `tile-rise` (500ms once) — show-tile entrance, staggered across grid, gentle rise
+- `subscribe-pop` (400ms once) — subscribe-button click feedback, friendly pop, never on play/pause
+- `play-bar-bounce` (1800ms infinite) — now-playing mini-bar gentle bounce, present but unobtrusive
+- `chapter-progress` (1200ms once) — chapter-marker fill animation on episode-page chapter list
+- `tile-shimmer` (2400ms infinite) — featured-show artwork shimmer overlay, used only on the hero featured tile
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — every motion utility wrapped in a media query.
+
+## Component patterns
+- **Buttons:** primary play action is a SOLID `rounded-full` overcast-orange button with white play glyph. Subscribe toggle is a pill: outlined Castro-teal when "Subscribe", filled when "Subscribed". Secondary controls (queue, share, download) are ghost icon buttons with 1rem radius. Tertiary text-link CTAs use `--shelf-brown` foreground with underline-on-hover.
+- **Cards:** show-tile is the canonical card — square artwork at 1:1, generously rounded (1rem), with title and host below, lifted by `.tile-soft` shadow that grows to `.tile-lift` on hover. Episode cards use `bg-card` (white) on cream background, `p-5 lg:p-6`, with chapter-list inside when expanded. **No card uses cream fill** — cards always sit above the canvas in white.
+- **Inputs:** pill-shape (`rounded-full`) input with `bg-card`, 1px `--border`, leading icon. Focus ring is 2px overcast-orange. Filter chips are `rounded-full` pills in `bg-secondary` with shelf-brown foreground; selected state shifts to castro-teal fill with white text.
+- **CTA links:** hero subscribe / listen CTA is a solid overcast-orange pill with white label, wrapped in `subscribe-glow`. App Store / Play Store badges for cross-platform CTAs. Tertiary links are foreground with underline-on-hover — **never colored text-only**.
+
+## Recommended rich media
+Podcast-warm leans on **square show artwork** as the hero asset — the same way a podcast-app library shelf does. Cover art at 1:1 aspect with generous rounding sits everywhere from a 48×48 row thumbnail to a full hero feature tile.
+
+Lead media is **square show artwork at 1:1 aspect, minimum 1400×1400 source** (the iTunes/Apple Podcasts spec) displayed at any size. Behind a hero featured show, a subtle blurred-and-warmed copy of the artwork can sit as backdrop — but lighter and softer than the music-streaming equivalent. Host photography is appropriate as a secondary asset on show-detail pages; use **4:5 portrait** with warm color grading.
+
+**AI tool recommendations:** for placeholder show artwork, **Midjourney** with prompts like *"square podcast cover art, [topic] aesthetic, friendly geometric illustration, warm palette, rounded shapes"* — explicitly avoid microphone or headphone clichés. **Flux** for friendly editorial illustrations of hosts or topics. **Recraft** for spot illustrations in show-notes and chapter summaries.
+
+**Aspect ratios:** 1:1 square for show artwork (canonical, matches all podcast directories). 4:5 portrait for host photography. 16:9 for video-podcast trailers only. Never 21:9 (cinematic, wrong feel).
+
+**Video:** video podcasts are user-initiated only, never autoplay. Embedded player uses the same warm chrome with overcast-orange play button. Trailers and clips (Snipd-style) get the purple clip-card treatment with `--snipd-purple` accent.
+
+**Chapter art:** when episodes have per-chapter artwork, show it at 1:1 with the same `tile-soft` shadow language. Chapter progress bars use `chapter-progress` keyframe with `--overcast-orange` fill.
+
+**Clip cards:** Snipd-style highlighted-quote cards use `--snipd-purple` border-left rule, white card body, mono timestamp, and shelf-brown quote text. Treat them as a distinct card variant — never mix with regular episode chrome.
+
+**Performance:** show artwork thumbnails ≤30 KB AVIF at 600w; hero tiles ≤120 KB at 1400w. Blurhash placeholders during load — `tile-rise` covers the transition. LCP under 2s with hero featured tile.
+
+**Avoid:** generic microphone/headphone stock photography (every podcast app uses this — it's the laziest possible visual), dark moody host photography (cinematic territory), gradient backgrounds (soft-modern territory), glassmorphic player chrome, AI-generated hosts with uncanny faces, lens flare, decorative SVG ornament beyond the warm rounded chrome.
+
+**Accessibility:** show artwork always has alt-text in *"[Show name] cover art"* format. Subscribed-state toggle has `aria-pressed` reflecting state. Chapter list is a proper `<ol>` with timestamps as `<time>` elements. Play-bar bounce animation has `aria-hidden="true"`.
+
+## Component families
+None at install time. Family conventions emerge as the project grows; the Director appends them here as they're established. Expected first families: `ShowTile`, `EpisodeCard`, `SubscribeButton`, `ChapterList`, `ClipCard`.
+
+## Details
+- **Selection:** `hsl(var(--overcast-orange) / 0.28)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--overcast-orange))`. Matches primary play action.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands, add it here with the reason. The Director's consistency pass lists all exceptions for human review.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/podcast-warm/tokens.ts

@@ -0,0 +1,192 @@
+import type { Direction } from "../schema";
+
+export const podcastWarm: Direction = {
+  name: "podcast-warm",
+  ethos:
+    "Overcast warm orange · Pocket Casts deep red · Castro deep teal-green · Goodpods community warmth · Snipd purple clip-cards",
+  references: [
+    { brand: "Overcast", trait: "warm orange accent with friendly system sans and soft cards" },
+    { brand: "Pocket Casts", trait: "deep red action color with smooth animations and warm surfaces" },
+    { brand: "Castro", trait: "deep teal-green chrome with a friendly, library-shelf feel" },
+    { brand: "Goodpods", trait: "community-warm Plus Jakarta Sans, recommendation-led layout" },
+    { brand: "Snipd", trait: "purple clip-cards and friendly AI-generated chapter chrome" },
+  ],
+  feel:
+    "Warm off-white canvas, generously rounded chrome, oversized artwork tiles in a subscribed-shows " +
+    "grid. Friendly secondary palette of teal-green and clip-card purple. The independent-listener counterpoint " +
+    "to Spotify's cold corporate dark — this surface feels like a curated shelf of shows, not a streaming dashboard.",
+
+  fonts: {
+    display: {
+      family: "Plus Jakarta Sans",
+      fallback: ["Manrope", "Inter", "system-ui", "-apple-system", "sans-serif"],
+      from: "Goodpods display sans — friendly geometric humanist, soft terminals, podcast-app warm",
+      googleFont: "Plus+Jakarta+Sans",
+      weights: [500, 600, 700, 800],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+      from: "Overcast/Pocket Casts system-feel sans — neutral, screen-comfortable for episode descriptions",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["Berkeley Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "episode runtimes, chapter timestamps, playback speed — tabular numerics",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.015em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"ss01", "cv11", "tnum"',
+    h1ScaleClamp: "clamp(2.25rem, 6vw, 4.5rem)",   // friendly hero scale — not cinematic-large
+    bodyBaseSize: "1rem",                           // 16px — episode description comfort
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: { hsl: "32 30% 96%", from: "warm off-white canvas — Overcast paper, library-shelf cream" },
+    foreground: { hsl: "24 20% 16%", from: "warm dark brown-ink — never pure black on warm cream" },
+    card: { hsl: "0 0% 100%", from: "show-tile and episode card — pure white on cream, friendly lift" },
+    popover: { hsl: "0 0% 100%", from: "menu and tooltip surface — same as card with stronger shadow" },
+    primary: { hsl: "18 88% 56%", from: "Overcast warm orange — the canonical 'Play' action across the player" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on Overcast orange" },
+    secondary: { hsl: "32 24% 92%", from: "deeper warm cream — quiet panels inside friendly pages" },
+    secondaryForeground: { hsl: "24 20% 16%", from: "brown-ink on deeper cream" },
+    muted: { hsl: "32 20% 90%", from: "muted surface — playlist row hover, soft dividers" },
+    mutedForeground: { hsl: "24 12% 42%", from: "episode-meta secondary text — duration, dateline, host name" },
+    accent: { hsl: "168 52% 38%", from: "Castro teal-green hover/selection accent — the warm secondary" },
+    accentForeground: { hsl: "0 0% 100%", from: "white on Castro teal-green" },
+    border: { hsl: "32 18% 84%", from: "soft warm border — softer than editorial hairline, friendlier" },
+    input: { hsl: "32 18% 84%", from: "same as border — input chrome uses the soft border language" },
+    ring: { hsl: "18 88% 56%", from: "Overcast orange focus ring — matches primary play action" },
+    destructive: { hsl: "356 70% 50%", from: "remove-from-queue red — distinct from Pocket Casts brand red below" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on destructive red" },
+    brand: {
+      "overcast-orange": { hsl: "18 88% 56%", from: "= primary; Overcast warm orange, canonical play color" },
+      "pocketcasts-red": { hsl: "356 78% 52%", from: "Pocket Casts deep red — secondary brand accent for 'Subscribed' badges" },
+      "castro-teal": { hsl: "168 52% 38%", from: "= accent; Castro deep teal-green, friendly category color" },
+      "snipd-purple": { hsl: "266 70% 60%", from: "Snipd clip-card purple — used on chapter clips and AI-summary chrome" },
+      "goodpods-pink": { hsl: "338 75% 65%", from: "Goodpods community pink — recommendation-card highlight" },
+      "warm-cream": { hsl: "32 30% 96%", from: "= background; warm off-white canvas, also a semantic token" },
+      "shelf-brown": { hsl: "24 20% 16%", from: "= foreground; warm brown-ink, also semantic for library-shelf chrome" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128],   // medium — friendly breathing, room for cards
+    containerMax: "max-w-6xl",
+    containerPadding: "px-5 lg:px-8",
+    sectionPadding: {
+      hero: "pt-20 pb-14 lg:pt-32 lg:pb-20",
+      default: "py-16 lg:py-24",
+      tight: "py-10 lg:py-14",
+    },
+  },
+
+  radius: {
+    base: "1rem",                       // generously rounded — the warm-chrome signal
+    pillsAllowed: true,                 // pills are core: category chips, subscribe toggles, play-speed selectors
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "tile-soft":
+        "0 1px 2px hsl(24 20% 16% / 0.06), " +
+        "0 8px 24px hsl(24 20% 16% / 0.08)",   // show-artwork tile lift — warm, soft, never glossy
+      "tile-lift":
+        "0 4px 8px hsl(24 20% 16% / 0.08), " +
+        "0 16px 40px hsl(24 20% 16% / 0.12)",   // hover state — the tile rises on hover
+      "subscribe-glow":
+        "0 0 0 2px hsl(var(--overcast-orange) / 0.25), " +
+        "0 8px 24px hsl(var(--overcast-orange) / 0.2)",   // hero subscribe button warm glow
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 500,                    // friendly, immediate — not slow-editorial, not snap-app
+      loop: 1800,                     // play-bar bounce, chapter-progress pulse
+      ambient: 8000,                  // slow tile-shimmer on featured shows
+    },
+    keyframes: {
+      "tile-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(16px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 500,
+        iteration: "once",
+        purpose: "show-tile entrance — staggered across grid, gentle rise",
+      },
+      "subscribe-pop": {
+        css:
+          "0% { transform: scale(1); }\n" +
+          "40% { transform: scale(1.08); }\n" +
+          "100% { transform: scale(1); }",
+        defaultDuration: 400,
+        iteration: "once",
+        purpose: "subscribe-button click feedback — friendly pop, never on play/pause",
+      },
+      "play-bar-bounce": {
+        css:
+          "0%, 100% { transform: translateY(0); }\n" +
+          "50% { transform: translateY(-4px); }",
+        defaultDuration: 1800,
+        iteration: "infinite",
+        purpose: "now-playing mini-bar gentle bounce — present but unobtrusive",
+      },
+      "chapter-progress": {
+        css:
+          "from { transform: scaleX(0); }\n" +
+          "to { transform: scaleX(1); }",
+        defaultDuration: 1200,
+        iteration: "once",
+        purpose: "chapter-marker fill animation on episode-page chapter list",
+      },
+      "tile-shimmer": {
+        css:
+          "0% { background-position: -150% 0; }\n" +
+          "100% { background-position: 150% 0; }",
+        defaultDuration: 2400,
+        iteration: "infinite",
+        purpose: "featured-show artwork shimmer overlay — used only on the hero featured tile",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary play action is a SOLID rounded-full overcast-orange button with white play glyph. " +
+      "Subscribe toggle is a pill: outlined Castro-teal when 'subscribe', filled when 'subscribed'. " +
+      "Secondary controls (queue, share, download) are ghost icon buttons with 1rem radius. " +
+      "Tertiary text-link CTAs use shelf-brown foreground with underline-on-hover.",
+    card:
+      "Show-tile is the canonical card — square artwork at 1:1, generously rounded (1rem), with title and host below, lifted by .tile-soft shadow that grows to .tile-lift on hover. " +
+      "Episode cards use bg-card (white) on cream background, p-5 lg:p-6, with chapter-list inside when expanded. " +
+      "No card uses cream fill — cards always sit above the canvas in white.",
+    input:
+      "Pill-shape (rounded-full) input with bg-card, 1px --border, leading icon. " +
+      "Focus ring is 2px overcast-orange. Filter chips are rounded-full pills in bg-secondary with shelf-brown foreground; selected state shifts to castro-teal fill with white text.",
+    cta:
+      "Hero subscribe / listen CTA is a solid overcast-orange pill with white label, wrapped in subscribe-glow utility. " +
+      "App Store / Play Store badges for cross-platform CTAs. Tertiary links are foreground with underline-on-hover — never colored text-only.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--overcast-orange) / 0.28)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--overcast-orange))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/publisher-indie/THEME.md

@@ -0,0 +1,78 @@
+# Design Direction — Publisher-Indie
+
+## Ethos
+Coffee House Press structured catalogue · Graywolf serif gravity · New Directions modernist pedigree · Tin House quarterly discipline · Two Dollar Radio small-press risk
+
+## Feel
+An independent literary publisher's spring catalogue. Deep cream paper, Source Serif throughout, forthcoming-titles listed with ISBN and pub-date the way a trade catalogue does. Color is almost absent — a single ink-navy used for series markers. Author headshots are tight black-and-white portraits, never marketing shots. The page reads with literary-fiction gravity, not bookstore warmth and not museum austerity — somewhere between.
+
+## Reference brands
+- **Coffee House Press** → structured catalogue list. Deep cream. Source Serif.
+- **Graywolf Press** → literary-fiction gravity, formal serif, ISBN-forward.
+- **New Directions** → modernist pedigree, numbered series, restrained color.
+- **Tin House** → quarterly publishing rhythm, masthead-style author bios.
+- **Two Dollar Radio** → small-press risk, hand-set catalogue feel.
+
+## Tokens
+Surface stack is **catalogue cream** (background) → **lighter cream** (card) → **deeper cream** (secondary/muted/accent). Hairline borders are warm gray (slightly cream-biased, never neutral). Brand tokens: `--ink`, `--cream`, `--ink-navy`, `--oxblood`.
+
+Primary is `--ink-navy`. Reserved for series markers, focus ring, and the single 'Subscribe' CTA. Oxblood is reserved for the fiction-genre tag — never elsewhere.
+
+## Typography
+- **Display:** Source Serif Pro (Graywolf / Coffee House catalogue serif). h1–h4.
+- **Body:** Source Serif Pro — single-family discipline. Body 17px / 1.68.
+- **Mono:** IBM Plex Mono. ISBN, pub-date, trim size — trade-catalogue mono.
+
+H1 uses `clamp(2.25rem, 5vw, 4.25rem)`. Forthcoming titles use the display serif italic at body+1 — like a catalogue subhead.
+
+## Spacing
+- **Container:** `max-w-5xl px-6 lg:px-12` — catalogue spread width.
+- **Sections:** hero `pt-24 pb-16 lg:pt-40 lg:pb-24`; default `py-20 lg:py-28`; tight `py-12 lg:py-18`.
+- **Scale:** 4 6 8 12 16 20 24 32 40 48 64 80 96 128.
+
+## Color
+No hex. Tokens only. Ink-navy is the only color used as fill (Subscribe button); everywhere else it's a hover state or a series-marker accent. Oxblood is reserved for the fiction-genre tag only. Cream and ink dominate every surface.
+
+## Radius
+`--radius: 0`. Sharp corners — catalogue pages are sharp. Pills disallowed.
+
+## Shadows
+**Minimal.** Two utilities: `.hairline-bottom` and `.catalogue-rule` (rules above + below for a listing row).
+
+## Motion
+Single keyframe: `fade-rise` (opacity + 20px translate, 1100ms). Print-publication settle. `prefers-reduced-motion` honored.
+
+## Component patterns
+- **Buttons:** text-link CTAs with ink-navy on hover. 'Subscribe' is the single solid-fill — ink-navy bg + cream text.
+- **Cards:** hairline rules top + bottom, no fill differentiation. Padding `p-7 lg:p-10`. Title in display serif italic; author in roman; metadata in mono.
+- **Inputs:** border-bottom only (1px ink). Label above in mono uppercase.
+- **CTA links:** ink → ink-navy on hover. Never a chip, never a gradient.
+
+## Recommended rich media
+Author portraits, black-and-white, tight crops — the way a publisher's catalogue shoots its authors. Environmental but not lifestyle: writer at a desk, on a porch, in a library. Never red-carpet, never event-PR. Cover plates are flat scans on cream paper, the way trade catalogues print them. Never 3D book mockups, never floating-cover renders.
+
+**AI tool recommendations:** **Midjourney / Flux** for portraits: *"black-and-white author portrait, environmental, soft window light, 50mm, Tri-X grain"*. For covers: *"book cover photographed flat on cream paper, neutral overhead lighting"*. Avoid AI gradients and "book stack" hero compositions.
+
+**Aspect ratios:** 4:5 portrait (author convention), 2:3 (cover convention). Never 16:9.
+
+**Captions** in mono. Format: *"Author Name · Forthcoming Title (Spring 2026) · ISBN 978-x-xxxxxx-xx-x"*.
+
+**Avoid:** marketing-style author shots, 3D book renders, gradients, decorative SVG, lifestyle stock.
+
+**Accessibility:** alt-text describes the portrait and the work — *"Black-and-white portrait: Catherine Lacey at her writing desk, facing window light."*
+
+## Component families
+- `ForthcomingTitle` family — list row with date + title + author + genre tag + ISBN.
+- `AuthorBio` family — portrait + name + recent title + 2-sentence bio.
+- `Subscription` family — tier card (NYRB-Subscription style, never SaaS pricing pillars).
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.18)` — ink-navy wash.
+- **Focus ring:** `1px solid hsl(var(--ring))`.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction.

package/themes/publisher-indie/tokens.ts

@@ -0,0 +1,148 @@
+import type { Direction } from "../schema";
+
+export const publisherIndie: Direction = {
+  name: "publisher-indie" as Direction["name"],
+  ethos:
+    "Coffee House Press structured catalogue · Graywolf serif gravity · New Directions modernist pedigree · Tin House quarterly discipline · Two Dollar Radio risk",
+  references: [
+    { brand: "Coffee House Press", trait: "structured catalogue list, deep cream, Source Serif" },
+    { brand: "Graywolf Press", trait: "literary-fiction gravity, formal serif, ISBN-forward listing" },
+    { brand: "New Directions", trait: "modernist pedigree, numbered series, restrained color" },
+    { brand: "Tin House", trait: "quarterly publishing rhythm, masthead-style author bios" },
+    { brand: "Two Dollar Radio", trait: "small-press risk, hand-set catalogue feel" },
+  ],
+  feel:
+    "An independent literary publisher's spring catalogue. Deep cream paper, Source Serif throughout, " +
+    "forthcoming-titles listed with ISBN and pub-date the way a trade catalogue does. " +
+    "Color is almost absent — a single ink-navy used for series markers. Author headshots are tight " +
+    "black-and-white portraits, never marketing shots.",
+
+  fonts: {
+    display: {
+      family: "Source Serif Pro",
+      fallback: ["Source Serif 4", "Cormorant Garamond", "Georgia", "serif"],
+      from: "Graywolf / Coffee House catalogue serif — modern transitional, readable at small sizes",
+      googleFont: "Source+Serif+Pro",
+      weights: [400, 600, 700],
+    },
+    body: {
+      family: "Source Serif Pro",
+      fallback: ["Source Serif 4", "Cormorant Garamond", "Georgia", "serif"],
+      from: "single-family discipline — body in the same serif, smaller, lighter",
+      googleFont: "Source+Serif+Pro",
+      weights: [400, 600],
+    },
+    mono: {
+      family: "IBM Plex Mono",
+      fallback: ["JetBrains Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "ISBN, pub-date, trim size — trade-catalogue mono, slightly warmer than JetBrains",
+      googleFont: "IBM+Plex+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.012em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "calt", "kern"',
+    h1ScaleClamp: "clamp(2.25rem, 5vw, 4.25rem)",
+    bodyBaseSize: "1.0625rem",
+    bodyLineHeight: "1.68",
+  },
+
+  colors: {
+    background: { hsl: "36 28% 92%", from: "deep cream catalogue stock — Coffee House / Graywolf" },
+    foreground: { hsl: "220 22% 14%", from: "ink-navy black — printer's ink, never pure" },
+    card: { hsl: "36 32% 95%", from: "lighter cream — book-listing surface" },
+    popover: { hsl: "36 32% 95%", from: "matches card" },
+    primary: { hsl: "220 50% 28%", from: "series-marker ink-navy — New Directions numbered-series feel" },
+    primaryForeground: { hsl: "36 28% 92%", from: "cream on ink-navy" },
+    secondary: { hsl: "36 22% 87%", from: "deeper cream — catalogue divider, masthead row" },
+    secondaryForeground: { hsl: "220 22% 14%", from: "ink on deeper cream" },
+    muted: { hsl: "36 22% 87%", from: "same as secondary" },
+    mutedForeground: { hsl: "220 12% 38%", from: "trade-catalogue gray — pub-dates, ISBNs" },
+    accent: { hsl: "36 20% 84%", from: "hover surface — cream deeper still" },
+    accentForeground: { hsl: "220 22% 14%", from: "ink on hover" },
+    border: { hsl: "30 12% 76%", from: "catalogue-page hairline, slightly warmer than gray" },
+    input: { hsl: "30 12% 76%", from: "same as border" },
+    ring: { hsl: "220 50% 28%", from: "ink-navy — focus" },
+    destructive: { hsl: "8 60% 42%", from: "out-of-print indicator" },
+    destructiveForeground: { hsl: "36 28% 92%", from: "cream on destructive" },
+    brand: {
+      ink: { hsl: "220 22% 14%", from: "printer's ink — semantic foreground" },
+      cream: { hsl: "36 28% 92%", from: "catalogue cream — semantic background" },
+      "ink-navy": { hsl: "220 50% 28%", from: "series-marker navy — also semantic primary" },
+      oxblood: { hsl: "0 45% 28%", from: "fiction-mark oxblood, used for fiction genre tag only" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128],
+    containerMax: "max-w-5xl",
+    containerPadding: "px-6 lg:px-12",
+    sectionPadding: {
+      hero: "pt-24 pb-16 lg:pt-40 lg:pb-24",
+      default: "py-20 lg:py-28",
+      tight: "py-12 lg:py-18",
+    },
+  },
+
+  radius: {
+    base: "0",
+    pillsAllowed: false,
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "hairline-bottom":
+        "0 1px 0 0 hsl(var(--border))",
+      "catalogue-rule":
+        "0 1px 0 0 hsl(var(--border)), inset 0 1px 0 0 hsl(var(--border))",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1100,
+      loop: 4000,
+      ambient: 30000,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(20px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 1100,
+        iteration: "once",
+        purpose: "catalogue section entrance — print-publication settle",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Text-link CTAs with ink-navy on hover; 'Subscribe' is the single solid-fill — ink-navy bg + cream text. " +
+      "Pills disallowed — catalogue listings are rectangular.",
+    card:
+      "Hairline rules top + bottom, no fill differentiation from page. Padding p-7 lg:p-10. " +
+      "Title in display serif italic; author in display serif roman; metadata (ISBN, pub-date) in mono.",
+    input:
+      "Border-bottom only (1px ink). Label above in mono uppercase, small.",
+    cta:
+      "Text-link with ink, hover transitions to ink-navy. Never a chip. " +
+      "'Subscribe' is the single exception — solid ink-navy rectangle with cream text.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.18)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};