@stylecrib/cli 0.3.1 → 0.3.3

package/themes/atelier-radiance/theme.yml

@@ -0,0 +1,130 @@
+# Atelier Radiance — Family E, Luxury & Brand-Tier.
+#
+# NEW-BASE CANDIDATE for BESPOKE_THEME_SYSTEM.md, adjacent to Base 42
+# Boutique Hotel. Base 42 is warm hospitality register (sun-washed
+# palette, elegant serif, natural light). Atelier Radiance holds the
+# elegant serif discipline but pivots the register from HOSPITALITY
+# to BOUTIQUE CREATIVE AGENCY — dark hero canvas instead of sun-washed
+# warm ground, high-contrast Didone-style serif at monumental scale
+# instead of Reckless / Canela, and a repeating SUNBURST SVG ornament
+# as the studio's identity mark that appears 6+ times across the
+# composition.
+#
+# Authored from Matt's provided design brief (2026-07-04, rodeostudio.co
+# reference — a Rodeo-Drive-adjacent boutique creative agency).
+# Placeholder studio is a fictional boutique branding + creative agency
+# called SOLSTICE — domain-agnostic mockup that could re-skin to any
+# high-end boutique agency, luxury creative studio, or premium
+# brand-consultancy portfolio. The register expresses "boutique agency
+# premium" through the CONTRAST between dark hero + warm-cream +
+# sage-green bands, the disciplined Didone serif display, and the
+# recurring sunburst ornament — NOT through decoration or ambient glow.
+#
+# Tenth theme via the v2 harness. First Family E theme after
+# overland-broadside; second Family E new-base candidate. Fifth theme
+# overall built for boutique / creative agency use cases (after
+# case-panel + arc-stack + ember-poster + marker-mag which are all
+# adjacent registers).
+#
+# Alternative slugs considered — boutique-serif (too generic),
+# sunburst-atelier (reversed word order feels wrong), radiance-atelier
+# (same register but noun-first), boulevard-atelier (locks to a
+# specific reference locale). Atelier Radiance picked because
+# "atelier" nails the boutique-creative-agency register (a small
+# working studio, not a corporate consultancy) and "radiance" alludes
+# to both the sunburst ornament and the luxury/glow quality this
+# register trades on.
+
+name: Atelier Radiance
+concept: Boutique creative agency register — dark canvas hero broken by warm-cream and sage-green inverted bands, high-contrast Didone-style serif display at monumental scale, a recurring sunburst SVG ornament (small, bespoke, 8-pointed radial star) that appears 6+ times across the composition as the studio's identity mark, and a single burgundy accent reserved for CTAs only.
+influence: |
+  Rodeo-Drive-adjacent boutique creative agencies — high-end small studios that trade on refinement + editorial polish (the register held by boutique branding shops like Motto, Base Design at their most luxurious, and independent NY / LA studios that photograph their work in editorial contexts). Also luxury print advertising (the discipline of Bulgari / Cartier campaign layouts translated to a working studio page). Distinct from case-panel's showcase-agency register — Atelier Radiance is smaller, warmer, more editorial.
+
+family: E
+base_number: 42
+base_note: |
+  New-base candidate adjacent to Base 42 Boutique Hotel. Base 42 is warm hospitality (sun-washed limestone canvas, Reckless serif, natural-light photography). Atelier Radiance holds the elegant serif discipline but pivots the surface — dark hero canvas, high-contrast Didone display type, and a repeating sunburst ornament that both bases lack. Same DNA (elegant + warm + editorial), different setting (boutique studio, not hotel lobby).
+
+render_url: http://localhost:5173/themes/atelier-radiance
+
+surface: web
+
+typography:
+  display: Instrument Serif (free, Google Fonts) at 400 weight, or Bodoni Moda / Playfair Display as broader-market fallback — letter-spacing normal, mixed case. At scale — 100-140px hero wordmark, 72-90px section headlines, 50-60px big serif numerals for stat quad and approach list, 22-28px h3. Instrument Serif is the reference face's closest free approximation (Atcarquette is a paid Didone with high stroke-contrast; Instrument Serif hits the same register from Google Fonts). The wordmark leans on the display's letterform contrast — thin verticals meeting thick horizontals — so serif substitutions must preserve that contrast, not smooth it out.
+  body: Montserrat (free, Google Fonts) — 400 weight for body, 500 for labels, 600 for CTA + nav. 14-16px body copy, line-height 1.5. Sentence case, not all caps. Small caption labels ("WHY RODEO?" "WHAT WE DO") use a MODEST 12px Montserrat 600 with LETTER-SPACING 0.14em (below the mono-caps-eyebrow slop-blocklist fingerprint threshold — this is a legitimate boutique-agency caps label, not an eyebrow ornament).
+  mono: none. Atelier Radiance is a consumer luxury surface — mono has no role.
+  scale: 1.5 (perfect fifth — deliberately wide contrast so the serif display shouts at editorial scale and body settles into refined captioning)
+
+palette:
+  bg: "#000000"           # canvas — dark hero + dark contact section + dark footer
+  surface: "#111111"      # raised card / slightly-lifted panel on the dark canvas
+  ink: "#FFFFFF"          # white — primary text on dark bands
+  accent: "#8F161F"       # deep burgundy — CTAs + sunburst ornament + accent word ONLY
+  cream: "#F1E9E0"        # warm parchment — inverted "What we do" band
+  sage: "#ACB5B0"         # muted sage-green — testimonials band
+  darkInk: "#1A1B1F"      # ink for text on cream + sage bands
+  mute: "#8A8078"         # secondary text (labels, captions)
+
+density: balanced
+
+motion: |
+  Ships live in the section renderer (no external dependencies):
+  1. Hero wordmark reveal — the serif wordmark fades in from opacity 0 + slight blur(2px) → 1 + blur(0) over 900ms cubic-bezier(0.19,1,0.22,1) on first paint. Letters do NOT stagger (this is an editorial register, not a marketing register).
+  2. Sunburst ornament rotation — the burgundy sunburst next to the hero rotates 90deg over 1200ms cubic-bezier on first paint, settling into its final position. Reads as "the identity mark clicking into place."
+  3. Numbered approach items — each row fades in from opacity 0 + translateY(12px) with 120ms stagger + 600ms cubic-bezier when scrolled into view. IntersectionObserver-driven.
+  4. Photo-hero slider — click left/right arrows or drag to advance. Transitions between photos are 800ms cubic-bezier ease-in-out crossfade, NOT auto-advance (auto-advancing is the slop-blocklist hit; this waits for user input).
+  5. Service tile hover — the burgundy sunburst on each tile spins 15deg + scales(1.05) on card hover, 220ms cubic-bezier. Card background stays flat (no lift, no shadow — this is boutique restraint, not corporate polish).
+  6. Testimonial carousel — click left/right chevrons to advance. Auto-advances every 8s IF the user hasn't clicked; pauses on hover. Duration 8s is a testimonial-appropriate pace (long enough to read).
+  7. FAQ accordion — chevron rotates 45deg (+ becomes ×) on open, 400ms cubic-bezier. Only one open at a time. Body expands smoothly.
+  8. Contact form focus — field label lifts + gets underlined on focus, 200ms transition. Send button hover flips from burgundy-fill to burgundy-outline with cream text, 200ms.
+  9. prefers-reduced-motion: reduce — wordmark and sunburst at final state; stagger disabled; auto-advance carousel paused; hover transitions instant; slider still functional but crossfade becomes instant.
+
+  Customer installs these as dependencies for the deeper motion tier:
+  - Lenis — smooth inertial scroll (the alternating dark/cream/sage band transitions really benefit from inertial scroll for the editorial cadence).
+  - GSAP ScrollTrigger — the approach-list stagger + service-tile reveal + testimonial-carousel logic all sit comfortably in a GSAP timeline.
+  - Custom branded preloader — the sunburst ornament expanding from center at 120px → 40px final position, then the wordmark fading in from behind it.
+
+  Motion character: refined, editorial, considered. Custom cubic-bezier(0.19,1,0.22,1) for reveals. Nothing quick, nothing bouncy, nothing tech-forward. The whole point is that this register reads as "designed by a small studio with editorial sensibility" — motion is intentional but never showy.
+
+signature: |
+  A recurring SUNBURST SVG ornament — 8-pointed radial star with alternating long and short rays, drawn as a bespoke inline SVG path (not a font, not an emoji, not stock iconography) — repeats 6+ times across the composition as the studio's identity mark. It appears at monumental scale (120px+ burgundy) in the hero next to the wordmark, at medium scale (48px cream) at the top of the "What we do" band, at small scale (28px cream) on each of the six service tiles, and at tiny scale (16px sage) on the testimonial band. Big serif Didone-style DISPLAY WORDMARK ("SOLSTICE") at 100-140px on the dark hero canvas, letter-spacing normal, high stroke-contrast — thin verticals meeting thick horizontals so the wordmark reads as a luxury print advertising headline. A STAT QUAD immediately below the wordmark ("12+ YEARS / 20+ BRANDS / 100% TAILORED / ∞ CREATIVITY & GROWTH") — each number in the big serif at 48-60px, each label in Montserrat 12px 600-weight caps beneath. The composition ALTERNATES DARK / CREAM / SAGE BANDS through the page — dark hero → white "Our Approach" numbered list → dark full-bleed photograph slider → cream "What we do" band with 6 service tiles → sage-green testimonial carousel → white FAQ accordion → dark contact-form band → dark footer. Approach list uses BIG SERIF NUMERALS (01 / 02 / 03) at 48px beside each item title, with HAIRLINE DIVIDERS between rows (a rare legitimate exception to the no-hairline-between-sections rule because this IS a numbered list layout that the register calls for). Burgundy #8F161F is RESERVED for the sunburst ornaments + the "Book a discovery call" + "Send message" CTAs — it never floods a large area. Border-radius 0 everywhere. Brand character sits in the recurring sunburst ornament, the Didone display type, the disciplined dark/cream/sage rhythm, and the burgundy CTA restraint — not in decoration, not in glow, not in stock-agency animation.
+
+imagery: |
+  Full-bleed editorial PHOTOGRAPHY on the dark canvas — luxury travel / hospitality / lifestyle imagery under directional light (a hotel garden with a figure in white, a boutique interior with warm-tungsten lighting, a fashion look-book portrait). Photo-hero section carries a real hero image with small caption bottom-left ("Solstice Studio × Baitong Hotel — Phnom Penh 2025" register). Service tiles are FLAT COLORED PANELS (cream or sage) with the burgundy sunburst centered as the only mark — no photography inside service tiles, because that's the ornament's role. Testimonial cards use a small circular avatar FPO block for the author photo. NO gradient blobs, NO glassmorphism, NO stock illustrations. The register reads as PRINTED + PHOTOGRAPHED + SET-DESIGNED, not as a generated dashboard.
+
+best_for:
+  - Boutique creative agencies (small studios trading on editorial polish + named clients)
+  - Luxury brand consultancies (boutique branding + strategy shops)
+  - High-end freelance creative directors + brand designers
+  - Independent creative studios doing hospitality / fashion / lifestyle work
+  - Rebrand marketing pages for premium consumer brands wanting agency-editorial register
+  - Portfolio + case-study surfaces for creative directors, photographers, and stylists
+
+avoid:
+  - "Border-radius greater than 0px anywhere on the page — sharp corners are core to the identity"
+  - "Rounded pill buttons or fully-rounded CTAs — buttons are sharp-cornered with 0 radius, that's it"
+  - "Sans-serif display type at hero scale — the display face MUST be a high-contrast Didone-style serif (Instrument Serif / Bodoni Moda / Playfair Display), never Inter Display / Anton / DM Sans"
+  - "Mono type as a decorative label voice — mono has no role on this consumer luxury surface"
+  - "Multiple accent colors flooding the composition — burgundy is the ONE studio CTA color. The cream + sage + white are BAND surfaces, not accents. Introducing gold / orange / teal as additional accents collapses the register."
+  - "Warm-tan canvas as the primary background — the canvas IS DARK (near-black). Swapping to warm-tan collapses this into generic-boutique-editorial slop."
+  - "Corporate polish — no drop-shadow-md, no soft-glow, no gradient hero backdrop. The composition is FLAT and EDITORIAL, not corporate."
+  - "Three-tier pricing cards or feature-pillar grids — the service grid is deliberately 6 tiles with an ornament on each, not 3 stat cards with icons"
+  - "Center-aligned hero — hero is LEFT-WEIGHTED with the wordmark and stat quad flush left, and the sunburst ornament flush right"
+  - "Grain overlay everywhere — grain lives ONLY on the darker bands as a subtle overlay per the reference, never smeared across cream or sage surfaces"
+  - "Auto-advancing hero sliders that cycle without user input — the photo hero waits for click or drag; only the testimonial carousel auto-advances (at 8s intervals with pause-on-hover)"
+  - "Emoji or decorative unicode marks — the sunburst SVG carries all the ornamentation"
+  - "Instagram-face stock photography — imagery MUST feel editorial + directed. Avoid smiling-woman-with-latte stock; reach for architectural interiors, garden scenes, luxury hospitality"
+  - "Mono-caps eyebrows (SECTION · X style dot-metadata) — the register uses Montserrat 12px 600 caps with 0.14em tracking for labels, which is below the mono-caps-eyebrow CSS fingerprint threshold and reads as a legitimate boutique-agency label, not an ornament"
+
+banned_defaults:
+  # Global blocklist from BESPOKE_THEME_SYSTEM.md
+  - "claude-cream (#F4F1EA + serif + #D97757)"
+  - "void+acid (near-black bg + single bright acid-green or vermilion accent)"
+  - "broadsheet-on-noneditorial (hairline rules + zero border-radius + newspaper columns on non-editorial content)"
+  - "tech-bro purple gradient (purple→blue gradient hero + centered headline + double CTA + emoji icons)"
+  - "uniform-everything (identical padding + one weight of one sans doing every job + rounded-2xl + shadow-md cards)"
+  # Base-specific
+  - "sunburst-as-decoration (the sunburst is the STUDIO'S IDENTITY MARK. It has 6+ specific placements — hero, What-we-do headline, each of the 6 service tiles, testimonial band, footer. Adding a random sunburst anywhere ELSE collapses it from identity mark to decorative ornament and the register dies.)"
+  - "burgundy-flood (burgundy is CTA + sunburst color ONLY. The moment you use it as a section background or a large surface color, the register collapses into wine-region-DTC slop.)"
+  - "serif-plus-modern-sans-body (the body face is Montserrat which pairs with the serif — using Inter / SF Pro / a modern-tech sans in the body flips this register into stock consumer-tech and the boutique-agency read dies.)"
+  - "sun-washed-hospitality-palette (Base 42 Boutique Hotel is limestone canvas + caramel + eucalyptus. Adopting THAT palette here collapses Atelier Radiance INTO Base 42 — the register only holds if the canvas is DARK not limestone.)"

package/themes/atelier-radiance/tokens.ts

@@ -0,0 +1,29 @@
+// Generated from theme.yml. Do not edit by hand — edit theme.yml + re-materialize.
+
+export const tokens = {
+  slug: "atelier-radiance",
+  family: "E",
+  base: "42",
+  palette: {
+    "bg": "#000000",
+    "surface": "#111111",
+    "ink": "#FFFFFF",
+    "accent": "#8F161F",
+    "cream": "#F1E9E0",
+    "sage": "#ACB5B0",
+    "darkInk": "#1A1B1F",
+    "mute": "#8A8078"
+  },
+  typography: {
+    "display": "Instrument Serif (free, Google Fonts) at 400 weight, or Bodoni Moda / Playfair Display as broader-market fallback — letter-spacing normal, mixed case. At scale — 100-140px hero wordmark, 72-90px section headlines, 50-60px big serif numerals for stat quad and approach list, 22-28px h3. Instrument Serif is the reference face's closest free approximation (Atcarquette is a paid Didone with high stroke-contrast; Instrument Serif hits the same register from Google Fonts). The wordmark leans on the display's letterform contrast — thin verticals meeting thick horizontals — so serif substitutions must preserve that contrast, not smooth it out.",
+    "body": "Montserrat (free, Google Fonts) — 400 weight for body, 500 for labels, 600 for CTA + nav. 14-16px body copy, line-height 1.5. Sentence case, not all caps. Small caption labels (\"WHY RODEO?\" \"WHAT WE DO\") use a MODEST 12px Montserrat 600 with LETTER-SPACING 0.14em (below the mono-caps-eyebrow slop-blocklist fingerprint threshold — this is a legitimate boutique-agency caps label, not an eyebrow ornament).",
+    "mono": "none. Atelier Radiance is a consumer luxury surface — mono has no role.",
+    "scale": "1.5 (perfect fifth — deliberately wide contrast so the serif display shouts at editorial scale and body settles into refined captioning)"
+  },
+  surface: "web",
+  density: "balanced",
+  motion: "Ships live in the section renderer (no external dependencies):\n1. Hero wordmark reveal — the serif wordmark fades in from opacity 0 + slight blur(2px) → 1 + blur(0) over 900ms cubic-bezier(0.19,1,0.22,1) on first paint. Letters do NOT stagger (this is an editorial register, not a marketing register).\n2. Sunburst ornament rotation — the burgundy sunburst next to the hero rotates 90deg over 1200ms cubic-bezier on first paint, settling into its final position. Reads as \"the identity mark clicking into place.\"\n3. Numbered approach items — each row fades in from opacity 0 + translateY(12px) with 120ms stagger + 600ms cubic-bezier when scrolled into view. IntersectionObserver-driven.\n4. Photo-hero slider — click left/right arrows or drag to advance. Transitions between photos are 800ms cubic-bezier ease-in-out crossfade, NOT auto-advance (auto-advancing is the slop-blocklist hit; this waits for user input).\n5. Service tile hover — the burgundy sunburst on each tile spins 15deg + scales(1.05) on card hover, 220ms cubic-bezier. Card background stays flat (no lift, no shadow — this is boutique restraint, not corporate polish).\n6. Testimonial carousel — click left/right chevrons to advance. Auto-advances every 8s IF the user hasn't clicked; pauses on hover. Duration 8s is a testimonial-appropriate pace (long enough to read).\n7. FAQ accordion — chevron rotates 45deg (+ becomes ×) on open, 400ms cubic-bezier. Only one open at a time. Body expands smoothly.\n8. Contact form focus — field label lifts + gets underlined on focus, 200ms transition. Send button hover flips from burgundy-fill to burgundy-outline with cream text, 200ms.\n9. prefers-reduced-motion: reduce — wordmark and sunburst at final state; stagger disabled; auto-advance carousel paused; hover transitions instant; slider still functional but crossfade becomes instant.\n\nCustomer installs these as dependencies for the deeper motion tier:\n- Lenis — smooth inertial scroll (the alternating dark/cream/sage band transitions really benefit from inertial scroll for the editorial cadence).\n- GSAP ScrollTrigger — the approach-list stagger + service-tile reveal + testimonial-carousel logic all sit comfortably in a GSAP timeline.\n- Custom branded preloader — the sunburst ornament expanding from center at 120px → 40px final position, then the wordmark fading in from behind it.\n\nMotion character: refined, editorial, considered. Custom cubic-bezier(0.19,1,0.22,1) for reveals. Nothing quick, nothing bouncy, nothing tech-forward. The whole point is that this register reads as \"designed by a small studio with editorial sensibility\" — motion is intentional but never showy.\n",
+  signature: "A recurring SUNBURST SVG ornament — 8-pointed radial star with alternating long and short rays, drawn as a bespoke inline SVG path (not a font, not an emoji, not stock iconography) — repeats 6+ times across the composition as the studio's identity mark. It appears at monumental scale (120px+ burgundy) in the hero next to the wordmark, at medium scale (48px cream) at the top of the \"What we do\" band, at small scale (28px cream) on each of the six service tiles, and at tiny scale (16px sage) on the testimonial band. Big serif Didone-style DISPLAY WORDMARK (\"SOLSTICE\") at 100-140px on the dark hero canvas, letter-spacing normal, high stroke-contrast — thin verticals meeting thick horizontals so the wordmark reads as a luxury print advertising headline. A STAT QUAD immediately below the wordmark (\"12+ YEARS / 20+ BRANDS / 100% TAILORED / ∞ CREATIVITY & GROWTH\") — each number in the big serif at 48-60px, each label in Montserrat 12px 600-weight caps beneath. The composition ALTERNATES DARK / CREAM / SAGE BANDS through the page — dark hero → white \"Our Approach\" numbered list → dark full-bleed photograph slider → cream \"What we do\" band with 6 service tiles → sage-green testimonial carousel → white FAQ accordion → dark contact-form band → dark footer. Approach list uses BIG SERIF NUMERALS (01 / 02 / 03) at 48px beside each item title, with HAIRLINE DIVIDERS between rows (a rare legitimate exception to the no-hairline-between-sections rule because this IS a numbered list layout that the register calls for). Burgundy #8F161F is RESERVED for the sunburst ornaments + the \"Book a discovery call\" + \"Send message\" CTAs — it never floods a large area. Border-radius 0 everywhere. Brand character sits in the recurring sunburst ornament, the Didone display type, the disciplined dark/cream/sage rhythm, and the burgundy CTA restraint — not in decoration, not in glow, not in stock-agency animation.\n",
+} as const;
+
+export type Tokens = typeof tokens;

package/themes/automotive-ev/THEME.md

@@ -0,0 +1,87 @@
+# Design Direction — Automotive-EV
+
+## Ethos
+Lucid soft luminance · Rivian outdoor confidence · Polestar Scandinavian minimal · Tesla blackout · Mercedes EQ techno-luxury
+
+## Feel
+An EV instrument cluster delivered through the browser. Dark canvas — closer to deep graphite than absolute black — carrying a single cool-cyan luminous accent. Range, 0-60, top speed and charging speed are the design itself: oversized tabular numerals in a precision mono, reading like a vehicle HUD. Type is a precise neutral sans (Polestar / Lucid signage feel). The page reads calm, technical, slightly luminous — not loud, never neon.
+
+## Reference brands
+- **Lucid Motors** → near-black canvas with soft cyan glow on range numerals. The 516-mile range IS the marketing.
+- **Rivian** → outdoor confidence. Neutral dark canvas with a mossy-green secondary accent reserved for adventure context.
+- **Polestar** → Scandinavian minimalism. Sharp type, single accent, generous void around every element.
+- **Tesla** → blackout marketing — specs as oversized tabular numerals, no decoration.
+- **Mercedes EQ** → techno-luxury halo. Soft blue glow rims around hero stills, like a charged-up product reveal.
+
+## Tokens
+All tokens live in `src/index.css` as HSL triples. Every token's `from:` comment names its brand origin. Surface stack is **graphite** (background) → **graphite-elev** (card) → **shadow-steel** (secondary/muted). Depth comes from hairline borders plus the occasional soft cyan glow on hero elements — never from drop shadows. Pure black is forbidden — `--graphite` (warm cool-tinted) replaces it; pure white is forbidden — `--cool-white` replaces it.
+
+Brand tokens: `--graphite`, `--graphite-elev`, `--cool-white`, `--cyan`, `--cyan-deep`, `--moss`. Primary is cyan. Moss-green is reserved for outdoor-adventure context (Rivian-flavored sections) — never as a default action color.
+
+## Typography
+- **Display:** Space Grotesk (Polestar / Lucid signage feel). h1–h4. Tracking `-0.018em` — Space Grotesk display tightens cleanly negative.
+- **Body:** Inter (Tesla / Rivian body sans). Body base **16px** with **line-height 1.6** — comfortable on dark surfaces, screen-first.
+- **Mono:** JetBrains Mono. Range, 0-60, top speed, kW. Always `font-variant-numeric: tabular-nums`. Mono carries the heaviest visual weight on the page.
+
+H1 uses `clamp(3rem, 9vw, 7.5rem)` — the spec-as-headline scale. Font features: `"tnum"`, `"ss01"`, `"cv11"`.
+
+## Spacing
+- **Container:** `max-w-7xl px-6 lg:px-12` — full-bleed product cinematography and 4-up oversized spec strips need the width.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-36 lg:pb-24`
+  - Default: `py-20 lg:py-32`
+  - Tight: `py-12 lg:py-20`
+- **Allowed scale values:** 4 8 12 16 20 24 32 40 48 64 80 96 128 160. Density tier is **medium**.
+
+## Color
+No hex anywhere. All color via tokens. Opacity via `/N` modifier. The palette is intentionally tight: graphite, cool-white, cyan, moss (rarely), warning-red (semantic only). Cyan is the only luminous color — keep it scarce so the glow utilities still feel earned.
+
+## Radius
+`--radius: 0.5rem`. Soft chamfer only — slightly rounded, instrument-cluster soft edges. Pills are disallowed (`pillsAllowed: false`) — they read app, not vehicle UI.
+
+## Shadows
+**Glow.** Two utilities:
+- `.glow-cyan` — high-intensity halo for the single hero CTA / hero product still. Never on more than one element per page.
+- `.glow-soft` — low-intensity cyan halo plus 1px inset highlight for spec cards and hero panels. The "charged" look.
+
+No multi-color glows. No green or red glows.
+
+## Motion
+Four keyframes:
+- `ken-burns` — 28000ms infinite scale + translate on hero product stills.
+- `rise-in` — 800ms opacity + 24px translate, the standard entrance.
+- `pulse-glow` — 2400ms infinite charging-ring breath on the single hero CTA only.
+- `count-up` — 600ms fade-rise on spec numerals as they enter the viewport. Instrument-cluster wake.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` honored. **No marquee. No parallax.** Glows breathe, numerals wake — that's the whole motion vocabulary.
+
+## Component patterns
+- **Buttons:** Solid cyan-on-graphite for the single hero action (Reserve / Configure). Sharp 0.5rem corners. Secondary is hairline-outlined ghost in cool-white. Text-link in cyan with underline-on-hover for body CTAs. No pills. Never a moss or red button face.
+- **Cards:** 0.5rem chamfered corners, hairline border on graphite-elev surface. Spec cards lead with oversized tabular mono numerals, label in mono-uppercase above. Hero cards may carry a `glow-soft` halo.
+- **Inputs:** Full box with 1px border on graphite-elev surface. 0.5rem radius. Label above in mono-uppercase tracking `0.16em`. Focus border switches to cyan plus a 2px cyan glow ring.
+- **CTA links:** Solid cyan rectangle for hero action with optional `pulse-glow`. Text-link cyan for body CTAs.
+
+## Recommended rich media
+The hero is **studio-lit EV product cinematography** with a hint of blue-rim light on the body — Mercedes EQ brand-film aesthetic. Charging-network animations and range overlays are welcome as a secondary frame. Drone exteriors of the car on a coastal highway at golden hour work for Rivian-flavored sections; never highway B-roll of generic traffic.
+
+**AI tool recommendations:** **Midjourney v6+** with prompts like *"electric vehicle product photography, studio-lit, deep graphite backdrop, soft cyan rim light, Polestar brand film aesthetic, medium format, 85mm, no people, no asphalt under wheels"*. Avoid Midjourney's default "futuristic car" prompt — produces neon CGI. Explicitly prompt for restraint and brand-film authorship.
+
+**Aspect ratios:** 21:9 cinematic for hero; 16:9 for model cards; 4:3 for charging-station UI mockups. **Never 1:1.**
+
+**Video:** A single autoplay-muted hero reel — slow camera dolly around the car with the cyan rim-light highlight. 18–24 seconds, no music. ≤6 MB per loop, H.265 or AV1.
+
+**Avoid:** neon-laser racing visuals (gamer aesthetic), fake "futuristic city" backdrops (Cyberpunk territory), HUD overlays with random data scrolls (dashboard cosplay), green-energy clipart leaves (sincere but cheap), gas-station comparisons (defensive marketing).
+
+## Component families
+None at install time. First likely families: spec-strip, model-card, charging-network-strip, range-calculator.
+
+## Details
+- **Selection:** `hsl(var(--brand-cyan) / 0.28)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--ring))` — cyan, slightly thicker than other dark directions because the glow vocabulary supports it.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/automotive-ev/tokens.ts

@@ -0,0 +1,183 @@
+import type { Direction } from "../schema";
+
+// Note: name is not in the schema enum at install time; the codegen pipeline
+// accepts new slugs by string and the type guard is updated on next schema sync.
+export const automotiveEv = {
+  name: "automotive-ev",
+  ethos:
+    "Lucid soft luminance · Rivian outdoor confidence · Polestar Scandinavian minimal · Tesla blackout · Mercedes EQ techno-luxury",
+  references: [
+    { brand: "Lucid Motors", trait: "near-black canvas with soft cyan glow on range numerals" },
+    { brand: "Rivian", trait: "outdoor confidence — neutral dark canvas, mossy-green accent for adventure" },
+    { brand: "Polestar", trait: "Scandinavian minimalism — sharp type, single accent, generous void" },
+    { brand: "Tesla", trait: "blackout marketing — specs as oversized tabular numerals" },
+    { brand: "Mercedes EQ", trait: "techno-luxury halo — soft blue glow rims around hero stills" },
+  ],
+  feel:
+    "Dark canvas — closer to deep graphite than absolute black — carrying a single cool-cyan glow accent. " +
+    "Range, 0-60, top speed and charging speed are the design: oversized tabular numerals in a precision mono. " +
+    "Type is a precise neutral sans (Polestar / Lucid signage feel). The page reads like an EV instrument cluster: " +
+    "calm, technical, slightly luminous.",
+
+  fonts: {
+    display: {
+      family: "Space Grotesk",
+      fallback: ["Inter", "Helvetica Neue", "system-ui", "-apple-system", "sans-serif"],
+      from: "Polestar / Lucid signage sans — geometric, precise, slightly humanist",
+      googleFont: "Space+Grotesk",
+      weights: [400, 500, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "sans-serif"],
+      from: "Tesla / Rivian body sans — neutral, dense, screen-first",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["Berkeley Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "tabular numerics for range, 0-60, top speed, kW — the EV instrument cluster heritage",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.018em",        // Space Grotesk display tightens cleanly negative
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "ss01", "cv11"',
+    h1ScaleClamp: "clamp(3rem, 9vw, 7.5rem)",   // oversized — EV-spec-as-headline scale
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: { hsl: "220 14% 7%", from: "Lucid deep graphite — near-black with a faint cool bias, never pure" },
+    foreground: { hsl: "200 16% 96%", from: "Polestar cool white — neutral signage white" },
+    card: { hsl: "220 12% 10%", from: "elevated graphite surface — one stop above canvas" },
+    popover: { hsl: "220 12% 12%", from: "popover surface — two stops up" },
+    primary: { hsl: "190 92% 60%", from: "Lucid cool cyan — soft luminous accent, the canonical action color" },
+    primaryForeground: { hsl: "220 14% 7%", from: "graphite on cyan" },
+    secondary: { hsl: "220 10% 14%", from: "Tesla shadowed-steel, deeper tier" },
+    secondaryForeground: { hsl: "200 16% 96%", from: "cool white on dark steel" },
+    muted: { hsl: "220 8% 16%", from: "muted graphite — quiet panel surface" },
+    mutedForeground: { hsl: "200 8% 66%", from: "neutral secondary text — instrument cluster gray" },
+    accent: { hsl: "220 8% 18%", from: "hover surface — brushed-aluminum highlight" },
+    accentForeground: { hsl: "200 16% 96%", from: "cool white on accent" },
+    border: { hsl: "220 8% 20%", from: "panel-gap hairline — Polestar body-line tolerance, visible only on inspection" },
+    input: { hsl: "220 8% 20%", from: "same as border — single hairline language" },
+    ring: { hsl: "190 92% 60%", from: "cyan — focus ring is the canonical luminous accent" },
+    destructive: { hsl: "8 72% 56%", from: "warning lamp red — battery-low / fault indicator" },
+    destructiveForeground: { hsl: "200 16% 96%", from: "cool white on warning red" },
+    brand: {
+      cyan: { hsl: "190 92% 60%", from: "= primary; Lucid cool cyan — the luminous accent" },
+      "cyan-deep": { hsl: "200 80% 38%", from: "Mercedes EQ deeper blue — gradient anchor for glow utility" },
+      graphite: { hsl: "220 14% 7%", from: "= background; Lucid deep graphite canvas" },
+      "graphite-elev": { hsl: "220 12% 10%", from: "= card; elevated graphite surface" },
+      "cool-white": { hsl: "200 16% 96%", from: "= foreground; Polestar neutral signage white" },
+      moss: { hsl: "150 32% 42%", from: "Rivian mossy-green — outdoor-adventure secondary accent, used sparingly" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160],
+    containerMax: "max-w-7xl",         // full-bleed product cinematography demands width
+    containerPadding: "px-6 lg:px-12",
+    sectionPadding: {
+      hero: "pt-24 pb-16 lg:pt-36 lg:pb-24",
+      default: "py-20 lg:py-32",
+      tight: "py-12 lg:py-20",
+    },
+  },
+
+  radius: {
+    base: "0.5rem",                    // soft chamfer — slightly rounded, instrument-cluster soft edges
+    pillsAllowed: false,               // pills read app; EV product UI uses rectangles with soft chamfer
+  },
+
+  shadows: {
+    style: "glow",
+    utilities: {
+      "glow-cyan":
+        "0 0 0 1px hsl(var(--brand-cyan) / 0.35), " +
+        "0 8px 32px hsl(var(--brand-cyan) / 0.22), " +
+        "0 32px 96px hsl(var(--brand-cyan) / 0.18)",
+      "glow-soft":
+        "0 12px 48px hsl(var(--brand-cyan) / 0.10), " +
+        "0 1px 0 hsl(var(--brand-cool-white) / 0.04) inset",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 800,
+      loop: 2400,
+      ambient: 28000,                  // ken-burns on hero stills
+    },
+    keyframes: {
+      "ken-burns": {
+        css:
+          "0% { transform: scale(1.04) translate(0, 0); }\n" +
+          "100% { transform: scale(1.12) translate(-1.2%, -0.5%); }",
+        defaultDuration: 28000,
+        iteration: "infinite",
+        purpose: "hero EV still drift — slow product-film camera push",
+      },
+      "rise-in": {
+        css:
+          "from { opacity: 0; transform: translateY(24px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 800,
+        iteration: "once",
+        purpose: "section reveal — spec strip and model reveal entrance",
+      },
+      "pulse-glow": {
+        css:
+          "0%, 100% { box-shadow: 0 0 0 0 hsl(var(--brand-cyan) / 0.45); }\n" +
+          "50% { box-shadow: 0 0 0 16px hsl(var(--brand-cyan) / 0); }",
+        defaultDuration: 2400,
+        iteration: "infinite",
+        purpose: "single primary CTA halo — soft charging-ring breath, never on more than one element per page",
+      },
+      "count-up": {
+        css:
+          "from { opacity: 0; transform: translateY(8px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 600,
+        iteration: "once",
+        purpose: "spec numerals fade-rise on enter — instrument cluster wake",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Solid cyan-on-graphite for the single hero action (Reserve / Configure). Sharp 0.5rem corners. " +
+      "Secondary actions are hairline-outlined ghost buttons in cool-white. " +
+      "Text-link in cyan with underline-on-hover for body CTAs. No pills. " +
+      "Never a moss-green or red button face — those are semantic only.",
+    card:
+      "0.5rem chamfered corners. Hairline border on graphite-elev card surface. " +
+      "Internal padding p-6 lg:p-10. Spec cards lead with oversized tabular numerals in mono, " +
+      "label in mono-uppercase above. Hero cards may carry a glow-soft halo.",
+    input:
+      "Full box with 1px --border on graphite-elev surface. 0.5rem radius. " +
+      "Label sits above in mono-uppercase, tracking 0.16em. Focus border switches to cyan plus a 2px cyan glow ring.",
+    cta:
+      "Solid cyan rectangle for the hero action with optional pulse-glow halo. " +
+      "Text-link cyan for body CTAs. Never a pill, never a multi-color gradient, never a moss-green CTA.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--brand-cyan) / 0.28)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+} satisfies Partial<Direction> & { name: string };

package/themes/automotive-luxury/THEME.md

@@ -0,0 +1,88 @@
+# Design Direction — Automotive-Luxury
+
+## Ethos
+Bentley matte-black configurator · Rolls-Royce monogram restraint · Aston Martin product cinematography · Bugatti hyper-luxury minimalism · Maybach champagne mark
+
+## Feel
+A private showroom in browser form. Matte near-black canvas carries full-bleed bespoke product cinematography, a high-contrast serif names the model as if it were stamped on a body plate, and a single champagne accent does every job interaction does. No secondary brand color competes. The page is the car; everything else gets out of the way.
+
+## Reference brands
+- **Bentley** → matte black canvas, full-bleed configurator stills, single champagne accent. The configurator IS the marketing site.
+- **Rolls-Royce** → monogram restraint. Negative space around the spirit-of-ecstasy is the design.
+- **Aston Martin** → cinematic product photography, James-Bond reveal cadence. Slow ken-burns over stills, never UI animation for its own sake.
+- **Bugatti** → hyper-luxury minimalism. Specs read like instrument-cluster numerals; everything else is photography.
+- **Maybach** → champagne-gold mark, two-tone deep colorways. The accent gets quieter and richer, never brighter.
+
+## Tokens
+All tokens live in `src/index.css` as HSL triples. Every token's `from:` comment names its brand origin. Do not introduce numbered or generic tokens — if a new color is needed, name a brand it traces to.
+
+Surface stack is **matte black** (background) → **elevated matte** (card) → **shadow-leather** (secondary/muted). Depth comes from hairline borders on warm-near-black, never from drop shadows or fill brightening. Pure black is forbidden — `--matte-black` (warm-tinted) replaces it; pure white is forbidden — `--ivory` replaces it.
+
+Brand tokens: `--matte-black`, `--ivory`, `--champagne`, `--champagne-deep`, `--shadow-leather`, `--brass`. Primary is champagne. Brass is reserved for hardware-feeling accents (vent surrounds, gauge bezels, the occasional decorative rule) — never as a button face.
+
+## Typography
+- **Display:** Cormorant Garamond (Bentley / Rolls-Royce model-plate serif feel). h1–h4. Tracking `-0.012em` — Garalde display wants near-zero, just shy of it.
+- **Body:** Inter (Aston Martin clean sans). Body base **16px** with **line-height 1.6** — showroom-comfortable, never marketing-dense.
+- **Mono:** JetBrains Mono. Price-from, 0-60, top speed, range, build code. Always `font-variant-numeric: tabular-nums`.
+
+H1 uses `clamp(3rem, 8vw, 6.5rem)` — the model-name-as-title scale. Font features: `"liga"`, `"dlig"`, `"tnum"`, `"ss01"`.
+
+## Spacing
+- **Container:** `max-w-7xl px-6 lg:px-12` — full-bleed product cinematography demands the width.
+- **Section padding tiers:**
+  - Hero: `pt-28 pb-20 lg:pt-40 lg:pb-28`
+  - Default: `py-20 lg:py-32`
+  - Tight: `py-12 lg:py-20`
+- **Allowed scale values:** 4 8 12 16 20 24 32 40 48 64 80 96 128 160. No arbitrary spacing. Density tier is **low** — showroom breathing.
+
+## Color
+No hex anywhere. All color via tokens. Opacity via `/N` modifier. The palette is intentionally tiny: matte black, ivory, champagne, brass, shadow-leather. If a designer needs a new color, the answer is almost always a wider use of champagne, not a new one. **Never a saturated brand-color button** — champagne is the action color across the whole product.
+
+## Radius
+`--radius: 0.25rem`. Tight chamfer only — engineered, not pillow. Pills are disallowed (`pillsAllowed: false`) — they read app/marketplace, not bespoke showroom.
+
+## Shadows
+**Glow.** Two utilities:
+- `.glow-champagne` — soft champagne halo on the single hero CTA / configurator preview, never on more than one element per page.
+- `.hairline-bottom` — `inset 0 -1px 0 hsl(var(--border))`, the divider rule between sections.
+
+No colored drop shadows beyond champagne. No multi-color glows.
+
+## Motion
+Three keyframes:
+- `ken-burns` — 32000ms infinite scale + translate on hero product stills, the slow product-film camera push.
+- `rise-in` — 1100ms opacity + 28px translate, the standard entrance. Slow on purpose: showroom reveal cadence.
+- `sheen` — 2800ms infinite linear-gradient sweep on champagne text/borders. Bentley winged-B engraving light sweep.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` honored in every utility. **No marquee. No UI bounce. No parallax. The page settles; the car performs.**
+
+## Component patterns
+- **Buttons:** Text-link in champagne with underline-on-hover for the body of the page. Single hero CTA is solid champagne-on-matte-black, sharp 0.25rem corners. Secondary is hairline-outlined ghost in ivory. **No pills. No saturated fills.**
+- **Cards:** Sharp 0.25rem corners, hairline border on matte card surface. Lead with full-width product cinematography (16:9 or 21:9). Model name in Cormorant display, spec line in mono.
+- **Inputs:** Border-bottom only on matte canvas. Label above in mono-uppercase, tracking `0.18em`. Focus shifts border to champagne.
+- **CTA links:** Text-link with sheen-on-hover for body CTAs. Solid champagne rectangle for the single hero action (Configure / Request Test Drive).
+
+## Recommended rich media
+Photography is the entire site. The hero is **studio-lit product cinematography** — Aston Martin's brand-film aesthetic, not a dealer-lot phone photo. The car sits in a black-on-black studio, single key light raking across a body panel, no reflection of the photographer, no asphalt under the wheels. Twilight exteriors with the car parked under architectural canopies are the canonical secondary frame. **No people in the frame unless it's a driver-in-profile silhouette shot.**
+
+**AI tool recommendations:** **Midjourney v6+** with prompts like *"automotive product photography, studio-lit, black backdrop, single key light raking across panel, Aston Martin brand film aesthetic, medium format, 85mm, no people"*. Avoid Midjourney's default "luxury car" prompt — it produces glossy CGI render. Explicitly prompt for studio lighting and brand-film authorship.
+
+**Aspect ratios:** 21:9 cinematic for the hero; 16:9 for model cards; 3:2 for inline detail shots. **Never 1:1** — that reads marketplace listing.
+
+**Video:** A single autoplay-muted hero reel of slow camera dolly around the car is the canonical hero treatment. 18–24 second loop, no music. ≤6 MB per loop, H.265 or AV1.
+
+**Avoid:** dealer-lot photography, generic stock car images, color-changing gradients in champagne (the accent must be quiet), glossy CGI renders, lens flare, racing-stripe decoration, any UI animation that competes with the product reel.
+
+## Component families
+None at install time. First likely families: model-card, configurator-frame, dealer-locator-strip, spec-table.
+
+## Details
+- **Selection:** `hsl(var(--brand-champagne) / 0.28)` background, foreground text.
+- **Focus ring:** `1px solid hsl(var(--ring))` — thin champagne, quiet, never a 2px blue web-app ring.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction, generated at install time.