@stylecrib/cli 0.3.1 → 0.3.3

package/themes/indie-art-game/THEME.md

@@ -0,0 +1,107 @@
+# Design Direction — Indie-Art-Game
+
+## Ethos
+Hyper Light Drifter atmospheric pixel · Cuphead 1930s rubber-hose · Untitled Goose Game playful · Outer Wilds wonder · Spiritfarer warmth
+
+## Feel
+Atmospheric indie-game art direction. Dusky purple-pink-cyan palettes with warm sunset interludes. Pixel-art-adjacent display fonts but readable. Hand-drawn illustration prominence. Reads as a beloved Steam indie title's marketing site, not a SaaS app.
+
+## Reference brands
+- **Hyper Light Drifter** → atmospheric pixel art, dusky purple-pink palettes, glowing cyan lantern accents. The dominant visual reference.
+- **Cuphead** → 1930s rubber-hose animation, watercolor-on-paper textures, hand-illustrated character art. The parchment-tier alternate surface.
+- **Untitled Goose Game** → minimalist mischief, sparse composition, lots of negative space. Density discipline.
+- **Outer Wilds** → wonder, planetarium scale, deep cosmic blues. The "look up" hero gesture, botanical accent.
+- **Spiritfarer** → warm sunset palettes, hand-drawn character art. The sunset-orange interlude color, narrative warmth.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names its brand origin — untraceable tokens fail review. Brand tokens: `--hot-pink` (HLD secondary accent), `--sunset-orange` (Spiritfarer warmth), `--deep-purple` (= secondary; atmospheric depth), `--moss` (Outer Wilds botanical), `--parchment` (Cuphead watercolor paper card tier), `--glow-cyan` (= primary; HLD lantern light), `--night-purple` (= background; the dusky sky).
+
+Surface stack steps the lightness in a constant `270` purple-biased hue: `background → card → popover → muted`. Depth comes from **hairline borders, pixel drop-shadows, and soft cyan/pink glows** — never from blurry conventional drop shadow.
+
+Pure black is forbidden; `--background` is `270 35% 12%` (Hyper Light Drifter dusky night purple, never OLED-off). Pure white is forbidden; `--foreground` is `35 15% 92%` (Spiritfarer warm sunset off-white).
+
+Primary is **glowing cyan** (`180 85% 60%`) — the HLD signature lantern light. Accent is **hot pink** (`325 85% 65%`) — HLD's secondary, the cyan's counterpart. The two are designed to be paired at full saturation; this is one of the few directions where two highly saturated colors actively belong together.
+
+## Typography
+- **Display:** VT323 (pixel-art-adjacent monospace display — CRT terminal heritage, game-UI convention). Fallback DotGothic16, then Courier Prime. Single weight 400. Used for headlines, button labels, HUD readouts.
+- **Body:** Inter (readable geometric sans). The pixel font is reserved for display only — body must read at long form. Weights 400/500/600/700.
+- **Mono:** VT323 — same family as display. Game-UI convention: HUD numerics speak in the same voice as headlines. Used for stats, prices, timers, ID strings.
+
+Heading tracking is **`0.02em`** — the pixel grid reads better with a touch of air. Body tracking `0`. Font features: `"tnum"` for tabular numerics. H1 uses `clamp(2.75rem, 8vw, 6rem)` — oversized title-card scale, the kind a Steam splash screen wears.
+
+## Spacing
+- **Container:** `max-w-6xl px-6 lg:px-10`.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-32 lg:pb-24`
+  - Default: `py-20 lg:py-28`
+  - Tight: `py-12 lg:py-16`
+- **Allowed scale values:** 4 8 12 16 20 24 32 40 48 64 80 96 128. Medium-low density — atmospheric breathing, never crammed. Negative space carries the wonder.
+
+## Color
+No hex anywhere in component files. All color via tokens. The signature pairing is `--primary` (cyan) and `--accent` (hot pink) — these are *meant* to live on the same surface, against the dusky purple background. Sunset-orange and moss are interlude colors: a single section may swing fully orange (Spiritfarer warmth) or fully moss (Outer Wilds botanical interior) without breaking the language.
+
+Parchment is the one exception: when a card uses `bg-brand-parchment`, foreground must swap to `--deep-purple` for contrast. That is the Cuphead watercolor-on-paper surface — use it as a tonal shift, not the default.
+
+## Radius
+`--radius: 0`. **Pixel-art sharp — no anti-aliasing on corners.** Pills disallowed (`pillsAllowed: false`) — pills are circles, and circles don't exist on the pixel grid this direction simulates.
+
+## Shadows
+**Glow style.** Three utilities:
+- `.glow-cyan-soft` — `0 0 0 1px primary/0.35, 0 8px 24px primary/0.22, 0 32px 80px primary/0.18`. HLD-signature soft cyan outer glow. Hover elements, interactive cards, primary CTA.
+- `.glow-pink-soft` — same construction with `--accent`. Companion glow for secondary hover surfaces, accent-tier cards.
+- `.shadow-pixel` — `2px 2px 0 0 hsl(var(--border))`. Hard pixel-art drop shadow with no blur and integer offset. Applied to buttons, pixel-styled cards, anything that should read as a sprite on a tile grid.
+
+Conventional blurred drop shadows are forbidden. Either you get the **soft atmospheric glow** (cyan or pink) or the **hard pixel offset** — there is no middle.
+
+## Motion
+Five keyframes. Durations cluster at **600ms (reveal), 2.4-3s (loops), 12s (ambient particles), 200ms (impact)**:
+- `particle-float` (12000ms infinite) — translate Y up across the viewport with opacity fade in/out. Ambient dust/light motes against the night sky. Background-layer only, never on functional UI.
+- `gentle-bob` (3000ms infinite ease-in-out) — subtle 2px vertical drift. Floating call-outs, scroll hints, idle character art.
+- `screen-shake-soft` (200ms once) — 3px shake on impact. **Used sparingly** for game-feel moments only: boss reveal, error toast, victory confirm. Never on hover, never on a load.
+- `rise-in` (600ms once) — opacity + 16px translate. Section entrance, title cards.
+- `pulse-glow-cyan` (2400ms infinite) — expanding cyan box-shadow ring. Lantern heartbeat for the single hero CTA, **one per page max**.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — every keyframe is wrapped in the media query and `particle-float` drops to a single static frame.
+
+## Component patterns
+- **Buttons:** pixel-edge solid (sharp 0 radius), `.shadow-pixel` 2x2 offset, VT323 display caps with `tracking-[0.04em]`. **Primary = glowing cyan fill** on the dusky purple background, foreground dark for legibility. Hover intensifies the `.glow-cyan-soft` outer halo — the button becomes the lantern. No ghost-only buttons by default; ghost variant reserved for tertiary actions inside dense panels.
+- **Cards:** sharp `rounded-none`, 1px `--border` hairline, `bg-card` one stop above background. Padding `p-6 lg:p-10`. Optional `.glow-cyan-soft` or `.glow-pink-soft` for hero/feature cards. **Parchment-tier cards** (`bg-brand-parchment`, foreground swapped to `--deep-purple`) are reserved for hand-illustrated Cuphead watercolor surfaces — use sparingly to mark a tonal shift.
+- **Inputs:** full box with 1px `--border`, `bg-card`, 0 radius. Label sits above in VT323 display, `tracking-[0.04em]`. Focus shifts border to `--ring` (cyan) and adds a 1px cyan inner glow. **No border-bottom-only treatment** — pixel-art language wants full rectangles.
+- **CTAs:** pixel-edge solid button is the canonical CTA — cyan fill, pixel drop-shadow, VT323 caps. Hero CTA may carry `.pulse-glow-cyan` (lantern heartbeat ring, one per page). Tertiary CTAs allowed as foreground-color text links with a pixel-styled hover underline (2px, no anti-alias).
+
+## Recommended rich media
+
+**Cover imagery.** Illustrated game art: Cuphead watercolor-on-paper character portraits, Hyper Light Drifter pixel landscapes (dusky horizons, lone-figure silhouettes against glowing cyan), animated GIF-style loops, environmental concept art, hand-drawn character portraits. Every page should feel like a screenshot or marketing splash from a beloved Steam indie title.
+
+**AI tool recommendations.**
+- **Midjourney** — pixel landscapes and atmospheric scenes. Prompt fragment: `Hyper Light Drifter pixel art, dusky purple sunset, atmospheric, glowing cyan accent`. Adjust for Spiritfarer warmth by swapping in `warm sunset orange campfire glow`.
+- **Recraft** — vector hand-drawn illustration in the Cuphead tradition. Use for character portraits and parchment-card surfaces.
+- **Aseprite-style pixel art generators** — authentic 16x16 / 32x32 sprite work for HUD icons, status indicators, decorative ornament. Never upscale-blur a sprite; nearest-neighbor only.
+
+**Aspect ratios.** 16:9 for environment shots and hero landscapes. 1:1 for character portraits and Steam-card-style lockups. Occasional 4:5 for game-card portrait composition. **Never 9:16 vertical** — that reads social, not indie-game-marketing.
+
+**Color.** Every image should reach into the palette: dusky purple base, glowing cyan accent, hot pink counter-accent, optional sunset-orange interlude. Single-color desaturated images break the atmospheric premise.
+
+**What to AVOID.**
+- Photorealism — this direction is hand-illustrated, never photographic
+- Gradient meshes — that's the glassmorphic direction, not this one
+- Corporate enterprise palettes — flat blues, sterile grays
+- Bright midday photography — the canvas is dusk
+- Anti-aliased pixel art — if it's pixel art, render with nearest-neighbor
+- Soft drop shadows on UI elements (use `.shadow-pixel` for hard offset or `.glow-cyan-soft` for atmosphere)
+
+**Accessibility.** Every animated GIF/video has a still poster frame. Particle layers are marked `aria-hidden` — they are decoration. Character portraits and concept art carry descriptive alt-text naming the scene ("pixel-art lone figure on a clifftop at dusk, glowing cyan lantern in hand"). `screen-shake-soft` is suppressed under `prefers-reduced-motion`. Color contrast: verify the cyan and hot-pink on dusky-purple background combinations meet WCAG AA — these are saturated and live close to each other in luminance.
+
+## Component families
+None at install time. Likely first families: `LanternCTA` (cyan fill + pulse-glow + pixel-shadow), `ParchmentCard` (Cuphead watercolor tier), `ParticleField` (background particle-float layer), `PixelHUD` (VT323 + tnum stat readouts). The Director appends conventions as they're established.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.35)` background, foreground text. The lantern light doubles as the selection color.
+- **Focus ring:** `2px solid hsl(var(--ring))` — 2px not 1px, because pixel-grid alignment and dark-surface visibility both demand it.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands, add it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/indie-art-game/tokens.ts

@@ -0,0 +1,216 @@
+import type { Direction } from "../schema";
+
+export const indieArtGame: Direction = {
+  name: "indie-art-game",
+  ethos:
+    "Hyper Light Drifter atmospheric pixel · Cuphead 1930s rubber-hose · Untitled Goose Game playful · Outer Wilds wonder · Spiritfarer warmth",
+  references: [
+    {
+      brand: "Hyper Light Drifter",
+      trait: "atmospheric pixel art, dusky purple-pink palettes",
+    },
+    {
+      brand: "Cuphead",
+      trait: "1930s rubber-hose animation, watercolor-on-paper textures",
+    },
+    {
+      brand: "Untitled Goose Game",
+      trait: "minimalist mischief, sparse composition",
+    },
+    {
+      brand: "Outer Wilds",
+      trait: "wonder, planetarium scale, deep cosmic blues",
+    },
+    {
+      brand: "Spiritfarer",
+      trait: "warm sunset palettes, hand-drawn character art",
+    },
+  ],
+  feel:
+    "Atmospheric indie-game art direction. Dusky purple-pink-cyan palettes with warm sunset interludes. " +
+    "Pixel-art-adjacent display fonts but readable. Hand-drawn illustration prominence. " +
+    "Reads as a beloved Steam indie title's marketing site.",
+
+  fonts: {
+    display: {
+      family: "VT323",
+      fallback: ["DotGothic16", "Courier Prime", "ui-monospace", "Courier New", "monospace"],
+      from: "pixel-art-adjacent display — VT323 channels CRT terminal type, game-UI convention",
+      googleFont: "VT323",
+      weights: [400],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["DM Sans", "system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "Inter readable sans — pixel font reserved for display only, body must read at long form",
+      googleFont: "Inter",
+      weights: [400, 500, 600, 700],
+    },
+    mono: {
+      family: "VT323",
+      fallback: ["Courier Prime", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "VT323 doubles as display and mono — game-UI convention, HUD numerics in the same voice as headlines",
+      googleFont: "VT323",
+      weights: [400],
+    },
+  },
+
+  typography: {
+    headingTracking: "0.02em",          // VT323 pixel grid reads better with a touch of air
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum"',       // tabular numerics for HUD/stat readouts
+    h1ScaleClamp: "clamp(2.75rem, 8vw, 6rem)",   // oversized pixel display — title-card scale, never tasteful
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: { hsl: "270 35% 12%", from: "Hyper Light Drifter dusky purple night sky — the atmospheric void" },
+    foreground: { hsl: "35 15% 92%", from: "Spiritfarer warm off-white — sunset aftermath, never pure white" },
+    card: { hsl: "270 32% 16%", from: "elevated purple — one stop above the night sky" },
+    popover: { hsl: "270 30% 19%", from: "popover surface — two stops up, still atmospheric purple" },
+    primary: { hsl: "180 85% 60%", from: "Hyper Light Drifter glowing cyan — signature accent, the lantern light" },
+    primaryForeground: { hsl: "270 35% 12%", from: "dusky purple on glowing cyan — HLD button face" },
+    secondary: { hsl: "280 50% 25%", from: "= brand.deep-purple — atmospheric depth, secondary tier surface" },
+    secondaryForeground: { hsl: "35 15% 92%", from: "warm off-white on deep purple" },
+    muted: { hsl: "270 25% 22%", from: "quiet purple panel — same family as card, fractionally lighter" },
+    mutedForeground: { hsl: "35 12% 72%", from: "warm dusk gray — Spiritfarer secondary text" },
+    accent: { hsl: "325 85% 65%", from: "= brand.hot-pink — HLD secondary accent, the cyan's counterpart" },
+    accentForeground: { hsl: "270 35% 12%", from: "dusky purple on hot pink" },
+    border: { hsl: "270 25% 28%", from: "atmospheric purple hairline — visible against the night, never harsh" },
+    input: { hsl: "270 25% 28%", from: "same as border — single hairline language across inputs and panels" },
+    ring: { hsl: "180 85% 60%", from: "glowing cyan ring — focus is the lantern light, HLD signature" },
+    destructive: { hsl: "8 78% 55%", from: "warning lamp red — distinct from hot pink, reserved for alerts" },
+    destructiveForeground: { hsl: "35 15% 92%", from: "warm off-white on alert" },
+    brand: {
+      "hot-pink": { hsl: "325 85% 65%", from: "Hyper Light Drifter secondary accent — paired with cyan, the dusk-flare" },
+      "sunset-orange": { hsl: "24 90% 60%", from: "Spiritfarer warmth — campfire glow, sunset interlude color" },
+      "deep-purple": { hsl: "280 50% 25%", from: "atmospheric depth — Outer Wilds dusk, deep-tier surface anchor" },
+      "moss": { hsl: "145 35% 45%", from: "Outer Wilds botanical — quiet planet flora, status/growth accent" },
+      "parchment": { hsl: "35 25% 88%", from: "Cuphead watercolor paper — card UI tier when the surface is hand-illustrated" },
+      "glow-cyan": { hsl: "180 85% 60%", from: "= primary; HLD lantern light, also semantic for the glow utilities" },
+      "night-purple": { hsl: "270 35% 12%", from: "= background; the dusky night, also a token for hero composition" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128],   // medium-low — atmospheric breathing
+    containerMax: "max-w-6xl",
+    containerPadding: "px-6 lg:px-10",
+    sectionPadding: {
+      hero: "pt-24 pb-16 lg:pt-32 lg:pb-24",
+      default: "py-20 lg:py-28",
+      tight: "py-12 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "0",                          // pixel-art sharp — no anti-aliasing on corners
+    pillsAllowed: false,                // pills break the pixel grid; rectangles only
+  },
+
+  shadows: {
+    style: "glow",
+    utilities: {
+      "glow-cyan-soft":
+        "0 0 0 1px hsl(var(--primary) / 0.35), " +
+        "0 8px 24px hsl(var(--primary) / 0.22), " +
+        "0 32px 80px hsl(var(--primary) / 0.18)",          // HLD-signature soft cyan outer glow — hover/interactive
+      "glow-pink-soft":
+        "0 0 0 1px hsl(var(--accent) / 0.35), " +
+        "0 8px 24px hsl(var(--accent) / 0.22), " +
+        "0 32px 80px hsl(var(--accent) / 0.18)",           // companion pink glow — secondary hover surfaces
+      "shadow-pixel":
+        "2px 2px 0 0 hsl(var(--border))",                  // hard pixel-art drop shadow — no blur, integer offset
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 600,                    // entrance — quick but not jarring
+      loop: 3000,                     // gentle-bob cycle
+      ambient: 12000,                 // particle-float — slow rising particles
+    },
+    keyframes: {
+      "particle-float": {
+        css:
+          "0% { transform: translateY(0); opacity: 0; }\n" +
+          "10% { opacity: 0.8; }\n" +
+          "90% { opacity: 0.8; }\n" +
+          "100% { transform: translateY(-120vh); opacity: 0; }",
+        defaultDuration: 12000,
+        iteration: "infinite",
+        purpose: "ambient particle drift — slow rising dust/light motes against the night sky background",
+      },
+      "gentle-bob": {
+        css:
+          "0%, 100% { transform: translateY(0); }\n" +
+          "50% { transform: translateY(-2px); }",
+        defaultDuration: 3000,
+        iteration: "infinite",
+        purpose: "subtle 2px vertical drift for floating UI elements — call-outs, scroll hints, idle character art",
+      },
+      "screen-shake-soft": {
+        css:
+          "0%, 100% { transform: translate(0, 0); }\n" +
+          "20% { transform: translate(-3px, 1px); }\n" +
+          "40% { transform: translate(2px, -2px); }\n" +
+          "60% { transform: translate(-2px, 2px); }\n" +
+          "80% { transform: translate(1px, -1px); }",
+        defaultDuration: 200,
+        iteration: "once",
+        purpose: "3px shake on impact — used sparingly for game-feel moments (boss reveal, error, victory)",
+      },
+      "rise-in": {
+        css:
+          "from { opacity: 0; transform: translateY(16px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 600,
+        iteration: "once",
+        purpose: "section entrance — title cards and panel reveals",
+      },
+      "pulse-glow-cyan": {
+        css:
+          "0%, 100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0.5); }\n" +
+          "50% { box-shadow: 0 0 0 12px hsl(var(--primary) / 0); }",
+        defaultDuration: 2400,
+        iteration: "infinite",
+        purpose: "single hero CTA highlight — lantern heartbeat, one element per page max",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",
+
+  patterns: {
+    button:
+      "Pixel-edge solid — sharp 0 radius, drop-shadow pixel offset (.shadow-pixel). " +
+      "VT323 display caps for label, slight letter-spacing to compensate for the pixel grid. " +
+      "Primary = glowing cyan fill on the dusky purple background, foreground dark for legibility. " +
+      "Hover intensifies the .glow-cyan-soft outer halo — the button becomes the lantern. " +
+      "No ghost buttons by default; ghost variant only for tertiary actions inside dense panels.",
+    card:
+      "Sharp 0 radius, 1px --border hairline, bg-card one stop above background. " +
+      "Padding p-6 lg:p-10. Optional .glow-cyan-soft or .glow-pink-soft for hero/feature cards. " +
+      "Parchment-tier cards (bg-brand-parchment, foreground swapped to deep purple) are reserved for hand-illustrated " +
+      "Cuphead watercolor surfaces — use sparingly to mark a tonal shift.",
+    input:
+      "Full box with 1px --border, bg-card, 0 radius. Label sits above in VT323 display, tracking 0.04em. " +
+      "Focus shifts border to --ring (cyan) and adds a 1px cyan inner glow. " +
+      "No border-bottom-only treatment — pixel-art language wants full rectangles.",
+    cta:
+      "Pixel-edge solid button is the canonical CTA — cyan fill, pixel drop-shadow, VT323 caps. " +
+      "Hero CTA may carry .pulse-glow-cyan (heartbeat ring, one per page). " +
+      "Tertiary CTAs allowed as foreground-color text links with a pixel-styled hover underline (2px, no anti-alias).",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.35)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring))",     // pixel-grid aligned, 2px not 1px — reads on dark surface
+    scrollbarStyle: "thin",
+  },
+};

package/themes/insurance-legacy/THEME.md

@@ -0,0 +1,101 @@
+# Design Direction — Insurance-Legacy
+
+## Ethos
+State Farm "Like a good neighbor" red · Allstate "Good Hands" deep blue · Farmers "We know a thing or two" navy + amber · Liberty Mutual everyman friendliness · Nationwide jingle dependability
+
+## Feel
+Mass-market traditional insurance. Red + deep navy brand marks, friendly Inter, dependable-not-cold, agent-network warmth. The page reads "your dad's State Farm guy retired and his daughter took over the agency." Generations of trust, multi-product (auto + home + life + business), local-agent-first. Approachable but institutional — never DTC-pink, never white-shoe-formal, never enterprise-blue-cold.
+
+An insurance-legacy surface that feels Lemonade-pink-startup, white-shoe-formal-serif, or B2B-SaaS-cold is off-direction. The voice is friendly-trustworthy-dependable.
+
+## Reference brands
+- **State Farm** (statefarm.com) → signature red, friendly Inter, local-agent-on-the-corner warmth. The category benchmark for mass-market US insurance.
+- **Allstate** (allstate.com) → deep navy + "Good Hands" authority, mass-market dependability. The navy counterpoint to State Farm's red.
+- **Farmers Insurance** (farmers.com) → deep navy + amber accent, "we know a thing or two" expertise voice. The product-knowledge-as-brand angle.
+- **Liberty Mutual** (libertymutual.com) → navy + yellow, everyman-friendly with statue gravitas. The "Liberty Liberty Liberty" jingle made visual.
+- **Nationwide** (nationwide.com) → deep blue restraint, multi-product household-financial dependability. Insurance + investing + retirement in one trusted chrome.
+
+## Tokens
+HSL triples in `src/index.css`. The cool paper background (`210 30% 98%`) is a near-white with a faint blue tilt — pure white reads tech-startup, cream reads spa or legacy-formal. The State Farm / Allstate marketing surface is this cool-tinted white.
+
+Brand tokens, all semantic:
+- `sf-red` — alias of `--primary`. State Farm signature red — the category brand-mark voice.
+- `sf-red-soft` / `sf-red-deep` — tints and hover-darken.
+- `allstate-navy` — Allstate Good Hands navy. Secondary brand-mark, agent-network authority.
+- `farmers-amber` — Farmers / Liberty Mutual amber. Secondary warmth, "we know a thing or two" accent.
+- `good-green` — covered/active status. Claim-paid checkmark, policy-active dot. **Restrained sage-toned green — never the bright candy-green of tech-product growth.**
+
+Color rules:
+- **Red is the brand voice for State-Farm-flavored projects; navy is the brand voice for Allstate-flavored.** Pick one per project; document in project knowledge. The direction ships with red primary because State Farm is the largest US insurer.
+- **Use red and navy together intentionally.** Most legacy carriers pair them — red CTA + navy agent-network strip is the canonical composition.
+- **Amber is the warmth-accent, never the primary.** Use it for "you saved $312/year" callouts, testimonial highlights, "we know a thing or two" badges.
+- **Good-green is for coverage-active, not for marketing growth.** A claim-paid checkmark is green; a "trusted by 90M customers" stat is navy.
+
+## Typography
+- **Display:** Inter at weights 500/600/700/800. Friendly humanist sans — never serif (that's white-shoe law-firm territory).
+- **Body:** Inter, **17px** floor, line-height 1.6. Mass-market audience skews older — accessibility floor matters.
+- **Mono:** JetBrains Mono. Policy numbers, premiums, agent phone numbers, claim IDs. Tabular for quote-comparison.
+
+H1 uses `clamp(2rem, 4.5vw, 3.25rem)` — restrained. Mass-market insurance doesn't shout in headlines; the CTA and the local-agent finder do the work.
+
+## 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-16 lg:py-24`
+  - Tight: `py-12 lg:py-16`
+
+## Color
+No hex. Red is brand-mark; navy is agent-network; amber is warmth; good-green is covered. Pure white only as card fill.
+
+## Radius
+`--radius: 0.375rem` (6px). Friendly but not pillowy — institutional approachability. **Pills allowed** for product-type tags, agent-status, coverage-active.
+
+## Shadows
+**Soft.** Three utilities:
+- `.shadow-card` — standard card.
+- `.shadow-card-lg` — hover lift.
+- `.shadow-map` — the find-an-agent map placeholder; inset highlight + outer shadow for the map-on-page feel.
+
+## Motion
+Mass-market responsive, never marketing-slow.
+- **Easing:** `cubic-bezier(0.22, 1, 0.36, 1)`
+- **Durations:** reveal 400ms, loop 2400ms.
+- **Keyframes:** `fade-rise`, `scale-in`, `soft-pulse` (agent-online dot).
+
+## Component patterns
+- **Buttons:** primary = solid red fill, white text, `rounded-md` (6px). Secondary = solid navy (the "Talk to an agent" alternate). Tertiary = navy ghost or red text-link. Generous height (`h-11`) — mass-market tap target.
+- **Cards:** `rounded-md`, white fill, 1px cool border, `shadow-card`. Internal padding `p-6 lg:p-8`. Agent-card may use red top-border. Testimonial card uses `farmers-amber-soft` inset background.
+- **Inputs:** `rounded-md`, `h-11`. Focus = 2px navy ring (high-contrast accessibility floor).
+- **CTAs:** primary red ("Get a quote", "File a claim") + secondary navy ("Find an agent", "Talk to someone") often paired. Voice: *"Get a free quote"*, *"Find a local agent"*, *"File a claim 24/7"*. **Never** DTC-jargon (*"90 seconds"*, *"instant"*), **never** white-shoe (*"Request counsel"*).
+
+## Recommended rich media
+Insurance-legacy uses **agent and family photography** the way State Farm commercials do — local agent at their storefront, family in their driveway, dad-with-the-pickup.
+
+**Permitted:** local-agent portraits (smiling agent in a logo-branded polo at their storefront — warm natural light, never studio-stiff). Family lifestyle photography (Honda CR-V in driveway, kids playing in yard, grandparent at kitchen table — middle-American, multi-generational, intentionally not coastal-urban). The State Farm / Allstate / Farmers logo-strip social-proof row. Static map placeholders for "find an agent near you" — never live maps in marketing-section mockups.
+
+**Forbidden:** the conference-room-handshake stock (cliché); white-shoe-formal portraits (off-brand); urban-millennial-with-MacBook lifestyle (DTC territory); AI-rendered abstract gradients (off-brand for institutional); car-crash-photography (too grim).
+
+**AI tools:** Midjourney/Flux for agent and family photography. Prompts like *"local insurance agent at their suburban storefront, friendly smile, branded polo, warm afternoon light, Midwest small-town, candid, Sony A7iv 50mm"*. Avoid the coastal-tech-startup default styling.
+
+**Aspect ratios:** 4:5 for portraits, 16:9 for family/lifestyle, 1:1 for agent-card avatars.
+
+**Performance:** lifestyle hero ≤180 KB AVIF at 1600w; agent portraits ≤80 KB at 600w.
+
+## Component families
+None at install time. Anticipated families:
+- **AgentCard** — agent portrait, name in Inter 700, agency name + address in Inter 500, phone in mono 600, sf-red "Get a quote" CTA + navy "Call" CTA paired.
+- **ProductTypeTile** — icon, product name (Auto / Home / Life / Renters / Business / Pet), short description, navy chevron link.
+- **TestimonialCard** — amber-soft inset background, family photo + quote in Inter 500 italic, attribution in mono.
+- **QuoteComparisonRow** — carrier logo, mono monthly premium, mono savings-vs-current, red "Switch" CTA.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.22)` — pale red highlight.
+- **Focus ring:** `2px solid hsl(var(--ring))` — navy, highly visible for accessibility.
+- **Scrollbar:** `auto` — mass-market audience expects platform-native scrollbars.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction, authored at install time. Pairs distinctly with `insurance-modern` — same industry, opposite voice. Insurance-legacy is the agent-network institution; insurance-modern is the DTC app.

package/themes/insurance-legacy/tokens.ts

@@ -0,0 +1,182 @@
+import type { Direction } from "../schema";
+
+// insurance-legacy — State Farm / Allstate / Farmers / Liberty Mutual / Nationwide.
+// Traditional red+blue brand mark, friendly local-agent network, dependable.
+// The opposite of DTC pink+peach; this is the agent-on-the-corner-since-1930s.
+
+export const insuranceLegacy: Direction = {
+  name: "insurance-legacy" as Direction["name"],
+  ethos:
+    "State Farm 'Like a good neighbor' red · Allstate 'Good Hands' deep blue · Farmers 'We know a thing or two' navy + amber · Liberty Mutual everyman friendliness · Nationwide jingle dependability",
+  references: [
+    { brand: "State Farm", trait: "signature red, friendly Inter, local-agent-on-the-corner warmth" },
+    { brand: "Allstate", trait: "deep navy + 'Good Hands' authority, mass-market dependability" },
+    { brand: "Farmers Insurance", trait: "deep navy + amber accent, 'we know a thing or two' expertise voice" },
+    { brand: "Liberty Mutual", trait: "navy + yellow, everyman-friendly with statue gravitas" },
+    { brand: "Nationwide", trait: "deep blue restraint, multi-product household-financial dependability" },
+  ],
+  feel:
+    "Mass-market traditional insurance. Red + deep navy brand marks, friendly Inter, " +
+    "dependable-not-cold, agent-network warmth. The page reads 'your dad's State Farm " +
+    "guy retired and his daughter took over the agency.' Generations of trust, multi-" +
+    "product (auto + home + life + business), local-agent-first. Approachable but " +
+    "institutional — never DTC-pink, never white-shoe-formal, never enterprise-blue-cold.",
+
+  fonts: {
+    display: {
+      family: "Inter",
+      fallback: ["Helvetica Neue", "system-ui", "-apple-system", "sans-serif"],
+      from: "State Farm / Allstate display Inter — friendly humanist sans, never serif",
+      googleFont: "Inter",
+      weights: [500, 600, 700, 800],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "Inter body — accessible to older audiences, clean at policy-language sizes",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "policy numbers, premiums, agent phone numbers, claim IDs — tabular for quote-comparison",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.018em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"cv11", "ss01", "tnum"',
+    h1ScaleClamp: "clamp(2rem, 4.5vw, 3.25rem)",
+    bodyBaseSize: "1.0625rem",        // 17px floor — older mass-market audience accessibility
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: { hsl: "210 30% 98%", from: "soft cool paper — Allstate marketing surface, never pure white" },
+    foreground: { hsl: "215 35% 16%", from: "deep navy ink — Allstate body text, friendly not cold" },
+    card: { hsl: "0 0% 100%", from: "pure white card — agent-finder tile, testimonial card" },
+    popover: { hsl: "0 0% 100%", from: "same as card" },
+    primary: { hsl: "358 75% 46%", from: "State Farm signature red — primary CTA, the brand-mark voice" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on red" },
+    secondary: { hsl: "210 25% 94%", from: "cool soft surface — secondary panels, aside cards" },
+    secondaryForeground: { hsl: "215 35% 18%", from: "navy ink on cool surface" },
+    muted: { hsl: "210 22% 95%", from: "table-row stripe, near-bg" },
+    mutedForeground: { hsl: "215 14% 42%", from: "slate-gray — captions, agent address line, policy meta" },
+    accent: { hsl: "210 30% 92%", from: "hover surface — one cool tier deeper" },
+    accentForeground: { hsl: "215 35% 18%", from: "navy ink on hover" },
+    border: { hsl: "210 16% 86%", from: "soft cool border — Liberty Mutual panel rule" },
+    input: { hsl: "210 16% 86%", from: "same as border" },
+    ring: { hsl: "215 70% 32%", from: "Allstate deep navy — focus ring, accessibility floor for older audiences" },
+    destructive: { hsl: "358 75% 46%", from: "= primary red — restrained, also alert color (semantic overlap intentional in this palette)" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on red" },
+    brand: {
+      "sf-red": { hsl: "358 75% 46%", from: "= primary; State Farm signature red, the category brand-mark" },
+      "sf-red-deep": { hsl: "358 80% 36%", from: "red hover-darken, active state" },
+      "sf-red-soft": { hsl: "358 70% 95%", from: "red tint — alert banner, claim-status pill" },
+      "allstate-navy": { hsl: "215 70% 32%", from: "Allstate Good Hands navy — secondary brand-mark, agent-network authority" },
+      "allstate-navy-soft": { hsl: "215 50% 92%", from: "navy tint — info banner, certified-agent pill" },
+      "farmers-amber": { hsl: "36 90% 50%", from: "Farmers / Liberty Mutual amber — secondary warmth, 'we know a thing or two' accent" },
+      "farmers-amber-soft": { hsl: "36 90% 95%", from: "amber tint — testimonial highlight, savings-callout pill" },
+      "good-green": { hsl: "140 50% 38%", from: "covered/active status — claim-paid checkmark, policy-active dot" },
+      "good-green-soft": { hsl: "140 50% 94%", from: "green tint — active pill" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96],
+    containerMax: "max-w-6xl",
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-20 pb-14 lg:pt-28 lg:pb-20",
+      default: "py-16 lg:py-24",
+      tight: "py-12 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "0.375rem",                 // 6px — friendly but not pillowy; institutional approachability
+    pillsAllowed: true,                // pills for product-type tags, agent-status, coverage-active
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-card":
+        "0 1px 2px hsl(215 30% 20% / 0.05), 0 4px 12px hsl(215 30% 20% / 0.07)",
+      "shadow-card-lg":
+        "0 2px 4px hsl(215 30% 20% / 0.06), 0 12px 28px hsl(215 30% 20% / 0.10)",
+      "shadow-map":
+        "inset 0 1px 0 hsl(0 0% 100% / 0.6), 0 8px 32px hsl(215 40% 20% / 0.10)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 400,                     // mass-market responsive, never marketing-slow
+      loop: 2400,
+      ambient: 0,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(8px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 400,
+        iteration: "once",
+        purpose: "card and section entrance — friendly, never bouncy",
+      },
+      "scale-in": {
+        css:
+          "from { opacity: 0; transform: scale(0.97); }\n" +
+          "to { opacity: 1; transform: scale(1); }",
+        defaultDuration: 200,
+        iteration: "once",
+        purpose: "modal, popover, agent-call card — confirms interaction",
+      },
+      "soft-pulse": {
+        css:
+          "0%, 100% { opacity: 1; }\n" +
+          "50% { opacity: 0.55; }",
+        defaultDuration: 1800,
+        iteration: "infinite",
+        purpose: "agent-online dot, claim-in-progress indicator",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary = solid red fill, white text, rounded-md (6px), shadow-card. " +
+      "Secondary = solid navy fill, white text (the 'Talk to an agent' alternate). " +
+      "Tertiary = navy ghost (border + text), or red text-link. " +
+      "Generous height (h-11) — mass-market tap target. Hover darkens by 6% + shadow-card-lg.",
+    card:
+      "Rounded-md (6px), white fill, 1px cool border, shadow-card. " +
+      "Internal padding p-6 lg:p-8. Agent-card variant uses red top-border or red accent badge. " +
+      "Testimonial card uses farmers-amber-soft inset background.",
+    input:
+      "Rounded-md, 1px cool border, white background. Generous height (h-11). " +
+      "Label above in Inter 500. Focus = 2px navy ring (high-contrast for accessibility floor).",
+    cta:
+      "Primary red solid is the marketing default ('Get a quote', 'File a claim'). " +
+      "Navy solid is the agent-network alternate ('Find an agent', 'Talk to someone'). " +
+      "Voice is plain-trustworthy: 'Get a free quote', 'Find a local agent', 'File a claim 24/7'. " +
+      "Never DTC-jargon ('90 seconds', 'instant'), never white-shoe-formal ('Request counsel').",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring))",
+    scrollbarStyle: "auto",            // mass-market expects platform-native scrollbars
+  },
+};