@hex-core/themes 0.1.1 → 0.2.1

package/dist/presets/_briefs/expo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/expo.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const expoBrief = `---\nversion: alpha\nname: Expo\ndescription: A React Native developer-platform whose marketing site reads like a quietly-confident infrastructure brand. The base canvas is pure white with a soft sky-blue gradient atmospheric wash behind the hero; near-black ink (\\`#171717\\`) carries body and display alike. The single brand voltage is **pure black** (\\`#000000\\`) for primary CTAs — minimal and editorial-feeling, paired with a small blue text-link accent (\\`#0d74ce\\`) reserved for inline body links. Type pairs Inter at modest weights (display 600, body 400) with JetBrains Mono on every code surface. The brand's strongest visual signature is the **device-mockup hero** — a centered MacBook + iPhone composite showing real Expo dev surfaces — over the gradient sky wash.\n\ncolors:\n  primary: \"#000000\"\n  primary-active: \"#1a1a1a\"\n  text-link: \"#0d74ce\"\n  text-link-secondary: \"#476cff\"\n  ink: \"#171717\"\n  body: \"#60646c\"\n  body-strong: \"#171717\"\n  muted: \"#999999\"\n  muted-soft: \"#cccccc\"\n  hairline: \"#f0f0f3\"\n  hairline-soft: \"#f5f5f7\"\n  hairline-strong: \"#dcdee0\"\n  canvas: \"#ffffff\"\n  canvas-soft: \"#fafafa\"\n  surface-card: \"#ffffff\"\n  surface-strong: \"#f0f0f3\"\n  surface-dark: \"#171717\"\n  surface-dark-elevated: \"#1a1a1a\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  on-dark-soft: \"#b0b4ba\"\n  gradient-sky-light: \"#cfe7ff\"\n  gradient-sky-mid: \"#a8c8e8\"\n  accent-warning: \"#ab6400\"\n  accent-preview: \"#8145b5\"\n  accent-link-bright: \"#47c2ff\"\n  semantic-error: \"#eb8e90\"\n  semantic-success: \"#16a34a\"\n\ntypography:\n  display-mega:\n    fontFamily: \"'Inter', -apple-system, system-ui, sans-serif\"\n    fontSize: 64px\n    fontWeight: 600\n    lineHeight: 1.05\n    letterSpacing: -1.92px\n  display-xl:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 48px\n    fontWeight: 600\n    lineHeight: 1.1\n    letterSpacing: -1.44px\n  display-lg:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 36px\n    fontWeight: 600\n    lineHeight: 1.15\n    letterSpacing: -1.08px\n  display-md:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 28px\n    fontWeight: 600\n    lineHeight: 1.2\n    letterSpacing: -0.84px\n  display-sm:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 22px\n    fontWeight: 600\n    lineHeight: 1.25\n    letterSpacing: -0.5px\n  title-md:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 18px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 16px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  body-md:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 13px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0\n  caption-uppercase:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 11px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0.88px\n    textTransform: uppercase\n  code:\n    fontFamily: \"'JetBrains Mono', 'Fira Code', monospace\"\n    fontSize: 13px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  button:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.0\n    letterSpacing: 0\n  nav-link:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n\nrounded:\n  none: 0px\n  xs: 4px\n  sm: 6px\n  md: 8px\n  lg: 12px\n  xl: 16px\n  xxl: 24px\n  pill: 9999px\n  full: 9999px\n\nspacing:\n  xxs: 4px\n  xs: 8px\n  sm: 12px\n  base: 16px\n  md: 20px\n  lg: 24px\n  xl: 32px\n  xxl: 48px\n  section: 96px\n\ncomponents:\n  top-nav:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 10px 18px\n    height: 40px\n  button-primary-active:\n    backgroundColor: \"{colors.primary-active}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.md}\"\n  button-secondary:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 9px 17px\n    height: 40px\n  button-tertiary-text:\n    backgroundColor: transparent\n    textColor: \"{colors.text-link}\"\n    typography: \"{typography.button}\"\n  hero-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-mega}\"\n    padding: 96px\n  device-mockup-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.xl}\"\n    padding: 0\n  feature-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  feature-card-dark:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  workflow-step-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 20px\n  workflow-step-icon:\n    backgroundColor: \"{colors.surface-strong}\"\n    rounded: \"{rounded.md}\"\n    size: 32px\n  code-block:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.code}\"\n    rounded: \"{rounded.lg}\"\n    padding: 20px\n  ide-mockup-card:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.lg}\"\n    padding: 0\n  pricing-tier-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  pricing-tier-featured:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  text-input:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 16px\n    height: 44px\n  badge-pill:\n    backgroundColor: \"{colors.surface-strong}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 10px\n  ecosystem-tile:\n    backgroundColor: \"{colors.surface-card}\"\n    rounded: \"{rounded.md}\"\n    size: 64px\n  cta-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-lg}\"\n    padding: 96px\n  testimonial-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  footer-light:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px 48px\n  footer-link:\n    backgroundColor: transparent\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n---\n\n## Overview\n\nExpo's marketing site reads like a quietly-confident React-Native developer platform. The base canvas is **pure white** (\\`{colors.canvas}\\` — #ffffff) with a soft **sky-blue gradient atmospheric wash** behind the hero band. Near-black ink \\`{colors.ink}\\` (#171717) carries body and display alike. The single brand voltage is **pure black** (\\`{colors.primary}\\` — #000000) for primary CTAs — minimal and editorial-feeling. A small blue text-link accent (\\`{colors.text-link}\\` — #0d74ce) is reserved for inline body links, never as a CTA.\n\nType runs **Inter** as the single sans family at modest weights (display 600, body 400). JetBrains Mono carries every code surface. No custom typeface — the brand trusts Inter's editorial neutrality.\n\nThe brand's strongest visual signature is the **device-mockup hero** — a centered MacBook + iPhone composite showing real Expo dev surfaces (Expo Studio, EAS Build dashboard, the Expo Go simulator) — over a sky-blue gradient atmospheric wash. The composite is the page's chrome instead of an illustration.\n\n**Key Characteristics:**\n- Pure white canvas with sky-blue gradient atmospheric backdrop in hero only.\n- Single primary CTA: pure black pill at \\`{rounded.md}\\` (8px) — compact developer-tool dialect.\n- Text-link blue (\\`{colors.text-link}\\`) for inline links only — never on a CTA.\n- Inter as the single sans family — no custom display typeface.\n- JetBrains Mono on every code surface.\n- Device-mockup hero with real Expo product surfaces is the brand chrome.\n- Hairline + soft drop depth; no atmospheric brand decoration outside the hero.\n- 96px section rhythm.\n\n## Colors\n\n### Brand & Accent\n- **Black** (\\`{colors.primary}\\` — #000000): Primary CTA fill. Used scarcely.\n- **Black Active** (\\`{colors.primary-active}\\` — #1a1a1a): Press state.\n- **Text Link Blue** (\\`{colors.text-link}\\` — #0d74ce): Inline body links inside long-form copy. Scoped narrowly — never on CTAs.\n- **Legal Link Blue** (\\`{colors.text-link-secondary}\\` — #476cff): Inline links inside legal copy footer.\n- **Bright Cyan** (\\`{colors.accent-link-bright}\\` — #47c2ff): Used very sparingly inside docs widget links.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #ffffff): Pure white page floor.\n- **Canvas Soft** (\\`{colors.canvas-soft}\\` — #fafafa): Subtle alternating band.\n- **Surface Card** (\\`{colors.surface-card}\\` — #ffffff): Pure white card.\n- **Surface Strong** (\\`{colors.surface-strong}\\` — #f0f0f3): Badges, ecosystem tiles, secondary buttons.\n- **Surface Dark** (\\`{colors.surface-dark}\\` — #171717): Dark feature cards, code blocks, IDE mockups, featured pricing.\n- **Surface Dark Elevated** (\\`{colors.surface-dark-elevated}\\` — #1a1a1a): One step lighter inside dark cards.\n\n### Atmospheric Backdrop\n- **Sky Light** (\\`{colors.gradient-sky-light}\\` — #cfe7ff) + **Sky Mid** (\\`{colors.gradient-sky-mid}\\` — #a8c8e8): The soft sky-blue gradient wash behind the homepage hero only. Not a brand action color.\n\n### Hairlines\n- **Hairline** (\\`{colors.hairline}\\` — #f0f0f3): Default 1px divider.\n- **Hairline Soft** (\\`{colors.hairline-soft}\\` — #f5f5f7): Lighter divider.\n- **Hairline Strong** (\\`{colors.hairline-strong}\\` — #dcdee0): Stronger panel outline.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #171717): Display, body emphasis.\n- **Body** (\\`{colors.body}\\` — #60646c): Default running-text — slightly cool gray.\n- **Body Strong** (\\`{colors.body-strong}\\` — #171717): Same as ink.\n- **Muted** (\\`{colors.muted}\\` — #999999): Sub-titles.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #cccccc): Disabled text.\n- **On Primary** (\\`{colors.on-primary}\\` — #ffffff): White text on black CTA.\n- **On Dark** (\\`{colors.on-dark}\\` — #ffffff): White text on dark cards.\n- **On Dark Soft** (\\`{colors.on-dark-soft}\\` — #b0b4ba): Muted off-white on dark.\n\n### Semantic\n- **Warning** (\\`{colors.accent-warning}\\` — #ab6400): Warning text inside docs callouts.\n- **Preview** (\\`{colors.accent-preview}\\` — #8145b5): \"Preview\" tag color.\n- **Success** (\\`{colors.semantic-success}\\` — #16a34a): Confirmation.\n- **Error** (\\`{colors.semantic-error}\\` — #eb8e90): Validation errors.\n\n## Typography\n\n### Font Family\n**Inter** is the single sans family across every text role. **JetBrains Mono** carries every code surface. Fallback: \\`-apple-system, system-ui, sans-serif\\`.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-mega}\\` | 64px | 600 | 1.05 | -1.92px | Homepage hero h1 |\n| \\`{typography.display-xl}\\` | 48px | 600 | 1.1 | -1.44px | Subsidiary heroes |\n| \\`{typography.display-lg}\\` | 36px | 600 | 1.15 | -1.08px | Section heads |\n| \\`{typography.display-md}\\` | 28px | 600 | 1.2 | -0.84px | Sub-section heads |\n| \\`{typography.display-sm}\\` | 22px | 600 | 1.25 | -0.5px | Card group titles |\n| \\`{typography.title-md}\\` | 18px | 600 | 1.4 | 0 | Component titles |\n| \\`{typography.title-sm}\\` | 16px | 600 | 1.4 | 0 | List labels |\n| \\`{typography.body-md}\\` | 16px | 400 | 1.5 | 0 | Default body |\n| \\`{typography.body-sm}\\` | 14px | 400 | 1.5 | 0 | Footer body |\n| \\`{typography.caption}\\` | 13px | 400 | 1.4 | 0 | Photo captions |\n| \\`{typography.caption-uppercase}\\` | 11px | 600 | 1.4 | 0.88px | Section labels, badges |\n| \\`{typography.code}\\` | 13px | 400 | 1.5 | 0 | Code blocks — JetBrains Mono |\n| \\`{typography.button}\\` | 14px | 500 | 1.0 | 0 | CTA labels |\n| \\`{typography.nav-link}\\` | 14px | 500 | 1.4 | 0 | Top-nav menu |\n\n### Principles\n- **Display weight stays at 600** — confident but not bombastic. Inter at 600 reads cleaner than 700.\n- **Negative letter-spacing on display** — -0.5px to -1.92px tracking.\n- **JetBrains Mono on every code surface.**\n\n### Note on Font Substitutes\nInter and JetBrains Mono are both freely available — the system uses them directly.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 4px.\n- **Tokens:** \\`{spacing.xxs}\\` 4px · \\`{spacing.xs}\\` 8px · \\`{spacing.sm}\\` 12px · \\`{spacing.base}\\` 16px · \\`{spacing.md}\\` 20px · \\`{spacing.lg}\\` 24px · \\`{spacing.xl}\\` 32px · \\`{spacing.xxl}\\` 48px · \\`{spacing.section}\\` 96px.\n- **Section padding:** 96px.\n\n### Grid & Container\n- Max content width: ~1200px.\n- Editorial body: 12-column grid.\n- Feature card grids: 2-up at desktop for hero splits, 3-up for benefit grids.\n- Ecosystem tile grid: 8-up at desktop.\n- Footer: 5-column at desktop.\n\n### Whitespace Philosophy\nGenerous editorial pacing. The white canvas does not compete with the hero's gradient sky wash; cards inside dense workflow sections sit close (16-24px gap).\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat (canvas) | \\`{colors.canvas}\\` (#ffffff) | Body bands, footer |\n| Card | \\`{colors.surface-card}\\` (#ffffff) | Content cards |\n| Hairline border | 1px \\`{colors.hairline}\\` | Card outlines |\n| Soft drop | \\`0 4px 12px rgba(0, 0, 0, 0.04)\\` | Hovered cards (single shadow tier) |\n| Atmospheric gradient | Sky-blue radial wash | Hero backdrop only |\n| Dark inversion | \\`{colors.surface-dark}\\` (#171717) | Dark feature cards, code blocks, featured pricing |\n\n### Decorative Depth\n- **Sky-blue gradient backdrop** in the hero only — atmospheric depth without claiming to be a brand color.\n- **Device mockup composite** as page chrome — MacBook + iPhone showing real Expo dev surfaces.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.none}\\` | 0px | Reserved |\n| \\`{rounded.xs}\\` | 4px | Inline tags |\n| \\`{rounded.sm}\\` | 6px | Compact rows |\n| \\`{rounded.md}\\` | 8px | CTA buttons, form inputs, ecosystem tiles |\n| \\`{rounded.lg}\\` | 12px | Feature cards, code blocks, pricing tiers |\n| \\`{rounded.xl}\\` | 16px | Device mockup cards |\n| \\`{rounded.xxl}\\` | 24px | Larger atmospheric cards (rare) |\n| \\`{rounded.pill}\\` | 9999px | Badges only |\n| \\`{rounded.full}\\` | 9999px | Avatar plates (rare) |\n\nCompact developer-ergonomic radii — 8px CTAs, 12px cards. Pill geometry is reserved for badges, never CTAs.\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, height 64px. Layout: Expo wordmark left, primary horizontal menu (Tools / Workflows / EAS / Pricing / Docs / Showcase), Sign In + Get started CTA right.\n\n### Buttons\n\n**\\`button-primary\\`** — Pure black pill. Background \\`{colors.primary}\\`, text \\`{colors.on-primary}\\`, type \\`{typography.button}\\` (14px / 500), padding 10px × 18px, height 40px, rounded \\`{rounded.md}\\` (8px).\n\n**\\`button-primary-active\\`** — Press state. Background \\`{colors.primary-active}\\`.\n\n**\\`button-secondary\\`** — White card with 1px hairline-strong border. Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, 1px \\`{colors.hairline-strong}\\` border.\n\n**\\`button-tertiary-text\\`** — Inline blue text link. Background transparent, text \\`{colors.text-link}\\`.\n\n### Hero & Device Mockup\n\n**\\`hero-band\\`** — Background \\`{colors.canvas}\\` with a soft sky-blue gradient wash behind the centered headline. Display headline in \\`{typography.display-mega}\\` (64px / 600 / -1.92px), subhead in \\`{typography.body-md}\\`, single primary CTA, then below — the device mockup composite.\n\n**\\`device-mockup-card\\`** — A layered MacBook + iPhone composite showing real Expo dev surfaces. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.xl}\\`. The MacBook holds the EAS dashboard or Expo Studio screenshot; the iPhone overlay shows the running app in Expo Go. This is the page chrome.\n\n### Cards\n\n**\\`feature-card\\`** — Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, type \\`{typography.title-md}\\`, rounded \\`{rounded.lg}\\`, padding 24px, 1px \\`{colors.hairline-strong}\\` border.\n\n**\\`feature-card-dark\\`** — Dark variant. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`. Same shape, dark inversion.\n\n**\\`workflow-step-card\\`** — Step in the \"Get your app on every device\" workflow row. Background \\`{colors.surface-card}\\`, text \\`{colors.body}\\`, rounded \\`{rounded.lg}\\`, padding 20px. Layout: 32px square \\`{component.workflow-step-icon}\\` + step number + label + body.\n\n**\\`workflow-step-icon\\`** — Square plate. Background \\`{colors.surface-strong}\\`, rounded \\`{rounded.md}\\`, 32px size.\n\n**\\`testimonial-card\\`** — Quote card. Background \\`{colors.surface-card}\\`, text \\`{colors.body}\\`, rounded \\`{rounded.lg}\\`, padding 24px.\n\n### Code & IDE\n\n**\\`code-block\\`** — Inline code block. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\` in \\`{typography.code}\\` (JetBrains Mono 13px), rounded \\`{rounded.lg}\\`, padding 20px. White text on dark.\n\n**\\`ide-mockup-card\\`** — Stylized IDE mockup. Background \\`{colors.surface-dark}\\`, rounded \\`{rounded.lg}\\`. Multi-pane editor + terminal preview.\n\n### Pricing\n\n**\\`pricing-tier-card\\`** — Standard pricing tier. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.lg}\\`, padding 32px, 1px \\`{colors.hairline-strong}\\` border.\n\n**\\`pricing-tier-featured\\`** — Featured tier. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`. Same shape, dark inversion.\n\n### Ecosystem\n\n**\\`ecosystem-tile\\`** — Square logo plate for ecosystem partner logos (TypeScript, React, Sentry, etc.). Background \\`{colors.surface-card}\\`, rounded \\`{rounded.md}\\`, 64px size, 1px \\`{colors.hairline}\\` border.\n\n### Forms & Tags\n\n**\\`text-input\\`** — Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, rounded \\`{rounded.md}\\` (8px), padding 12px × 16px, height 44px, 1px \\`{colors.hairline-strong}\\` border. Focus thickens border to 2px ink.\n\n**\\`badge-pill\\`** — Small uppercase pill. Background \\`{colors.surface-strong}\\`, text \\`{colors.ink}\\`, type \\`{typography.caption-uppercase}\\`, rounded \\`{rounded.pill}\\`, padding 4px × 10px.\n\n### CTA / Footer\n\n**\\`cta-band\\`** — Pre-footer band. Background \\`{colors.canvas}\\`, centered display headline in \\`{typography.display-lg}\\`, single black pill CTA. 96px padding.\n\n**\\`footer-light\\`** — Closing white footer. Background \\`{colors.canvas}\\`, text \\`{colors.body}\\`. 5-column link list. 64×48px padding.\n\n**\\`footer-link\\`** — Background transparent, text \\`{colors.body}\\`, type \\`{typography.body-sm}\\`.\n\n## Do's and Don'ts\n\n### Do\n- Reserve \\`{colors.primary}\\` (black) for primary CTAs.\n- Use \\`{colors.text-link}\\` (blue) for inline body links only — never on CTAs or buttons.\n- Set every CTA at \\`{rounded.md}\\` (8px) — developer dialect.\n- Use Inter at weight 600 for display, 400 for body.\n- Render every code surface in JetBrains Mono.\n- Pair the hero with the device-mockup composite — it's the page chrome.\n\n### Don't\n- Don't introduce a saturated brand action color. Black is the only CTA fill.\n- Don't use blue (\\`{colors.text-link}\\`) on a CTA. Inline links only.\n- Don't drop display below weight 600 or above 700.\n- Don't use full pills on CTAs — pills are for badges only.\n- Don't replicate the sky-blue gradient backdrop outside the hero.\n- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA is what appears on actual page CTAs.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 640px | Hero h1 64→32px; device mockup → single iPhone screen; feature grid 1-up; nav hamburger. |\n| Tablet | 640–1024px | Hero h1 48px; device mockup compresses; feature grid 2-up. |\n| Desktop | 1024–1280px | Full hero h1 64px; full MacBook + iPhone composite; feature grid 3-up. |\n| Wide | > 1280px | Content caps at 1200px. |\n\n### Touch Targets\n- Primary CTA at 40px height — at WCAG AA, padded for AAA.\n- Search input 44px — at AAA.\n\n### Collapsing Strategy\n- Top nav switches to hamburger below 768px.\n- Device mockup MacBook + iPhone collapses to a single iPhone preview on mobile.\n- Feature grid: 3-up → 2-up → 1-up.\n- Ecosystem tile grid: 8-up → 4-up → 3-up → 2-up.\n\n## Iteration Guide\n\n1. Focus on a single component at a time.\n2. CTAs default to \\`{rounded.md}\\` (8px). Cards use \\`{rounded.lg}\\` (12px).\n3. Variants live as separate entries.\n4. Use \\`{token.refs}\\` everywhere — never inline hex.\n5. Hover state never documented.\n6. Inter 600 for display, Inter 400 for body. JetBrains Mono on code.\n7. Black stays the only CTA color; text-link blue stays inline-only.\n\n## Known Gaps\n\n- Inter and JetBrains Mono are freely available — no licensing concerns.\n- Animation timings (device mockup parallax, hero entrance) out of scope.\n- In-app surfaces (EAS dashboard interactive, Expo Go simulator) only partially captured via marketing mockups.\n- Form validation states beyond focus not visible on captured surfaces.\n`;\n"],"mappings":";AACO,IAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/presets/_briefs/ferrari.d.ts

@@ -0,0 +1,3 @@
+declare const ferrariBrief = "---\nversion: alpha\nname: Ferrari\ndescription: A luxury-automotive brand whose marketing surfaces read as cinematic editorial. The base canvas is **near-black** (`#181818`) holding pure white display type; white-canvas bands appear only inside specific editorial contexts (preowned listings, pricing tables). The single brand voltage is **Rosso Corsa** (`#da291c`) \u2014 the iconic Ferrari racing red \u2014 used scarcely on primary CTAs, the Cavallino mark, and Formula 1 race-position highlights. Type runs **FerrariSans** at modest weights (display 500, body 400) \u2014 never bombastic. Spacing follows an explicit 8px token ladder (`xxxs` 4px through `super` 128px); generous editorial pacing throughout. The brand's strongest visual signature is the **full-bleed cinematic hero photograph** that fills the viewport top with car photography, model details, or trackside livery \u2014 followed by a tighter editorial body layout below.\n\ncolors:\n  primary: \"#da291c\"\n  primary-active: \"#b01e0a\"\n  primary-hover: \"#9d2211\"\n  ink: \"#ffffff\"\n  body: \"#969696\"\n  body-strong: \"#ffffff\"\n  body-on-light: \"#181818\"\n  muted: \"#666666\"\n  muted-soft: \"#8f8f8f\"\n  hairline: \"#303030\"\n  hairline-on-light: \"#d2d2d2\"\n  hairline-soft: \"#ebebeb\"\n  canvas: \"#181818\"\n  canvas-elevated: \"#303030\"\n  canvas-light: \"#ffffff\"\n  surface-card: \"#303030\"\n  surface-soft-light: \"#f7f7f7\"\n  surface-strong-light: \"#ebebeb\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  on-light: \"#181818\"\n  accent-yellow-hypersail: \"#fff200\"\n  accent-yellow: \"#f6e500\"\n  semantic-info: \"#4c98b9\"\n  semantic-success: \"#03904a\"\n  semantic-warning: \"#f13a2c\"\n\ntypography:\n  display-mega:\n    fontFamily: \"'FerrariSans', -apple-system, system-ui, sans-serif\"\n    fontSize: 80px\n    fontWeight: 500\n    lineHeight: 1.05\n    letterSpacing: -1.6px\n  display-xl:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 56px\n    fontWeight: 500\n    lineHeight: 1.1\n    letterSpacing: -1.12px\n  display-lg:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 36px\n    fontWeight: 500\n    lineHeight: 1.2\n    letterSpacing: -0.36px\n  display-md:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 26px\n    fontWeight: 500\n    lineHeight: 1.5\n    letterSpacing: 0.195px\n  title-md:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 18px\n    fontWeight: 700\n    lineHeight: 1.2\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 16px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0.08px\n  body-md:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 13px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 12px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0\n  caption-uppercase:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 11px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 1.1px\n    textTransform: uppercase\n  button:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 14px\n    fontWeight: 700\n    lineHeight: 1.0\n    letterSpacing: 1.4px\n    textTransform: uppercase\n  nav-link:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 13px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0.65px\n    textTransform: uppercase\n  number-display:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 80px\n    fontWeight: 700\n    lineHeight: 1.0\n    letterSpacing: -1.6px\n\nrounded:\n  none: 0px\n  xs: 2px\n  sm: 4px\n  md: 6px\n  lg: 8px\n  xl: 12px\n  full: 9999px\n\nspacing:\n  xxxs: 4px\n  xxs: 8px\n  xs: 16px\n  sm: 24px\n  md: 32px\n  lg: 48px\n  xl: 64px\n  xxl: 96px\n  super: 128px\n\ncomponents:\n  top-nav-on-dark:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  top-nav-on-light:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 14px 32px\n    height: 48px\n  button-primary-active:\n    backgroundColor: \"{colors.primary-active}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.none}\"\n  button-outline-on-dark:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 13px 31px\n    height: 48px\n  button-outline-on-light:\n    backgroundColor: transparent\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 13px 31px\n    height: 48px\n  button-tertiary-text:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n  hero-band-cinema:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-mega}\"\n    padding: 0\n  hero-band-light:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.display-xl}\"\n    padding: 96px\n  feature-card-photo:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 0\n  feature-card-light:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 32px\n  livery-band:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-lg}\"\n    padding: 96px\n  preowned-listing-card:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  spec-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.number-display}\"\n    padding: 24px 0\n  race-position-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.number-display}\"\n  race-calendar-row:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    padding: 16px 0\n  driver-card:\n    backgroundColor: \"{colors.canvas-elevated}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  text-input-on-dark:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.sm}\"\n    padding: 14px 16px\n    height: 48px\n  text-input-on-light:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.sm}\"\n    padding: 14px 16px\n    height: 48px\n  badge-pill:\n    backgroundColor: \"{colors.canvas-elevated}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.full}\"\n    padding: 4px 12px\n  cta-band-dark:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-lg}\"\n    padding: 96px\n  newsletter-input-band:\n    backgroundColor: \"{colors.canvas-elevated}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.sm}\"\n    padding: 32px\n  footer-dark:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px 48px\n  footer-link:\n    backgroundColor: transparent\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n---\n\n## Overview\n\nFerrari's marketing site reads as cinematic editorial \u2014 closer to a luxury-magazine spread than a typical car-OEM site. The base canvas is **near-black** (`{colors.canvas}` \u2014 #181818) holding pure white display type; white-canvas bands appear only inside specific editorial contexts (preowned listings, pricing tables, dealer surfaces). The single brand voltage is **Rosso Corsa** (`{colors.primary}` \u2014 #da291c), the iconic Ferrari racing red, used scarcely on primary CTAs, the Cavallino mark, and Formula 1 race-position highlights.\n\nType runs **FerrariSans** as the single sans family at modest weights \u2014 display 500, body 400. CTA labels render in uppercase with generous tracking (1.1-1.4px). The brand never uses bold display copy.\n\nThe brand's strongest visual signature is the **full-bleed cinematic hero photograph** \u2014 top-of-page imagery shows car photography, model details, or trackside livery without any chrome competing with it. Headlines float over the bottom of the photo or sit in a tight band beneath. Spacing follows the explicit 8px token ladder: `xxxs` 4 / `xxs` 8 / `xs` 16 / `sm` 24 / `md` 32 / `lg` 48 / `xl` 64 / `xxl` 96 / `super` 128.\n\n**Key Characteristics:**\n- Single accent: `{colors.primary}` (Rosso Corsa #da291c) for primary CTAs, the Cavallino, F1 race-position highlights. Used scarcely.\n- Near-black canvas (#181818) \u2014 never pure black. White-canvas bands only inside editorial contexts.\n- Single sans family: FerrariSans across every text role.\n- Display weight stays at 500 \u2014 never bold.\n- CTA labels render uppercase with 1.4px tracking.\n- Sharp `{rounded.none}` (0px) corners on every CTA, card, and band \u2014 luxury-automotive precision.\n- Full-bleed cinematic hero photography is the page chrome.\n- Explicit 8px spacing token ladder with named scale (xxxs through super).\n- Hairlines + photographic depth \u2014 no drop shadow tiers.\n\n## Colors\n\n### Brand & Accent\n- **Rosso Corsa** (`{colors.primary}` \u2014 #da291c): The iconic Ferrari racing red. Primary CTA fill, Cavallino mark, F1 driver-position highlights. Used scarcely.\n- **Rosso Corsa Active** (`{colors.primary-active}` \u2014 #b01e0a): Press state.\n- **Rosso Corsa Hover-darker** (`{colors.primary-hover}` \u2014 #9d2211): Documented for completeness; per the no-hover policy this is not used in preview HTML.\n- **Hypersail Yellow** (`{colors.accent-yellow-hypersail}` \u2014 #fff200) + **Yellow** (`{colors.accent-yellow}` \u2014 #f6e500): Sub-brand accents reserved for the Hypersail sailing program and the global focus-ring color. Not part of the main automotive palette.\n\n### Surface\n- **Canvas** (`{colors.canvas}` \u2014 #181818): Near-black page floor \u2014 never pure black, slight warmth.\n- **Canvas Elevated** (`{colors.canvas-elevated}` \u2014 #303030): Cards and panels on dark canvas.\n- **Canvas Light** (`{colors.canvas-light}` \u2014 #ffffff): White editorial bands (preowned listings, pricing).\n- **Surface Card** (`{colors.surface-card}` \u2014 #303030): Same as canvas-elevated \u2014 driver cards, livery photo plates.\n- **Surface Soft Light** (`{colors.surface-soft-light}` \u2014 #f7f7f7): Light editorial alternating band.\n- **Surface Strong Light** (`{colors.surface-strong-light}` \u2014 #ebebeb): Light-canvas dividers, badges.\n\n### Hairlines\n- **Hairline** (`{colors.hairline}` \u2014 #303030): 1px divider on dark \u2014 same hex as `{colors.canvas-elevated}`.\n- **Hairline On Light** (`{colors.hairline-on-light}` \u2014 #d2d2d2): 1px divider on light bands.\n- **Hairline Soft** (`{colors.hairline-soft}` \u2014 #ebebeb): Lighter divider.\n\n### Text\n- **Ink** (`{colors.ink}` \u2014 #ffffff): Display, body emphasis on dark.\n- **Body** (`{colors.body}` \u2014 #969696): Default running-text on dark.\n- **Body Strong** (`{colors.body-strong}` \u2014 #ffffff): Same as ink.\n- **Body On Light** (`{colors.body-on-light}` \u2014 #181818): Default text on light bands.\n- **Muted** (`{colors.muted}` \u2014 #666666): Sub-titles, captions on dark.\n- **Muted Soft** (`{colors.muted-soft}` \u2014 #8f8f8f): Disabled link text.\n- **On Primary** (`{colors.on-primary}` \u2014 #ffffff): White text on Rosso Corsa.\n\n### Semantic\n- **Info** (`{colors.semantic-info}` \u2014 #4c98b9): Info badges, callout backgrounds.\n- **Success** (`{colors.semantic-success}` \u2014 #03904a): Confirmation.\n- **Warning** (`{colors.semantic-warning}` \u2014 #f13a2c): Validation warnings.\n\n## Typography\n\n### Font Family\n**FerrariSans** is the licensed single sans family across every text role. Fallback: `-apple-system, system-ui, sans-serif`. No display/body family split.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| `{typography.display-mega}` | 80px | 500 | 1.05 | -1.6px | Homepage hero h1 |\n| `{typography.display-xl}` | 56px | 500 | 1.1 | -1.12px | Subsidiary heroes |\n| `{typography.display-lg}` | 36px | 500 | 1.2 | -0.36px | Section heads, livery band |\n| `{typography.display-md}` | 26px | 500 | 1.5 | 0.195px | Sub-section heads |\n| `{typography.title-md}` | 18px | 700 | 1.2 | 0 | Component titles |\n| `{typography.title-sm}` | 16px | 500 | 1.4 | 0.08px | List labels |\n| `{typography.body-md}` | 14px | 400 | 1.5 | 0 | Default body |\n| `{typography.body-sm}` | 13px | 400 | 1.5 | 0 | Footer body |\n| `{typography.caption}` | 12px | 400 | 1.4 | 0 | Photo captions |\n| `{typography.caption-uppercase}` | 11px | 600 | 1.4 | 1.1px | Section labels, badges |\n| `{typography.button}` | 14px | 700 | 1.0 | 1.4px (uppercase) | CTA pill labels |\n| `{typography.nav-link}` | 13px | 600 | 1.4 | 0.65px (uppercase) | Top-nav menu items |\n| `{typography.number-display}` | 80px | 700 | 1.0 | -1.6px | Race position highlights, spec values |\n\n### Principles\n- **Display weight stays at 500.** Editorial confidence, not bombastic. The cinematic photography is doing the visual heavy-lifting \u2014 type doesn't need to compete.\n- **CTA labels are uppercase with 1.4px tracking.** Luxury-precision feel.\n- **Nav labels are uppercase with 0.65px tracking.** Consistent with CTA voice.\n- **Negative letter-spacing on display only.** -0.36px to -1.6px on display sizes; body stays at 0.\n\n### Note on Font Substitutes\nFerrariSans is licensed. Open-source substitute: **Inter** at weight 500 with letter-spacing -1%, or **S\u00F6hne** for closer humanist proportions.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 4px.\n- **Tokens:** `{spacing.xxxs}` 4px \u00B7 `{spacing.xxs}` 8px \u00B7 `{spacing.xs}` 16px \u00B7 `{spacing.sm}` 24px \u00B7 `{spacing.md}` 32px \u00B7 `{spacing.lg}` 48px \u00B7 `{spacing.xl}` 64px \u00B7 `{spacing.xxl}` 96px \u00B7 `{spacing.super}` 128px.\n- **Section padding:** `{spacing.xxl}` (96px) for major bands; `{spacing.super}` (128px) reserved for hero band depth.\n\n### Grid & Container\n- Max content width: ~1280px on editorial bands. Hero photography goes full-bleed.\n- Editorial body: 12-column grid.\n- Feature card grids: 2-up at desktop for hero splits, 3-up for benefit grids, 4-up for preowned listing tiles.\n- Footer: 5-column at desktop.\n\n### Whitespace Philosophy\nGenerous editorial pacing. Cinematic hero photography occupies generous viewport real-estate; body sections sit in tighter editorial layouts beneath. The canvas-light editorial bands (preowned, pricing) carry tighter density than the dark cinema bands.\n\n## Elevation & Depth\n\nThe system uses **photographic depth + brightness-step** elevation. No drop shadows except a single soft-small `{shadow.small}` documented in extracted tokens.\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat (canvas) | `{colors.canvas}` (#181818) | Body bands, footer |\n| Card | `{colors.canvas-elevated}` (#303030) | Driver cards, livery plates |\n| Light band | `{colors.canvas-light}` (#ffffff) | Preowned listings, pricing |\n| Hairline border | 1px `{colors.hairline}` or `{colors.hairline-on-light}` | Card outlines, dividers |\n| Soft drop | `0 4px 8px rgba(0,0,0,0.1)` | Hovered cards (single shadow tier) |\n| Photographic | Full-bleed cinema imagery | Hero band, livery photographs |\n\n### Decorative Depth\n- **Full-bleed cinema photography** is the brand's primary depth treatment.\n- **Brand red gradient** (`linear-gradient(180deg, #a00c01, #da291c 64%)`): The Rosso Corsa gradient used inside accent bands and CTA hover states.\n- **Dark grey gradient** (`linear-gradient(180deg, #3c3c3c, #030303 64%)`): Atmospheric darken used at section transitions.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| `{rounded.none}` | 0px | Every CTA, card, band \u2014 dominant radius |\n| `{rounded.xs}` | 2px | Tight badges (rare) |\n| `{rounded.sm}` | 4px | Form inputs |\n| `{rounded.md}` | 6px | Compact cards (rare) |\n| `{rounded.lg}` | 8px | Mobile-only collapse cards |\n| `{rounded.xl}` | 12px | Modal/dialog corners (rare) |\n| `{rounded.full}` | 9999px | Avatar plates, badge pills |\n\nThe radius vocabulary is **sharp by default**. Sharp 0px corners are the brand button shape \u2014 never rounded pills. Pill geometry is reserved for badge labels only.\n\n## Components\n\n### Top Navigation\n\n**`top-nav-on-dark`** \u2014 Default top nav on dark hero pages. Background `{colors.canvas}`, text `{colors.ink}`, height 64px. Layout: Cavallino mark left, primary horizontal menu (Models / F1 / Lifestyle / Owners / Preowned), language picker + utilities right. Menu items render uppercase with 0.65px tracking.\n\n**`top-nav-on-light`** \u2014 White-canvas variant for editorial light bands.\n\n### Buttons\n\n**`button-primary`** \u2014 The signature Rosso Corsa CTA. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}` (14px / 700 / 1.4px tracking, uppercase), padding 14px \u00D7 32px, height 48px, **rounded `{rounded.none}` (0px \u2014 sharp corners)**.\n\n**`button-primary-active`** \u2014 Press state. Background `{colors.primary-active}`.\n\n**`button-outline-on-dark`** \u2014 Transparent with 1px white border. Background transparent, text `{colors.ink}`, 1px white border, same sharp 0px corners.\n\n**`button-outline-on-light`** \u2014 Transparent with 1px ink border on light bands.\n\n**`button-tertiary-text`** \u2014 Inline text link, uppercase tracking.\n\n### Hero Bands\n\n**`hero-band-cinema`** \u2014 Full-bleed cinematic photograph. Background `{colors.canvas}` underneath, but the photo fills the viewport. Display headline floats over the bottom of the photo or sits in a tight band beneath, in `{typography.display-mega}` (80px / 500 / -1.6px). One primary CTA + one outline CTA. Zero padding \u2014 the photo fills edge-to-edge.\n\n**`hero-band-light`** \u2014 White-canvas variant for editorial bands. Background `{colors.canvas-light}`, text `{colors.body-on-light}`, padding 96px.\n\n### Cards\n\n**`feature-card-photo`** \u2014 Image-first card. Background `{colors.canvas}`, text `{colors.ink}`, rounded `{rounded.none}`. Image fills the top edge-to-edge; title + body sit beneath in tight typography.\n\n**`feature-card-light`** \u2014 White-canvas variant. Background `{colors.canvas-light}`, text `{colors.body-on-light}`, rounded `{rounded.none}`, padding 32px.\n\n**`driver-card`** \u2014 F1 driver portrait card. Background `{colors.canvas-elevated}`, text `{colors.ink}`, rounded `{rounded.none}`, padding 24px. Layout: driver portrait + name + race number + team badge.\n\n### Editorial Surfaces\n\n**`livery-band`** \u2014 A full-width Rosso Corsa accent band. Background `{colors.primary}`, text `{colors.ink}`, type `{typography.display-lg}`, 96px padding. Used as a standout livery callout between dark editorial bands.\n\n**`preowned-listing-card`** \u2014 Used in the preowned Ferrari listing grid. Background `{colors.canvas-light}`, text `{colors.body-on-light}`, rounded `{rounded.none}`, padding 24px. Layout: car photo top + model name + year/mileage + price.\n\n### Spec & Race Surfaces\n\n**`spec-cell`** \u2014 Technical spec callout. Transparent background, value in `{typography.number-display}` (80px / 700 / -1.6px white), label below in `{typography.caption-uppercase}`.\n\n**`race-position-cell`** \u2014 F1 driver finishing position. Same number-display geometry but text in `{colors.primary}` Rosso Corsa for the brand's racing identity.\n\n**`race-calendar-row`** \u2014 Hairline-divided row in the F1 race calendar. Layout: date column left, race name + circuit middle, results column right.\n\n### Forms & Tags\n\n**`text-input-on-dark`** \u2014 Background `{colors.canvas}`, text `{colors.ink}`, rounded `{rounded.sm}` (4px), padding 14px \u00D7 16px, height 48px, 1px `{colors.hairline}` border.\n\n**`text-input-on-light`** \u2014 White-canvas variant.\n\n**`badge-pill`** \u2014 Small uppercase pill. Background `{colors.canvas-elevated}`, text `{colors.ink}`, type `{typography.caption-uppercase}` (11px / 600 / 1.1px tracking, uppercase), rounded `{rounded.full}` (9999px), padding 4px \u00D7 12px. The only place pill geometry is used.\n\n### Newsletter / CTA / Footer\n\n**`newsletter-input-band`** \u2014 Newsletter signup band. Background `{colors.canvas-elevated}`, padding 32px, rounded `{rounded.sm}`. Holds an inline email input + primary CTA.\n\n**`cta-band-dark`** \u2014 Pre-footer band. Background `{colors.canvas}`, centered display headline in `{typography.display-lg}`, single Rosso Corsa CTA. 96px padding.\n\n**`footer-dark`** \u2014 Closing dark footer. Background `{colors.canvas}`, text `{colors.body}`. 5-column link list. 64\u00D748px padding.\n\n**`footer-link`** \u2014 Background transparent, text `{colors.body}`, type `{typography.body-sm}`.\n\n## Do's and Don'ts\n\n### Do\n- Reserve `{colors.primary}` (Rosso Corsa) for primary CTAs, the Cavallino mark, and F1 race-position highlights.\n- Set every CTA at `{rounded.none}` (0px sharp corners) \u2014 the brand's signature precision.\n- Render CTA labels in uppercase with 1.4px tracking via `{typography.button}`.\n- Pair every hero with a full-bleed cinematic photograph \u2014 the photograph IS the depth.\n- Use the explicit 8px spacing ladder (`xxxs` through `super`) rather than ad-hoc px values.\n- Keep display weight at 500 \u2014 never bold.\n\n### Don't\n- Don't introduce a saturated brand color other than Rosso Corsa.\n- Don't use rounded or pill CTAs \u2014 sharp 0px corners are the brand button.\n- Don't bold display copy. The cinematic photography does the visual heavy-lifting.\n- Don't use Hypersail yellow outside the Hypersail sailing program context.\n- Don't use pure black canvas. The brand canvas is `{colors.canvas}` (#181818) \u2014 slightly warm.\n- Don't add drop shadow tiers. Photography + brightness-step elevation carry the depth.\n- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA color is what appears on actual product CTAs, not on injected modals.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 640px | Hero photograph crops vertically; hero h1 80\u219232px; feature card grid 1-up; nav hamburger; preowned listing 1-up. |\n| Tablet | 640\u20131024px | Hero h1 56px; feature card grid 2-up; preowned listing 2-up. |\n| Desktop | 1024\u20131280px | Full hero h1 80px; feature card grid 3-up; preowned listing 4-up. |\n| Wide | > 1280px | Editorial body content caps at 1280px; hero photography continues full-bleed. |\n\n### Touch Targets\n- Primary CTA at 48px height \u2014 at WCAG AAA (44 \u00D7 44).\n- Nav items render uppercase with 0.65px tracking, padded for an effective 48px tap area.\n\n### Collapsing Strategy\n- Top nav switches to hamburger below 768px.\n- Hero photograph reframes per breakpoint via art direction \u2014 desktop carries wide cinematic; mobile crops tighter or shifts to vertical.\n- Feature card grid: 4-up \u2192 3-up \u2192 2-up \u2192 1-up.\n- F1 driver cards: 2-up at desktop, 1-up at mobile.\n\n## Iteration Guide\n\n1. Focus on a single component at a time.\n2. CTAs default to `{rounded.none}` (0px sharp). Cards use `{rounded.none}` too. Pill is reserved for badges.\n3. Variants live as separate entries inside `components:`.\n4. Use `{token.refs}` everywhere \u2014 never inline hex.\n5. Hover state never documented.\n6. FerrariSans 500 for display, 400/700 for body. Uppercase + tracking on CTAs and nav.\n7. Rosso Corsa stays scarce \u2014 primary CTAs, Cavallino, race-position highlights only.\n8. Use the explicit 8px named spacing ladder.\n\n## Known Gaps\n\n- FerrariSans is a licensed typeface; Inter at weight 500 is the documented substitute.\n- Animation timings (hero parallax, livery band entrance, race position counter) out of scope.\n- In-product surfaces (preowned configurator, F1 telemetry overlays) only partially captured via marketing surfaces.\n- Form validation states beyond focus not visible on captured surfaces.\n- Hypersail yellow tokens are extracted but only appear in the Hypersail sailing program context \u2014 documented as scoped accents.\n";
+
+export { ferrariBrief };

package/dist/presets/_briefs/ferrari.js

@@ -0,0 +1,537 @@
+// src/presets/_briefs/ferrari.ts
+var ferrariBrief = `---
+version: alpha
+name: Ferrari
+description: A luxury-automotive brand whose marketing surfaces read as cinematic editorial. The base canvas is **near-black** (\`#181818\`) holding pure white display type; white-canvas bands appear only inside specific editorial contexts (preowned listings, pricing tables). The single brand voltage is **Rosso Corsa** (\`#da291c\`) \u2014 the iconic Ferrari racing red \u2014 used scarcely on primary CTAs, the Cavallino mark, and Formula 1 race-position highlights. Type runs **FerrariSans** at modest weights (display 500, body 400) \u2014 never bombastic. Spacing follows an explicit 8px token ladder (\`xxxs\` 4px through \`super\` 128px); generous editorial pacing throughout. The brand's strongest visual signature is the **full-bleed cinematic hero photograph** that fills the viewport top with car photography, model details, or trackside livery \u2014 followed by a tighter editorial body layout below.
+
+colors:
+  primary: "#da291c"
+  primary-active: "#b01e0a"
+  primary-hover: "#9d2211"
+  ink: "#ffffff"
+  body: "#969696"
+  body-strong: "#ffffff"
+  body-on-light: "#181818"
+  muted: "#666666"
+  muted-soft: "#8f8f8f"
+  hairline: "#303030"
+  hairline-on-light: "#d2d2d2"
+  hairline-soft: "#ebebeb"
+  canvas: "#181818"
+  canvas-elevated: "#303030"
+  canvas-light: "#ffffff"
+  surface-card: "#303030"
+  surface-soft-light: "#f7f7f7"
+  surface-strong-light: "#ebebeb"
+  on-primary: "#ffffff"
+  on-dark: "#ffffff"
+  on-light: "#181818"
+  accent-yellow-hypersail: "#fff200"
+  accent-yellow: "#f6e500"
+  semantic-info: "#4c98b9"
+  semantic-success: "#03904a"
+  semantic-warning: "#f13a2c"
+
+typography:
+  display-mega:
+    fontFamily: "'FerrariSans', -apple-system, system-ui, sans-serif"
+    fontSize: 80px
+    fontWeight: 500
+    lineHeight: 1.05
+    letterSpacing: -1.6px
+  display-xl:
+    fontFamily: "'FerrariSans', sans-serif"
+    fontSize: 56px
+    fontWeight: 500
+    lineHeight: 1.1
+    letterSpacing: -1.12px
+  display-lg:
+    fontFamily: "'FerrariSans', sans-serif"
+    fontSize: 36px
+    fontWeight: 500
+    lineHeight: 1.2
+    letterSpacing: -0.36px
+  display-md:
+    fontFamily: "'FerrariSans', sans-serif"
+    fontSize: 26px
+    fontWeight: 500
+    lineHeight: 1.5
+    letterSpacing: 0.195px
+  title-md:
+    fontFamily: "'FerrariSans', sans-serif"
+    fontSize: 18px
+    fontWeight: 700
+    lineHeight: 1.2
+    letterSpacing: 0
+  title-sm:
+    fontFamily: "'FerrariSans', sans-serif"
+    fontSize: 16px
+    fontWeight: 500
+    lineHeight: 1.4
+    letterSpacing: 0.08px
+  body-md:
+    fontFamily: "'FerrariSans', sans-serif"
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: 0
+  body-sm:
+    fontFamily: "'FerrariSans', sans-serif"
+    fontSize: 13px
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: 0
+  caption:
+    fontFamily: "'FerrariSans', sans-serif"
+    fontSize: 12px
+    fontWeight: 400
+    lineHeight: 1.4
+    letterSpacing: 0
+  caption-uppercase:
+    fontFamily: "'FerrariSans', sans-serif"
+    fontSize: 11px
+    fontWeight: 600
+    lineHeight: 1.4
+    letterSpacing: 1.1px
+    textTransform: uppercase
+  button:
+    fontFamily: "'FerrariSans', sans-serif"
+    fontSize: 14px
+    fontWeight: 700
+    lineHeight: 1.0
+    letterSpacing: 1.4px
+    textTransform: uppercase
+  nav-link:
+    fontFamily: "'FerrariSans', sans-serif"
+    fontSize: 13px
+    fontWeight: 600
+    lineHeight: 1.4
+    letterSpacing: 0.65px
+    textTransform: uppercase
+  number-display:
+    fontFamily: "'FerrariSans', sans-serif"
+    fontSize: 80px
+    fontWeight: 700
+    lineHeight: 1.0
+    letterSpacing: -1.6px
+
+rounded:
+  none: 0px
+  xs: 2px
+  sm: 4px
+  md: 6px
+  lg: 8px
+  xl: 12px
+  full: 9999px
+
+spacing:
+  xxxs: 4px
+  xxs: 8px
+  xs: 16px
+  sm: 24px
+  md: 32px
+  lg: 48px
+  xl: 64px
+  xxl: 96px
+  super: 128px
+
+components:
+  top-nav-on-dark:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.nav-link}"
+    height: 64px
+  top-nav-on-light:
+    backgroundColor: "{colors.canvas-light}"
+    textColor: "{colors.body-on-light}"
+    typography: "{typography.nav-link}"
+    height: 64px
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button}"
+    rounded: "{rounded.none}"
+    padding: 14px 32px
+    height: 48px
+  button-primary-active:
+    backgroundColor: "{colors.primary-active}"
+    textColor: "{colors.on-primary}"
+    rounded: "{rounded.none}"
+  button-outline-on-dark:
+    backgroundColor: transparent
+    textColor: "{colors.ink}"
+    typography: "{typography.button}"
+    rounded: "{rounded.none}"
+    padding: 13px 31px
+    height: 48px
+  button-outline-on-light:
+    backgroundColor: transparent
+    textColor: "{colors.body-on-light}"
+    typography: "{typography.button}"
+    rounded: "{rounded.none}"
+    padding: 13px 31px
+    height: 48px
+  button-tertiary-text:
+    backgroundColor: transparent
+    textColor: "{colors.ink}"
+    typography: "{typography.button}"
+  hero-band-cinema:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.display-mega}"
+    padding: 0
+  hero-band-light:
+    backgroundColor: "{colors.canvas-light}"
+    textColor: "{colors.body-on-light}"
+    typography: "{typography.display-xl}"
+    padding: 96px
+  feature-card-photo:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.title-md}"
+    rounded: "{rounded.none}"
+    padding: 0
+  feature-card-light:
+    backgroundColor: "{colors.canvas-light}"
+    textColor: "{colors.body-on-light}"
+    typography: "{typography.title-md}"
+    rounded: "{rounded.none}"
+    padding: 32px
+  livery-band:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.ink}"
+    typography: "{typography.display-lg}"
+    padding: 96px
+  preowned-listing-card:
+    backgroundColor: "{colors.canvas-light}"
+    textColor: "{colors.body-on-light}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.none}"
+    padding: 24px
+  spec-cell:
+    backgroundColor: transparent
+    textColor: "{colors.ink}"
+    typography: "{typography.number-display}"
+    padding: 24px 0
+  race-position-cell:
+    backgroundColor: transparent
+    textColor: "{colors.primary}"
+    typography: "{typography.number-display}"
+  race-calendar-row:
+    backgroundColor: transparent
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    padding: 16px 0
+  driver-card:
+    backgroundColor: "{colors.canvas-elevated}"
+    textColor: "{colors.ink}"
+    typography: "{typography.title-md}"
+    rounded: "{rounded.none}"
+    padding: 24px
+  text-input-on-dark:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.sm}"
+    padding: 14px 16px
+    height: 48px
+  text-input-on-light:
+    backgroundColor: "{colors.canvas-light}"
+    textColor: "{colors.body-on-light}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.sm}"
+    padding: 14px 16px
+    height: 48px
+  badge-pill:
+    backgroundColor: "{colors.canvas-elevated}"
+    textColor: "{colors.ink}"
+    typography: "{typography.caption-uppercase}"
+    rounded: "{rounded.full}"
+    padding: 4px 12px
+  cta-band-dark:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.display-lg}"
+    padding: 96px
+  newsletter-input-band:
+    backgroundColor: "{colors.canvas-elevated}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.sm}"
+    padding: 32px
+  footer-dark:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.body}"
+    typography: "{typography.body-sm}"
+    padding: 64px 48px
+  footer-link:
+    backgroundColor: transparent
+    textColor: "{colors.body}"
+    typography: "{typography.body-sm}"
+---
+
+## Overview
+
+Ferrari's marketing site reads as cinematic editorial \u2014 closer to a luxury-magazine spread than a typical car-OEM site. The base canvas is **near-black** (\`{colors.canvas}\` \u2014 #181818) holding pure white display type; white-canvas bands appear only inside specific editorial contexts (preowned listings, pricing tables, dealer surfaces). The single brand voltage is **Rosso Corsa** (\`{colors.primary}\` \u2014 #da291c), the iconic Ferrari racing red, used scarcely on primary CTAs, the Cavallino mark, and Formula 1 race-position highlights.
+
+Type runs **FerrariSans** as the single sans family at modest weights \u2014 display 500, body 400. CTA labels render in uppercase with generous tracking (1.1-1.4px). The brand never uses bold display copy.
+
+The brand's strongest visual signature is the **full-bleed cinematic hero photograph** \u2014 top-of-page imagery shows car photography, model details, or trackside livery without any chrome competing with it. Headlines float over the bottom of the photo or sit in a tight band beneath. Spacing follows the explicit 8px token ladder: \`xxxs\` 4 / \`xxs\` 8 / \`xs\` 16 / \`sm\` 24 / \`md\` 32 / \`lg\` 48 / \`xl\` 64 / \`xxl\` 96 / \`super\` 128.
+
+**Key Characteristics:**
+- Single accent: \`{colors.primary}\` (Rosso Corsa #da291c) for primary CTAs, the Cavallino, F1 race-position highlights. Used scarcely.
+- Near-black canvas (#181818) \u2014 never pure black. White-canvas bands only inside editorial contexts.
+- Single sans family: FerrariSans across every text role.
+- Display weight stays at 500 \u2014 never bold.
+- CTA labels render uppercase with 1.4px tracking.
+- Sharp \`{rounded.none}\` (0px) corners on every CTA, card, and band \u2014 luxury-automotive precision.
+- Full-bleed cinematic hero photography is the page chrome.
+- Explicit 8px spacing token ladder with named scale (xxxs through super).
+- Hairlines + photographic depth \u2014 no drop shadow tiers.
+
+## Colors
+
+### Brand & Accent
+- **Rosso Corsa** (\`{colors.primary}\` \u2014 #da291c): The iconic Ferrari racing red. Primary CTA fill, Cavallino mark, F1 driver-position highlights. Used scarcely.
+- **Rosso Corsa Active** (\`{colors.primary-active}\` \u2014 #b01e0a): Press state.
+- **Rosso Corsa Hover-darker** (\`{colors.primary-hover}\` \u2014 #9d2211): Documented for completeness; per the no-hover policy this is not used in preview HTML.
+- **Hypersail Yellow** (\`{colors.accent-yellow-hypersail}\` \u2014 #fff200) + **Yellow** (\`{colors.accent-yellow}\` \u2014 #f6e500): Sub-brand accents reserved for the Hypersail sailing program and the global focus-ring color. Not part of the main automotive palette.
+
+### Surface
+- **Canvas** (\`{colors.canvas}\` \u2014 #181818): Near-black page floor \u2014 never pure black, slight warmth.
+- **Canvas Elevated** (\`{colors.canvas-elevated}\` \u2014 #303030): Cards and panels on dark canvas.
+- **Canvas Light** (\`{colors.canvas-light}\` \u2014 #ffffff): White editorial bands (preowned listings, pricing).
+- **Surface Card** (\`{colors.surface-card}\` \u2014 #303030): Same as canvas-elevated \u2014 driver cards, livery photo plates.
+- **Surface Soft Light** (\`{colors.surface-soft-light}\` \u2014 #f7f7f7): Light editorial alternating band.
+- **Surface Strong Light** (\`{colors.surface-strong-light}\` \u2014 #ebebeb): Light-canvas dividers, badges.
+
+### Hairlines
+- **Hairline** (\`{colors.hairline}\` \u2014 #303030): 1px divider on dark \u2014 same hex as \`{colors.canvas-elevated}\`.
+- **Hairline On Light** (\`{colors.hairline-on-light}\` \u2014 #d2d2d2): 1px divider on light bands.
+- **Hairline Soft** (\`{colors.hairline-soft}\` \u2014 #ebebeb): Lighter divider.
+
+### Text
+- **Ink** (\`{colors.ink}\` \u2014 #ffffff): Display, body emphasis on dark.
+- **Body** (\`{colors.body}\` \u2014 #969696): Default running-text on dark.
+- **Body Strong** (\`{colors.body-strong}\` \u2014 #ffffff): Same as ink.
+- **Body On Light** (\`{colors.body-on-light}\` \u2014 #181818): Default text on light bands.
+- **Muted** (\`{colors.muted}\` \u2014 #666666): Sub-titles, captions on dark.
+- **Muted Soft** (\`{colors.muted-soft}\` \u2014 #8f8f8f): Disabled link text.
+- **On Primary** (\`{colors.on-primary}\` \u2014 #ffffff): White text on Rosso Corsa.
+
+### Semantic
+- **Info** (\`{colors.semantic-info}\` \u2014 #4c98b9): Info badges, callout backgrounds.
+- **Success** (\`{colors.semantic-success}\` \u2014 #03904a): Confirmation.
+- **Warning** (\`{colors.semantic-warning}\` \u2014 #f13a2c): Validation warnings.
+
+## Typography
+
+### Font Family
+**FerrariSans** is the licensed single sans family across every text role. Fallback: \`-apple-system, system-ui, sans-serif\`. No display/body family split.
+
+### Hierarchy
+
+| Token | Size | Weight | Line Height | Letter Spacing | Use |
+|---|---|---|---|---|---|
+| \`{typography.display-mega}\` | 80px | 500 | 1.05 | -1.6px | Homepage hero h1 |
+| \`{typography.display-xl}\` | 56px | 500 | 1.1 | -1.12px | Subsidiary heroes |
+| \`{typography.display-lg}\` | 36px | 500 | 1.2 | -0.36px | Section heads, livery band |
+| \`{typography.display-md}\` | 26px | 500 | 1.5 | 0.195px | Sub-section heads |
+| \`{typography.title-md}\` | 18px | 700 | 1.2 | 0 | Component titles |
+| \`{typography.title-sm}\` | 16px | 500 | 1.4 | 0.08px | List labels |
+| \`{typography.body-md}\` | 14px | 400 | 1.5 | 0 | Default body |
+| \`{typography.body-sm}\` | 13px | 400 | 1.5 | 0 | Footer body |
+| \`{typography.caption}\` | 12px | 400 | 1.4 | 0 | Photo captions |
+| \`{typography.caption-uppercase}\` | 11px | 600 | 1.4 | 1.1px | Section labels, badges |
+| \`{typography.button}\` | 14px | 700 | 1.0 | 1.4px (uppercase) | CTA pill labels |
+| \`{typography.nav-link}\` | 13px | 600 | 1.4 | 0.65px (uppercase) | Top-nav menu items |
+| \`{typography.number-display}\` | 80px | 700 | 1.0 | -1.6px | Race position highlights, spec values |
+
+### Principles
+- **Display weight stays at 500.** Editorial confidence, not bombastic. The cinematic photography is doing the visual heavy-lifting \u2014 type doesn't need to compete.
+- **CTA labels are uppercase with 1.4px tracking.** Luxury-precision feel.
+- **Nav labels are uppercase with 0.65px tracking.** Consistent with CTA voice.
+- **Negative letter-spacing on display only.** -0.36px to -1.6px on display sizes; body stays at 0.
+
+### Note on Font Substitutes
+FerrariSans is licensed. Open-source substitute: **Inter** at weight 500 with letter-spacing -1%, or **S\xF6hne** for closer humanist proportions.
+
+## Layout
+
+### Spacing System
+- **Base unit:** 4px.
+- **Tokens:** \`{spacing.xxxs}\` 4px \xB7 \`{spacing.xxs}\` 8px \xB7 \`{spacing.xs}\` 16px \xB7 \`{spacing.sm}\` 24px \xB7 \`{spacing.md}\` 32px \xB7 \`{spacing.lg}\` 48px \xB7 \`{spacing.xl}\` 64px \xB7 \`{spacing.xxl}\` 96px \xB7 \`{spacing.super}\` 128px.
+- **Section padding:** \`{spacing.xxl}\` (96px) for major bands; \`{spacing.super}\` (128px) reserved for hero band depth.
+
+### Grid & Container
+- Max content width: ~1280px on editorial bands. Hero photography goes full-bleed.
+- Editorial body: 12-column grid.
+- Feature card grids: 2-up at desktop for hero splits, 3-up for benefit grids, 4-up for preowned listing tiles.
+- Footer: 5-column at desktop.
+
+### Whitespace Philosophy
+Generous editorial pacing. Cinematic hero photography occupies generous viewport real-estate; body sections sit in tighter editorial layouts beneath. The canvas-light editorial bands (preowned, pricing) carry tighter density than the dark cinema bands.
+
+## Elevation & Depth
+
+The system uses **photographic depth + brightness-step** elevation. No drop shadows except a single soft-small \`{shadow.small}\` documented in extracted tokens.
+
+| Level | Treatment | Use |
+|---|---|---|
+| Flat (canvas) | \`{colors.canvas}\` (#181818) | Body bands, footer |
+| Card | \`{colors.canvas-elevated}\` (#303030) | Driver cards, livery plates |
+| Light band | \`{colors.canvas-light}\` (#ffffff) | Preowned listings, pricing |
+| Hairline border | 1px \`{colors.hairline}\` or \`{colors.hairline-on-light}\` | Card outlines, dividers |
+| Soft drop | \`0 4px 8px rgba(0,0,0,0.1)\` | Hovered cards (single shadow tier) |
+| Photographic | Full-bleed cinema imagery | Hero band, livery photographs |
+
+### Decorative Depth
+- **Full-bleed cinema photography** is the brand's primary depth treatment.
+- **Brand red gradient** (\`linear-gradient(180deg, #a00c01, #da291c 64%)\`): The Rosso Corsa gradient used inside accent bands and CTA hover states.
+- **Dark grey gradient** (\`linear-gradient(180deg, #3c3c3c, #030303 64%)\`): Atmospheric darken used at section transitions.
+
+## Shapes
+
+### Border Radius Scale
+
+| Token | Value | Use |
+|---|---|---|
+| \`{rounded.none}\` | 0px | Every CTA, card, band \u2014 dominant radius |
+| \`{rounded.xs}\` | 2px | Tight badges (rare) |
+| \`{rounded.sm}\` | 4px | Form inputs |
+| \`{rounded.md}\` | 6px | Compact cards (rare) |
+| \`{rounded.lg}\` | 8px | Mobile-only collapse cards |
+| \`{rounded.xl}\` | 12px | Modal/dialog corners (rare) |
+| \`{rounded.full}\` | 9999px | Avatar plates, badge pills |
+
+The radius vocabulary is **sharp by default**. Sharp 0px corners are the brand button shape \u2014 never rounded pills. Pill geometry is reserved for badge labels only.
+
+## Components
+
+### Top Navigation
+
+**\`top-nav-on-dark\`** \u2014 Default top nav on dark hero pages. Background \`{colors.canvas}\`, text \`{colors.ink}\`, height 64px. Layout: Cavallino mark left, primary horizontal menu (Models / F1 / Lifestyle / Owners / Preowned), language picker + utilities right. Menu items render uppercase with 0.65px tracking.
+
+**\`top-nav-on-light\`** \u2014 White-canvas variant for editorial light bands.
+
+### Buttons
+
+**\`button-primary\`** \u2014 The signature Rosso Corsa CTA. Background \`{colors.primary}\`, text \`{colors.on-primary}\`, type \`{typography.button}\` (14px / 700 / 1.4px tracking, uppercase), padding 14px \xD7 32px, height 48px, **rounded \`{rounded.none}\` (0px \u2014 sharp corners)**.
+
+**\`button-primary-active\`** \u2014 Press state. Background \`{colors.primary-active}\`.
+
+**\`button-outline-on-dark\`** \u2014 Transparent with 1px white border. Background transparent, text \`{colors.ink}\`, 1px white border, same sharp 0px corners.
+
+**\`button-outline-on-light\`** \u2014 Transparent with 1px ink border on light bands.
+
+**\`button-tertiary-text\`** \u2014 Inline text link, uppercase tracking.
+
+### Hero Bands
+
+**\`hero-band-cinema\`** \u2014 Full-bleed cinematic photograph. Background \`{colors.canvas}\` underneath, but the photo fills the viewport. Display headline floats over the bottom of the photo or sits in a tight band beneath, in \`{typography.display-mega}\` (80px / 500 / -1.6px). One primary CTA + one outline CTA. Zero padding \u2014 the photo fills edge-to-edge.
+
+**\`hero-band-light\`** \u2014 White-canvas variant for editorial bands. Background \`{colors.canvas-light}\`, text \`{colors.body-on-light}\`, padding 96px.
+
+### Cards
+
+**\`feature-card-photo\`** \u2014 Image-first card. Background \`{colors.canvas}\`, text \`{colors.ink}\`, rounded \`{rounded.none}\`. Image fills the top edge-to-edge; title + body sit beneath in tight typography.
+
+**\`feature-card-light\`** \u2014 White-canvas variant. Background \`{colors.canvas-light}\`, text \`{colors.body-on-light}\`, rounded \`{rounded.none}\`, padding 32px.
+
+**\`driver-card\`** \u2014 F1 driver portrait card. Background \`{colors.canvas-elevated}\`, text \`{colors.ink}\`, rounded \`{rounded.none}\`, padding 24px. Layout: driver portrait + name + race number + team badge.
+
+### Editorial Surfaces
+
+**\`livery-band\`** \u2014 A full-width Rosso Corsa accent band. Background \`{colors.primary}\`, text \`{colors.ink}\`, type \`{typography.display-lg}\`, 96px padding. Used as a standout livery callout between dark editorial bands.
+
+**\`preowned-listing-card\`** \u2014 Used in the preowned Ferrari listing grid. Background \`{colors.canvas-light}\`, text \`{colors.body-on-light}\`, rounded \`{rounded.none}\`, padding 24px. Layout: car photo top + model name + year/mileage + price.
+
+### Spec & Race Surfaces
+
+**\`spec-cell\`** \u2014 Technical spec callout. Transparent background, value in \`{typography.number-display}\` (80px / 700 / -1.6px white), label below in \`{typography.caption-uppercase}\`.
+
+**\`race-position-cell\`** \u2014 F1 driver finishing position. Same number-display geometry but text in \`{colors.primary}\` Rosso Corsa for the brand's racing identity.
+
+**\`race-calendar-row\`** \u2014 Hairline-divided row in the F1 race calendar. Layout: date column left, race name + circuit middle, results column right.
+
+### Forms & Tags
+
+**\`text-input-on-dark\`** \u2014 Background \`{colors.canvas}\`, text \`{colors.ink}\`, rounded \`{rounded.sm}\` (4px), padding 14px \xD7 16px, height 48px, 1px \`{colors.hairline}\` border.
+
+**\`text-input-on-light\`** \u2014 White-canvas variant.
+
+**\`badge-pill\`** \u2014 Small uppercase pill. Background \`{colors.canvas-elevated}\`, text \`{colors.ink}\`, type \`{typography.caption-uppercase}\` (11px / 600 / 1.1px tracking, uppercase), rounded \`{rounded.full}\` (9999px), padding 4px \xD7 12px. The only place pill geometry is used.
+
+### Newsletter / CTA / Footer
+
+**\`newsletter-input-band\`** \u2014 Newsletter signup band. Background \`{colors.canvas-elevated}\`, padding 32px, rounded \`{rounded.sm}\`. Holds an inline email input + primary CTA.
+
+**\`cta-band-dark\`** \u2014 Pre-footer band. Background \`{colors.canvas}\`, centered display headline in \`{typography.display-lg}\`, single Rosso Corsa CTA. 96px padding.
+
+**\`footer-dark\`** \u2014 Closing dark footer. Background \`{colors.canvas}\`, text \`{colors.body}\`. 5-column link list. 64\xD748px padding.
+
+**\`footer-link\`** \u2014 Background transparent, text \`{colors.body}\`, type \`{typography.body-sm}\`.
+
+## Do's and Don'ts
+
+### Do
+- Reserve \`{colors.primary}\` (Rosso Corsa) for primary CTAs, the Cavallino mark, and F1 race-position highlights.
+- Set every CTA at \`{rounded.none}\` (0px sharp corners) \u2014 the brand's signature precision.
+- Render CTA labels in uppercase with 1.4px tracking via \`{typography.button}\`.
+- Pair every hero with a full-bleed cinematic photograph \u2014 the photograph IS the depth.
+- Use the explicit 8px spacing ladder (\`xxxs\` through \`super\`) rather than ad-hoc px values.
+- Keep display weight at 500 \u2014 never bold.
+
+### Don't
+- Don't introduce a saturated brand color other than Rosso Corsa.
+- Don't use rounded or pill CTAs \u2014 sharp 0px corners are the brand button.
+- Don't bold display copy. The cinematic photography does the visual heavy-lifting.
+- Don't use Hypersail yellow outside the Hypersail sailing program context.
+- Don't use pure black canvas. The brand canvas is \`{colors.canvas}\` (#181818) \u2014 slightly warm.
+- Don't add drop shadow tiers. Photography + brightness-step elevation carry the depth.
+- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA color is what appears on actual product CTAs, not on injected modals.
+
+## Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|---|---|---|
+| Mobile | < 640px | Hero photograph crops vertically; hero h1 80\u219232px; feature card grid 1-up; nav hamburger; preowned listing 1-up. |
+| Tablet | 640\u20131024px | Hero h1 56px; feature card grid 2-up; preowned listing 2-up. |
+| Desktop | 1024\u20131280px | Full hero h1 80px; feature card grid 3-up; preowned listing 4-up. |
+| Wide | > 1280px | Editorial body content caps at 1280px; hero photography continues full-bleed. |
+
+### Touch Targets
+- Primary CTA at 48px height \u2014 at WCAG AAA (44 \xD7 44).
+- Nav items render uppercase with 0.65px tracking, padded for an effective 48px tap area.
+
+### Collapsing Strategy
+- Top nav switches to hamburger below 768px.
+- Hero photograph reframes per breakpoint via art direction \u2014 desktop carries wide cinematic; mobile crops tighter or shifts to vertical.
+- Feature card grid: 4-up \u2192 3-up \u2192 2-up \u2192 1-up.
+- F1 driver cards: 2-up at desktop, 1-up at mobile.
+
+## Iteration Guide
+
+1. Focus on a single component at a time.
+2. CTAs default to \`{rounded.none}\` (0px sharp). Cards use \`{rounded.none}\` too. Pill is reserved for badges.
+3. Variants live as separate entries inside \`components:\`.
+4. Use \`{token.refs}\` everywhere \u2014 never inline hex.
+5. Hover state never documented.
+6. FerrariSans 500 for display, 400/700 for body. Uppercase + tracking on CTAs and nav.
+7. Rosso Corsa stays scarce \u2014 primary CTAs, Cavallino, race-position highlights only.
+8. Use the explicit 8px named spacing ladder.
+
+## Known Gaps
+
+- FerrariSans is a licensed typeface; Inter at weight 500 is the documented substitute.
+- Animation timings (hero parallax, livery band entrance, race position counter) out of scope.
+- In-product surfaces (preowned configurator, F1 telemetry overlays) only partially captured via marketing surfaces.
+- Form validation states beyond focus not visible on captured surfaces.
+- Hypersail yellow tokens are extracted but only appear in the Hypersail sailing program context \u2014 documented as scoped accents.
+`;
+export {
+  ferrariBrief
+};
+//# sourceMappingURL=ferrari.js.map