@stylecrib/cli 0.3.1 → 0.3.3

package/themes/overland-broadside/theme.yml

@@ -0,0 +1,138 @@
+# Overland Broadside — Family E, Luxury & Brand-Tier.
+#
+# NEW-BASE CANDIDATE for BESPOKE_THEME_SYSTEM.md, adjacent to Base 41
+# Marque Automotive. Base 41 sits on graphite dark; Overland Broadside
+# flips the canvas to paper-white and pushes display scale from
+# "ultrawide" up into monumental Type-Specimen territory (504px condensed
+# caps). Same DNA — cinematic automotive/heritage marketing — different
+# register.
+#
+# Authored from Matt's provided design brief (2026-07-04, scoutmotors.com
+# reference). The placeholder demonstration domain is a fictional heritage
+# outdoor-vehicle marque ("Ridgeline") — a domain-agnostic mockup that
+# could be re-skinned to any premium automotive, adventure-hardware, or
+# heritage-brand relaunch. The register expresses "monumental heritage"
+# through TYPE and full-bleed PHOTOGRAPHY rather than decoration.
+#
+# Sixth theme via the v2 harness. Second non-Family-D theme, first Family
+# E theme, second NEW BASE (after ember-poster).
+#
+# Alternative slugs considered: marque-broadside, plateau-marque,
+# heritage-plate. Overland-broadside picked because "overland" carries the
+# rugged-adventure register without brand-attribution risk, and
+# "broadside" nails the monumental display-type form.
+
+name: Overland Broadside
+concept: Monumental heritage brand-book register — condensed all-caps display at broadside scale, full-bleed automotive photography under directional light, paper-white canvas broken by inverted deep-navy bands, a single hot-orange accent used as punctuation inside headlines.
+influence: Heritage automotive marque relaunches (the Bronco / Scout / Land Cruiser / Defender register — where a legacy nameplate returns and the marketing is monumental and confident). Broadsheet poster print at brand-book scale. The type-as-substance discipline of a proper marque book. Also 1970s automotive brochure design (huge condensed caps, full-bleed hero photography, editorial captions).
+
+family: E
+base_number: 41
+base_note: New-base candidate adjacent to Base 41 Marque Automotive. Base 41 is graphite-dark and "ultrawide cinematic"; Overland Broadside is paper-white and monumental Type-Specimen scale. Both target automotive/premium-hardware, both refuse decoration, both use one accent as punctuation. Different canvas + different type scale = distinct base.
+
+render_url: http://localhost:5173/themes/overland-broadside
+
+surface: web
+
+typography:
+  display: Anton (free, Google Fonts) or Bebas Neue as broader-market fallback — 400 weight, UPPERCASE always, letter-spacing tightened to -0.03em at monumental scale (heavier tracking negative than typical). At scale — 240px hero-monumental (fluid, capped near viewport width), 96px section-headline, 48px inverted-band-headline, 32px h3. The paid reference face is a scout-sans-semicond-bold-family condensed sans; Anton is the closest free approximation with the right condensed-caps proportions.
+  body: Inter Tight (variable 100-900) — 400/500 for body, 600 for captions and specs. Mixed-case, line-height 1.5, 16px body copy. Caption specs get 13px 500-weight with slightly loosened tracking for legibility inside dark bands.
+  mono: IBM Plex Mono — narrowly scoped to spec-sheet callouts (dimensions, drivetrain, capacity numbers) inside product-detail sections. NEVER used for section eyebrows, corner tags, metadata rows, or bylines (those are universal-slop-blocklist hits regardless of face).
+  scale: 1.5 (perfect fifth — deliberately wide contrast so the monumental display shouts at broadside scale and the body settles into calm captioning)
+
+palette:
+  bg: "#FFFFFF"
+  surface: "#F0F0F0"
+  ink: "#010101"
+  accent: "#FF5432"      # hot orange, used as punctuation on one word inside a headline or as small CTA fill — never floods
+  secondary: "#11232F"   # deep navy, used ONLY as inverted-band background (full-bleed sections that break the white rhythm)
+  signal: "#007AFF"      # electric blue, reserved for interactive-state affordances (focus rings, active links) — sparse
+
+density: balanced
+
+motion: |
+  Ships live in the section renderer (no external dependencies):
+  1. Photo-fill hero headline reveal — IntersectionObserver + CSS transitions. Each letterform of the monumental display headline has a masked photo tile inside its counterform; on scroll into view, the tiles translate up from 20% opacity to full over 700ms cubic-bezier(0.16,1,0.3,1), staggered 60ms per letter.
+  2. Accent-word color shift — one word inside the hero headline flips from ink-black to accent-orange after the letter-stagger completes (300ms delay). It stays orange; no cycling, no rotation.
+  3. Inverted band scroll-triggered lock — the "For [brand] in all of us" style monumental navy band pins for 400vh, giant caps holding while the surrounding white content scrolls past. Uses position: sticky with a scroll-linked scale transform on the type (0.94 → 1.0 over the pin duration).
+  4. Full-bleed product hero — the vehicle photograph enters with a subtle 800ms cubic-bezier scale (1.05 → 1.0) + fade, so the composition settles rather than pops. Triggered on first paint, not on scroll.
+  5. Duo-tile compare — the "duo that does it all" two-vehicle side-by-side reveals right tile 200ms after left tile with matched scale-in.
+  6. Nav pill — background transitions to solid ink-black + white-text at scroll offset 80px; before that it sits transparent over the hero. 200ms transition.
+  7. Microinteractions — CSS transitions on link hover states (underline expands left-to-right 200ms), active-state scale(0.98) on primary buttons.
+  8. prefers-reduced-motion: reduce — all keyframe animations pause, transitions become instant, photo-fill tiles start at full opacity (no stagger), inverted-band pin still fires (it's structural), state changes still fire (they're content).
+
+  Customer installs these as dependencies for the deeper motion tier:
+  - Lenis — smooth inertial scroll across the whole page (the pin-and-hold on the inverted band needs inertial scroll to feel monumental).
+  - GSAP ScrollTrigger — orchestrated multi-element timelines for the photo-fill letter stagger + inverted-band scroll-linked scale.
+  - Custom branded preloader with condensed-caps typography-in-progress reveal.
+
+  Motion character: weighty, cinematic, never bouncy. Custom cubic-bezier(0.16,1,0.3,1) for reveal easings, cubic-bezier(0.65,0,0.35,1) for hover/state transitions. All motion serves the "monumental heritage brand" tone — nothing is quick, nothing is cute.
+
+signature: |
+  Monumental condensed all-caps display at broadside scale — 240px hero
+  headline breaking across multiple lines, filling most of the viewport
+  width, letter-spacing crushed to -0.03em. Inside the counterforms of
+  the display letters, masked photo tiles show product / lifestyle
+  imagery — the type IS a container for the imagery, not just labeling.
+  One word in the hero headline flips to the accent orange as punctuation
+  (never the whole line, never rotating, never cycling). Full-bleed
+  automotive / product photography sits under directional light on the
+  white canvas — no framed cards, no shadows, no corner treatments.
+  Deep-navy inverted bands break the white rhythm with monumental caps
+  set even bigger than the white-canvas hero, pinning through scroll so
+  the type holds while the page moves past. Border-radius is 2px — a
+  microscopic softening, not a design element (buttons, image containers,
+  small tags). Small pill nav sits transparent over hero, transitions to
+  solid ink on scroll. NO mono-caps eyebrows, NO dot-metadata rows, NO
+  spec-sheet triads, NO "TRUSTED BY" rows, NO three-column feature grids
+  — brand character sits in the display type, the photography, and the
+  navy/orange discipline, not in ornamented labels.
+
+imagery: |
+  Full-bleed automotive / adventure-hardware photography under DIRECTIONAL
+  LIGHT — vehicles emerging from shadow, hero shots with a single strong
+  light source (dusk, dawn, headlight against dark landscape), or
+  three-quarter product shots on pure white with hard shadow anchoring
+  them to the ground. NEVER on a gradient background, NEVER floating in a
+  card, NEVER with a soft box-shadow. Photo-fill letters use tightly
+  cropped product / lifestyle details — a fender line, a wheel arch, a
+  headlight, a hand on a steering wheel, a landscape — masked cleanly to
+  the letterform. Cream/tan `#EDE9E8` band at the footer as a warm
+  breathing space — the only warmth in an otherwise cool composition.
+  Placeholder compositions use clearly-labeled FPO photograph blocks so
+  the layout reads legible without shipping licensed imagery.
+
+best_for:
+  - Heritage automotive marque relaunches — a legacy nameplate returning to market
+  - Premium automotive marketing where the vehicle is the hero (SUVs, trucks, adventure vehicles)
+  - Adventure-hardware brands (overlanding kit, outdoor equipment) that want cinematic-brand register instead of REI-catalog register
+  - Heritage brand relaunches broadly — anything with a monumental type-plus-photography story to tell
+  - Founder-scale product launches where the physical object photographs beautifully
+  - Deck / brand-book / launch pages where the point is monumental confidence, not information density
+
+avoid:
+  - "Border-radius greater than 2px anywhere on the page — the 2px is a microscopic softening on functional chrome only, not a design gesture"
+  - "Rounded pill buttons or fully-rounded CTAs — buttons are sharp-cornered with 2px radius, that's it"
+  - "Multiple accent colors used decoratively — orange is punctuation inside headlines and small CTA fill only; navy is inverted-band background only; blue is interactive-state only. No accent lives outside its role."
+  - "Sans-serif humanist display like Inter Display or Söhne at hero scale — display face must carry condensed-caps monumental proportions (Anton, Bebas Neue, or paid scout-sans-semicond-bold-family)"
+  - "Title case or sentence case on display type — display is ALWAYS uppercase in this register"
+  - "Loose or default letter-spacing on display — display tracks -0.03em at monumental scale, tighter than typical, and MUST stay negative"
+  - "Corporate polish — no shadow-md cards, no soft glow, no gradient hero backdrop, no mesh gradients"
+  - "Three-tier pricing cards or feature-pillar grids — the composition refuses SaaS defaults structurally, information laid out as full-bleed bands and side-by-side comparisons, not card grids"
+  - "Center-aligned everything — hero composition is left-weighted and grid-breaking; monumental type intentionally violates the baseline"
+  - "Warm palettes — this register is cool-and-crisp (white, ink, navy, orange as punctuation only), never espresso/cream/amber flooding the canvas"
+  - "The photo-fill move on more than the hero headline — it's a one-time signature, not a repeated decoration; secondary headlines are solid ink"
+  - "Emoji or decorative unicode marks anywhere in the composition — the display type carries all the personality"
+  - "Grain or texture overlay on the white canvas — grain is reserved for the darker inverted-band overlays only"
+
+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
+  - "monumental-caps-plus-decoration (the display type IS the design; the moment you add mono-caps eyebrows, corner tags, or dot-metadata rows on top of it the register collapses into generic 2020s-agency slop)"
+  - "photo-fill-everywhere (the letterform photo-fill is a signature ONCE — hero only. Applied to every headline, it becomes a decorative gimmick and the register dies)"
+  - "cool-palette-plus-warm-photography (if the photography is warm-tungsten-lit, the palette here still stays cool navy/orange — do not drift into amber/gold to match the imagery, that's the ember-poster register)"

package/themes/overland-broadside/tokens.ts

@@ -0,0 +1,27 @@
+// Generated from theme.yml. Do not edit by hand — edit theme.yml + re-materialize.
+
+export const tokens = {
+  slug: "overland-broadside",
+  family: "E",
+  base: "41",
+  palette: {
+    "bg": "#FFFFFF",
+    "surface": "#F0F0F0",
+    "ink": "#010101",
+    "accent": "#FF5432",
+    "secondary": "#11232F",
+    "signal": "#007AFF"
+  },
+  typography: {
+    "display": "Anton (free, Google Fonts) or Bebas Neue as broader-market fallback — 400 weight, UPPERCASE always, letter-spacing tightened to -0.03em at monumental scale (heavier tracking negative than typical). At scale — 240px hero-monumental (fluid, capped near viewport width), 96px section-headline, 48px inverted-band-headline, 32px h3. The paid reference face is a scout-sans-semicond-bold-family condensed sans; Anton is the closest free approximation with the right condensed-caps proportions.",
+    "body": "Inter Tight (variable 100-900) — 400/500 for body, 600 for captions and specs. Mixed-case, line-height 1.5, 16px body copy. Caption specs get 13px 500-weight with slightly loosened tracking for legibility inside dark bands.",
+    "mono": "IBM Plex Mono — narrowly scoped to spec-sheet callouts (dimensions, drivetrain, capacity numbers) inside product-detail sections. NEVER used for section eyebrows, corner tags, metadata rows, or bylines (those are universal-slop-blocklist hits regardless of face).",
+    "scale": "1.5 (perfect fifth — deliberately wide contrast so the monumental display shouts at broadside scale and the body settles into calm captioning)"
+  },
+  surface: "web",
+  density: "balanced",
+  motion: "Ships live in the section renderer (no external dependencies):\n1. Photo-fill hero headline reveal — IntersectionObserver + CSS transitions. Each letterform of the monumental display headline has a masked photo tile inside its counterform; on scroll into view, the tiles translate up from 20% opacity to full over 700ms cubic-bezier(0.16,1,0.3,1), staggered 60ms per letter.\n2. Accent-word color shift — one word inside the hero headline flips from ink-black to accent-orange after the letter-stagger completes (300ms delay). It stays orange; no cycling, no rotation.\n3. Inverted band scroll-triggered lock — the \"For [brand] in all of us\" style monumental navy band pins for 400vh, giant caps holding while the surrounding white content scrolls past. Uses position: sticky with a scroll-linked scale transform on the type (0.94 → 1.0 over the pin duration).\n4. Full-bleed product hero — the vehicle photograph enters with a subtle 800ms cubic-bezier scale (1.05 → 1.0) + fade, so the composition settles rather than pops. Triggered on first paint, not on scroll.\n5. Duo-tile compare — the \"duo that does it all\" two-vehicle side-by-side reveals right tile 200ms after left tile with matched scale-in.\n6. Nav pill — background transitions to solid ink-black + white-text at scroll offset 80px; before that it sits transparent over the hero. 200ms transition.\n7. Microinteractions — CSS transitions on link hover states (underline expands left-to-right 200ms), active-state scale(0.98) on primary buttons.\n8. prefers-reduced-motion: reduce — all keyframe animations pause, transitions become instant, photo-fill tiles start at full opacity (no stagger), inverted-band pin still fires (it's structural), state changes still fire (they're content).\n\nCustomer installs these as dependencies for the deeper motion tier:\n- Lenis — smooth inertial scroll across the whole page (the pin-and-hold on the inverted band needs inertial scroll to feel monumental).\n- GSAP ScrollTrigger — orchestrated multi-element timelines for the photo-fill letter stagger + inverted-band scroll-linked scale.\n- Custom branded preloader with condensed-caps typography-in-progress reveal.\n\nMotion character: weighty, cinematic, never bouncy. Custom cubic-bezier(0.16,1,0.3,1) for reveal easings, cubic-bezier(0.65,0,0.35,1) for hover/state transitions. All motion serves the \"monumental heritage brand\" tone — nothing is quick, nothing is cute.\n",
+  signature: "Monumental condensed all-caps display at broadside scale — 240px hero\nheadline breaking across multiple lines, filling most of the viewport\nwidth, letter-spacing crushed to -0.03em. Inside the counterforms of\nthe display letters, masked photo tiles show product / lifestyle\nimagery — the type IS a container for the imagery, not just labeling.\nOne word in the hero headline flips to the accent orange as punctuation\n(never the whole line, never rotating, never cycling). Full-bleed\nautomotive / product photography sits under directional light on the\nwhite canvas — no framed cards, no shadows, no corner treatments.\nDeep-navy inverted bands break the white rhythm with monumental caps\nset even bigger than the white-canvas hero, pinning through scroll so\nthe type holds while the page moves past. Border-radius is 2px — a\nmicroscopic softening, not a design element (buttons, image containers,\nsmall tags). Small pill nav sits transparent over hero, transitions to\nsolid ink on scroll. NO mono-caps eyebrows, NO dot-metadata rows, NO\nspec-sheet triads, NO \"TRUSTED BY\" rows, NO three-column feature grids\n— brand character sits in the display type, the photography, and the\nnavy/orange discipline, not in ornamented labels.\n",
+} as const;
+
+export type Tokens = typeof tokens;

package/themes/performance-engineered/THEME.md

@@ -0,0 +1,162 @@
+# Performance Engineered
+
+> Monolithic hypercar restraint applied to a performance-hardware brand — near-black canvas at
+
+**Slug:** `performance-engineered` — **Surface:** web — **Density:** airy
+
+## Influence
+
+Modern hypercar corporate identity systems (Rimac Automobili at
+its cleanest, Bugatti Chiron press releases, Koenigsegg
+configurators). Distinct from tech-startup surfaces through the
+MONUMENTAL THIN DISPLAY + FULL-BLEED PRODUCT PHOTOGRAPHY +
+NUMERICAL SPEC STRIPS trio — which reads as engineering-precision
+rather than marketing-loud. The register carries the weight of an
+eight-figure vehicle; the design does not fight it.
+
+
+## Signature move
+
+Near-black canvas at #0a0a0a — the register's non-negotiable base.
+Every card, button, input, border, chart line, spec cell ships at
+0px border radius. Cream ink at #ede8dc, monumental thin sans
+display (weight 200 for wordmark, 300 for section headings), one
+molten-amber accent (#c47a2c) used ONLY for hero spec numbers,
+hover states, chart peaks, and reservation-callout highlights.
+
+MASTHEAD — a "HYPERION" wordmark in Neue Haas Grotesk 200 at 20px
+with 0.2em letter-spacing (spaced-caps monolithic register) on
+the left, a horizontal nav (Vehicle / Powertrain / Interior /
+Reservation / About / Contact) center, a filled-amber "Configure"
+block button right-aligned. Masthead shrinks after 200px scroll.
+
+HERO — FULL-BLEED SVG vehicle photograph filling the entire
+viewport (a stylized side-profile hypercar rendering — matte
+monochrome silhouette against a graded dark backdrop with warm
+overhead lighting). Overlaid at center: the monumental "HYPERION"
+wordmark at ~180px, letter-spacing 0.2em, letter-by-letter reveal
+on first paint. Below the wordmark: a small ITALIC BODY caption
+"the hyperion sh-01 · december 2026". At the bottom of the viewport:
+a SPEC STRIP with three numbers counting up — "1.8s" (0-100),
+"1900 hp", "412 km/h" — with amber accent, cream labels underneath.
+
+CONFIGURATOR SECTION — split layout. LEFT: monumental section
+heading "The Hyperion SH-01" + a body-copy paragraph describing
+the powertrain + a filled-amber "Configure your Hyperion" button.
+RIGHT: rotating vehicle SVG at 360° on scroll into view — a
+perspective view that rotates 4-seconds-per-loop via
+requestAnimationFrame, pauses on hover.
+
+TECHNICAL SPECIFICATIONS — a four-column data grid with monospace
+spec values: POWERTRAIN (1900 HP / 2360 Nm torque / 4x electric
+motor) / CHASSIS (1420 kg / carbon monocoque / 50:50 distribution)
+/ INTERIOR (bespoke leather / carbon trim / 4-way seat) / OWNERSHIP
+(350 units / 2028 delivery / from €2.4m).
+
+TORQUE + HP CHART BAND — two SVG line charts drawn with stroke-
+dashoffset animation on scroll. Torque curve on the left, HP curve
+on the right, both in molten amber with cream axis marks.
+
+ENGINEERING NARRATIVE — full-bleed dark band with a monumental
+headline "Nine years of engineering" + body copy set in a narrow
+measure (small caps for section markers) about the vehicle's
+development history.
+
+RESERVATION CALLOUT — a dark band with a diegetic serial-number
+counter showing "127 / 350 reserved" (updates via mock event
+stream every 8 seconds), a filled-amber "Reserve your Hyperion"
+button, and micro-copy about the process (€500,000 non-refundable
+deposit, delivery 2028, priority to existing owners).
+
+OWNER PULL QUOTE — italic Neue Haas Grotesk at 40px with amber
+quote-mark, a testimonial pull quote from a fictional owner.
+
+FOOTER — dark inverted band with the monumental HYPERION wordmark
+at ~120px, address plate (Zagreb / Molsheim / Woking style —
+three engineering-center cities), 4-column utility grid, small
+legal about environmental / homologation info.
+
+Six bespoke SVG marks (car-side silhouette, aerodynamic-line arrow,
+chart-node dot, serial-number chip, reservation-badge glyph, gear-
+ratio dial) — dropped as PUNCTUATION at specific compositional
+moments, never as a uniform icon row.
+
+## Palette
+
+- **bg:** `#0a0a0a`
+- **surface:** `#141210`
+- **ink:** `#ede8dc`
+- **accent:** `#c47a2c`
+
+## Typography
+
+- **Display:** A monumental thin geometric sans — the reference uses Söhne Extraleicht / Neue Haas Grotesk Display Thin. Free fallback stack — "Neue Haas Grotesk Display", "Space Grotesk", "Manrope", "Inter", system-ui, sans-serif. Weight 200 (extralight) for the monumental hero wordmark, 300 for section headings, 400 for callouts, ALL CAPS with letter-spacing 0.2em for the wordmark (monolithic spaced-caps register). Top of scale ~180px for the hero wordmark, 88px for section headlines, 40px for spec numbers.
+- **Body:** A clean geometric sans for body copy — Söhne, Inter Tight. Free fallback stack — "Inter Tight", Inter, "Space Grotesk", system-ui, sans-serif. Weight 400 for body copy, 500 for spec labels, 600 for CTA buttons. 15-16px body copy, line-height 1.55.
+- **Mono:** A geometric mono for spec-value readouts — "JetBrains Mono", "Space Mono", ui-monospace, monospace. Weight 400-500, 12-14px. LEGITIMATE here because the register is technical-precision hardware — mono reads as instrument-panel data, not decorative slop.
+- **Scale:** 1.618 (golden ratio — dramatic contrast between the monumental thin wordmark and small body copy, which is the register's typographic fingerprint)
+
+## Motion
+
+Ships live in the section renderer (no external dependencies):
+1. Hero vehicle photograph reveal — scale from 1.02 → 1 + opacity 0.6 → 1 over 1400ms cubic-bezier(0.23,1,0.32,1) on first paint.
+2. Monumental wordmark reveal — letter-by-letter fade-in with 60ms per-letter stagger + 800ms cubic-bezier on first paint (7 letters × 60ms + 800ms = ~1220ms total).
+3. Hero spec strip counters — three numbers (0-100 seconds / horsepower / top speed) count up from 0 → target on paint via requestAnimationFrame, 2000ms ease-out.
+4. Configurator vehicle rotation — 360° rotation triggered on the configure section coming into view; smooth 4-second rotation via requestAnimationFrame, pauses on hover.
+5. Technical charts (torque + HP curves) — SVG paths draw with stroke-dashoffset animation on scroll into view, 1400ms cubic-bezier.
+6. Reservation counter — displays live count of serial numbers reserved (out of 350), updates via a mock event stream every 8 seconds (deterministic — for demo only).
+7. Section reveals — each below-fold section fades in from opacity 0 + translateY(24px) → 0 over 700ms cubic-bezier on IntersectionObserver at 25% threshold.
+8. Nav shrink on scroll — masthead compacts after 200px scroll.
+9. prefers-reduced-motion: reduce — all reveals disabled; hero wordmark shows fully; counters show final; charts show at final position; state changes still fire.
+
+Motion character: silent, precise, engineering-first. Custom cubic-bezier(0.23,1,0.32,1) for all reveals. Never marketing-loud, never startup-hype — reads as a hypercar configurator, not a SaaS landing page.
+
+
+## Imagery
+
+BESPOKE SVG renderings of hypercar photography — the reference uses
+side-profile hypercar images shot in warm studio light against
+darkened backdrops, with matte body finish and carbon-fiber
+emphasis. FPO imagery here should read as considered hypercar
+studio photography (side-profile silhouettes with warm overhead
+lighting, three-quarter angles, interior close-ups with carbon
+and leather emphasis). NO stock "sports car on empty highway"
+photography (that's the AI-tell for automotive-marketing slop).
+NO 3D-rendered product mockups with glossy reflections. NO
+warm-radial-gradient placeholder fills.
+
+## Best for
+
+- Ultra-premium hypercar and supercar brands (limited-run vehicles)
+- Premium performance-hardware brands (custom motorcycles, superyachts, private jets)
+- Boutique horology and marque-tier luxury goods
+- Aerospace and high-precision engineering firms with a consumer-facing register
+- Ultra-premium electric vehicles and hyperperformance road machines
+- Bespoke industrial-design studios working in the luxury / hardware space
+
+## Reject if
+
+_Director grades each of the following as a pass/fail check. Any violation blocks the theme._
+
+- Light canvas (cream / off-white / gray) as the primary background — Performance Engineered's canvas is NEAR-BLACK at #0a0a0a. A light canvas inverts the monolithic-hypercar register into a modern-configurator register (which is a different theme).
+- Multi-color accent palette — the whole discipline is ONE molten-amber accent doing everything (hero spec numbers, hover states, chart peaks, reservation callouts). Introducing red / cyan / any second accent collapses the discipline into candy-tech slop.
+- Rounded corners on cards, buttons, chart backgrounds, or spec cells — 0px radius everywhere. The register requires sharp instrument-panel precision.
+- Sans-serif display at bold weight — the display face MUST be a THIN geometric sans (weight 200-300). Bold sans display collapses the register into modern-marketing hero mode.
+- Stock 'sports car on empty highway' photography — imagery MUST feel like studio hypercar photography (side-profile silhouettes under warm studio light, three-quarter angles, interior close-ups). Highway stock is the AI-tell for automotive-marketing slop.
+- 3D-rendered product mockups with glossy reflections — vehicle FPO must be flat SVG silhouettes or considered studio photography. Glossy 3D renders read as tech-product-launch, not hypercar.
+- Warm-radial gradient placeholder fills — every FPO must read as considered studio photography. Warm-radial gradients are the AI-tell for missing imagery.
+- Mono-caps eyebrow labels outside the two legitimate use sites — SPECIFICATION MARKERS (0-100 KM/H) and CONFIGURATOR SECTION HEADERS (POWERTRAIN / CHASSIS / INTERIOR) are the ONLY permitted uses. Any additional 'SECTION · X' plate is slop-blocklist violation.
+- Cycling headline words / auto-advancing sliders / horizontal tickers — the hypercar register requires SILENT, PRECISE motion. Marketing-web motion collapses into startup slop. The 360-degree configurator rotation and the SVG chart draw are legitimate per the reference; anything else auto-advancing is out.
+- Bold marketing counters at 100px+ that read as 'CONVERSIONS' or 'CUSTOMERS' — spec counters here are engineering data (0-100 seconds, HP, torque, km/h). Bold marketing-metric counters collapse the register into SaaS slop.
+
+## Banned defaults (inherited + theme-specific)
+
+- claude-cream (#F4F1EA + serif + #D97757) — this theme's canvas is dark, not cream.
+- void+acid (near-black bg + single bright acid-green or vermilion accent) — the accent is MOLTEN AMBER, not acid. Vermillion collapses into cyberpunk.
+- broadsheet-on-noneditorial (hairline rules + zero border-radius + newspaper columns)
+- 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)
+- light-canvas-inversion (canvas is near-black. Swapping to light collapses the monolithic-hypercar register into a startup-configurator register.)
+- multi-accent-flood (ONE molten-amber accent doing 100% of the punctuation. Introducing red / cyan / any second accent collapses the discipline.)
+- bold-display-hero (the register requires THIN monumental display at weight 200-300. Bold display collapses into marketing-hero slop.)
+- glossy-3d-renders (vehicle FPO must be flat SVG silhouettes or considered studio photography. Glossy 3D renders read as tech-product-launch.)
+- highway-sports-car-stock (imagery must feel like studio hypercar photography, not stock highway photography.)

package/themes/performance-engineered/tailwind.snippet.ts

@@ -0,0 +1,15 @@
+// Generated from theme.yml. Merge into your tailwind.config.ts under theme.extend.
+// slug: performance-engineered
+export const performanceEngineeredTailwindExtend = {
+  colors: {
+    bg: "#0a0a0a",
+    surface: "#141210",
+    ink: "#ede8dc",
+    accent: "#c47a2c",
+  },
+  fontFamily: {
+    display: ["A monumental thin geometric sans — the reference uses Söhne Extraleicht / Neue Haas Grotesk Display Thin. Free fallback stack — \"Neue Haas Grotesk Display\", \"Space Grotesk\", \"Manrope\", \"Inter\", system-ui, sans-serif. Weight 200 (extralight) for the monumental hero wordmark, 300 for section headings, 400 for callouts, ALL CAPS with letter-spacing 0.2em for the wordmark (monolithic spaced-caps register). Top of scale ~180px for the hero wordmark, 88px for section headlines, 40px for spec numbers."],
+    body: ["A clean geometric sans for body copy — Söhne, Inter Tight. Free fallback stack — \"Inter Tight\", Inter, \"Space Grotesk\", system-ui, sans-serif. Weight 400 for body copy, 500 for spec labels, 600 for CTA buttons. 15-16px body copy, line-height 1.55."],
+    mono: ["A geometric mono for spec-value readouts — \"JetBrains Mono\", \"Space Mono\", ui-monospace, monospace. Weight 400-500, 12-14px. LEGITIMATE here because the register is technical-precision hardware — mono reads as instrument-panel data, not decorative slop."],
+  },
+};

package/themes/performance-engineered/theme.yml

@@ -0,0 +1,193 @@
+# Performance Engineered — Family E, Luxury & Brand-Tier (hypercar subregion).
+#
+# Monolithic hypercar restraint. Near-black canvas at #0a0a0a (with a
+# subtle warm undertone in the surface tint) + cream ink (#ede8dc) +
+# ONE molten-amber precision accent (#c47a2c) used sparingly for
+# hero spec numbers, hover states, and reservation callouts. Sharp
+# corners everywhere (0px radius). Monumental thin sans display
+# (Neue Haas Grotesk / Space Grotesk 200) at wordmark scale, paired
+# with a clean geometric sans body. Full-bleed vehicle photography
+# under directional light. Numerical spec strips (0-100, HP, top speed).
+#
+# Influence anchor (per Matt's pick): Bugatti + Rimac Automobili at
+# their most monolithic. Placeholder brand: "HYPERION" — a fictional
+# hypercar imprint. Original name, original copy, no reproductions.
+#
+# Distinct from other Family E bases:
+#   - Overland Broadside is monumental broadside serif (letterhead)
+#   - Vault Reel is cinema-archive director portfolio (video-first)
+#   - Atelier Radiance is luxury boutique (sunburst identity mark)
+# Performance Engineered fills the HYPERCAR-MONOLITHIC-RESTRAINT slot
+# — extreme premium restraint applied to a performance-hardware brand.
+#
+# Eighteenth theme via the v2 harness. Fourth Family E theme.
+# Upgrade of the existing v1 archetype-fallback slug.
+
+name: Performance Engineered
+concept: Monolithic hypercar restraint applied to a performance-hardware brand — near-black canvas at #0a0a0a with cream ink and ONE molten-amber precision accent used sparingly for hero spec numbers, hover states, and reservation callouts. Monumental thin sans display (Neue Haas Grotesk 200 / Space Grotesk 200) at wordmark scale + geometric sans body. Full-bleed vehicle photography, numerical spec strips (0-100 s / HP / km h), technical charts (torque and HP curves), diegetic serial-number display on the reservation callout, engineering-narrative bands. Reads like a Rimac Nevera configurator crossed with a Bugatti Chiron press kit — silent, precise, ultra-premium.
+influence: |
+  Modern hypercar corporate identity systems (Rimac Automobili at
+  its cleanest, Bugatti Chiron press releases, Koenigsegg
+  configurators). Distinct from tech-startup surfaces through the
+  MONUMENTAL THIN DISPLAY + FULL-BLEED PRODUCT PHOTOGRAPHY +
+  NUMERICAL SPEC STRIPS trio — which reads as engineering-precision
+  rather than marketing-loud. The register carries the weight of an
+  eight-figure vehicle; the design does not fight it.
+
+family: E
+base_number: 44
+base_note: |
+  Family E hypercar subregion. Distinct from other Family E bases
+  through the MONOLITHIC-DARK canvas + THIN MONUMENTAL DISPLAY + ONE
+  MOLTEN-AMBER ACCENT + FULL-BLEED VEHICLE PHOTOGRAPHY trio. Vault
+  Reel is cinema-video-first with burning-red accent; Overland
+  Broadside is monumental warm-cream letterhead; Atelier Radiance is
+  luxury sunburst-identity boutique. Performance Engineered fills the
+  ultra-premium performance-hardware slot. Upgrade of the existing v1
+  archetype-fallback slug.
+
+render_url: http://localhost:5173/themes/performance-engineered
+
+surface: web
+
+typography:
+  display: A monumental thin geometric sans — the reference uses Söhne Extraleicht / Neue Haas Grotesk Display Thin. Free fallback stack — "Neue Haas Grotesk Display", "Space Grotesk", "Manrope", "Inter", system-ui, sans-serif. Weight 200 (extralight) for the monumental hero wordmark, 300 for section headings, 400 for callouts, ALL CAPS with letter-spacing 0.2em for the wordmark (monolithic spaced-caps register). Top of scale ~180px for the hero wordmark, 88px for section headlines, 40px for spec numbers.
+  body: A clean geometric sans for body copy — Söhne, Inter Tight. Free fallback stack — "Inter Tight", Inter, "Space Grotesk", system-ui, sans-serif. Weight 400 for body copy, 500 for spec labels, 600 for CTA buttons. 15-16px body copy, line-height 1.55.
+  mono: A geometric mono for spec-value readouts — "JetBrains Mono", "Space Mono", ui-monospace, monospace. Weight 400-500, 12-14px. LEGITIMATE here because the register is technical-precision hardware — mono reads as instrument-panel data, not decorative slop.
+  scale: 1.618 (golden ratio — dramatic contrast between the monumental thin wordmark and small body copy, which is the register's typographic fingerprint)
+  eyebrow_exception: |
+    Performance Engineered LEGITIMATELY uses two small-caps use sites — SPECIFICATION MARKERS (0-100 KM/H / TOP SPEED / POWER) and CONFIGURATOR SECTION HEADERS (POWERTRAIN / CHASSIS / INTERIOR). This is a THEME-SPECIFIC EXCEPTION — the reference hypercar-configurator register uses these EXACTLY as instrument-panel section markers, not decorative eyebrow slop. All other mono-caps eyebrow patterns remain banned.
+
+palette:
+  bg: "#0a0a0a"           # canvas — near-black with subtle warm undertone
+  surface: "#141210"      # slightly-warmer near-black for section bands
+  ink: "#ede8dc"          # cream — primary text
+  accent: "#c47a2c"       # molten amber — the ONE accent (spec numbers, hover, reservation)
+  cream: "#ede8dc"        # alias for ink
+  darkInk: "#050505"      # deepest black for masthead + footer
+  mute: "#7a756a"         # dimmed cream — captions, spec labels
+
+density: airy
+
+motion: |
+  Ships live in the section renderer (no external dependencies):
+  1. Hero vehicle photograph reveal — scale from 1.02 → 1 + opacity 0.6 → 1 over 1400ms cubic-bezier(0.23,1,0.32,1) on first paint.
+  2. Monumental wordmark reveal — letter-by-letter fade-in with 60ms per-letter stagger + 800ms cubic-bezier on first paint (7 letters × 60ms + 800ms = ~1220ms total).
+  3. Hero spec strip counters — three numbers (0-100 seconds / horsepower / top speed) count up from 0 → target on paint via requestAnimationFrame, 2000ms ease-out.
+  4. Configurator vehicle rotation — 360° rotation triggered on the configure section coming into view; smooth 4-second rotation via requestAnimationFrame, pauses on hover.
+  5. Technical charts (torque + HP curves) — SVG paths draw with stroke-dashoffset animation on scroll into view, 1400ms cubic-bezier.
+  6. Reservation counter — displays live count of serial numbers reserved (out of 350), updates via a mock event stream every 8 seconds (deterministic — for demo only).
+  7. Section reveals — each below-fold section fades in from opacity 0 + translateY(24px) → 0 over 700ms cubic-bezier on IntersectionObserver at 25% threshold.
+  8. Nav shrink on scroll — masthead compacts after 200px scroll.
+  9. prefers-reduced-motion: reduce — all reveals disabled; hero wordmark shows fully; counters show final; charts show at final position; state changes still fire.
+
+  Motion character: silent, precise, engineering-first. Custom cubic-bezier(0.23,1,0.32,1) for all reveals. Never marketing-loud, never startup-hype — reads as a hypercar configurator, not a SaaS landing page.
+
+signature: |
+  Near-black canvas at #0a0a0a — the register's non-negotiable base.
+  Every card, button, input, border, chart line, spec cell ships at
+  0px border radius. Cream ink at #ede8dc, monumental thin sans
+  display (weight 200 for wordmark, 300 for section headings), one
+  molten-amber accent (#c47a2c) used ONLY for hero spec numbers,
+  hover states, chart peaks, and reservation-callout highlights.
+
+  MASTHEAD — a "HYPERION" wordmark in Neue Haas Grotesk 200 at 20px
+  with 0.2em letter-spacing (spaced-caps monolithic register) on
+  the left, a horizontal nav (Vehicle / Powertrain / Interior /
+  Reservation / About / Contact) center, a filled-amber "Configure"
+  block button right-aligned. Masthead shrinks after 200px scroll.
+
+  HERO — FULL-BLEED SVG vehicle photograph filling the entire
+  viewport (a stylized side-profile hypercar rendering — matte
+  monochrome silhouette against a graded dark backdrop with warm
+  overhead lighting). Overlaid at center: the monumental "HYPERION"
+  wordmark at ~180px, letter-spacing 0.2em, letter-by-letter reveal
+  on first paint. Below the wordmark: a small ITALIC BODY caption
+  "the hyperion sh-01 · december 2026". At the bottom of the viewport:
+  a SPEC STRIP with three numbers counting up — "1.8s" (0-100),
+  "1900 hp", "412 km/h" — with amber accent, cream labels underneath.
+
+  CONFIGURATOR SECTION — split layout. LEFT: monumental section
+  heading "The Hyperion SH-01" + a body-copy paragraph describing
+  the powertrain + a filled-amber "Configure your Hyperion" button.
+  RIGHT: rotating vehicle SVG at 360° on scroll into view — a
+  perspective view that rotates 4-seconds-per-loop via
+  requestAnimationFrame, pauses on hover.
+
+  TECHNICAL SPECIFICATIONS — a four-column data grid with monospace
+  spec values: POWERTRAIN (1900 HP / 2360 Nm torque / 4x electric
+  motor) / CHASSIS (1420 kg / carbon monocoque / 50:50 distribution)
+  / INTERIOR (bespoke leather / carbon trim / 4-way seat) / OWNERSHIP
+  (350 units / 2028 delivery / from €2.4m).
+
+  TORQUE + HP CHART BAND — two SVG line charts drawn with stroke-
+  dashoffset animation on scroll. Torque curve on the left, HP curve
+  on the right, both in molten amber with cream axis marks.
+
+  ENGINEERING NARRATIVE — full-bleed dark band with a monumental
+  headline "Nine years of engineering" + body copy set in a narrow
+  measure (small caps for section markers) about the vehicle's
+  development history.
+
+  RESERVATION CALLOUT — a dark band with a diegetic serial-number
+  counter showing "127 / 350 reserved" (updates via mock event
+  stream every 8 seconds), a filled-amber "Reserve your Hyperion"
+  button, and micro-copy about the process (€500,000 non-refundable
+  deposit, delivery 2028, priority to existing owners).
+
+  OWNER PULL QUOTE — italic Neue Haas Grotesk at 40px with amber
+  quote-mark, a testimonial pull quote from a fictional owner.
+
+  FOOTER — dark inverted band with the monumental HYPERION wordmark
+  at ~120px, address plate (Zagreb / Molsheim / Woking style —
+  three engineering-center cities), 4-column utility grid, small
+  legal about environmental / homologation info.
+
+  Six bespoke SVG marks (car-side silhouette, aerodynamic-line arrow,
+  chart-node dot, serial-number chip, reservation-badge glyph, gear-
+  ratio dial) — dropped as PUNCTUATION at specific compositional
+  moments, never as a uniform icon row.
+
+imagery: |
+  BESPOKE SVG renderings of hypercar photography — the reference uses
+  side-profile hypercar images shot in warm studio light against
+  darkened backdrops, with matte body finish and carbon-fiber
+  emphasis. FPO imagery here should read as considered hypercar
+  studio photography (side-profile silhouettes with warm overhead
+  lighting, three-quarter angles, interior close-ups with carbon
+  and leather emphasis). NO stock "sports car on empty highway"
+  photography (that's the AI-tell for automotive-marketing slop).
+  NO 3D-rendered product mockups with glossy reflections. NO
+  warm-radial-gradient placeholder fills.
+
+best_for:
+  - Ultra-premium hypercar and supercar brands (limited-run vehicles)
+  - Premium performance-hardware brands (custom motorcycles, superyachts, private jets)
+  - Boutique horology and marque-tier luxury goods
+  - Aerospace and high-precision engineering firms with a consumer-facing register
+  - Ultra-premium electric vehicles and hyperperformance road machines
+  - Bespoke industrial-design studios working in the luxury / hardware space
+
+avoid:
+  - "Light canvas (cream / off-white / gray) as the primary background — Performance Engineered's canvas is NEAR-BLACK at #0a0a0a. A light canvas inverts the monolithic-hypercar register into a modern-configurator register (which is a different theme)."
+  - "Multi-color accent palette — the whole discipline is ONE molten-amber accent doing everything (hero spec numbers, hover states, chart peaks, reservation callouts). Introducing red / cyan / any second accent collapses the discipline into candy-tech slop."
+  - "Rounded corners on cards, buttons, chart backgrounds, or spec cells — 0px radius everywhere. The register requires sharp instrument-panel precision."
+  - "Sans-serif display at bold weight — the display face MUST be a THIN geometric sans (weight 200-300). Bold sans display collapses the register into modern-marketing hero mode."
+  - "Stock 'sports car on empty highway' photography — imagery MUST feel like studio hypercar photography (side-profile silhouettes under warm studio light, three-quarter angles, interior close-ups). Highway stock is the AI-tell for automotive-marketing slop."
+  - "3D-rendered product mockups with glossy reflections — vehicle FPO must be flat SVG silhouettes or considered studio photography. Glossy 3D renders read as tech-product-launch, not hypercar."
+  - "Warm-radial gradient placeholder fills — every FPO must read as considered studio photography. Warm-radial gradients are the AI-tell for missing imagery."
+  - "Mono-caps eyebrow labels outside the two legitimate use sites — SPECIFICATION MARKERS (0-100 KM/H) and CONFIGURATOR SECTION HEADERS (POWERTRAIN / CHASSIS / INTERIOR) are the ONLY permitted uses. Any additional 'SECTION · X' plate is slop-blocklist violation."
+  - "Cycling headline words / auto-advancing sliders / horizontal tickers — the hypercar register requires SILENT, PRECISE motion. Marketing-web motion collapses into startup slop. The 360-degree configurator rotation and the SVG chart draw are legitimate per the reference; anything else auto-advancing is out."
+  - "Bold marketing counters at 100px+ that read as 'CONVERSIONS' or 'CUSTOMERS' — spec counters here are engineering data (0-100 seconds, HP, torque, km/h). Bold marketing-metric counters collapse the register into SaaS slop."
+
+banned_defaults:
+  - "claude-cream (#F4F1EA + serif + #D97757) — this theme's canvas is dark, not cream."
+  - "void+acid (near-black bg + single bright acid-green or vermilion accent) — the accent is MOLTEN AMBER, not acid. Vermillion collapses into cyberpunk."
+  - "broadsheet-on-noneditorial (hairline rules + zero border-radius + newspaper columns)"
+  - "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)"
+  - "light-canvas-inversion (canvas is near-black. Swapping to light collapses the monolithic-hypercar register into a startup-configurator register.)"
+  - "multi-accent-flood (ONE molten-amber accent doing 100% of the punctuation. Introducing red / cyan / any second accent collapses the discipline.)"
+  - "bold-display-hero (the register requires THIN monumental display at weight 200-300. Bold display collapses into marketing-hero slop.)"
+  - "glossy-3d-renders (vehicle FPO must be flat SVG silhouettes or considered studio photography. Glossy 3D renders read as tech-product-launch.)"
+  - "highway-sports-car-stock (imagery must feel like studio hypercar photography, not stock highway photography.)"

package/themes/performance-engineered/tokens.ts

@@ -0,0 +1,29 @@
+// Generated from theme.yml. Do not edit by hand — edit theme.yml + re-materialize.
+
+export const tokens = {
+  slug: "performance-engineered",
+  family: "E",
+  base: "44",
+  palette: {
+    "bg": "#0a0a0a",
+    "surface": "#141210",
+    "ink": "#ede8dc",
+    "accent": "#c47a2c",
+    "cream": "#ede8dc",
+    "darkInk": "#050505",
+    "mute": "#7a756a"
+  },
+  typography: {
+    "display": "A monumental thin geometric sans — the reference uses Söhne Extraleicht / Neue Haas Grotesk Display Thin. Free fallback stack — \"Neue Haas Grotesk Display\", \"Space Grotesk\", \"Manrope\", \"Inter\", system-ui, sans-serif. Weight 200 (extralight) for the monumental hero wordmark, 300 for section headings, 400 for callouts, ALL CAPS with letter-spacing 0.2em for the wordmark (monolithic spaced-caps register). Top of scale ~180px for the hero wordmark, 88px for section headlines, 40px for spec numbers.",
+    "body": "A clean geometric sans for body copy — Söhne, Inter Tight. Free fallback stack — \"Inter Tight\", Inter, \"Space Grotesk\", system-ui, sans-serif. Weight 400 for body copy, 500 for spec labels, 600 for CTA buttons. 15-16px body copy, line-height 1.55.",
+    "mono": "A geometric mono for spec-value readouts — \"JetBrains Mono\", \"Space Mono\", ui-monospace, monospace. Weight 400-500, 12-14px. LEGITIMATE here because the register is technical-precision hardware — mono reads as instrument-panel data, not decorative slop.",
+    "scale": "1.618 (golden ratio — dramatic contrast between the monumental thin wordmark and small body copy, which is the register's typographic fingerprint)",
+    "eyebrow_exception": "Performance Engineered LEGITIMATELY uses two small-caps use sites — SPECIFICATION MARKERS (0-100 KM/H / TOP SPEED / POWER) and CONFIGURATOR SECTION HEADERS (POWERTRAIN / CHASSIS / INTERIOR). This is a THEME-SPECIFIC EXCEPTION — the reference hypercar-configurator register uses these EXACTLY as instrument-panel section markers, not decorative eyebrow slop. All other mono-caps eyebrow patterns remain banned.\n"
+  },
+  surface: "web",
+  density: "airy",
+  motion: "Ships live in the section renderer (no external dependencies):\n1. Hero vehicle photograph reveal — scale from 1.02 → 1 + opacity 0.6 → 1 over 1400ms cubic-bezier(0.23,1,0.32,1) on first paint.\n2. Monumental wordmark reveal — letter-by-letter fade-in with 60ms per-letter stagger + 800ms cubic-bezier on first paint (7 letters × 60ms + 800ms = ~1220ms total).\n3. Hero spec strip counters — three numbers (0-100 seconds / horsepower / top speed) count up from 0 → target on paint via requestAnimationFrame, 2000ms ease-out.\n4. Configurator vehicle rotation — 360° rotation triggered on the configure section coming into view; smooth 4-second rotation via requestAnimationFrame, pauses on hover.\n5. Technical charts (torque + HP curves) — SVG paths draw with stroke-dashoffset animation on scroll into view, 1400ms cubic-bezier.\n6. Reservation counter — displays live count of serial numbers reserved (out of 350), updates via a mock event stream every 8 seconds (deterministic — for demo only).\n7. Section reveals — each below-fold section fades in from opacity 0 + translateY(24px) → 0 over 700ms cubic-bezier on IntersectionObserver at 25% threshold.\n8. Nav shrink on scroll — masthead compacts after 200px scroll.\n9. prefers-reduced-motion: reduce — all reveals disabled; hero wordmark shows fully; counters show final; charts show at final position; state changes still fire.\n\nMotion character: silent, precise, engineering-first. Custom cubic-bezier(0.23,1,0.32,1) for all reveals. Never marketing-loud, never startup-hype — reads as a hypercar configurator, not a SaaS landing page.\n",
+  signature: "Near-black canvas at #0a0a0a — the register's non-negotiable base.\nEvery card, button, input, border, chart line, spec cell ships at\n0px border radius. Cream ink at #ede8dc, monumental thin sans\ndisplay (weight 200 for wordmark, 300 for section headings), one\nmolten-amber accent (#c47a2c) used ONLY for hero spec numbers,\nhover states, chart peaks, and reservation-callout highlights.\n\nMASTHEAD — a \"HYPERION\" wordmark in Neue Haas Grotesk 200 at 20px\nwith 0.2em letter-spacing (spaced-caps monolithic register) on\nthe left, a horizontal nav (Vehicle / Powertrain / Interior /\nReservation / About / Contact) center, a filled-amber \"Configure\"\nblock button right-aligned. Masthead shrinks after 200px scroll.\n\nHERO — FULL-BLEED SVG vehicle photograph filling the entire\nviewport (a stylized side-profile hypercar rendering — matte\nmonochrome silhouette against a graded dark backdrop with warm\noverhead lighting). Overlaid at center: the monumental \"HYPERION\"\nwordmark at ~180px, letter-spacing 0.2em, letter-by-letter reveal\non first paint. Below the wordmark: a small ITALIC BODY caption\n\"the hyperion sh-01 · december 2026\". At the bottom of the viewport:\na SPEC STRIP with three numbers counting up — \"1.8s\" (0-100),\n\"1900 hp\", \"412 km/h\" — with amber accent, cream labels underneath.\n\nCONFIGURATOR SECTION — split layout. LEFT: monumental section\nheading \"The Hyperion SH-01\" + a body-copy paragraph describing\nthe powertrain + a filled-amber \"Configure your Hyperion\" button.\nRIGHT: rotating vehicle SVG at 360° on scroll into view — a\nperspective view that rotates 4-seconds-per-loop via\nrequestAnimationFrame, pauses on hover.\n\nTECHNICAL SPECIFICATIONS — a four-column data grid with monospace\nspec values: POWERTRAIN (1900 HP / 2360 Nm torque / 4x electric\nmotor) / CHASSIS (1420 kg / carbon monocoque / 50:50 distribution)\n/ INTERIOR (bespoke leather / carbon trim / 4-way seat) / OWNERSHIP\n(350 units / 2028 delivery / from €2.4m).\n\nTORQUE + HP CHART BAND — two SVG line charts drawn with stroke-\ndashoffset animation on scroll. Torque curve on the left, HP curve\non the right, both in molten amber with cream axis marks.\n\nENGINEERING NARRATIVE — full-bleed dark band with a monumental\nheadline \"Nine years of engineering\" + body copy set in a narrow\nmeasure (small caps for section markers) about the vehicle's\ndevelopment history.\n\nRESERVATION CALLOUT — a dark band with a diegetic serial-number\ncounter showing \"127 / 350 reserved\" (updates via mock event\nstream every 8 seconds), a filled-amber \"Reserve your Hyperion\"\nbutton, and micro-copy about the process (€500,000 non-refundable\ndeposit, delivery 2028, priority to existing owners).\n\nOWNER PULL QUOTE — italic Neue Haas Grotesk at 40px with amber\nquote-mark, a testimonial pull quote from a fictional owner.\n\nFOOTER — dark inverted band with the monumental HYPERION wordmark\nat ~120px, address plate (Zagreb / Molsheim / Woking style —\nthree engineering-center cities), 4-column utility grid, small\nlegal about environmental / homologation info.\n\nSix bespoke SVG marks (car-side silhouette, aerodynamic-line arrow,\nchart-node dot, serial-number chip, reservation-badge glyph, gear-\nratio dial) — dropped as PUNCTUATION at specific compositional\nmoments, never as a uniform icon row.\n",
+} as const;
+
+export type Tokens = typeof tokens;