@stylecrib/cli 0.3.1 → 0.3.3

package/themes/mid-century/tokens.ts

@@ -0,0 +1,162 @@
+import type { Direction } from "../schema";
+
+export const midCentury: Direction = {
+  name: "mid-century",
+  ethos:
+    "Eames warmth · Saul Bass geometric play · Knoll restraint · Aalto natural · Pushpin Studios color",
+  references: [
+    { brand: "Eames", trait: "warmth — plywood, fiberglass, upholstery linen" },
+    { brand: "Saul Bass", trait: "geometric cut-paper play — Vertigo, Anatomy of a Murder, Golden Arm" },
+    { brand: "Knoll", trait: "restraint — mid-century catalog discipline" },
+    { brand: "Alvar Aalto", trait: "natural — wood and glass interiors" },
+    { brand: "Push Pin Studios", trait: "color — Milton Glaser era" },
+    { brand: "Mad Men set design", trait: "1962 composed period detail" },
+  ],
+  feel:
+    "Warm cream surfaces, geometric typography, a restrained palette built " +
+    "around a single bold accent. Not bright, not minimal — composed. " +
+    "Reads like a 1962 design magazine spread, not a Memphis-style throwback.",
+
+  fonts: {
+    display: {
+      family: "Futura",
+      fallback: ["DM Sans", "Avenir", "Century Gothic", "system-ui", "sans-serif"],
+      from: "Futura — Bauhaus origin, geometric mid-century canonical",
+      googleFont: undefined, // Futura is not on Google Fonts; DM Sans is the loaded fallback
+      weights: [400, 500, 700],
+    },
+    body: {
+      family: "DM Sans",
+      fallback: ["Futura", "system-ui", "-apple-system", "sans-serif"],
+      from: "DM Sans — geometric humanist, readable at small sizes, complements Futura",
+      googleFont: "DM+Sans",
+      weights: [400, 500, 700],
+    },
+    mono: {
+      family: "IBM Plex Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "IBM Plex Mono — modernist geometric mono, period-correct",
+      googleFont: "IBM+Plex+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "0",            // Futura is already geometric; no tightening needed
+    bodyTracking: "0",
+    fontFeatureSettings: '"ss01", "tnum"',
+    h1ScaleClamp: "clamp(2.25rem, 5vw, 4rem)",
+    bodyBaseSize: "1rem",            // 16px — composed, not dense, not magazine-oversized
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: { hsl: "36 25% 94%", from: "warm cream — Eames upholstery linen" },
+    foreground: { hsl: "25 8% 15%", from: "warm black, slight brown bias — printed-ink feel" },
+    card: { hsl: "36 28% 97%", from: "lifted cream — one step above the linen ground" },
+    popover: { hsl: "36 28% 97%", from: "same as card; depth from hairline + soft eames shadow" },
+    primary: { hsl: "14 75% 48%", from: "Saul Bass rust orange — the Vertigo poster red-orange" },
+    primaryForeground: { hsl: "36 25% 94%", from: "cream on rust" },
+    secondary: { hsl: "36 20% 89%", from: "warm cream, one tier deeper" },
+    secondaryForeground: { hsl: "25 8% 15%", from: "ink on warm cream" },
+    muted: { hsl: "36 20% 89%", from: "same as secondary; differentiation by usage, not color" },
+    mutedForeground: { hsl: "25 10% 38%", from: "warm slate — caption ink" },
+    accent: { hsl: "36 22% 86%", from: "warm cream, deepest tier — hover surface only" },
+    accentForeground: { hsl: "25 8% 15%", from: "ink on warm cream hover" },
+    border: { hsl: "30 14% 78%", from: "Knoll hairline — warm gray, suggestive not assertive" },
+    input: { hsl: "30 14% 78%", from: "same as border" },
+    ring: { hsl: "14 75% 48%", from: "primary, used for focus only" },
+    destructive: { hsl: "0 60% 42%", from: "muted alert red — sits next to rust without clashing" },
+    destructiveForeground: { hsl: "36 25% 94%", from: "cream on alert" },
+    brand: {
+      cream: { hsl: "36 25% 94%", from: "Eames linen — also semantic background" },
+      ink: { hsl: "25 8% 15%", from: "printed ink — also semantic foreground" },
+      rust: { hsl: "14 75% 48%", from: "Saul Bass rust orange — also semantic primary" },
+      avocado: { hsl: "75 40% 42%", from: "Eames green — secondary accent for category and chart" },
+      mustard: { hsl: "44 78% 50%", from: "Pushpin yellow — Milton Glaser era warm accent" },
+      teak: { hsl: "25 35% 38%", from: "Aalto warm wood — supporting brown for wood-grain surfaces" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 48, 64],   // breathing but composed — medium-low density
+    containerMax: "max-w-5xl",                       // composed column, wider than editorial prose
+    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.25rem",                  // subtle — not pillow-soft, not razor-sharp; mid-century is composed
+    pillsAllowed: false,              // tag/label shapes only; no Stripe-style status pills
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      hairline:
+        "0 1px 0 0 hsl(var(--border))", // catalog divider — single-line separator
+      "shadow-eames":
+        "0 1px 2px 0 hsl(25 20% 20% / 0.08)", // very soft 1px offset, low blur — card lift
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 900,                    // slow, composed entrances
+      loop: 6000,                     // ken-burns drift
+      ambient: 12000,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(16px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 900,
+        iteration: "once",
+        purpose: "the entrance — slow rise, no bounce, composed",
+      },
+      "ken-burns": {
+        css:
+          "from { transform: scale(1) translate(0, 0); }\n" +
+          "to { transform: scale(1.08) translate(-1%, -1%); }",
+        defaultDuration: 12000,
+        iteration: "infinite",
+        purpose: "slow zoom on hero photographs — Eames catalog stillness in motion",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",                     // medium-low — breathing but composed
+
+  patterns: {
+    button:
+      "Filled rect with 0.25rem radius. " +
+      "Primary = rust orange bg + cream text. " +
+      "Secondary = ghost (transparent bg, ink border + ink text, hover bg-accent). " +
+      "Tertiary = underlined text-link in rust color.",
+    card:
+      "Cream surface lifted one tier from background (--card), hairline border, " +
+      "soft .shadow-eames for gentle depth. Padding p-6 lg:p-8. " +
+      "Title in Futura; meta in IBM Plex Mono.",
+    input:
+      "Full box, 0.25rem radius, hairline border on cream card surface. " +
+      "Label above, geometric and small. Focus = 2px rust ring.",
+    cta:
+      "Underlined text-link in rust orange for inline CTAs. " +
+      "Hero/primary action = filled rust rect. No gradients, no pills.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/motorcycle-brand/THEME.md

@@ -0,0 +1,86 @@
+# Design Direction — Motorcycle-Brand
+
+## Ethos
+Harley-Davidson chrome-on-bone heritage · Ducati Italian race red · Triumph English-mono restraint · Indian Motorcycle script-mark heritage · BMW Motorrad engineered precision
+
+## Feel
+An industrial bone-and-leather canvas with race-red doing all the brand-mark work. Oversized condensed mono display does the badge-typography — model names read like they're stamped onto a fuel tank. Hairline rules everywhere; chrome-tinted dividers separate sections. Photography is machine-and-rider — never lifestyle stock. The page should feel like there's a V-twin idling underneath the scroll.
+
+## Reference brands
+- **Harley-Davidson** → industrial display mono, bone canvas, leather-and-chrome warmth, the HOG rider-club community spotlight as a first-class section.
+- **Ducati** → Italian race red as the singular brand mark, against carbon-black model stills.
+- **Triumph** → English engineering restraint — Bonneville nameplate mono, hairline divider rules, no decoration without function.
+- **Indian Motorcycle** → heritage script-mark, leather-tan warmth, the badge IS the typography.
+- **BMW Motorrad** → engineered precision — tabular spec strips, technical side-profile photography.
+
+## Tokens
+All tokens live in `src/index.css` as HSL triples. Every token's `from:` comment names its brand origin. Surface stack is **bone** (background) → **lifted bone** (card) → **deeper bone** (muted). Depth comes from thick 2px leather-ink borders, never from drop shadows. Pure white is forbidden — `--bone` replaces it; pure black is forbidden — `--leather-ink` replaces it.
+
+Brand tokens: `--bone`, `--leather-ink`, `--race-red`, `--race-red-deep`, `--chrome`, `--tan`. Primary is race-red. Chrome and tan are reserved for divider dots, fender-line accents, occasional heritage badge frames — never as a button face. Race-red is the ONLY color that wears the brand-mark role; no orange/yellow/green ever competes.
+
+## Typography
+- **Display:** Oswald (Harley tank-badge industrial mono). h1–h4. Tracking `0.04em` — condensed display reads better with positive tracking; broadcast badge feel.
+- **Body:** Work Sans (BMW Motorrad neutral engineering sans). Body base **16px** with **line-height 1.6**.
+- **Mono:** JetBrains Mono. Engine size, MSRP, torque, weight, top speed. Always `font-variant-numeric: tabular-nums`.
+
+H1 uses `clamp(3rem, 9vw, 7rem)` — tank-badge scale. Font features: `"tnum"`, `"ss01"`. All-caps treatment on display headings is the default, not the exception.
+
+## Spacing
+- **Container:** `max-w-7xl px-6 lg:px-10` — bike grids and community photography panoramas need width.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-32 lg:pb-24`
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-10 lg:py-16`
+- **Allowed scale values:** 4 8 12 16 20 24 32 40 48 64 80 96. Density tier is **medium**.
+
+## Color
+No hex anywhere. All color via tokens. The palette is intentionally tight: bone, leather-ink, race-red, chrome, tan. **Never a saturated fourth color** — heritage brands earn one brand-mark, not four. If a designer needs distinction, the answer is a thicker border or a tabular-mono numeral, not a new hue.
+
+## Radius
+`--radius: 0`. **Sharp corners only** — tank-badge corners. Pills are disallowed (`pillsAllowed: false`) — they read app/marketplace, not heritage motorcycle.
+
+## Shadows
+**Minimal.** Two utilities:
+- `.border-thick` — `inset 0 0 0 2px hsl(var(--border))`, the industrial bordered-block treatment (Harley fender-pinstripe weight).
+- `.hairline-double` — double-line divider rule between major sections (Triumph nameplate frame).
+
+No drop shadows. No glows. Heritage motorcycle marketing is matte print, not glass.
+
+## Motion
+Three keyframes:
+- `rev-in` — 600ms opacity + 16px translate, quick mechanical entrance.
+- `rumble` — 240ms tiny vertical tremor (±0.5px) on bike-grid tile hover. V-twin idle suggestion, sparingly used.
+- `marquee` — 40000ms infinite horizontal scroll for the rider-chapter membership belt.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` honored — `rumble` and `marquee` both go quiet.
+
+## Component patterns
+- **Buttons:** Solid race-red-on-bone for the single hero action with a 2px leather-ink border (Harley tank-badge layering). Secondary is leather-ink-bordered ghost on bone. Pills disallowed. Text-link in race-red for body CTAs.
+- **Cards:** Sharp 0 corners, 2px leather-ink border on bone or lifted-bone surface. Bike cards lead with side-profile machine photography (3:2 landscape), model name in oversized Oswald all-caps, spec line in mono. Hover may apply 240ms `rumble`.
+- **Inputs:** Full box with 2px border on lifted-bone. Sharp corners. Label above in mono-uppercase tracking `0.16em`. Focus shifts border to race-red.
+- **CTA links:** Solid race-red rectangle with 2px leather-ink border for hero action. Never a pill, never a gradient that isn't `red → red-deep`.
+
+## Recommended rich media
+The hero is **side-profile machine photography** — Triumph studio aesthetic, white-cyc background or matte black backdrop, raked single-light highlight on the tank. Secondary frames are **rider-and-machine documentary photography** — Sturgis B&W reportage, Iron Butt rally portraits, Indian Motorcycle's Burt Munro-flavored heritage shots. **Never showroom-floor stock photography. Never women-on-bikes lifestyle stock.**
+
+**AI tool recommendations:** **Midjourney v6+** with prompts like *"motorcycle side-profile product photography, studio-lit, matte black backdrop, single key light raking across fuel tank, Triumph brand-book aesthetic, medium format, 85mm, no people"*; *"motorcycle rider portrait, documentary photography, Sturgis rally, 1970s film stock, Tri-X grain, environmental"*. Avoid Midjourney's default "biker" prompt — produces leather-clad stock cliché. Prompt for documentary authorship.
+
+**Aspect ratios:** 3:2 landscape for machine shots; 4:5 portrait for rider documentary; 21:9 for hero panoramic. **Never 1:1.**
+
+**Video:** A single autoplay-muted hero reel of slow camera pan along the bike with the engine idling audio replaced by silence (autoplay is muted). 18–24 seconds, ≤6 MB per loop.
+
+**Avoid:** orange-on-orange decorative gradients (Halloween cliché), skull-and-flame iconography (parody territory), generic "freedom of the open road" stock highways, racing-stripe SVG decoration as background.
+
+## Component families
+None at install time. First likely families: bike-card, rider-spotlight, dealer-network-strip, chapter-belt-marquee.
+
+## Details
+- **Selection:** `hsl(var(--brand-race-red) / 0.28)` background, bone text.
+- **Focus ring:** `2px solid hsl(var(--ring))` — race red, thick to match the border language.
+- **Scrollbar:** auto.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/motorcycle-brand/tokens.ts

@@ -0,0 +1,174 @@
+import type { Direction } from "../schema";
+
+// Note: name is not in the schema enum at install time; the codegen pipeline
+// accepts new slugs by string and the type guard is updated on next schema sync.
+export const motorcycleBrand = {
+  name: "motorcycle-brand",
+  ethos:
+    "Harley-Davidson chrome-on-bone heritage · Ducati Italian race red · Triumph English-mono restraint · Indian Motorcycle script-mark heritage · BMW Motorrad engineered precision",
+  references: [
+    { brand: "Harley-Davidson", trait: "industrial display mono, bone canvas, leather-and-chrome warmth, rider-club community" },
+    { brand: "Ducati", trait: "Italian race red as the singular brand mark, against carbon-black" },
+    { brand: "Triumph", trait: "English engineering — restrained mono nameplate, hairline rules" },
+    { brand: "Indian Motorcycle", trait: "heritage script-mark, leather tan, badge-as-typography" },
+    { brand: "BMW Motorrad", trait: "engineered precision — tabular specs, technical photography" },
+  ],
+  feel:
+    "Industrial bone-and-leather canvas with race-red as the single brand-mark. " +
+    "An oversized condensed mono display does the badge-work — model names read like they're stamped " +
+    "on a tank. Hairline rules everywhere; chrome-tinted dividers separate sections. Photography is " +
+    "machine-and-rider, not lifestyle-stock. The page sounds like it has a V-twin idling underneath.",
+
+  fonts: {
+    display: {
+      family: "Oswald",
+      fallback: ["Anton", "Impact", "Haettenschweiler", "Arial Narrow Bold", "sans-serif"],
+      from: "Harley-Davidson tank-badge industrial mono — condensed, all-caps friendly, broadcast weight",
+      googleFont: "Oswald",
+      weights: [400, 500, 600, 700],
+    },
+    body: {
+      family: "Work Sans",
+      fallback: ["Inter", "system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "BMW Motorrad neutral engineering sans — clean, technical, screen-comfortable",
+      googleFont: "Work+Sans",
+      weights: [400, 500, 600, 700],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["Berkeley Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "tabular numerics for engine size, MSRP, torque — instrument-cluster heritage",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "0.04em",          // Oswald condensed reads better with positive tracking — broadcast badge feel
+    bodyTracking: "0.01em",
+    fontFeatureSettings: '"tnum", "ss01"',
+    h1ScaleClamp: "clamp(3rem, 9vw, 7rem)",   // oversized — tank-badge scale
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: { hsl: "38 22% 88%", from: "Harley bone — warm cream tank-paint canvas, never pure white" },
+    foreground: { hsl: "22 14% 14%", from: "deep leather-ink — body text on bone, never pure black" },
+    card: { hsl: "38 18% 92%", from: "lifted bone — card surface one tier above canvas" },
+    popover: { hsl: "38 18% 95%", from: "popover surface — two tiers up" },
+    primary: { hsl: "0 78% 46%", from: "Ducati Italian race red — the singular brand-mark color" },
+    primaryForeground: { hsl: "38 22% 92%", from: "bone on race red" },
+    secondary: { hsl: "22 14% 14%", from: "deep leather-ink — secondary tier doubles as foreground for fill-on-bone" },
+    secondaryForeground: { hsl: "38 22% 92%", from: "bone on leather-ink" },
+    muted: { hsl: "38 14% 82%", from: "deeper bone — quiet panel surface, leather-rubbed-into-paint feel" },
+    mutedForeground: { hsl: "22 10% 38%", from: "chrome-grey secondary text — readable on bone" },
+    accent: { hsl: "30 22% 64%", from: "chrome-tan accent — divider dots, decorative rules" },
+    accentForeground: { hsl: "22 14% 14%", from: "leather-ink on chrome-tan" },
+    border: { hsl: "22 14% 14%", from: "leather-ink — borders are thick and intentional, like a Harley fender pinstripe" },
+    input: { hsl: "22 14% 14%", from: "same as border — single industrial border language" },
+    ring: { hsl: "0 78% 46%", from: "race red — focus ring is the brand-mark" },
+    destructive: { hsl: "8 72% 40%", from: "deeper alarm red — distinct from primary race red" },
+    destructiveForeground: { hsl: "38 22% 92%", from: "bone on alarm red" },
+    brand: {
+      "race-red": { hsl: "0 78% 46%", from: "= primary; Ducati Italian race red, the singular brand-mark" },
+      "race-red-deep": { hsl: "356 80% 34%", from: "deeper race red — gradient anchor and hover state" },
+      bone: { hsl: "38 22% 88%", from: "= background; Harley tank-paint bone canvas" },
+      "leather-ink": { hsl: "22 14% 14%", from: "= foreground; deep saddle-leather ink" },
+      chrome: { hsl: "30 12% 78%", from: "polished chrome — fender, exhaust, badge-trim accent" },
+      tan: { hsl: "30 36% 58%", from: "Indian Motorcycle saddle-tan — heritage warmth, sparing use" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96],
+    containerMax: "max-w-7xl",         // bike grid + community photography need width
+    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-10 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "0",                          // sharp — tank-badge corners, never rounded
+    pillsAllowed: false,                // pills read app/marketplace; badge corners only
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "border-thick":
+        "inset 0 0 0 2px hsl(var(--border))",   // industrial bordered-block treatment, Harley fender-pinstripe weight
+      "hairline-double":
+        "inset 0 -1px 0 hsl(var(--border)), inset 0 -4px 0 hsl(var(--background)), inset 0 -5px 0 hsl(var(--border))",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 600,
+      loop: 2400,
+      ambient: 60000,
+    },
+    keyframes: {
+      "rev-in": {
+        css:
+          "from { opacity: 0; transform: translateY(16px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 600,
+        iteration: "once",
+        purpose: "section entrance — quick, mechanical, not languid",
+      },
+      "rumble": {
+        css:
+          "0%, 100% { transform: translateY(0); }\n" +
+          "25% { transform: translateY(-0.5px); }\n" +
+          "75% { transform: translateY(0.5px); }",
+        defaultDuration: 240,
+        iteration: "once",
+        purpose: "tiny hover tremor on bike-grid tiles — V-twin idle suggestion, sparingly",
+      },
+      "marquee": {
+        css:
+          "from { transform: translateX(0); }\n" +
+          "to { transform: translateX(-50%); }",
+        defaultDuration: 40000,
+        iteration: "infinite",
+        purpose: "rider-name / chapter-name horizontal strip — community membership belt",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Solid race-red-on-bone for the single hero action with a 2px leather-ink border (Harley tank-badge layering). " +
+      "Secondary actions are leather-ink-bordered ghost buttons on bone, text in leather-ink. " +
+      "Pills disallowed — every CTA is a sharp-cornered badge. " +
+      "Text-link in race-red for body CTAs.",
+    card:
+      "Sharp 0 corners. 2px leather-ink border (--border) on bone or lifted-bone surface. " +
+      "Internal padding p-6 lg:p-8. Bike cards lead with side-profile machine photography (3:2 landscape), " +
+      "model name in oversized Oswald all-caps, spec line in mono. " +
+      "Hover may apply a 240ms rumble.",
+    input:
+      "Full box with 2px --border on lifted-bone. Sharp corners. " +
+      "Label sits above in mono-uppercase, tracking 0.16em. Focus shifts border to race-red.",
+    cta:
+      "Solid race-red rectangle with 2px leather-ink border for hero action. " +
+      "Text-link in race-red for body. Never a pill, never a gradient that isn't red→red-deep.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--brand-race-red) / 0.28)",
+    selectionFg: "hsl(var(--brand-bone))",
+    focusRing: "2px solid hsl(var(--ring))",
+    scrollbarStyle: "auto",
+  },
+} satisfies Partial<Direction> & { name: string };

package/themes/museum/THEME.md

@@ -0,0 +1,83 @@
+# Design Direction — Museum
+
+## Ethos
+MoMA exhibition restraint · Met serif gravity · Tate Modern curatorial calm · Whitney cream paper · Guggenheim structural hierarchy
+
+## Feel
+A museum catalogue, not a museum app. Cream-paper background, serif display, exhibition titles set like wall labels. Color is almost entirely absent — a single restrained gallery red marks current shows. Photographs of works do all the visual work; never lifestyle photography, never crowd shots, never decorative SVG.
+
+## Reference brands
+- **MoMA** → exhibition-first homepage. Cream + ink. No marketing chrome.
+- **The Met** → Sabon-feel serif gravity. Deep ink on warm paper.
+- **Tate Modern** → curatorial restraint. The image of the work earns its space.
+- **Whitney Museum** → cream stock, hairline rules, exhibition dates set in mono.
+- **Guggenheim** → structural typographic hierarchy. No decorative color.
+
+## Tokens
+All tokens live in `src/index.css` as HSL triples. Surface stack is **cream paper** (background) → **lighter cream** (card) → **deeper cream** (secondary/muted/accent). Depth comes from hairline borders only. Brand tokens: `--ink`, `--cream`, `--gallery-red`, `--label-gray`.
+
+Primary is `--gallery-red` — a restrained 4° hue, 62% saturation, 36% lightness. Never used as button fill. Reserved for current-exhibition markers and hover states on key links.
+
+## Typography
+- **Display:** Cormorant Garamond (Met / MoMA wall-label serif feel). h1–h4. Tracking `-0.02em` — high-contrast serifs need it.
+- **Body:** Inter (Tate Modern body sans). 17px / 1.65 line height. Neutral, never warm.
+- **Mono:** JetBrains Mono. Exhibition dates, gallery floors, catalogue numbers, wall-label metadata. Always `font-variant-numeric: tabular-nums`.
+
+H1 uses `clamp(2.5rem, 6vw, 5rem)`. Exhibition titles use the display serif at a smaller scale than hero — the heading hierarchy is gentle, the way wall-label hierarchy is gentle.
+
+## Spacing
+- **Container:** `max-w-5xl px-6 lg:px-12` — wider than editorial, narrower than cinematic. Catalogue spread width.
+- **Section padding tiers:**
+  - Hero: `pt-28 pb-16 lg:pt-44 lg:pb-28`
+  - Default: `py-20 lg:py-32`
+  - Tight: `py-12 lg:py-20`
+- **Scale:** 4 6 8 12 16 20 24 32 40 48 64 80 96 128.
+
+## Color
+No hex. Tokens only. Opacity via `/N` modifier. White and pure black are forbidden — `--cream` and `--ink` replace them. Gallery red appears on **current-exhibition pills, hover states, focus ring, selection background** and almost nowhere else.
+
+## Radius
+`--radius: 0`. Sharp corners. Pills disallowed — exhibition signage is rectangular, museum maps are rectangular, gallery floor plans are rectangular.
+
+## Shadows
+**Minimal.** Two utilities: `.hairline-bottom` and `.hairline-top`. No drop shadows, no glows, no elevation language.
+
+## Motion
+Single keyframe: `fade-rise` (opacity + 20px translate, 1100ms). The only entrance gesture. No marquees, no parallax. Reveal duration is 1100ms — gallery-walk pace.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` honored.
+
+## Component patterns
+- **Buttons:** text-link CTAs that transition to gallery-red on hover. The single exception is 'Get tickets' / primary admission action — solid ink rectangle with cream text, sharp corners.
+- **Cards:** hairline top + bottom borders, no fill differentiation from page. Padding `p-8 lg:p-12`. Title in display serif; metadata (dates, gallery floor, curator) in mono uppercase tracking `0.18em`.
+- **Inputs:** border-bottom only (1px ink). Label above in mono uppercase. No placeholder-as-label.
+- **CTA links:** foreground ink, hover transitions to gallery-red. Never a chip, never a gradient.
+
+## Recommended rich media
+Photographs of works — only. Each image is a single work shot square or in its installation context, color-graded to a museum-catalogue neutral (slight warm cast, accurate skin tones in portraits of curators). Never lifestyle, never crowd shots at openings, never wide-angle gallery shots with visitors.
+
+**AI tool recommendations:** **Midjourney / Flux** with prompts like *"museum installation photograph, gallery wall, neutral lighting, color-accurate"* or *"painting reproduction for catalogue, slight warm cast, no shadows"*. Avoid AI gallery interiors — they always have wrong shadows.
+
+**Aspect ratios:** 1:1 square (work plate convention), 3:4 portrait (single-painting wall hang), or 3:2 landscape (installation view). Never 16:9 widescreen.
+
+**Captions are mandatory** and live in mono. Format: *"Artist Name, Title, year. Medium. Gallery floor."* — exactly the wall-label format.
+
+**Avoid:** lifestyle/event photography, generic museum-exterior shots, AI-rendered "art" (uncanny), decorative gradients, anything that reads as marketing rather than catalogue.
+
+**Accessibility:** alt-text describes the work itself, not the page composition. *"Painting: Joan Mitchell, Untitled, 1972, oil on canvas, large abstract field of cobalt and ochre."*
+
+## Component families
+- `Exhibition` family — list rows with dates, curator, gallery floor.
+- `Work` family — catalogue plate + artist + year + medium label.
+- `Admission` family — ticket type rows, no pricing-pillar layout.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.18)` — gallery red wash.
+- **Focus ring:** `1px solid hsl(var(--ring))` — gallery red, thin.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction.

package/themes/museum/tokens.ts

@@ -0,0 +1,147 @@
+import type { Direction } from "../schema";
+
+export const museum: Direction = {
+  name: "museum" as Direction["name"],
+  ethos:
+    "MoMA exhibition restraint · Met serif gravity · Tate Modern curatorial calm · Whitney cream paper · Guggenheim spiral discipline",
+  references: [
+    { brand: "MoMA", trait: "exhibition-first homepage, cream + ink, no chrome" },
+    { brand: "The Met", trait: "Sabon-feel serif display, deep ink on warm paper" },
+    { brand: "Tate Modern", trait: "curatorial restraint, image earns its space" },
+    { brand: "Whitney Museum", trait: "cream stock, hairline rules, exhibition dates set in mono" },
+    { brand: "Guggenheim", trait: "structural typographic hierarchy, no decorative color" },
+  ],
+  feel:
+    "Cream-paper museum catalogue. Serif display dominates; exhibition titles read like wall labels. " +
+    "Color is absent except for a single restrained gallery red used for current-show markers. " +
+    "Photographs of works are the only image language — never lifestyle, never crowd shots.",
+
+  fonts: {
+    display: {
+      family: "Cormorant Garamond",
+      fallback: ["EB Garamond", "Iowan Old Style", "Garamond", "Georgia", "serif"],
+      from: "Met / MoMA wall-label serif — high-contrast, exhibition-catalogue feel",
+      googleFont: "Cormorant+Garamond",
+      weights: [300, 400, 500, 600],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "Tate Modern body sans — neutral, never editorial-warm",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "exhibition dates, gallery floors, catalogue numbers — wall-label tabular feel",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.02em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "calt"',
+    h1ScaleClamp: "clamp(2.5rem, 6vw, 5rem)",
+    bodyBaseSize: "1.0625rem",
+    bodyLineHeight: "1.65",
+  },
+
+  colors: {
+    background: { hsl: "40 30% 95%", from: "cream catalogue stock — MoMA / Whitney paper" },
+    foreground: { hsl: "30 12% 14%", from: "deep warm ink, never pure black — wall-label legibility" },
+    card: { hsl: "40 32% 97%", from: "lighter cream — work-label surface" },
+    popover: { hsl: "40 32% 97%", from: "matches card; depth from hairline only" },
+    primary: { hsl: "4 62% 36%", from: "gallery red — current-exhibition marker, restrained" },
+    primaryForeground: { hsl: "40 30% 95%", from: "cream on gallery red" },
+    secondary: { hsl: "40 22% 91%", from: "cream paper, one tier deeper" },
+    secondaryForeground: { hsl: "30 12% 14%", from: "ink on deeper cream" },
+    muted: { hsl: "40 22% 91%", from: "same as secondary — single muted family" },
+    mutedForeground: { hsl: "30 8% 38%", from: "wall-label secondary text — slate ink" },
+    accent: { hsl: "40 20% 88%", from: "hover surface — cream paper deeper still" },
+    accentForeground: { hsl: "30 12% 14%", from: "ink on hover surface" },
+    border: { hsl: "30 10% 80%", from: "hairline rule — gallery floor plan line weight" },
+    input: { hsl: "30 10% 80%", from: "same as border" },
+    ring: { hsl: "4 62% 36%", from: "primary — gallery red on focus" },
+    destructive: { hsl: "0 65% 40%", from: "exhibition-closed indicator, more saturated than primary" },
+    destructiveForeground: { hsl: "40 30% 95%", from: "cream on destructive" },
+    brand: {
+      ink: { hsl: "30 12% 14%", from: "the deep ink — also semantic foreground" },
+      cream: { hsl: "40 30% 95%", from: "the catalogue paper — also semantic background" },
+      "gallery-red": { hsl: "4 62% 36%", from: "gallery red — current-show marker, also semantic primary" },
+      "label-gray": { hsl: "30 8% 38%", from: "wall-label gray — date strips, gallery floor numbers" },
+    },
+  },
+
+  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-28 pb-16 lg:pt-44 lg:pb-28",
+      default: "py-20 lg:py-32",
+      tight: "py-12 lg:py-20",
+    },
+  },
+
+  radius: {
+    base: "0",
+    pillsAllowed: false,
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "hairline-bottom":
+        "0 1px 0 0 hsl(var(--border))",
+      "hairline-top":
+        "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: "exhibition section entrance — slow, deliberate, gallery-walk pace",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",
+
+  patterns: {
+    button:
+      "Text-link CTAs with gallery-red on hover; primary action ('Get tickets') is the single solid-fill per page, " +
+      "ink bg + cream text, sharp corners. No pills, no rounded buttons — exhibition signage is rectangular.",
+    card:
+      "Hairline top + bottom borders, no fill differentiation from page. " +
+      "Internal padding p-8 lg:p-12. Title in display serif; metadata (dates, gallery floor) in mono uppercase.",
+    input:
+      "Border-bottom only (1px ink), no full box. Label sits above in mono uppercase, tracking 0.18em.",
+    cta:
+      "Text-link with foreground ink, hover transitions to gallery-red. Never a chip, never a gradient. " +
+      "'Get tickets' is the single exception — solid ink rectangle.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.18)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};