@stylecrib/cli 0.0.0-stage → 0.3.2

package/themes/insurance-modern/THEME.md

@@ -0,0 +1,103 @@
+# Design Direction — Insurance-Modern
+
+## Ethos
+Lemonade pink chatbot delight · Ethos life-insurance soft warmth · Hippo home peach clarity · Root mobile-first quote · Policygenius marketplace neutrality
+
+## Feel
+Modern DTC insurance — quote in 90 seconds, claim in three taps, coverage explained like a friend. Soft pink and peach surfaces, rounded everything, generous whitespace, playful but never childish. The page reads "we redesigned insurance for the people who got rejected by State Farm for being too online." Lemonade's giving-back model and Ethos's grief-aware copy — warmth as a category position.
+
+An insurance-modern surface that feels enterprise-cold, agent-network-traditional, or red-and-blue corporate is off-direction. The voice is friend-explaining-coverage-over-brunch.
+
+## Reference brands
+- **Lemonade** (lemonade.com) → soft pink, chatbot Maya, friendly Inter, claims-in-seconds delight. The category-defining brand for DTC insurance design.
+- **Ethos** (ethoslife.com) → warm peach, life-insurance accessibility, no-medical-exam clarity. Grief-adjacent product handled with grace.
+- **Hippo** (hippo.com) → smart-home green-tinged peach, proactive coverage voice. Home insurance for the IoT generation.
+- **Root Insurance** (joinroot.com) → mobile-first quote flow, telematics-driven personalization. The phone IS the underwriter.
+- **Policygenius** (policygenius.com) → marketplace neutrality, compare-carriers structured layout. The Kayak-for-insurance flank.
+
+## Tokens
+HSL triples in `src/index.css`. The peach background (`18 60% 97%`) is the brand-warmth signal — pure white reads enterprise, lavender reads telehealth, peach is the Lemonade/Ethos middle.
+
+Brand tokens, all semantic:
+- `pink` — alias of `--primary`. Lemonade signature pink. The CTA, the quote button, the active step.
+- `pink-soft` / `pink-deep` — tints and hover-darken.
+- `peach` / `peach-deep` — aliases of `--background` / `--secondary`. The Ethos surface stack.
+- `coral` — secondary warmth accent for claim-paid checkmarks, coverage-active dots.
+- `mint` — covered / good-status accent. Premium-on-track, deductible-met, claim-approved.
+
+Color rules:
+- **Pink is the brand voice.** Two pink elements per surface is fine — this is a quote-flow tool, not a magazine.
+- **Mint is the "covered" tone, not the "growth" tone.** Use it semantically: a green check-mark on coverage that's active. Never as a marketing growth-stat.
+- **Coral is a warmth accent.** A single coral icon per surface — the claim-paid hand-off moment, the "you're insured" confirmation.
+
+## Typography
+- **Display:** Plus Jakarta Sans 500/600/700/800. Friendly geometric sans — the Lemonade/Ethos display register. Tracking `-0.02em`.
+- **Body:** Inter, 16px, line-height 1.6. Standard DTC reading.
+- **Mono:** JetBrains Mono. Policy numbers, premium amounts, deductible figures — tabular in the quote-summary card.
+
+H1 uses `clamp(2.25rem, 5vw, 3.75rem)`.
+
+## Spacing
+- **Container:** `max-w-6xl px-4 lg:px-8`.
+- **Section padding tiers:**
+  - Hero: `pt-20 pb-14 lg:pt-28 lg:pb-20`
+  - Default: `py-14 lg:py-20`
+  - Tight: `py-10 lg:py-14`
+
+## Color
+No hex. Pink is brand; mint is covered; coral is warmth; red is denied/gap. The peach background is structural — do not override with white.
+
+## Radius
+`--radius: 1rem` (16px). **The Lemonade pillow signature.** Soft, friendly, DTC. **Pills allowed** — coverage-status, claim-state, premium-tier pills are core.
+
+## Shadows
+**Soft.** Four utilities:
+- `.shadow-soft` — standard card.
+- `.shadow-soft-lg` — hover lift.
+- `.shadow-popover` — modals, dropdowns.
+- `.shadow-pink-glow` — the quote CTA hover; the "you're approved" moment. Use sparingly — once per page.
+
+## Motion
+DTC-friendly, with a little delight.
+- **Easing:** `cubic-bezier(0.22, 1, 0.36, 1)`
+- **Durations:** reveal 500ms, loop 2400ms.
+- **Keyframes:** `fade-rise` (entrance), `scale-in` (modals, claim-paid confirmation), `soft-pulse` (active step ring), `shimmer` (quote-loading skeleton).
+
+`prefers-reduced-motion` honored.
+
+## Component patterns
+- **Buttons:** primary = solid pink fill, white text, `rounded-2xl` (16px), `shadow-soft`. Hover lifts + 4% darken; quote CTA gets `shadow-pink-glow` on hover. Generous height (`h-12`) — mobile-first tap targets.
+- **Cards:** `rounded-2xl`, white fill on peach, 1px warm border, `shadow-soft`. Quote-step cards use 4px top-border in pink (active) or mint (done). Policy-coverage card uses `pink-soft` inset background for the premium-amount row.
+- **Inputs:** `rounded-xl` (12px), 1px warm border, white bg, `h-12`. Focus = 2px pink ring + `shadow-pink-glow`. Inline validation in mint or red.
+- **CTAs:** voice is plain-English-friendly. *"Get a quote in 90 seconds"*, *"See what you'd pay"*, *"Start your claim"*. **Never** insurance-jargon (*"Bind coverage"*, *"Effective date election"*) in marketing CTAs.
+
+## Recommended rich media
+Insurance-modern uses **lifestyle photography and friendly illustration** the way Lemonade does — the human is the hero, the policy is the supporting cast.
+
+**Permitted:** lifestyle photography (a person at home with a dog; a young couple in their first apartment; a parent with kids) — warm-toned, natural light, real-looking-not-stock. Friendly spot illustrations in pink line-work for empty states, onboarding, claim-flow. The Lemonade chatbot avatar pattern (cute, anthropomorphic, never uncanny).
+
+**Forbidden:** the agent-with-clipboard stock photo (that's insurance-legacy); the family-cooking-pasta-stock (overused); the red-tie-corporate-guy (off-brand); hospital photography (too clinical); car-crash photography (too grim); AI-rendered photoreal that ages badly.
+
+**AI tools:** Midjourney/Flux for the lifestyle photography with prompts like *"warm natural-light photography, young person at home with a golden retriever, soft peach window light, candid not posed, Sony A7iv 50mm"*. Spot illustrations in Recraft or hand-drawn in Figma with single-line pink strokes.
+
+**Aspect ratios:** 4:5 for lifestyle portraits, 16:9 for hero scenes, 1:1 for spot illustrations.
+
+**Performance:** lifestyle hero ≤180 KB AVIF at 1600w; spot illustrations as inline SVG ≤6 KB. LCP under 2s.
+
+## Component families
+None at install time. Anticipated families:
+- **QuoteStepCard** — step number in mono small-caps, title in Plus Jakarta 700, current-step has pink top-border + soft-pulse ring.
+- **PolicyCoverageCard** — Plus Jakarta heading, mono premium amount, mint "Active" pill, coral coverage-includes icons.
+- **ClaimStatusTimeline** — vertical timeline with mint dots for done, pink-pulse for active, muted dots for upcoming.
+- **PremiumBreakdownRow** — line item in Inter 500, mono amount right-aligned with tabular figures.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.22)` — pale pink highlight.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.5)` — soft pink.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. The claim-paid hand-off moment is the one place `.shadow-pink-glow` lands on a static card (not just hover) — record here when introduced.
+
+## Revisions
+- Initial direction, authored at install time. Pairs distinctly with `insurance-legacy` — same industry, opposite voice. Insurance-modern is the DTC app; insurance-legacy is the State-Farm agent network.

package/themes/insurance-modern/tokens.ts

@@ -0,0 +1,192 @@
+import type { Direction } from "../schema";
+
+// insurance-modern — Lemonade / Ethos / Hippo / Root / Policygenius.
+// Modern DTC insurance. Soft pink/peach, friendly, quote-flow first.
+// The opposite of legacy red+blue agent networks; this is the app.
+
+export const insuranceModern: Direction = {
+  name: "insurance-modern" as Direction["name"],
+  ethos:
+    "Lemonade pink chatbot delight · Ethos life-insurance soft warmth · Hippo home peach clarity · Root mobile-first quote · Policygenius marketplace neutrality",
+  references: [
+    { brand: "Lemonade", trait: "soft pink + chatbot Maya, friendly Inter, claims-in-seconds delight" },
+    { brand: "Ethos", trait: "warm peach, life-insurance accessibility, no-medical-exam clarity" },
+    { brand: "Hippo", trait: "smart-home green-tinged peach, proactive coverage voice" },
+    { brand: "Root Insurance", trait: "mobile-first quote flow, telematics-driven personalization" },
+    { brand: "Policygenius", trait: "marketplace neutrality, compare-carriers structured layout" },
+  ],
+  feel:
+    "Modern DTC insurance — quote in 90 seconds, claim in three taps, coverage explained " +
+    "like a friend. Soft pink and peach surfaces, rounded everything, generous whitespace, " +
+    "playful but never childish. The page reads 'we redesigned insurance for the people " +
+    "who got rejected by State Farm for being too online.' Lemonade's giving-back model " +
+    "and Ethos's grief-aware copy — warmth as a category position.",
+
+  fonts: {
+    display: {
+      family: "Plus Jakarta Sans",
+      fallback: ["Inter", "system-ui", "-apple-system", "sans-serif"],
+      from: "Lemonade/Ethos display — friendly geometric sans, slightly humanist warmth",
+      googleFont: "Plus+Jakarta+Sans",
+      weights: [500, 600, 700, 800],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "clean sans body for policy language, quote-flow questions, claim-status updates",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "policy numbers, premium amounts, deductible figures — tabular for the quote-summary card",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.02em",       // friendly sans wants tight tracking
+    bodyTracking: "0",
+    fontFeatureSettings: '"cv11", "ss01", "tnum"',
+    h1ScaleClamp: "clamp(2.25rem, 5vw, 3.75rem)",
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: { hsl: "18 60% 97%", from: "Ethos peach paper — softer than dashboard white, warmer than spa cream" },
+    foreground: { hsl: "346 38% 16%", from: "deep mauve-ink — reads on peach without enterprise navy coldness" },
+    card: { hsl: "0 0% 100%", from: "pure white card — lifts cleanly off peach background" },
+    popover: { hsl: "0 0% 100%", from: "same as card" },
+    primary: { hsl: "346 78% 56%", from: "Lemonade pink — the friendly category brand-mark" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on pink" },
+    secondary: { hsl: "18 45% 93%", from: "deeper peach panel — secondary surfaces, aside" },
+    secondaryForeground: { hsl: "346 38% 18%", from: "mauve ink on peach" },
+    muted: { hsl: "18 40% 95%", from: "table-row stripe softer than secondary" },
+    mutedForeground: { hsl: "346 14% 44%", from: "warm slate — captions, premium-breakdown helper text" },
+    accent: { hsl: "346 80% 95%", from: "pink tint — hover surface, step-active chip" },
+    accentForeground: { hsl: "346 70% 32%", from: "deep pink on tint" },
+    border: { hsl: "18 30% 88%", from: "warm hairline — Lemonade panel rule, never cool gray" },
+    input: { hsl: "18 30% 88%", from: "same as border" },
+    ring: { hsl: "346 78% 56%", from: "primary pink, used for focus" },
+    destructive: { hsl: "0 78% 56%", from: "claim-denied / coverage-gap red — warmer than enterprise red" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on red" },
+    brand: {
+      pink: { hsl: "346 78% 56%", from: "= primary; Lemonade signature pink" },
+      "pink-soft": { hsl: "346 80% 95%", from: "= accent; pink tint for chips and step-active state" },
+      "pink-deep": { hsl: "346 80% 38%", from: "pink hover-darken" },
+      peach: { hsl: "18 60% 97%", from: "= background; Ethos peach paper" },
+      "peach-deep": { hsl: "18 45% 93%", from: "= secondary; deeper peach for aside panels" },
+      coral: { hsl: "8 75% 62%", from: "secondary warmth accent — claim-paid checkmark, coverage-active dot" },
+      "coral-soft": { hsl: "8 80% 95%", from: "coral tint — status pill" },
+      mint: { hsl: "165 50% 50%", from: "covered/good-status accent — premium-on-track, deductible-met" },
+      "mint-soft": { hsl: "165 55% 94%", from: "mint tint — covered chip" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64, 80],
+    containerMax: "max-w-6xl",
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-20 pb-14 lg:pt-28 lg:pb-20",
+      default: "py-14 lg:py-20",
+      tight: "py-10 lg:py-14",
+    },
+  },
+
+  radius: {
+    base: "1rem",                     // 16px — DTC-soft, the Lemonade pillow signature
+    pillsAllowed: true,                // pills core — coverage-status, claim-state, premium-tier
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-soft":
+        "0 2px 4px hsl(346 30% 40% / 0.04), 0 8px 24px hsl(346 30% 40% / 0.08)",
+      "shadow-soft-lg":
+        "0 4px 8px hsl(346 30% 40% / 0.06), 0 20px 48px hsl(346 30% 40% / 0.12)",
+      "shadow-popover":
+        "0 6px 16px hsl(346 30% 40% / 0.08), 0 24px 64px hsl(346 30% 40% / 0.16)",
+      "shadow-pink-glow":
+        "0 0 0 4px hsl(346 78% 56% / 0.12), 0 8px 24px hsl(346 60% 50% / 0.16)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 500,
+      loop: 2400,
+      ambient: 0,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(12px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 500,
+        iteration: "once",
+        purpose: "card and step entrance — DTC-friendly, not slow-magazine",
+      },
+      "scale-in": {
+        css:
+          "from { opacity: 0; transform: scale(0.94); }\n" +
+          "to { opacity: 1; transform: scale(1); }",
+        defaultDuration: 220,
+        iteration: "once",
+        purpose: "modal, popover, claim-paid confirmation — confirms with delight",
+      },
+      "soft-pulse": {
+        css:
+          "0%, 100% { transform: scale(1); opacity: 1; }\n" +
+          "50% { transform: scale(1.04); opacity: 0.9; }",
+        defaultDuration: 2400,
+        iteration: "infinite",
+        purpose: "active-step ring, live-quote-updating indicator — quiet delight",
+      },
+      "shimmer": {
+        css:
+          "0% { background-position: -200% 0; }\n" +
+          "100% { background-position: 200% 0; }",
+        defaultDuration: 1600,
+        iteration: "infinite",
+        purpose: "quote-loading skeleton",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary = solid pink fill, white text, rounded-2xl (16px), shadow-soft. " +
+      "Hover lifts to shadow-soft-lg + 4% darken; on the quote CTA, hover adds shadow-pink-glow. " +
+      "Secondary = white fill, 1px warm border, foreground text. Tertiary = pink text-link. " +
+      "Generous height (h-12) — DTC mobile-first tap targets.",
+    card:
+      "Rounded-2xl (16px), white fill on peach, 1px warm border, shadow-soft. " +
+      "Internal padding p-6 lg:p-8. Quote-step cards use a 4px top-border in pink for active, mint for done. " +
+      "Policy-coverage card uses pink-soft inset background for the premium-amount row.",
+    input:
+      "Rounded-xl (12px), 1px warm border, white background. Generous height (h-12). " +
+      "Label above in Inter 500. Focus = 2px pink ring at 40% opacity + shadow-pink-glow. " +
+      "Inline validation in mint (good) or red (problem).",
+    cta:
+      "Primary pink solid is the quote-flow default. " +
+      "Voice is plain-English-friendly: 'Get a quote in 90 seconds', 'See what you'd pay', 'Start your claim'. " +
+      "Never insurance-jargon ('Bind coverage', 'Effective date election') in marketing CTAs — that's policy-page language.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.5)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/kaiju-reveal/THEME.md

@@ -0,0 +1,97 @@
+# Design Direction — Kaiju-Reveal
+
+## Ethos
+Godzilla slow reveal · Blade Runner 2049 atmospheric dread · Denis Villeneuve monumental scale · Akira neon-dystopian · Dune monolithic
+
+## Feel
+Monolithic scale. Ultra-slow reveals. Atmospheric haze and depth. One accent color carved out of darkness — either cold cyan (Villeneuve) or blood orange (Godzilla flame). Reads like a film trailer that takes 30 seconds to show its hand — the opposite of TikTok.
+
+## Reference brands
+- **Godzilla** → slow-approach poster reveal. The silhouette emerges from haze; the title-card pacing earns the monster.
+- **Blade Runner 2049** → Villeneuve scale, Roger Deakins orange/cyan grade, fog and atmosphere as primary surface.
+- **Dune** → monumental dunes and brutalist sand scale. Monoliths against sky; humans as specks.
+- **Akira** → neon dystopia, biker trails, the single saturated neon-pink line through black Neo-Tokyo.
+- **IMAX trailers** → slow zoom and title-card pacing. The hand is shown last.
+- **Roger Deakins** → atmospheric haze, the orange-and-teal cinematography that this direction grades to.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names a brand·trait origin — untraceable tokens fail review. Brand tokens: `--flame` (Godzilla atomic-breath orange, also the primary), `--cyan-cold` (Blade Runner 2049 Joi-hologram accent, also the focus ring), `--monolith` (Dune ship void), `--dread-red` (deep blood, atomic-breath low-burn before flash), `--haze` (Villeneuve atmospheric fog), `--neon-pink` (Akira biker trail), `--trench` (the deep oceanic black, also semantic background).
+
+Surface stack steps through 3-4% lightness from `bg (trench) → card → popover → secondary → muted → accent`, holding a constant `225` blue-biased hue. Depth comes from **atmospheric glow utilities and fog-shadow**, never from fill differentiation.
+
+Pure black is forbidden — `--background` is `225 35% 4%`, a Pacific-trench black with a slight blue bias. Pure white is forbidden — `--foreground` is `25 8% 88%`, the muted haze-white of Villeneuve atmospheric grading.
+
+## Typography
+- **Display:** Playfair Display Black (weights 400/700/900). Bodoni-equivalent ultra-bold serif at monumental title-card scale. Heading tracking `-0.02em` — tightens at scale, the way IMAX title cards crush.
+- **Body:** Inter (400/500/600). Clean sans — its job is to disappear so the serif title carries the dramatic weight.
+- **Mono:** JetBrains Mono. Reserved for Kanji-style metadata strips, runtime stamps, frame counts — the small instrument print under the title card.
+
+H1 uses `clamp(3.5rem, 11vw, 9rem)` — IMAX-monumental. Body base is 16px with line-height **1.7** for atmospheric breathing. Font features: `"ss01", "tnum", "lnum"`. Display headings default to mixed-case for the serif drama; ALL CAPS is reserved for the ghost-outline button label ("APPROACH") and section eyebrows.
+
+## Spacing
+- **Container:** `max-w-7xl px-6 lg:px-12` — wide. 2.39:1 cinema stills and aerial drone footage demand the screen.
+- **Section padding tiers:**
+  - Hero: `pt-32 pb-24 lg:pt-48 lg:pb-40` — title cards earn their reveal time
+  - Default: `py-24 lg:py-40`
+  - Tight: `py-16 lg:py-24`
+- **Allowed scale values:** 4 8 12 16 20 24 32 48 64 96 128 160 200 240. Low density — monumental scale demands breath.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier. The flame (`--flame`) and the cyan-cold (`--cyan-cold`) are **never used together at full saturation on the same surface** — they are the two opposing accents of Deakins grading, and they fight if combined. Convention: choose ONE accent per page or per hero — flame for warmth and Kaiju dread, cyan-cold for icy Villeneuve isolation. Use `--neon-pink` only for Akira-coded one-of-one moments — a biker-trail line, a single rare CTA, never general UI.
+
+## Radius
+`--radius: 0`. **Monumental sharp — pillars, monoliths, not pebbles.** Pills are disallowed (`pillsAllowed: false`). If a UI element needs softness, achieve it through haze, glow, and whitespace, never through corner rounding.
+
+## Shadows
+**Glow style.** Three utilities, all for media and monumental surfaces:
+- `.atmospheric-glow` — `0 0 0 1px flame/0.25, 0 40px 120px flame/0.28, 0 80px 240px flame/0.22`. Massive 200px+ blurred radial halo in flame orange. Use on the single hero card per page, or behind the Kaiju silhouette in title sequences.
+- `.atmospheric-glow-cyan` — same construction with `--cyan-cold`. Use on Villeneuve-coded hero cards, instrumented panels, anything that should feel like Joi's hologram lit from within.
+- `.fog-shadow` — heavy bottom-blur, two layers in `--trench` (95% and 85%). The foreground hugs the deep; the monolith casts fog, not edge. Use on floating cards above the trench background.
+
+Conventional drop shadows are forbidden. Glow and fog ARE the elevation language.
+
+## Motion
+Three keyframes, all ultra-slow. Durations cluster at **3.5s (reveal), 8s (loop), 60s (ambient)** — the opposite of social-media pacing:
+- `slow-reveal` (3500ms once) — opacity 0→1, scale 1.04→1, blur 8px→0. Three-to-four-second title-card crawl out of haze. Title cards and monumental section reveals only.
+- `ken-burns-monumental` (60000ms infinite) — scale 1.02 → 1.10 with subtle translate. 60s drone push over aerial landscape. The drift is barely perceptible by design — you should not catch it unless you stare.
+- `flame-flicker` (8000ms infinite) — subtle opacity and brightness pulse on accent color. The flame breathes like a distant fire; the cyan breathes like a hologram. 8s cycle, never faster.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — every keyframe wraps in the media query and ambient loops drop to a static frame.
+
+**Hard rule:** no quick cuts, no autoplay loops shorter than 6 seconds, no parallax that exceeds the ken-burns budget. This direction is *ultra-slow on purpose*.
+
+## Component patterns
+- **Buttons:** primary is a **ghost monolithic outline** — thick foreground border, transparent fill, ALL CAPS sparse tracking (`tracking-[0.18em]`) for labels like *APPROACH*, *REVEAL*, *ENTER*. Hover inverts to a filled foreground face with the `.atmospheric-glow` halo. **Never a flame-orange fill button at rest** — flame is the carved accent, not a chrome surface. One hero action per page; everything else is a text-link in foreground color.
+- **Cards:** sharp `rounded-none`, hairline `--border`, `bg-card` one stop above trench. Padding `p-8 lg:p-16` — monumental cards breathe. Optional `.atmospheric-glow` or `.atmospheric-glow-cyan` on the single hero card; `.fog-shadow` on floating monoliths above the deep.
+- **Inputs:** emphasized 2px bottom border in `--foreground`, thin 1px `--border` on the other three sides, `bg-card`, radius 0. Label above in display serif at small size with `tracking-[0.1em] uppercase`. Focus ring is **cyan-cold, 1px** — never flame.
+- **CTAs:** ghost monolithic outline button for the single hero action. Secondary CTAs are foreground text-link with cyan-cold underline-on-hover. **Never a chip, never a pill, never a gradient.** The language is carved stone, not glass.
+
+## Recommended rich media
+Cover: aerial monumental landscape video (slow drone passes, fog, sun), close-up texture footage (sand dunes, ocean swells, neon raindrops on chrome), atmospheric stills with heavy haze grading. Color grading lives in the **Deakins orange-and-teal** dyad — flame highlights against cyan-cold shadow, never mid-tone saturation. Title cards are full-bleed serif on near-black.
+
+**AI tool recommendations:**
+- **Sora / Veo** — hero video at 21:9 or 2.39:1. Prompt with: *"Blade Runner 2049 cinematography, slow drone over fog-shrouded landscape, Roger Deakins cinematography, orange and teal grade, atmospheric haze, ultra-slow camera, anamorphic"*.
+- **Midjourney / Flux** — stills. Include in every prompt: *"2.39:1 anamorphic, Deakins orange and teal grade, atmospheric fog, monumental scale, IMAX still"*. Add *"Villeneuve composition"* for landscapes; *"Akira neon Neo-Tokyo"* for rare neon-pink one-of-ones.
+- **Topaz Video AI** — upscale stock or AI-generated footage to 4K; never downsample monumental footage to mobile-default crops.
+
+**Aspect ratios:** **21:9 or 2.39:1 cinema only**, full-bleed. 16:9 is forbidden — it is web-default and undermines the monumental read. 1:1 and 9:16 are forbidden — they are social-media energy, the explicit opposite of this direction.
+
+**Performance:** hero videos **≤8 MB**, encoded **AV1 or H.265**, `autoplay muted loop playsinline` — but never with a loop duration under 6 seconds. Mobile fallback to the still poster at 2.39:1 — never ship a sub-6s loop to small screens.
+
+**Avoid:** any quick cuts, bright/saturated palettes, social-media energy, autoplay loops shorter than 6 seconds, 16:9 / 1:1 / 9:16 aspect ratios, lens-flare overlays (Y2K), gradient backgrounds (soft-modern), glassmorphic anything, drop-shadow product cutouts, AI footage with uncanny human faces in the foreground (Kaiju-reveal is monumental landscape and silhouette, not portrait), any color outside the orange/teal/dread-red/neon-pink/haze palette.
+
+**Accessibility:** every video carries a still **poster** attribute graded to match. Alt-text describes the cinematic feel in full sentences — *"Aerial drone shot of fog rolling between Arrakis-like dunes at dusk, flame-orange sun low on the horizon, deep teal shadows in the valley"* is the bar. Captions on any video with dialogue or scored narration.
+
+## Component families
+None at install time. Family conventions emerge as the project grows; the Director appends them here as they're established. Likely first families: `TitleCardReveal` (slow-reveal serif over haze), `MonolithCard` (atmospheric-glow framed hero), `MetadataStrip` (Kanji-style mono runtime stamps), `KenBurnsHero` (60s monumental drift).
+
+## Details
+- **Selection:** `hsl(var(--flame) / 0.28)` background, foreground text. Flame, not cyan — selection is the warm carved accent, not the focus instrument.
+- **Focus ring:** `1px solid hsl(var(--cyan-cold))`. Thin, icy — the Villeneuve instrument, never flame. Flame and cyan-cold are the two opposing accents and they switch jobs deliberately.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands, add it here with the reason. The Director's consistency pass lists all exceptions for human review.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/kaiju-reveal/tokens.ts

@@ -0,0 +1,185 @@
+import type { Direction } from "../schema";
+
+export const kaijuReveal: Direction = {
+  name: "kaiju-reveal",
+  ethos:
+    "Godzilla slow reveal · Blade Runner 2049 atmospheric dread · Denis Villeneuve monumental scale · Akira neon-dystopian · Dune monolithic",
+  references: [
+    { brand: "Godzilla", trait: "slow-approach poster reveal and atmospheric title-card haze" },
+    { brand: "Blade Runner 2049", trait: "Villeneuve scale, orange/cyan grading, fog and atmosphere" },
+    { brand: "Dune", trait: "Villeneuve monumental dunes, brutalist sand scale" },
+    { brand: "Akira", trait: "neon dystopia, motorbike trails, biker pink" },
+    { brand: "IMAX trailers", trait: "slow zoom, title-card pacing, 30-second hand-reveal" },
+    { brand: "Roger Deakins", trait: "orange and teal cinematography, atmospheric haze" },
+  ],
+  feel:
+    "Monolithic scale. Ultra-slow reveals. Atmospheric haze and depth. " +
+    "One accent color carved out of darkness — either cold cyan (Villeneuve) or blood orange (Godzilla flame). " +
+    "Reads like a film trailer that takes 30 seconds to show its hand — the opposite of TikTok.",
+
+  fonts: {
+    display: {
+      family: "Playfair Display",
+      fallback: ["Bodoni 72", "Bodoni Moda", "Didot", "Georgia", "serif"],
+      from: "Playfair Display Black — Bodoni-equivalent ultra-bold serif at monumental title-card size",
+      googleFont: "Playfair+Display:wght@400;700;900",
+      weights: [400, 700, 900],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "clean sans — lets the serif title carry the dramatic weight",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["Berkeley Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "Kanji-style metadata strips and runtime stamps — small instrument print under the title card",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.02em",                   // monumental ultra-bold serif tightens at scale
+    bodyTracking: "0.01em",
+    fontFeatureSettings: '"ss01", "tnum", "lnum"',
+    h1ScaleClamp: "clamp(3.5rem, 11vw, 9rem)",    // IMAX title-card scale — monumental
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.7",                         // generous — atmosphere needs air
+  },
+
+  colors: {
+    background: { hsl: "225 35% 4%", from: "deep oceanic black with slight blue bias — Pacific trench, Kaiju depth" },
+    foreground: { hsl: "25 8% 88%", from: "muted off-white — Villeneuve atmospheric haze, never pure" },
+    card: { hsl: "225 30% 7%", from: "elevated surface, one stop above the trench — fog-layer above the deep" },
+    popover: { hsl: "225 28% 9%", from: "popover/menu surface, two stops up — second fog layer" },
+    primary: { hsl: "14 95% 50%", from: "Godzilla flame orange / Villeneuve sun — the single carved accent" },
+    primaryForeground: { hsl: "225 35% 4%", from: "trench-black on flame orange" },
+    secondary: { hsl: "225 22% 11%", from: "Dune monolithic shadow tier — heavier than card, still in the deep" },
+    secondaryForeground: { hsl: "25 8% 88%", from: "haze on monolithic shadow" },
+    muted: { hsl: "225 18% 13%", from: "muted surface — same family as secondary, fractionally lifted" },
+    mutedForeground: { hsl: "25 8% 65%", from: "Villeneuve atmospheric fog — secondary text reads as distance" },
+    accent: { hsl: "225 16% 16%", from: "hover surface — Dune-stone highlight, Brutalist plinth" },
+    accentForeground: { hsl: "25 8% 88%", from: "haze on stone" },
+    border: { hsl: "225 16% 18%", from: "monolithic edge — sharp seam between fog layers" },
+    input: { hsl: "225 16% 18%", from: "same as border — one hairline language for the void" },
+    ring: { hsl: "195 85% 55%", from: "Blade Runner 2049 cold cyan — focus is the icy second accent, never flame" },
+    destructive: { hsl: "0 75% 35%", from: "dread-red deep blood — Kaiju eye-glow warning lamp" },
+    destructiveForeground: { hsl: "25 8% 88%", from: "haze on dread-red" },
+    brand: {
+      "cyan-cold": { hsl: "195 85% 55%", from: "Blade Runner 2049 cold accent — Joi hologram, K's coat" },
+      monolith: { hsl: "0 0% 8%", from: "Dune ship void — pure monolith black, the harvester's shadow" },
+      "dread-red": { hsl: "0 75% 35%", from: "deep blood — Godzilla atomic-breath low-burn before the flash" },
+      haze: { hsl: "25 8% 65%", from: "Villeneuve atmospheric fog — Sicario desert, BR2049 Vegas dust" },
+      "neon-pink": { hsl: "325 100% 60%", from: "Akira biker neon — Kaneda's bike trail in night Neo-Tokyo" },
+      flame: { hsl: "14 95% 50%", from: "Godzilla flame orange — semantic primary, also the sun in Arrakis dusk" },
+      trench: { hsl: "225 35% 4%", from: "the deep oceanic black — semantic background, the Pacific where Kaiju sleep" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128, 160, 200, 240],   // low density — monumental scale demands breath
+    containerMax: "max-w-7xl",          // 2.39:1 cinema stills and aerial drone footage need the screen
+    containerPadding: "px-6 lg:px-12",
+    sectionPadding: {
+      hero: "pt-32 pb-24 lg:pt-48 lg:pb-40",     // title cards earn their reveal time
+      default: "py-24 lg:py-40",
+      tight: "py-16 lg:py-24",
+    },
+  },
+
+  radius: {
+    base: "0",                          // monumental sharp — pillars, monoliths, not pebbles
+    pillsAllowed: false,                // pills read app/dashboard; monumental UI uses rectangles only
+  },
+
+  shadows: {
+    style: "glow",
+    utilities: {
+      "atmospheric-glow":
+        "0 0 0 1px hsl(var(--flame) / 0.25), " +
+        "0 40px 120px hsl(var(--flame) / 0.28), " +
+        "0 80px 240px hsl(var(--flame) / 0.22)",
+      "atmospheric-glow-cyan":
+        "0 0 0 1px hsl(var(--cyan-cold) / 0.3), " +
+        "0 40px 120px hsl(var(--cyan-cold) / 0.3), " +
+        "0 80px 240px hsl(var(--cyan-cold) / 0.24)",
+      "fog-shadow":
+        "0 60px 100px -20px hsl(var(--trench) / 0.95), " +
+        "0 120px 200px -40px hsl(var(--trench) / 0.85)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 3500,                     // ultra-slow — the title-card crawl
+      loop: 8000,                       // flame-flicker pulse pace
+      ambient: 60000,                   // 60s monumental ken-burns — barely perceptible
+    },
+    keyframes: {
+      "slow-reveal": {
+        css:
+          "0% { opacity: 0; transform: scale(1.04); filter: blur(8px); }\n" +
+          "60% { opacity: 0.4; filter: blur(2px); }\n" +
+          "100% { opacity: 1; transform: scale(1); filter: blur(0); }",
+        defaultDuration: 3500,
+        iteration: "once",
+        purpose:
+          "three- to four-second opacity-and-scale crawl emerging from haze — title cards and monumental reveals only",
+      },
+      "ken-burns-monumental": {
+        css:
+          "0% { transform: scale(1.02) translate(0, 0); }\n" +
+          "100% { transform: scale(1.10) translate(-1.5%, -0.8%); }",
+        defaultDuration: 60000,
+        iteration: "infinite",
+        purpose:
+          "60s aerial-landscape drift — Villeneuve drone push, motion is barely perceptible by design",
+      },
+      "flame-flicker": {
+        css:
+          "0%, 100% { opacity: 1; filter: brightness(1); }\n" +
+          "45% { opacity: 0.92; filter: brightness(0.94); }\n" +
+          "55% { opacity: 1; filter: brightness(1.06); }",
+        defaultDuration: 8000,
+        iteration: "infinite",
+        purpose:
+          "subtle accent-brightness pulse — flame or cyan accent breathes like a distant fire, 8s cycle",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",
+
+  patterns: {
+    button:
+      "Primary CTA is a ghost monolithic outline — thick foreground border, transparent fill, " +
+      "ALL CAPS sparse tracking (e.g. \"APPROACH\", \"REVEAL\", \"ENTER\"). " +
+      "Hover inverts to filled foreground with .atmospheric-glow halo. " +
+      "Never a flame-orange fill button at rest — flame is the carved accent, not a chrome surface. " +
+      "One hero action per page; everything else is a text-link in foreground color.",
+    card:
+      "Sharp 0 corners. Hairline --border, bg-card one stop above the trench. " +
+      "Padding p-8 lg:p-16 — monumental cards breathe. " +
+      "Optional .atmospheric-glow or .atmospheric-glow-cyan for hero cards holding cinema-aspect media; .fog-shadow for floating monoliths above the deep.",
+    input:
+      "Bottom border emphasized (2px --foreground), thin 1px --border on the other three sides, bg-card, radius 0. " +
+      "Label above in display serif at small size with tracking 0.1em uppercase. Focus ring is cyan-cold, 1px.",
+    cta:
+      "Ghost monolithic outline button for the single hero action. " +
+      "Secondary CTAs are foreground text-link with cyan-cold underline-on-hover. " +
+      "Never a chip, never a pill, never a gradient — the language is carved stone, not glass.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--flame) / 0.28)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--cyan-cold))",
+    scrollbarStyle: "thin",
+  },
+};