@stylecrib/cli 0.3.1 → 0.3.3

package/themes/fintech-trust/tokens.ts

@@ -0,0 +1,192 @@
+import type { Direction } from "../schema";
+
+export const fintechTrust: Direction = {
+  name: "fintech-trust",
+  ethos:
+    "Robinhood signal-green · Wealthfront soft elevation · Wise warm sans · Brex deep navy canvas · Public charts as hero",
+  references: [
+    { brand: "Robinhood", trait: "dark-mode signal-green confirmations" },
+    { brand: "Wealthfront", trait: "Plus Jakarta Sans + soft elevated cards" },
+    { brand: "Wise", trait: "warm sans + currency-data tables" },
+    { brand: "Brex (marketing site)", trait: "deep navy canvas + sage signal" },
+    { brand: "Public.com", trait: "charts treated as hero element, not afterthought" },
+  ],
+  feel:
+    "Deep navy canvas with sage-green signal accents and breathing chart surfaces. " +
+    "Soft elevated cards, generous tabular numerics, restrained typographic confidence. " +
+    "Reads as quiet competence — the brokerage that holds your retirement, not the crypto exchange that wants your attention.",
+
+  fonts: {
+    display: {
+      family: "Plus Jakarta Sans",
+      fallback: ["Inter", "system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "Wealthfront display face — geometric, slightly humanist, trustworthy without being cold",
+      googleFont: "Plus+Jakarta+Sans",
+      weights: [500, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+      from: "Brex/Robinhood marketing body — neutral, readable at small sizes against dark navy",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["IBM Plex Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "tabular numerics for prices, balances, percentage moves — instrument-cluster heritage",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.02em",         // Plus Jakarta tightens nicely at display sizes
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "cv11", "ss01"',   // tabular nums everywhere — money never shifts width
+    h1ScaleClamp: "clamp(2.5rem, 6vw, 4.5rem)",      // confident, not theatrical
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: { hsl: "220 38% 8%", from: "Brex deep navy canvas — almost-black with strong blue bias" },
+    foreground: { hsl: "210 30% 96%", from: "cool off-white — readable on navy without harsh contrast" },
+    card: { hsl: "220 32% 12%", from: "elevated card surface — Wealthfront soft lift above navy" },
+    popover: { hsl: "220 30% 14%", from: "popover/menu surface, one tier above card" },
+    primary: { hsl: "152 56% 50%", from: "Robinhood signal-green — the gains-up confirmation color" },
+    primaryForeground: { hsl: "220 38% 8%", from: "navy on sage — high-contrast positive action" },
+    secondary: { hsl: "220 24% 18%", from: "navy-shadowed surface, secondary tier" },
+    secondaryForeground: { hsl: "210 30% 96%", from: "cool white on navy secondary" },
+    muted: { hsl: "220 22% 20%", from: "muted surface — backgrounds for quiet panels inside the dashboard" },
+    mutedForeground: { hsl: "215 14% 68%", from: "cool gray secondary text — captions, timestamps, table meta" },
+    accent: { hsl: "220 22% 22%", from: "hover surface — one stop lighter than muted" },
+    accentForeground: { hsl: "210 30% 96%", from: "cool white on accent" },
+    border: { hsl: "220 20% 24%", from: "soft navy hairline — visible at card edges, never assertive" },
+    input: { hsl: "220 20% 24%", from: "same as border — single hairline language across inputs" },
+    ring: { hsl: "152 56% 50%", from: "primary sage — focus ring matches the signal, not a separate color" },
+    destructive: { hsl: "358 70% 56%", from: "Robinhood loss-red — restrained, never neon" },
+    destructiveForeground: { hsl: "210 30% 96%", from: "cool white on loss-red" },
+    brand: {
+      sage: { hsl: "152 56% 50%", from: "= primary; Robinhood signal-green, also the brand-mark" },
+      "sage-deep": { hsl: "150 48% 38%", from: "darker sage — chart fill underneath the line, hover state" },
+      "sage-soft": { hsl: "152 40% 88%", from: "pale sage tint — chart axis gridlines, success-toast bg" },
+      navy: { hsl: "220 38% 8%", from: "= background; the canvas itself, semantic for void/shadow" },
+      "navy-mid": { hsl: "220 30% 18%", from: "mid-navy — gradient anchor and chart background fill" },
+      "chart-up": { hsl: "152 56% 50%", from: "= sage; explicit semantic token for positive deltas" },
+      "chart-down": { hsl: "358 70% 56%", from: "= destructive; explicit semantic token for negative deltas" },
+      gold: { hsl: "42 78% 62%", from: "Wise warm gold — currency-conversion accent, used sparingly" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96],   // medium density — charts need breathing room
+    containerMax: "max-w-7xl",          // wide — dashboard hero charts span full bleed
+    containerPadding: "px-6 lg:px-10",
+    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.625rem",                   // 10px — softer than fintech-card, never pillowy
+    pillsAllowed: true,                 // pills for ticker chips, percentage badges, status
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-elevated":
+        "0 1px 0 hsl(210 30% 96% / 0.04), " +
+        "0 8px 24px hsl(220 38% 4% / 0.4), " +
+        "0 24px 64px hsl(220 38% 4% / 0.5)",
+      "shadow-card":
+        "0 1px 0 hsl(210 30% 96% / 0.03), " +
+        "0 2px 8px hsl(220 38% 4% / 0.3)",
+      "glow-sage":
+        "0 0 0 1px hsl(var(--sage) / 0.3), " +
+        "0 8px 32px hsl(var(--sage) / 0.18)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 500,                       // crisp — finance UI confirms quickly
+      loop: 1800,                        // ticker pulse cadence
+      ambient: 8000,                     // chart-line drawing speed
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(8px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 500,
+        iteration: "once",
+        purpose: "standard content entrance — short, confident, no theatrics",
+      },
+      "chart-draw": {
+        css:
+          "from { stroke-dashoffset: 100%; }\n" +
+          "to { stroke-dashoffset: 0; }",
+        defaultDuration: 1800,
+        iteration: "once",
+        purpose: "line-chart entrance — SVG stroke-dashoffset reveal, the signature gesture",
+      },
+      "ticker-pulse": {
+        css:
+          "0%, 100% { opacity: 1; }\n" +
+          "50% { opacity: 0.6; }",
+        defaultDuration: 1800,
+        iteration: "infinite",
+        purpose: "live-price dot indicator — subtle heartbeat next to current quote",
+      },
+      "number-roll": {
+        css:
+          "from { opacity: 0; transform: translateY(-8px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 300,
+        iteration: "once",
+        purpose: "price/balance value change — replace-and-rise; tabular nums hold width",
+      },
+      "shimmer": {
+        css:
+          "0% { background-position: -200% 0; }\n" +
+          "100% { background-position: 200% 0; }",
+        defaultDuration: 1600,
+        iteration: "infinite",
+        purpose: "loading skeleton for chart panels and table rows",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Solid sage primary (sage bg, navy fg, rounded-lg, shadow-card) for the single positive action per surface. " +
+      "Secondary is ghost — border, foreground text, transparent fill. Tertiary is a text-link in sage. " +
+      "Hover deepens fill to sage-deep; never grows in scale — finance UI does not bounce.",
+    card:
+      "Rounded-[0.625rem], hairline border (--border), bg-card lifted off navy with shadow-elevated. " +
+      "Internal padding p-6 lg:p-8. Numbers always tabular, mono for prices, sans for labels. " +
+      "Chart cards span full width with the chart treated as primary content, not a sidebar widget.",
+    input:
+      "Full rounded-lg box, 1px --input border, bg-card. Label above in sans-medium. " +
+      "Focus = 2px sage ring at 40% opacity. Helper text below in muted-foreground. Currency inputs are mono-aligned right.",
+    cta:
+      "Primary sage button for the positive action (Deposit, Invest, Trade). " +
+      "Text-link sage for secondary navigation. Never red on a CTA — red is reserved for losses and destructive actions.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--sage) / 0.3)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.5)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/food-blog/THEME.md

@@ -0,0 +1,98 @@
+# Design Direction — Food-Blog
+
+## Ethos
+Bon Appétit cream-and-serif · Smitten Kitchen warm density · Serious Eats structured recipes · NYT Cooking Georgia hierarchy · Eater deep editorial
+
+## Feel
+Warm cream paper, serif headlines that look like a cookbook spine, generous step-typography you can read with floured hands. Photographic food anchors at the top of every recipe, mono tabular numbers for ingredient quantities. The page smells faintly of butter. This is *cookbook-on-the-counter* energy — designed to be read while cooking, not while commuting.
+
+## Reference brands
+- **Bon Appétit** → cream paper + Playfair Display + food-photography editorial. The hero photo is the headline; the title sits beneath in serif.
+- **Smitten Kitchen** → warm cream + serif + dense recipe layout. Personal essay flows into method without ceremony.
+- **Serious Eats** → structured recipe cards + dense info-tables. Equipment notes, prep timers, why-it-works boxes treated as first-class content.
+- **NYT Cooking** → warm cream + Georgia-feel serif + structured ingredient cards with serving-size scalers.
+- **Eater** → deep cream + dense editorial + photographic anchors. The publication voice; the restaurant-review register.
+
+## 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) → lighter cream (card) → deeper cream (secondary/muted/accent). Depth comes from hairline borders and a soft drop shadow on recipe cards and hero photos — never from saturated fills.
+
+Brand tokens: `--cream`, `--cocoa`, `--paprika`, `--butter`, `--basil`, `--ink-soft`. Primary is NYT Cooking paprika — the recipe-mark and save-button color. Basil is reserved for ingredient/diet tags (vegan, gluten-free, 30-minute). Butter is the saved/starred state. Cocoa replaces black.
+
+## Typography
+- **Display:** Playfair Display (Bon Appétit / Eater cookbook serif). h1–h4, high-contrast didone for recipe titles. Tracking `-0.02em` — Playfair tightens noticeably at display size, cookbook-spine feel.
+- **Body:** Source Serif 4 (NYT Cooking / Smitten Kitchen reading serif). Body base **18px** with **line-height 1.75** — read-at-arms-length, kitchen counter legible.
+- **Mono:** JetBrains Mono. Ingredient quantities, oven temps, prep/cook timers — Serious Eats tabular precision.
+
+H1 uses `clamp(2.75rem, 7vw, 5.5rem)` — generous recipe-title scale, never broadcast-huge. Numbers and fractions get `font-variant-numeric: tabular-nums` plus the `"frac"` feature so `1/2 tsp` renders as a proper vulgar fraction. Font features: `"ss01"`, `"calt"`, `"tnum"`, `"frac"`.
+
+## Spacing
+- **Container:** `max-w-3xl px-6 lg:px-10` — prose-and-recipe column. 768px reads like a cookbook page; wider breaks the recipe flow.
+- **Section padding tiers:**
+  - Hero: `pt-20 pb-12 lg:pt-32 lg:pb-20` (oversized for hero food photo + title block)
+  - Default: `py-16 lg:py-28`
+  - Tight: `py-10 lg:py-16`
+- **Allowed scale values:** 4 6 8 12 16 20 24 32 40 48 64 96 128.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier on token.
+
+The palette is warm-paper-first: cream, cocoa, paprika are the load-bearing tokens. Basil and butter are garnish — used sparingly, never in primary action. Pure white and pure black are forbidden — `--cream` and `--cocoa` replace them.
+
+## Radius
+`--radius: 0.25rem`. Slight softening — recipe cards aren't sharp print, they're glossy-magazine-cards. Pills ARE allowed (`pillsAllowed: true`) — ingredient tags, dietary tags and time-to-cook chips read as pills.
+
+## Shadows
+**Soft.** Three utilities:
+- `.hairline-rule` — 1px border-bottom, parchment crease for section dividers
+- `.recipe-card` — hairline + soft cocoa-tinted drop (12px blur), cookbook-spread feel
+- `.photo-frame` — hairline + heavier cocoa drop (24px blur, 60px spread), hero food photo lift
+
+Shadows are cocoa-tinted, never gray — neutral shadows on cream paper look cold.
+
+## Motion
+Four keyframes — restrained but warmer than editorial:
+- `fade-rise` (900ms) — recipe step entrance, settles into place at reading pace
+- `step-number` (600ms) — numbered step circle pops into place beside its instruction
+- `timer-pulse` (3200ms, infinite) — active cook-timer cell pulses warm, like an oven indicator
+- `photo-pan` (24000ms, infinite) — hero food photography slow drift, Bon Appétit cover-shot
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` honored — timer-pulse collapses to a static highlighted cell, photo-pan disables.
+
+## Component patterns
+- **Buttons:** primary save/start-cooking = paprika filled rectangle, cream text, sentence-case label in display serif. Secondary = transparent + 1px cocoa border, cocoa text. Tertiary = serif text-link in paprika with underline-on-hover.
+- **Cards:** `0.25rem` radius, hairline border, bg-card a hair lighter than the page. Recipe cards use `.recipe-card` shadow; hero photo blocks use `.photo-frame`. Padding `p-6 lg:p-10`. Title in Playfair, byline/dateline in mono uppercase tracking `0.08em`.
+- **Inputs:** border-bottom only for inline prose forms (newsletter signup, search). Full-box variant for structured forms (recipe scaling, serving-size adjuster). Label sits above in display serif. Focus ring is paprika, 1px.
+- **CTA:** save-recipe and start-cooking get the paprika fill — one per page maximum. Inline recipe-step CTAs (jump to ingredients, print, save) are serif text-links in paprika. **Never a basil-green fill** — basil is for tags only.
+
+## Recommended rich media
+Food-Blog is photography-led the way Bon Appétit and Eater are. Lead media is **food photography color-graded to Fuji Pro 400H** (warm highlights, soft greens, painterly shadow) — overhead flat-lays for finished dishes, 45-degree on-the-stove for process shots, hands-in-frame for kneading/folding/plating. Avoid the harsh top-light "Instagram food" look; the reference is editorial cookbook photography.
+
+Illustrations, where used, are **gouache-style food illustrations** (Bon Appétit's recurring style) or **woodcut-style spot illustrations** (NYT Cooking-adjacent) — never 3D-rendered food, never AI-glossy plate-on-marble stock.
+
+**AI tool recommendations:** **Midjourney / Flux** prompts like *"overhead food photography, Fuji Pro 400H, natural window light, linen tablecloth, hands at edge of frame, Bon Appétit cookbook style"* for hero shots; *"gouache illustration of [ingredient], loose brush strokes, cookbook spot illustration, cream background"* for illustrations. Explicitly prompt for film grain and natural light — Midjourney's default food output is plastic.
+
+**Aspect ratios:** 4:5 portrait for hero (cookbook-page convention); 3:2 landscape for process shots; 1:1 square only inside step-cards (icon-scale). Never 16:9 widescreen (cinematic, wrong register).
+
+**Video:** short cooking-process loops are welcome — autoplay muted, ≤8s, AV1 ≤3 MB. Hands-only POV process shots work best. Avoid talking-head video; if a chef speaks, transcribe and use the prose.
+
+**Performance:** hero AVIF ≤180 KB at 2000w; step-card photos ≤70 KB; recipe page total media budget ≤1.5 MB. LCP under 2s. Cream backgrounds and warm-graded photos compress well in AVIF — exploit that.
+
+**Avoid:** dark moody food photography (cinematic territory), top-light Instagram food (wrong register), stock food photography with watermarks, 3D-rendered food, gradient backgrounds behind food (overlay shadows are fine, gradients are not), generic restaurant interior stock.
+
+**Accessibility:** long-form alt-text for food photography — describe the dish, the plating, the apparent cooking stage. *"A finished bowl of mushroom risotto, topped with shaved parmesan and parsley, on a linen tablecloth in window light."* Ingredient quantities are read by screen readers in proper units — never rely on visual layout to convey amounts.
+
+## Component families
+None at install time. Expect early conventions around `<RecipeCard>`, `<IngredientList>`, `<MethodStep>`, `<ServingScaler>`, `<NutritionTable>`, `<CookTimer>`.
+
+## Details
+- **Selection:** `hsl(var(--paprika) / 0.2)` background, foreground text.
+- **Focus ring:** `1px solid hsl(var(--ring))` — quiet, cookbook-page calm.
+- **Scrollbar:** thin.
+
+## 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/food-blog/tokens.ts

@@ -0,0 +1,183 @@
+import type { Direction } from "../schema";
+
+export const foodBlog: Direction = {
+  name: "food-blog",
+  ethos:
+    "Bon Appétit cream-and-serif · Smitten Kitchen warm density · Serious Eats structured recipes · NYT Cooking Georgia hierarchy · Eater deep editorial",
+  references: [
+    { brand: "Bon Appétit", trait: "cream paper + Playfair Display + food-photography editorial" },
+    { brand: "Smitten Kitchen", trait: "warm cream + serif + dense recipe layout" },
+    { brand: "Serious Eats", trait: "cream + structured recipe cards + dense info-tables" },
+    { brand: "NYT Cooking", trait: "warm cream + Georgia serif + structured ingredient cards" },
+    { brand: "Eater", trait: "deep cream + dense editorial + photographic anchors" },
+  ],
+  feel:
+    "Warm cream paper, serif headlines that look like a cookbook spine, generous step-typography " +
+    "you can read with floured hands. Photographic food anchors at the top of every recipe, mono " +
+    "tabular numbers for ingredient quantities. The page smells faintly of butter.",
+
+  fonts: {
+    display: {
+      family: "Playfair Display",
+      fallback: ["EB Garamond", "Iowan Old Style", "Georgia", "Times New Roman", "serif"],
+      from: "Bon Appétit / Eater cookbook serif — high-contrast didone for recipe titles and section heads",
+      googleFont: "Playfair+Display",
+      weights: [400, 600, 700, 900],
+    },
+    body: {
+      family: "Source Serif 4",
+      fallback: ["Source Serif Pro", "Iowan Old Style", "Georgia", "Times New Roman", "serif"],
+      from: "NYT Cooking / Smitten Kitchen reading serif — Georgia-feel body, kitchen-counter legible at distance",
+      googleFont: "Source+Serif+4",
+      weights: [400, 600, 700],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["Berkeley Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "ingredient quantities, oven temps, prep/cook timers — Serious Eats tabular precision",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.02em",        // Playfair tightens noticeably at display size — cookbook-spine feel
+    bodyTracking: "0",
+    fontFeatureSettings: '"ss01", "calt", "tnum", "frac"',
+    h1ScaleClamp: "clamp(2.75rem, 7vw, 5.5rem)",   // generous recipe-title scale, never broadcast-huge
+    bodyBaseSize: "1.125rem",                       // 18px — read-at-arms-length, kitchen counter
+    bodyLineHeight: "1.75",                         // generous step spacing — fingers find their place
+  },
+
+  colors: {
+    background: { hsl: "36 38% 94%", from: "Bon Appétit warm cream — pastry-paper, not bone" },
+    foreground: { hsl: "24 22% 14%", from: "deep cocoa ink — chocolate, never pure black on cream" },
+    card: { hsl: "36 45% 97%", from: "lighter cream — recipe card sits a hair brighter than the page" },
+    popover: { hsl: "36 45% 97%", from: "same as card — depth from hairline border only" },
+    primary: { hsl: "12 68% 42%", from: "NYT Cooking paprika red — the recipe-mark and save-button color" },
+    primaryForeground: { hsl: "36 38% 94%", from: "cream on paprika" },
+    secondary: { hsl: "36 28% 89%", from: "warm cream, one tier deeper — ingredient-list backdrop" },
+    secondaryForeground: { hsl: "24 22% 14%", from: "cocoa ink on warm cream" },
+    muted: { hsl: "36 24% 88%", from: "muted surface — sidebar/aside backdrop, same family as secondary" },
+    mutedForeground: { hsl: "24 14% 38%", from: "secondary text — coffee-with-milk gray, never neutral" },
+    accent: { hsl: "36 30% 86%", from: "warm cream deeper still — hover surface only" },
+    accentForeground: { hsl: "24 22% 14%", from: "cocoa ink on hover" },
+    border: { hsl: "24 18% 78%", from: "Eater editorial hairline — visible but soft, like a parchment crease" },
+    input: { hsl: "24 18% 78%", from: "same as border — single hairline language across forms" },
+    ring: { hsl: "12 68% 42%", from: "paprika — focus is the recipe-mark color" },
+    destructive: { hsl: "0 70% 44%", from: "alert red — more saturated than paprika, only for errors and deletes" },
+    destructiveForeground: { hsl: "36 38% 94%", from: "cream on alert" },
+    brand: {
+      cream: { hsl: "36 38% 94%", from: "Bon Appétit pastry-paper — the canvas, also background" },
+      cocoa: { hsl: "24 22% 14%", from: "deep cocoa ink — the foreground type color, also semantic" },
+      paprika: { hsl: "12 68% 42%", from: "NYT Cooking recipe-mark — primary action color" },
+      butter: { hsl: "44 78% 62%", from: "buttercream yellow — saved/starred state, garnish accent only" },
+      basil: { hsl: "92 32% 38%", from: "deep basil green — herb chips, ingredient-tag color, never primary" },
+      "ink-soft": { hsl: "24 18% 32%", from: "softer cocoa — captions, datelines, byline rules" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 96, 128],   // editorial breathing for recipe steps
+    containerMax: "max-w-3xl",         // prose-and-recipe column; 768px reads like a cookbook page
+    containerPadding: "px-6 lg:px-10",
+    sectionPadding: {
+      hero: "pt-20 pb-12 lg:pt-32 lg:pb-20",        // oversized hero photo + title block
+      default: "py-16 lg:py-28",
+      tight: "py-10 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "0.25rem",                  // slight softening — recipe cards aren't sharp print
+    pillsAllowed: true,               // ingredient tags (vegan, gluten-free, 30-min) read as pills
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "hairline-rule":
+        "0 1px 0 0 hsl(var(--border))",   // section divider — parchment crease
+      "recipe-card":
+        "0 1px 0 0 hsl(var(--border)), " +
+        "0 12px 32px hsl(24 22% 14% / 0.06)",   // recipe card lifts off the page just barely — cookbook spread
+      "photo-frame":
+        "0 1px 0 0 hsl(var(--border)), " +
+        "0 24px 60px hsl(24 22% 14% / 0.12)",   // hero food photo carries more weight
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 900,                    // step-by-step entrance, unhurried — recipe reading pace
+      loop: 3200,                     // timer pulses
+      ambient: 24000,                 // slow drift on hero photography
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(16px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 900,
+        iteration: "once",
+        purpose: "recipe step entrance — settles into place as you scroll the method",
+      },
+      "step-number": {
+        css:
+          "from { opacity: 0; transform: scale(0.92); }\n" +
+          "to { opacity: 1; transform: scale(1); }",
+        defaultDuration: 600,
+        iteration: "once",
+        purpose: "numbered step circle pops into place beside its instruction",
+      },
+      "timer-pulse": {
+        css:
+          "0%, 100% { background-color: hsl(var(--paprika) / 0.0); }\n" +
+          "50% { background-color: hsl(var(--paprika) / 0.12); }",
+        defaultDuration: 3200,
+        iteration: "infinite",
+        purpose: "active cook-timer cell pulses warm — like an oven indicator light, never harsh",
+      },
+      "photo-pan": {
+        css:
+          "0% { transform: scale(1.04) translate(0, 0); }\n" +
+          "100% { transform: scale(1.12) translate(-1.5%, -0.8%); }",
+        defaultDuration: 24000,
+        iteration: "infinite",
+        purpose: "hero food photography slow drift — Bon Appétit cover-shot camera push",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",
+
+  patterns: {
+    button:
+      "Primary save/start-cooking action = paprika filled rectangle, cream text, 0.25rem radius, sentence-case label in display serif. " +
+      "Secondary = transparent with 1px cocoa border, cocoa text. " +
+      "Tertiary = serif text-link in paprika, underline-on-hover. " +
+      "Ingredient/diet tags = basil-bordered pills with cocoa text on cream — chip, not button.",
+    card:
+      "0.25rem radius, hairline border (--border), bg-card a hair lighter than the page. " +
+      "Recipe cards use recipe-card shadow; hero photo blocks use photo-frame. " +
+      "Padding p-6 lg:p-10. Title in Playfair Display, byline/dateline in mono uppercase tracking 0.08em.",
+    input:
+      "Border-bottom only (1px ink-soft) for inline prose forms (search, newsletter signup). " +
+      "Full-box variant for structured forms (recipe scaling, serving-size adjuster): 1px --border, bg-card. " +
+      "Label sits above in display serif. Focus ring is paprika, 1px.",
+    cta:
+      "Save-recipe and start-cooking get the paprika fill — one per page maximum. " +
+      "Inline recipe-step CTAs (jump to ingredients, print, save) are serif text-links in paprika. " +
+      "Never a green fill (basil is for tags only).",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--paprika) / 0.2)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/forum-classic/THEME.md

@@ -0,0 +1,100 @@
+# Design Direction — Forum-Classic
+
+## Ethos
+Reddit upvote-orange + density · Hacker News beige + Verdana · Lobste.rs muted indie · Tildes restraint + serif accents · Metafilter blue link tradition
+
+## Feel
+Dense, link-first, text-river. The page is a list of titles with vote counts and a small handle — no hero images, no cards with shadows, no decoration earned by composition. Mono-leaning sans for everything; the only color worth spending is the upvote arrow and the link blue. Reads as community-archive — the same shape you'd recognize across Reddit, HN, Lobste.rs, and Metafilter.
+
+Where `dense-utility` is Bloomberg-terminal financial-instrument density, forum-classic is text-and-link community density. Both share a tight scale, but forum-classic uses warm-beige humanism where dense-utility goes cool-grid.
+
+## Reference brands
+- **Reddit (old.reddit)** → upvote orange + dense link list + small avatar + nested-comment indent. The shape of the community web.
+- **Hacker News** → beige page wash + Verdana-feel body + orange wordmark + flat link list. Maximum signal-to-decoration ratio.
+- **Lobste.rs** → muted indie palette + categorized tags + density. The smart younger cousin of HN.
+- **Tildes** → restraint + serif accents + group-driven nav. The reformed, lower-noise alternative.
+- **Metafilter** → blue link tradition + community-driven thread weight. The original web-community blue.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names its brand origin.
+
+Surface stack: **beige page wash** (`36 30% 96%`, HN's page color) → **white card** (`0 0% 100%`) → **deeper beige** (`36 20% 92%`, alt-row striping + visited rows). Warm-neutral throughout — pure gray reads cold-corporate and breaks the community-archive feel.
+
+Primary is **Reddit upvote orange** (`16 100% 50%`) — also HN's wordmark orange. The single saturated color in the whole palette. Used for: upvote arrows, the active/upvoted state, the wordmark, focus rings.
+
+Brand tokens — community web traditions, preserved:
+- `--upvote-orange` (= primary) — Reddit arrow, HN wordmark, the action color.
+- `--downvote-blue` — Reddit's indigo-blue downvote (also Metafilter link blue).
+- `--link-blue` — unvisited link blue, pre-2010 web tradition.
+- `--link-purple` — visited link purple. **This direction honors visited-link styling** — that's part of the forum feel.
+- `--tag-green` / `--tag-purple` — Lobste.rs category-tag colors. Used for inline category chips.
+- `--mod-distinguished` — Reddit's distinguished-mod green name color.
+
+## Typography
+- **Display:** IBM Plex Sans — Verdana lineage, humanist, condensed enough for dense titles. h1–h4 weights 600/700.
+- **Body:** IBM Plex Sans (same family — single-face forum convention, like HN). Base **14px** with **line-height 1.45** — the forum-density default.
+- **Mono:** IBM Plex Mono — post-meta, vote counts, code blocks in comments. Tabular numerics (`"tnum"`) globally on for score columns.
+
+H1 uses `clamp(1.5rem, 3vw, 2rem)` — forums don't do marketing-hero sizes. The largest type on the page is the post title, and that lives at body-size + 2px.
+
+## Spacing
+- **Container:** `max-w-5xl px-3 lg:px-4` — narrow horizontal padding; the page edges in.
+- **Section padding tiers:**
+  - Hero: `pt-8 pb-6 lg:pt-12 lg:pb-8` — forums barely have heroes.
+  - Default: `py-8 lg:py-12`
+  - Tight: `py-6 lg:py-8`
+- **Allowed scale values:** 2 4 6 8 10 12 16 20 24 32 40. **Includes 2px** — vote arrows and chrome use it.
+
+## Color
+No hex in components. All color via tokens. Opacity via `/N`.
+
+The palette is **beige-and-ink with one orange + the link blues**. Resist adding any second saturated color. Tag chips can use `--tag-green` / `--tag-purple`, but only inline at small size, never as a surface fill.
+
+**Visited links render in `--link-purple`** — this is a feature, not a relic. Forum users rely on it to triage which threads they've already read.
+
+## Radius
+`--radius: 0.2rem` (3px). **Barely rounded** — HN / old-reddit chrome. Pills are **disallowed** (`pillsAllowed: false`) — they read web-app, not forum. Tags are tiny bordered rects, not pills.
+
+## Shadows
+Minimal — two utilities only:
+- `.thread-row-hover` — inset 1px border on hover (deeper than the resting hairline). The row hover state is a border darken, not a drop shadow.
+- `.hairline-rule` — single 1px dividing rule between rows.
+
+**No drop shadows, no glows.** Depth comes from row hairlines.
+
+## Motion
+Two keyframes, fast and quiet:
+- `vote-bounce` (240ms) — small upward bounce on the arrow when an upvote/downvote is tapped. Confirms the action; nothing more.
+- `row-flash` (1000ms once) — newly-loaded thread rows flash orange-tinted then fade to baseline. Helps the eye find what's new in a paginated list.
+
+**Ambient duration is 0** — forums don't have ambient motion. No parallax, no marquee, no skeleton shimmer (forums render so fast they don't need skeletons).
+
+## Component patterns
+- **Buttons:** default = small bordered rect, foreground text, near-square (rounded-sm only). Primary = orange-bordered rect with orange text. Filled-orange is reserved for the **upvoted/selected** state. No pills. No gradients. Buttons are inline-sized to their label, never full-width.
+- **Cards:** **threads and comments are rows, not cards** — hairline-top dividers, no fill differentiation. Where a true card is needed (sidebar widget), use white bg with 1px border and rounded-sm. Padding tight (`p-3 lg:p-4`). No drop shadows.
+- **Inputs:** full bordered box, rounded-sm. Focus = 1px orange border swap. Comment textarea is full-width with mono helper text below.
+- **CTAs:** the thread title IS the CTA — an inline text-link in `--link-blue`. Vote arrows are the action primitive. Every "reply", "share", "save", "report" is an inline small text-link in `--mutedForeground`, never a button.
+
+## Component families
+- `*ThreadRow` — vote-column + title-link + meta-row (handle + sub + time + comment-count).
+- `*Comment` — indented (1.5rem per depth) with hairline-left rule + vote-column + body + reply-row.
+- `*SidebarWidget` — white card with 1px border, small heading in display.
+
+## Recommended rich media
+**Almost none.** Forums are text-and-link surfaces. Where media is allowed:
+- **Thread thumbnails:** tiny 4:3 thumbnails at 70x52px next to a link row (Reddit-style preview chip). Never a hero image.
+- **Embedded comments:** quoted blocks in `--muted` background with a 3px left border in `--link-blue`.
+- **Sub-icons:** 24x24 square avatars (favicon-sized) for the subreddit/group identity in the meta row.
+
+**AVOID:** hero photography, illustration, video, gradients, any cinematic image treatment. The page is the list — adding decoration breaks the archive feel.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.3)` background, foreground text.
+- **Focus ring:** `1px solid hsl(var(--ring))`. Thin orange — matches the chrome.
+- **Scrollbar:** auto. Forums use the native scrollbar; restyling it reads over-designed.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction, generated at install time.