@stylecrib/cli 0.0.0-stage → 0.3.2

package/themes/restaurant-modern/tokens.ts

@@ -0,0 +1,172 @@
+import type { Direction } from "../schema";
+
+export const restaurantModern: Direction = {
+  name: "restaurant-modern",
+  ethos:
+    "Eleven Madison Park plating-as-art · Atomix NYC dark Korean fine dining · Pujol traditional Mexican warmth · Single Thread farm-to-table cream · Frantzén nordic-luxury restraint",
+  references: [
+    { brand: "Eleven Madison Park", trait: "cream + EB Garamond + plating-as-art photography" },
+    { brand: "Atomix (NYC)", trait: "dark + serif + Korean fine-dining moody intimacy" },
+    { brand: "Pujol", trait: "warm sand + traditional serif + Mexican fine-dining warmth" },
+    { brand: "Single Thread", trait: "cream + serif + farm-to-table imagery" },
+    { brand: "Frantzén", trait: "deep cream + restrained nordic-luxury, intimate room" },
+  ],
+  feel:
+    "Modern fine-dining restaurant site. Warm sand-cream canvas with deep cocoa ink " +
+    "and one olive-bronze accent. Full-bleed plating photography reads as still life. " +
+    "EB Garamond display at oversized scale, generous breathing, mono captions for " +
+    "course and producer credits. The page carries reservation-required gravity — " +
+    "the room exists, the chef exists, the booking is the conversation.",
+
+  fonts: {
+    display: {
+      family: "EB Garamond",
+      fallback: ["Cormorant Garamond", "Iowan Old Style", "Garamond", "Georgia", "serif"],
+      from: "EB Garamond — Eleven Madison Park / Single Thread restaurant-serif register; italic-friendly for course names",
+      googleFont: "EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500",
+      weights: [400, 500, 600],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["Söhne", "Neue Haas Grotesk", "system-ui", "-apple-system", "sans-serif"],
+      from: "Inter — the neutral sans body; Pujol/Atomix support type, lets the serif and the food carry",
+      googleFont: "Inter:wght@400;500",
+      weights: [400, 500],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "JetBrains Mono — course numbers (I, II, III also acceptable), producer credits, allergen labels, small only",
+      googleFont: "JetBrains+Mono:wght@400",
+      weights: [400],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.012em",       // EB Garamond at restaurant-display scale — slight negative tracking
+    bodyTracking: "0",                  // Inter body — neutral, lets the serif lead
+    fontFeatureSettings: '"liga", "dlig", "onum", "kern"',
+    h1ScaleClamp: "clamp(2.75rem, 7vw, 6rem)",   // dining-room hero scale, Single Thread / EMP register
+    bodyBaseSize: "1.0625rem",         // 17px — menu-card prose, comfortable for a long read
+    bodyLineHeight: "1.7",             // generous, restaurant-program pacing
+  },
+
+  colors: {
+    background: { hsl: "34 26% 92%", from: "Pujol warm sand-cream — restaurant linen and unbleached menu card" },
+    foreground: { hsl: "24 22% 14%", from: "Eleven Madison Park deep cocoa ink — slate-stone reduction shadow" },
+    card: { hsl: "34 30% 96%", from: "Single Thread lifted ivory — one tier brighter than the linen page" },
+    popover: { hsl: "34 30% 96%", from: "same as card; depth from hairline only" },
+    primary: { hsl: "32 38% 28%", from: "Frantzén olive-bronze — restrained nordic-luxury accent, used for primary action and dish-card eyebrows" },
+    primaryForeground: { hsl: "34 26% 92%", from: "warm sand-cream on olive-bronze primary" },
+    secondary: { hsl: "34 22% 88%", from: "Pujol warm sand, one tier deeper — printed-menu second-tone" },
+    secondaryForeground: { hsl: "24 22% 14%", from: "cocoa ink on warm sand" },
+    muted: { hsl: "34 22% 88%", from: "same as secondary — differentiation by usage, not color" },
+    mutedForeground: { hsl: "24 14% 38%", from: "Atomix muted slate ink — course descriptions and small print" },
+    accent: { hsl: "34 24% 84%", from: "warm sand, deepest tier — hover surface only" },
+    accentForeground: { hsl: "24 22% 14%", from: "cocoa ink on warm sand accent" },
+    border: { hsl: "24 14% 76%", from: "restaurant menu hairline rule — printed-card divider weight, barely visible" },
+    input: { hsl: "24 14% 76%", from: "same as border — reservation form is hairlines, not boxes" },
+    ring: { hsl: "32 38% 28%", from: "primary olive-bronze — focus ring, the one accent moment" },
+    destructive: { hsl: "8 58% 38%", from: "wine-red alert — burgundy, dining-program register, never screaming red" },
+    destructiveForeground: { hsl: "34 26% 92%", from: "warm sand on wine-red" },
+    brand: {
+      "linen-cream": { hsl: "34 26% 92%", from: "Pujol warm sand-cream — alias of the background, the linen" },
+      "ivory-card": { hsl: "34 30% 96%", from: "Single Thread lifted ivory — menu-card and dish-card stock" },
+      "ink-cocoa": { hsl: "24 22% 14%", from: "Eleven Madison Park deep cocoa — foreground, reduction shadow" },
+      "olive-bronze": { hsl: "32 38% 28%", from: "Frantzén olive-bronze — primary accent" },
+      "ember-warm": { hsl: "18 48% 48%", from: "Pujol kitchen-ember red-brown — used sparingly on tasting-menu badges and 'Reserve' eyebrows" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160],   // generous, dining-room pacing
+    containerMax: "max-w-5xl",          // 1024px — plating photography reads at this width without becoming a magazine spread
+    containerPadding: "px-6 lg:px-12",
+    sectionPadding: {
+      hero: "pt-28 pb-20 lg:pt-44 lg:pb-32",
+      default: "py-20 lg:py-32",
+      tight: "py-14 lg:py-20",
+    },
+  },
+
+  radius: {
+    base: "0",                          // printed-menu convention — sharp corners, no consumer softness
+    pillsAllowed: false,                // no chip pills; "Reserve" is a text-link, not a pill
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "menu-rule":
+        "0 1px 0 0 hsl(var(--foreground) / 0.14)",     // 1px printed-menu divider between courses
+      "plating-shadow":
+        "0 24px 64px -28px hsl(var(--foreground) / 0.28)",  // one diffuse drop, plating-photo elevation, never on UI chrome
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1200,                     // restaurant pacing — the course is served
+      loop: 4000,
+      ambient: 32000,
+    },
+    keyframes: {
+      "course-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(20px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 1200,
+        iteration: "once",
+        purpose:
+          "the standard entrance — 1.2s reveal for menu cards, dish photography, and chef's-program copy. The course is set down, not flung.",
+      },
+      "ember-pulse": {
+        css:
+          "0%, 100% { opacity: 0.85; }\n" +
+          "50% { opacity: 1; }",
+        defaultDuration: 4000,
+        iteration: "infinite",
+        purpose:
+          "4s soft pulse on the single 'Reserve' eyebrow ember-warm dot — a heartbeat marker, the room is open. Never on more than one element per page.",
+      },
+      "plate-ken-burns": {
+        css:
+          "from { transform: scale(1.0); }\n" +
+          "to { transform: scale(1.06); }",
+        defaultDuration: 32000,
+        iteration: "infinite",
+        purpose:
+          "32s slow zoom on hero plating photography — restaurant-program presence, the still life almost imperceptibly breathing.",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",
+
+  patterns: {
+    button:
+      "Primary CTA is a serif italic text-link in olive-bronze (--primary), underline always visible — heritage menu-card convention. " +
+      "The solid button is reserved for ONE 'Reserve' hero CTA per page — ink-cocoa bg + linen-cream text, sharp rectangle, no radius. " +
+      "Never a chip, never a gradient, never a shadow on a button. Reservation gravity comes from typography, not from button weight.",
+    card:
+      "Course/dish cards: hairline top + hairline bottom rule at foreground/14, ivory-card bg (one tier above page), no fill-differentiation depth. " +
+      "Course number in JetBrains Mono small-caps (I, II, III or 01/12), dish name in EB Garamond italic display, producer credits in mono row beneath. " +
+      "Internal padding p-8 lg:p-12. Plating photography sits flush above the card with a single plating-shadow drop.",
+    input:
+      "Reservation form: border-bottom only (1px --border). No full box. Label above in tracked-uppercase Inter small caps (letter-spacing 0.12em). " +
+      "Placeholder in muted-foreground italic serif. Focus is olive-bronze ring, 1px.",
+    cta:
+      "Default CTA is serif italic text-link in olive-bronze with always-visible underline. " +
+      "The single 'Reserve' hero CTA is the one solid-fill exception — ink-cocoa bg, linen-cream text, optional ember-pulse heartbeat marker beside it. Never repeated.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.20)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/runway-fashion/THEME.md

@@ -0,0 +1,99 @@
+# Design Direction — Runway-Fashion
+
+## Ethos
+Chanel high-contrast b/w · Vogue runway photography · Saint Laurent disciplined restraint · Comme des Garçons asymmetric type · Helmut Newton drama
+
+## Feel
+Binary pure-black-on-pure-white (or inverted). Oversized Didone serif at editorial scale — the hero is the type, set Vogue-cover large in italic Playfair. A single tiny couture-red accent is permitted, used once per page. Couture severity: this direction rejects color. The opposite of soft-modern.
+
+## Reference brands
+- **Chanel** → binary black-and-white. No color, no warmth. Oversized display serif laid over runway photography.
+- **Vogue** → issue typography. Italic Playfair at cover scale; fashion-plate restraint in the layout grid.
+- **Saint Laurent** → disciplined minimalism. ALL-CAPS sparse-tracked wordmark; geometric severity.
+- **Comme des Garçons** → Rei Kawakubo asymmetric layouts. Deliberate "wrong" type — the negative space is the composition.
+- **Helmut Newton** → high-drama runway photography. Deep shadows, Tri-X 35mm grain, single subject.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names a brand origin.
+
+Surface stack is **pure white** (background, card, popover, secondary). There is no surface differentiation — depth comes from **whitespace and 1px black rules**, never from fill tiers, never from shadows.
+
+Brand tokens: `--couture-red` (Chanel lipstick — the SINGLE red accent, used **once per page maximum, never twice**), `--ivory` (barely-off-white for masthead layering), `--noir` (deep ink for layered black-on-black overlays on runway photography). Primary is `0 0% 0%` — black is the primary; the couture-red is reserved for one moment.
+
+## Typography
+- **Display:** Playfair Display (Bodoni Moda as fallback). Italic prominent. The Didone-style high-contrast serif is the design — set at Vogue-cover scale.
+- **Body:** Inter, **16px**, line-height **1.5**. Clean sans so the serif is the hero; body never competes.
+- **Mono:** JetBrains Mono. Tiny — issue numbers, "Vol 47 / Spring", credit lines. Never for body, never for headings.
+
+Hero h1 uses `clamp(4rem, 10vw, 9rem)` — Vogue-cover scale, italic Playfair. Tracking is `-0.02em` on headings (Didone at this scale needs the optical tighten), `0` on body. Font features: `"kern", "liga", "dlig", "tnum"` — discretionary ligatures unlock italic Playfair's swash forms.
+
+## Spacing
+- **Container:** `max-w-6xl px-6 lg:px-12` — Vogue cover proportions, 1152px.
+- **Section padding tiers:**
+  - Hero: `pt-32 pb-24 lg:pt-48 lg:pb-32` (cover-of-the-issue scale)
+  - Default: `py-24 lg:py-32`
+  - Tight: `py-12 lg:py-16`
+- **Allowed scale values:** **4 8 12 16 24 32 48 64 96 128 160**. Couture-generous; low density wants more air.
+
+## Color
+No hex anywhere. **Pure black (`0 0% 0%`) and pure white (`0 0% 100%`) are the language** — the Chanel binary. The single `--couture-red` (`0 100% 45%`) is the Chanel lipstick and the only allowed third color. Use it **once per page**: one primary CTA, or one rule, or one inline mark. Never twice. Never as a card border, never as a heading color, never in imagery.
+
+`--muted` and `--accent` (`0 0% 98%`) are Vogue ivory — barely-off-white for masthead/credit layering. `--muted-foreground` (`0 0% 40%`) is the Helmut Newton mid-tone, used only for caption gray. There are no other grays.
+
+This direction **rejects** warmth (no paper-cream, no Kodak Portra), gradients, glassmorphism, decorative ornament. Austerity is the direction.
+
+## Radius
+`--radius: 0`. **Sharp couture corners only.** Pills are disallowed (`pillsAllowed: false`) — pills are anti-couture. Chanel and Saint Laurent never rounded a corner.
+
+## Shadows
+**None.** The shadow utilities object is intentionally empty. Drops are forbidden; composition does the work. Separation comes from oversized whitespace and 1px black rules.
+
+## Motion
+Runway-walk pacing — deliberate, never hurried.
+
+- `runway-step` — **600ms** opacity-only fade between hero slides. The model walks; the page does not.
+- `cover-flip` — **300ms** 8px translate for cover-of-the-issue reveals. Used sparingly, once per page maximum.
+
+No marquee, no parallax, no ambient loops (`loop: 0`, `ambient: 0`). Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored.
+
+## Component patterns
+- **Buttons:** two states, no middle ground.
+  - Primary text-link = ALL CAPS, sparse-tracked (`letter-spacing: 0.2em`), text-underline, black on white — the Saint Laurent wordmark move.
+  - Primary filled = oversized "SHOP" rectangle in pure black with white text, ALL CAPS, sparse-tracked.
+  - The `--couture-red` filled rectangle is reserved for **one primary action per page** — never repeated. No ghost mid-state, no hover lift, no rounded corners.
+- **Cards:** no card chrome. Editorial blocks sit directly on the page, separated by oversized whitespace. When grouping is required, a single 1px black rule above. No fill, no shadow, no rounded corners. Titles in italic Playfair at Vogue-cover scale; body in 16px Inter.
+- **Inputs:** 1px black border, sharp corners, white background. Label above in ALL CAPS sparse-tracked mono. Focus = 1px inset black ring, no glow. Placeholder italic Playfair, lowercase — the one place italic is permitted in chrome.
+- **CTAs:** the default CTA is the Saint Laurent ALL-CAPS sparse-tracked text-underline link. The couture-red filled rectangle is the **one** Chanel-lipstick moment per page. There is no second.
+
+## Recommended rich media
+
+**Cover.** Editorial fashion photography in the Helmut Newton high-drama tradition — model walking, single subject, deep shadows, Tri-X 35mm grain. Runway documentation (model in motion) or product detail shots on white seamless. Pure b/w grading **only**, or muted desaturated color if absolutely necessary. The hero is sometimes the type alone — italic Playfair at clamp(4rem, 10vw, 9rem) needs no image.
+
+**AI tool recommendations.**
+- **Midjourney** for runway/editorial photography — prompts like *"Vogue runway photography, Helmut Newton lighting, model walking, high contrast black and white, 35mm Tri-X film grain, deep shadows"*.
+- **Recraft** for fashion-plate illustration in the Erté tradition — single-line couture figures, black on white.
+- **Or use type alone** — italic Playfair at Vogue-cover scale carries the page without an image. This is often the right answer.
+
+**Aspect ratios.** 4:5 portrait (couture-magazine standard) — primary. 3:2 landscape — occasional, for runway documentation. Never 16:9 (cinematic, off-feel). Never 1:1 (Instagram aesthetic).
+
+**Color in imagery.** Black and white **only**, or heavily desaturated. The `--couture-red` appears in UI chrome — **never in imagery**.
+
+**What to avoid.** Warm color grading (that's mid-century territory). Gradients. Glassmorphism. Decorative ornament. AI-photorealistic gloss. 3D renders. Lens flare. Stock photography with smiling models. Color-saturated runway shots — desaturate or grade to pure b/w.
+
+**Honest constraint.** Austerity is the direction. If you are reaching for an image to fill space, the layout is the problem — set the type larger.
+
+**Accessibility.** Long-form alt-text — describe the photograph as if for a blind reader. Italic Playfair at hero scale needs `aria-level` correctness; do not let display-size override semantic hierarchy.
+
+## Component families
+None at install time. Family conventions emerge as the project grows; the Director appends them here as they are established. If a family ever calls for color beyond `--couture-red`, the rule is broken — escalate before adding.
+
+## Details
+- **Selection:** `hsl(var(--foreground))` background, `hsl(var(--background))` text — pure couture inversion.
+- **Focus ring:** `1px solid hsl(var(--ring))` (black). No offset, no glow.
+- **Scrollbar:** thin — a single black rule, the one chrome detail allowed.
+
+## 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/runway-fashion/tokens.ts

@@ -0,0 +1,167 @@
+import type { Direction } from "../schema";
+
+export const runwayFashion: Direction = {
+  name: "runway-fashion",
+  ethos:
+    "Chanel high-contrast b/w · Vogue runway photography · Saint Laurent disciplined restraint · Comme des Garçons asymmetric type · Helmut Newton drama",
+  references: [
+    { brand: "Chanel", trait: "binary black-and-white, no color, oversized display serif on runway photography" },
+    { brand: "Vogue", trait: "issue typography, fashion plate restraint, couture-magazine cover scale" },
+    { brand: "Saint Laurent", trait: "disciplined minimalism, geometric, all-caps sparse-tracked wordmark" },
+    { brand: "Comme des Garçons", trait: "Rei Kawakubo asymmetric layouts, deliberate 'wrong' type" },
+    { brand: "Helmut Newton", trait: "high-drama runway photography, deep shadows, Tri-X film grain" },
+  ],
+  feel:
+    "Binary pure-black-on-pure-white (or inverted). Oversized Didone serif at " +
+    "editorial scale — the hero is the type, set Vogue-cover large in italic Playfair. " +
+    "A single tiny couture-red accent is permitted, used once per page. Couture severity: " +
+    "this direction rejects color. The opposite of soft-modern.",
+
+  fonts: {
+    display: {
+      family: "Playfair Display",
+      fallback: ["Bodoni Moda", "Didot", "Bodoni 72", "Bodoni", "Times New Roman", "serif"],
+      from: "Vogue/Chanel Didone-style high-contrast serif — oversized italic is the cover move",
+      googleFont: "Playfair+Display:wght@400;700;900",
+      weights: [400, 700, 900],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "sans-serif"],
+      from: "Saint Laurent body restraint — clean sans so the serif is the design; never decorative",
+      googleFont: "Inter",
+      weights: [400, 500],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "Vogue issue-number metadata — 'Vol 47 / Spring', tiny, used only for masthead bookkeeping",
+      googleFont: "JetBrains+Mono",
+      weights: [400],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.02em",         // Didone display at Vogue scale wants the optical tighten
+    bodyTracking: "0",                  // body is neutral so the display serif carries the page
+    fontFeatureSettings: '"kern", "liga", "dlig", "tnum"',  // discretionary ligatures for italic Playfair
+    h1ScaleClamp: "clamp(4rem, 10vw, 9rem)",  // Vogue-cover scale — italic Playfair as hero
+    bodyBaseSize: "1rem",               // 16px — Saint Laurent restraint
+    bodyLineHeight: "1.5",
+  },
+
+  colors: {
+    background: { hsl: "0 0% 100%", from: "Chanel pure white — couture stock, no warmth, no paper-cream" },
+    foreground: { hsl: "0 0% 0%", from: "Chanel pure black — couture ink, the binary opposite of the page" },
+    card: { hsl: "0 0% 100%", from: "Saint Laurent surface restraint — no card differentiation; the page is the surface" },
+    popover: { hsl: "0 0% 100%", from: "Saint Laurent restraint — depth is forbidden, popovers sit on white" },
+    primary: { hsl: "0 0% 0%", from: "Chanel black IS the primary — the couture-red accent is reserved for one moment" },
+    primaryForeground: { hsl: "0 0% 100%", from: "Chanel pure white on black — couture inversion" },
+    secondary: { hsl: "0 0% 100%", from: "Saint Laurent secondary surface — no second tier; differentiate by typographic weight" },
+    secondaryForeground: { hsl: "0 0% 0%", from: "Chanel black, always — no gray-on-gray dilution" },
+    muted: { hsl: "0 0% 98%", from: "Vogue ivory — barely-off-white for layering masthead metadata blocks" },
+    mutedForeground: { hsl: "0 0% 40%", from: "Helmut Newton mid-tone — caption gray, instrument-feel for credit lines" },
+    accent: { hsl: "0 0% 98%", from: "Vogue ivory hover surface — same as muted; restraint over distinction" },
+    accentForeground: { hsl: "0 0% 0%", from: "Chanel black on hover" },
+    border: { hsl: "0 0% 0%", from: "Saint Laurent 1px black rule — couture line, never softened to gray" },
+    input: { hsl: "0 0% 0%", from: "Saint Laurent input rule — same as border; inputs are hairlines on the page" },
+    ring: { hsl: "0 0% 0%", from: "Chanel black focus ring — no accent leakage, couture severity" },
+    destructive: { hsl: "0 100% 45%", from: "Chanel lipstick — same single red as the couture accent; destructive shares the one color" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "Chanel pure white on couture-red" },
+    brand: {
+      "couture-red": {
+        hsl: "0 100% 45%",
+        from: "Chanel lipstick — the SINGLE red accent, used ONCE per page maximum, never twice",
+      },
+      ivory: {
+        hsl: "0 0% 98%",
+        from: "Vogue ivory — barely-off-white for layering masthead and credit blocks",
+      },
+      noir: {
+        hsl: "0 0% 4%",
+        from: "Helmut Newton deep ink — for layered black-on-black runway photography overlays",
+      },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 160],   // couture-generous; low density wants more air
+    containerMax: "max-w-6xl",                              // 1152px — Vogue cover proportions
+    containerPadding: "px-6 lg:px-12",
+    sectionPadding: {
+      hero: "pt-32 pb-24 lg:pt-48 lg:pb-32",                // oversized — cover-of-the-issue scale
+      default: "py-24 lg:py-32",
+      tight: "py-12 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "0",                          // sharp couture corners — Chanel and Saint Laurent never rounded
+    pillsAllowed: false,                // pills are anti-couture; status uses rectangles or text
+  },
+
+  shadows: {
+    style: "none",                      // drops are forbidden; composition does the work
+    utilities: {},                      // intentionally empty — no shadow utilities ship
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 600,                      // runway-walk pacing — deliberate, never hurried
+      loop: 0,                          // no loops — the page is a printed cover
+      ambient: 0,                       // no ambient motion — couture stillness
+    },
+    keyframes: {
+      "runway-step": {
+        css:
+          "from { opacity: 0; }\n" +
+          "to { opacity: 1; }",
+        defaultDuration: 600,
+        iteration: "once",
+        purpose:
+          "deliberate runway-walk pacing — 600ms opacity-only fade between hero slides. No transform; the model walks, the page does not.",
+      },
+      "cover-flip": {
+        css:
+          "from { opacity: 0; transform: translateX(8px); }\n" +
+          "to { opacity: 1; transform: translateX(0); }",
+        defaultDuration: 300,
+        iteration: "once",
+        purpose:
+          "Vogue cover reveal — 300ms 8px slide for cover-of-the-issue transitions. Used sparingly; once per page maximum.",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",
+
+  patterns: {
+    button:
+      "Two states, no middle ground. " +
+      "Primary text-link = ALL CAPS, sparse-tracked (`letter-spacing: 0.2em`), text-underline, black on white — the Saint Laurent wordmark move. " +
+      "Primary filled = oversized 'SHOP' rectangle in pure black with white text, ALL CAPS, sparse-tracked. " +
+      "The couture-red filled rectangle is reserved for the single primary action per page — never repeated. " +
+      "No ghost mid-state, no hover lift, no rounded corners.",
+    card:
+      "No card chrome. Editorial blocks sit directly on the page, separated by oversized whitespace. " +
+      "When grouping is required, a single 1px black rule above. No fill, no shadow, no rounded corners. " +
+      "Titles in italic Playfair Display at Vogue-cover scale; body in 16px Inter.",
+    input:
+      "1px black border, sharp corners, white background. Label above in ALL CAPS sparse-tracked mono. " +
+      "Focus = 1px inset black ring, no glow. Placeholder italic Playfair, lowercase — the one place italic is permitted in chrome.",
+    cta:
+      "Default CTA is the Saint Laurent ALL-CAPS sparse-tracked text-underline link. " +
+      "The couture-red filled rectangle is the ONE marketing moment per page — the Chanel-lipstick accent. " +
+      "There is no second.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--foreground))",        // black selection — pure couture inversion
+    selectionFg: "hsl(var(--background))",        // white text on black
+    focusRing: "1px solid hsl(var(--ring))",      // 1px black, no offset, no glow
+    scrollbarStyle: "thin",                       // thin black rule — the only chrome detail allowed
+  },
+};

package/themes/saturday-morning/THEME.md

@@ -0,0 +1,117 @@
+# Design Direction — Saturday Morning
+
+## Ethos
+Cartoon Network playful · Nickelodeon orange splat · Adult Swim ironic edge · Pixar warmth · Adventure Time hand-drawn whimsy
+
+## Feel
+Bright, chunky, playful without being childish. Bold display fonts with friendly roundness, many colors used confidently, hard-offset shadow drops give a sticker-pack feel. Reads as fun-but-considered, not Comic-Sans — the cartoon sensibility filtered through an Adult Swim editor's eye.
+
+Maximalist is the closest sibling — same many-colors confidence, same brand-token bg overrides on components — but where maximalist works in editorial sharp corners and Wes Anderson serifs, saturday-morning rounds every edge into pillow shapes and lets a chunky display sans do the talking. The shadows are the giveaway: maximalist refuses shadows, saturday-morning lives on hard 4px sticker drops.
+
+## Reference brands
+- **Cartoon Network (1990s-2000s bumper graphics)** → chunky bold type, mismatched colors, sticker-pack composition. The bumper card between commercials, not the show itself.
+- **Nickelodeon** → orange splat, slime green, oversized round shapes. The splat is the brand and the brand is the splat.
+- **Adult Swim** → ironic late-night minimalism with chunky type. Deadpan title cards on a single color — the wink that keeps this direction out of the kid zone.
+- **Pixar** → warm character lighting, friendly rounded forms. Not photorealism — the *warmth* of Pixar, the soft-edge geometry.
+- **Adventure Time** → hand-drawn wobble, expressive shapes, flat-color whimsy. The candy-kingdom palette and the slight imperfection that makes a vector line feel hand-traced.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names its brand origin.
+
+Surface stack is **bright cream** (background) → **lighter cream** (card) → **deeper cream** (muted) — the sun pouring through the kitchen window on a Saturday at 7am. Depth comes from **thick 2px `--ink` borders** and the **hard-offset sticker shadows**, never from hue shift on the cream tiers.
+
+Brand tokens (named, never numbered): `--slime` (Nick slime green), `--sun` (Cartoon Network sun yellow, = secondary), `--sky` (Adventure Time sky blue, = accent), `--cherry` (Pixar character red, = destructive), `--grape` (Adult Swim title-card purple), `--magenta` (= primary), `--cream` (= background), `--ink` (= foreground). At least five named accent colors is the minimum — this direction is built around having many.
+
+Primary is **hot magenta-pink** (`325 90% 55%`) — the Nickelodeon energy color, the splat saturation. Foreground is **deep purple-black** (`275 30% 15%`), never pure black; the slight hue gives the candy palette room to sit against it. Pure white and pure black are forbidden — `--cream` and `--ink` replace them.
+
+## Typography
+- **Display:** Fredoka (chunky friendly rounded display — the cartoon-bumper feel without the Comic-Sans wobble). Lilita One covers the same territory if Fredoka is unavailable. Weights 500/700/900. h1–h4.
+- **Body:** DM Sans (friendly rounded sans, soft terminals that pair with Fredoka without competing). 17px (`1.0625rem`), line-height 1.6.
+- **Mono:** JetBrains Mono (rounded humanist mono with personality — reads like a credits crawl on a cartoon bumper). Captions, code, micro-labels.
+
+H1 uses `clamp(2.75rem, 7vw, 5.5rem)` — chunky display wants size, bumper-card territory. Heading tracking `-0.01em` — Fredoka is wide and round; a hair of negative tracking tightens the chunky feel. Body tracks `0`. Font features `"ss01", "cv11"` on DM Sans.
+
+## Spacing
+- **Container:** `max-w-5xl px-6 lg:px-10`.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-32 lg:pb-24`
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-12 lg:py-16`
+- **Allowed scale values:** 4 6 8 12 16 20 24 32 48 64. Medium density — decoration takes room.
+
+## Color
+No hex anywhere in component files. Color is the medium. Components are *encouraged* to override their background with any brand token — a card may be slime-green, a callout may be sky-blue, a tag row may run sun → cherry → grape across five chips. The cream background is the canvas, not a default.
+
+The palette is **bright and warm by default**. If you reach for a desaturated enterprise blue or a moody gray, you've left the direction. The destructive token is warm cherry-red (`350°`), not magenta-red, because alerts should still feel hand-drawn.
+
+## Radius
+`--radius: 1.5rem` (24px). **Very rounded — pillowy soft, sticker-edge feel.** Pills are allowed (`pillsAllowed: true`) and encouraged for tags, toggles, and compact actions. Hard right angles read "developer demo" or "editorial," not Saturday morning — keep everything round.
+
+## Shadows
+`style: "none"` — meaning no gaussian-blur drop shadows. The depth language is **hard-offset sticker shadows** instead: a flat color block, 4px down and 4px right, no blur. The peel of a vinyl sticker, the layered cel of a cartoon background.
+
+- `.shadow-sticker` — the signature. `4px 4px 0 0 hsl(var(--foreground))`. The default for buttons and cards.
+- `.shadow-sticker-lg` — hover-lifted. `6px 6px 0 0`. The sticker peels further off the page.
+- `.shadow-sticker-sm` — compact. `2px 2px 0 0`. For tags, badges, inline chips.
+
+Soft gaussian shadows are forbidden — they belong to soft-modern. The sticker shadow is non-negotiable here; it's how depth happens.
+
+## Motion
+Three keyframes, all bouncy:
+- `bounce-in` (400ms once) — entrance with overshoot. `cubic-bezier(0.34, 1.56, 0.64, 1)`. Buttons, modals, cards land with a spring — the cartoon-card pop.
+- `wiggle` (600ms once) — rotate ±3deg playful nudge on hover. The Adventure Time wobble.
+- `pop-color` (200ms once) — hue-rotate flash on hover for links and tags. The bumper-graphic blink.
+
+Easing: `cubic-bezier(0.34, 1.56, 0.64, 1)` — overshoot is the language. Smooth easings without bounce are wrong for this direction. `prefers-reduced-motion` honored — `wiggle` and `bounce-in` collapse to static states, `pop-color` collapses to a flat color swap.
+
+## Component patterns
+- **Buttons:** chunky rounded, magenta solid by default with foreground text and a hard `.shadow-sticker` drop. `rounded-3xl` baseline; pills allowed for tags and compact actions. Hover triggers `wiggle` + lifts to `.shadow-sticker-lg`. Secondary buttons swap magenta for any brand token (sun, sky, slime, grape). Fill is the norm, ghost is the exception.
+- **Cards:** thick 2px `--ink` border, brand-token or card-cream background, `rounded-3xl`, `.shadow-sticker` drop. Title in Fredoka display, oversized. Padding `p-6 lg:p-10`. Hover lifts to `.shadow-sticker-lg`. Cards are stickers — they peel off the page.
+- **Inputs:** full `rounded-2xl` box, 2px `--ink` border, `bg-card`. Label above in DM Sans 500. Focus shifts border to `--ring` (magenta) and adds `.shadow-sticker-sm`. No border-bottom-only treatment — every input is a labeled sticker pocket.
+- **CTAs:** filled chunky button is the default — magenta primary or sun-yellow secondary, with the sticker shadow. Pills reserved for tags and toggles. Text-link CTAs use `pop-color` on hover with a thick underline. Never a flat ghost — every CTA carries weight.
+
+## Component families
+None at install time. Patterns to expect: sticker-shadow cards, color-block tag rows, oversized chunky-display heroes, mono-label captions. The Director appends conventions here as they're established.
+
+## Details
+- **Selection:** `hsl(var(--brand-sun) / 0.6)` background, foreground text. Sun-yellow highlights the way a kid drags a crayon across a coloring book.
+- **Focus ring:** `3px solid hsl(var(--ring))` — thick magenta to match the chunky border language. A 1px ring would disappear against the decoration.
+- **Scrollbar:** auto. Native scrollbars are fine; the page already carries enough decoration.
+
+## Recommended rich media
+
+This direction leans on imagery — the cartoon sensibility wants illustration alongside type.
+
+**Cover & hero imagery:**
+- Flat illustrations in the Adventure Time / Cuphead-rubber-hose vocabulary — hand-drawn wobble, flat color, thick inked outline.
+- Character-led photography — a single warm-lit subject (Pixar feel), placed centrally on a brand-token background.
+- Expressive iconography — chunky outlined icons that feel custom-drawn, not Material/Heroicon-set.
+
+**AI tool recommendations:**
+- **Recraft** for vector flat illustrations with hand-drawn wobble. Best match for the Adventure Time / Push Pin lineage.
+- **Midjourney / Flux** for character renders. Prompt scaffold: *"Cartoon Network bumper graphics, flat illustration, chunky colors, hand-drawn wobble, Adventure Time aesthetic"*. Append a single subject and a 1:1 or 4:5 aspect ratio.
+- **Stable Diffusion + a custom rubber-hose LoRA** for character-led illustration with consistent style.
+
+**Aspect ratios:**
+- 1:1 square (Instagram-friendly, fits the sticker-card layout).
+- 4:5 portrait (cartoon character-card framing).
+- 16:9 landscape allowed for bumper-strip heroes; not the default.
+
+**Color discipline for imagery:**
+Lean into the full brand palette — every illustration uses at least 3 of the named tokens (magenta, slime, sun, sky, cherry, grape). A single-color image reads as a different direction. Backgrounds in imagery should match or contrast cream — never go dark moody.
+
+**What to AVOID:**
+- Photorealism — character-led warmth is fine, but documentary-real photography breaks the cartoon sensibility.
+- Gradient meshes and soft-glow renders — that's soft-modern territory, not Saturday morning.
+- Dark moody palettes — `--background` is bright cream; dark heroes break the kitchen-window-light premise.
+- Comic Sans literally, or anything that drifts toward "kids' birthday clip-art" — chunky is the goal, naive is the failure mode.
+- Soft gaussian drop shadows on imagery — flat sticker shadows or nothing.
+
+**Accessibility:**
+High decoration count means more `aria-hidden` on purely ornamental elements (sticker peels, wiggle hover targets that aren't focusable, decorative wobble ornaments). Alt-text must distinguish content imagery from ornament. Color contrast is preserved by `--ink` on cream and by `--ink` on every brand token; verify any custom color-on-color pairing meets WCAG AA before shipping — magenta-on-sun and slime-on-sky in particular need a contrast check.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands, add it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time.