@hex-core/themes 0.1.1 → 0.2.1

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/bmw.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const bmwBrief = `---\nversion: alpha\nname: BMW\ndescription: BMW's corporate site — distinct from BMW M's motorsport-bombastic variant, this is a measured and settled corporate-automotive interface. On a light (cream-tinted white) canvas, BMW corporate blue (#1c69d4) carries every primary CTA; dark navy hero bands frame model photography. BMW Type Next Latin sets the entire hierarchy on two weights — heavy 700 display and Light 300 body. Configuration and reservation flows ride a card-based 4-up grid, where each card holds a model render, a name, and a \"Learn More\" link.\n\ncolors:\n  primary: \"#1c69d4\"\n  primary-active: \"#0653b6\"\n  primary-disabled: \"#d6d6d6\"\n  ink: \"#262626\"\n  body: \"#3c3c3c\"\n  body-strong: \"#1a1a1a\"\n  muted: \"#6b6b6b\"\n  muted-soft: \"#9a9a9a\"\n  hairline: \"#e6e6e6\"\n  hairline-strong: \"#cccccc\"\n  canvas: \"#ffffff\"\n  surface-soft: \"#f7f7f7\"\n  surface-card: \"#fafafa\"\n  surface-strong: \"#ebebeb\"\n  surface-dark: \"#1a2129\"\n  surface-dark-elevated: \"#262e38\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  on-dark-soft: \"#bbbbbb\"\n  m-blue-light: \"#0066b1\"\n  m-blue-dark: \"#1c69d4\"\n  m-red: \"#e22718\"\n  success: \"#22c55e\"\n  warning: \"#f59e0b\"\n  error: \"#dc2626\"\n\ntypography:\n  display-xl:\n    fontFamily: \"'BMW Type Next Latin', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n    fontSize: 64px\n    fontWeight: 700\n    lineHeight: 1.05\n    letterSpacing: 0\n  display-lg:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 48px\n    fontWeight: 700\n    lineHeight: 1.1\n    letterSpacing: 0\n  display-md:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 32px\n    fontWeight: 700\n    lineHeight: 1.15\n    letterSpacing: 0\n  display-sm:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 24px\n    fontWeight: 700\n    lineHeight: 1.25\n    letterSpacing: 0\n  title-lg:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 20px\n    fontWeight: 700\n    lineHeight: 1.3\n    letterSpacing: 0\n  title-md:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 18px\n    fontWeight: 700\n    lineHeight: 1.4\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 16px\n    fontWeight: 700\n    lineHeight: 1.4\n    letterSpacing: 0\n  body-md:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 16px\n    fontWeight: 300\n    lineHeight: 1.55\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 14px\n    fontWeight: 300\n    lineHeight: 1.55\n    letterSpacing: 0\n  caption:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 12px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0.5px\n  label-uppercase:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 13px\n    fontWeight: 700\n    lineHeight: 1.3\n    letterSpacing: 1.5px\n    textTransform: uppercase\n  button:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 14px\n    fontWeight: 700\n    lineHeight: 1.0\n    letterSpacing: 0.5px\n  nav-link:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0.3px\n\nrounded:\n  none: 0px\n  xs: 2px\n  sm: 4px\n  md: 8px\n  lg: 12px\n  pill: 9999px\n  full: 9999px\n\nspacing:\n  xxs: 4px\n  xs: 8px\n  sm: 12px\n  md: 16px\n  lg: 24px\n  xl: 32px\n  xxl: 48px\n  section: 80px\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.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-primary-disabled:\n    backgroundColor: \"{colors.primary-disabled}\"\n    textColor: \"{colors.muted}\"\n    rounded: \"{rounded.none}\"\n  button-secondary:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 13px 31px\n    height: 48px\n  button-secondary-on-dark:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 13px 31px\n  button-text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.label-uppercase}\"\n  text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n  hero-band-dark:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-xl}\"\n    padding: 80px\n  hero-photo-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-lg}\"\n    padding: 80px\n  model-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  model-card-photo:\n    backgroundColor: \"{colors.surface-card}\"\n    rounded: \"{rounded.none}\"\n  feature-photo-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  spec-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-sm}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  inventory-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-sm}\"\n    rounded: \"{rounded.none}\"\n    padding: 16px\n  filter-chip:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption}\"\n    rounded: \"{rounded.none}\"\n    padding: 8px 14px\n  filter-chip-active:\n    backgroundColor: \"{colors.ink}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.none}\"\n  configurator-option-tile:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 16px 24px\n  configurator-option-tile-selected:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.none}\"\n    padding: 15px 23px\n  text-input:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 14px 16px\n    height: 48px\n  cookie-consent-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  category-tab:\n    backgroundColor: transparent\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.label-uppercase}\"\n    rounded: \"{rounded.none}\"\n  category-tab-active:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.label-uppercase}\"\n    rounded: \"{rounded.none}\"\n  m-stripe-divider:\n    backgroundColor: transparent\n    rounded: \"{rounded.none}\"\n  cta-band-photo:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-md}\"\n    padding: 80px\n  footer:\n    backgroundColor: \"{colors.surface-soft}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px\n---\n\n## Overview\n\nBMW's corporate site carries a far more **measured, corporate-automotive** interface than its motorsport-bombastic cousin BMW M. The atmosphere is light: \\`{colors.canvas}\\` (#ffffff) is the base surface, \\`{colors.surface-card}\\` (#fafafa) carries the soft-grey card plates, and dark navy \\`{colors.surface-dark}\\` (#1a2129) appears only inside hero bands — one per page, framing the lead model render.\n\nType runs BMW's licensed **BMW Type Next Latin** at two weights: heavy 700 (display + button + nav) and Light 300 (body + secondary copy). That contrast — heavy display next to thin paragraph — is the editorial signature, channeling the brand's \"European-engineered\" voice. Weight 500 is deliberately absent; weight 400 only appears on caption and nav-link in neutral utility contexts.\n\nThe brand action color, **BMW corporate blue** (\\`{colors.primary}\\` — #1c69d4), works alone across every primary CTA — buttons are **rectangular, 0px corner**, with white type. The site rotates a blue-button + dark-navy-hero combination across page rhythm. The M tricolor stripe (\\`{colors.m-blue-light}\\` → \\`{colors.m-blue-dark}\\` → \\`{colors.m-red}\\`) only appears in motorsport contexts and as M-model badges/dividers — never in the corporate site's main language.\n\nThe configuration and reservation flows add a dealer-side inventory UI on top of the same system — filter chips, model cards, price tables — but typography and color stay identical; only density goes up.\n\n**Key Characteristics:**\n- Light \\`{colors.canvas}\\` is the base surface; dark navy \\`{colors.surface-dark}\\` appears only inside hero bands — page rhythm relies on contrast.\n- BMW corporate blue (\\`{colors.primary}\\` — #1c69d4) acts as the single primary action color.\n- BMW Type Next Latin: weight 700 display against weight 300 body is the signature.\n- Buttons are **rectangular, 0px radius** — corporate dialect, distinct from M's sportier radii.\n- Model cards run as 4-up or 5-up grids with no hairline border or only minimal border — just white plate + photo + title.\n- Photography (model renders) sits in environment, no shadow — depth comes entirely from color-block contrast.\n- M tricolor stripe appears only in M-model contexts — not part of the corporate language.\n- Section rhythm holds at \\`{spacing.section}\\` (80px) for every major band.\n\n## Colors\n\n### Brand & Accent\n- **BMW Blue (Primary)** (\\`{colors.primary}\\` — #1c69d4): The single brand action color. All primary CTAs, \"Learn More\" link prefixes (blue text), nav-link active state. Press shifts to \\`{colors.primary-active}\\` (#0653b6).\n- **M Blue Light** (\\`{colors.m-blue-light}\\` — #0066b1) + **M Blue Dark** (\\`{colors.m-blue-dark}\\` — #1c69d4) + **M Red** (\\`{colors.m-red}\\` — #e22718): The M tricolor stripe — appears on the corporate site only on M-model pages and the \"M\" badge. Never as CTA colors.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #ffffff): The default page surface.\n- **Surface Soft** (\\`{colors.surface-soft}\\` — #f7f7f7): Soft grey for the footer and sub-navigation bands.\n- **Surface Card** (\\`{colors.surface-card}\\` — #fafafa): The light plate behind a model card's photo block.\n- **Surface Strong** (\\`{colors.surface-strong}\\` — #ebebeb): A slightly heavier grey used as a section divider.\n- **Surface Dark** (\\`{colors.surface-dark}\\` — #1a2129): Dark navy for hero bands and large dark CTAs. Not pure black — carries a warm undertone.\n- **Surface Dark Elevated** (\\`{colors.surface-dark-elevated}\\` — #262e38): One step lighter, used for nested cards on top of the dark hero.\n\n### Hairlines\n- **Hairline** (\\`{colors.hairline}\\` — #e6e6e6): The 1px divider — input outline, configurator card outline, table separator.\n- **Hairline Strong** (\\`{colors.hairline-strong}\\` — #cccccc): A more visible 1px outline — disabled secondary buttons, emphasized table border.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #262626): All display and primary text. Not pure black — soft against photography.\n- **Body** (\\`{colors.body}\\` — #3c3c3c): Default running text.\n- **Body Strong** (\\`{colors.body-strong}\\` — #1a1a1a): Emphasized paragraphs and lead text.\n- **Muted** (\\`{colors.muted}\\` — #6b6b6b): Footer links, breadcrumbs, captions.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #9a9a9a): Disabled text, fine-print legal.\n- **On Primary** (\\`{colors.on-primary}\\` — #ffffff): White text on a blue button.\n- **On Dark** (\\`{colors.on-dark}\\` — #ffffff): White text on a dark hero band.\n- **On Dark Soft** (\\`{colors.on-dark-soft}\\` — #bbbbbb): A slightly muted white for secondary text on dark bands.\n\n### Semantic\n- **Success** (\\`{colors.success}\\` — #22c55e): Confirmation messages and \"available\" indicators.\n- **Warning** (\\`{colors.warning}\\` — #f59e0b): Warning callouts.\n- **Error** (\\`{colors.error}\\` — #dc2626): Validation errors.\n\n## Typography\n\n### Font Family\nThe system runs **BMW Type Next Latin** in two cuts: regular (display + UI labels) and **BMW Type Next Latin Light** (body + secondary copy). Fallback stack: \\`system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif\\`.\n\nThe display/body split is functional:\n- BMW Type Next Latin (700) → display headlines, button labels, nav links\n- BMW Type Next Latin Light (300) → paragraphs, descriptive copy\n- BMW Type Next Latin (400) → caption, neutral nav-link contexts\n\nThis three-way split mirrors BMW M's — corporate and the M sub-brand share the same typographic DNA; only the weight/size ratios differ.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-xl}\\` | 64px | 700 | 1.05 | 0 | Hero h1 (\"iX3\", model name) |\n| \\`{typography.display-lg}\\` | 48px | 700 | 1.1 | 0 | Section heads |\n| \\`{typography.display-md}\\` | 32px | 700 | 1.15 | 0 | Sub-section heads |\n| \\`{typography.display-sm}\\` | 24px | 700 | 1.25 | 0 | CTA-band headlines |\n| \\`{typography.title-lg}\\` | 20px | 700 | 1.3 | 0 | Card group titles |\n| \\`{typography.title-md}\\` | 18px | 700 | 1.4 | 0 | Model card title, intro paragraphs |\n| \\`{typography.title-sm}\\` | 16px | 700 | 1.4 | 0 | Inventory card title, list label |\n| \\`{typography.body-md}\\` | 16px | 300 (Light) | 1.55 | 0 | Default body — BMW Type Next Latin Light |\n| \\`{typography.body-sm}\\` | 14px | 300 (Light) | 1.55 | 0 | Footer body, fine-print |\n| \\`{typography.caption}\\` | 12px | 400 | 1.4 | 0.5px | Photo captions, meta |\n| \\`{typography.label-uppercase}\\` | 13px | 700 | 1.3 | 1.5px | \"LEARN MORE\" inline links, category tabs |\n| \\`{typography.button}\\` | 14px | 700 | 1.0 | 0.5px | Standard CTA button label |\n| \\`{typography.nav-link}\\` | 14px | 400 | 1.4 | 0.3px | Top-nav menu items |\n\n### Principles\n- The **700/300 contrast** is the editorial signature. Weight 500 is absent from the system.\n- **No negative letter-spacing** — BMW Type Next Latin works on a wide body, so tracking stays at default. Apple/Cal.com-style tightening reads off-brand here.\n- **UPPERCASE inline links** — \"LEARN MORE\"-style CTAs run uppercase with 1.5px tracking. The \"machined precision\" voice.\n- **Weight 400 lives in a narrow lane** — only caption and nav-link, both neutral utility roles.\n\n### Note on Font Substitutes\nBMW Type Next Latin is a licensed BMW typeface. Open-source alternatives:\n- **Inter** (variable) — close match at weight 700/300. Leave letter-spacing at 0.0em.\n- **Saira Condensed** — for a slightly more compressed BMW Type feel.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 8px.\n- **Tokens:** \\`{spacing.xxs}\\` 4px · \\`{spacing.xs}\\` 8px · \\`{spacing.sm}\\` 12px · \\`{spacing.md}\\` 16px · \\`{spacing.lg}\\` 24px · \\`{spacing.xl}\\` 32px · \\`{spacing.xxl}\\` 48px · \\`{spacing.section}\\` 80px.\n- **Section padding:** \\`{spacing.section}\\` (80px) for every major editorial band.\n- **Card internal padding:** \\`{spacing.lg}\\` (24px) for model and feature cards.\n\n### Grid & Container\n- **Max content width:** ~1440px center-aligned.\n- **Editorial body:** A single 12-column grid.\n- **Model card grids:** 4-up or 5-up at desktop, 2-up at tablet, 1-up on mobile.\n- **Configurator inventory grids:** 3-up filter row + 4-up vehicle cards, dense layout.\n\n### Whitespace Philosophy\nBMW's whitespace strategy is tighter than BMW M's motorsport-aerated grenadier — the corporate side is more utility-driven. Section rhythm is 80px (not M's 96px). Card padding is 24px (not M's 32px). The page is denser, more dealership-functional.\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat | No shadow, no border | Body, top nav, footer, hero bands |\n| Soft hairline | 1px \\`{colors.hairline}\\` border | Configurator option tile, table divider |\n| Card surface | \\`{colors.surface-card}\\` background — no shadow | Model card photo plate |\n| Photographic | Edge-to-edge photography | Hero band, model renders |\n\nThe system never uses a drop shadow. Depth comes entirely from (a) color-block contrast (light canvas vs dark hero) and (b) photographic subject + lighting.\n\n### Decorative Depth\n- **\\`m-stripe-divider\\`** — a 4px-tall horizontal tricolor stripe (\\`{colors.m-blue-light}\\` → \\`{colors.m-blue-dark}\\` → \\`{colors.m-red}\\`). Only in M-model contexts, motorsport badges, or as an M-related section divider. Not part of the main corporate flow.\n- **Photographic depth** — full-bleed vehicle photography (lighting + subject) does the work chrome would otherwise do.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.none}\\` | 0px | Every button, card, input, configurator chip — the dominant radius |\n| \\`{rounded.xs}\\` | 2px | Very small badges, very rare |\n| \\`{rounded.sm}\\` | 4px | Small inline button (rare) |\n| \\`{rounded.md}\\` | 8px | Mobile-only collapse cards (rare) |\n| \\`{rounded.lg}\\` | 12px | Very rare — modal/dialog corners |\n| \\`{rounded.pill}\\` | 9999px | Filter chips in some contexts (rare) |\n| \\`{rounded.full}\\` | 9999px / 50% | Avatar, circular icon button |\n\nThe radius hierarchy is binary: **rectangular for everything, circular only for icon buttons.** A clear departure from the soft-cornered SaaS dialect of Apple or Cal.com — closer to BMW corporate-automotive's \"engineered precision\" voice.\n\n### Photography Geometry\n- Hero photography is full-bleed at 16:9 or 21:9 cinematic ratio.\n- Model card photos sit at 16:10, edge-to-edge with \\`{rounded.none}\\` corners.\n- Configurator vehicle renders sit on a white studio background, full silhouette visible.\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — A white sticky nav bar pinned to the top of the page. 64px tall, \\`{colors.canvas}\\` background. Left: BMW circular badge logo; center: primary horizontal menu (Models, Next Generation, Pre-Owned, Dealers, Test Drive); right: cart icon, language picker, profile. Menu items render in \\`{typography.nav-link}\\` (14px / 400 / 0.3px tracking).\n\n### Buttons\n\n**\\`button-primary\\`** — The signature primary CTA. Background \\`{colors.primary}\\` (BMW Blue #1c69d4), text \\`{colors.on-primary}\\`, type \\`{typography.button}\\` (BMW Type Next Latin 14px / 700 / 0.5px tracking), padding 14px × 32px, height 48px, rounded \\`{rounded.none}\\` (0px — rectangular). Press state: \\`button-primary-active\\` shifts to \\`{colors.primary-active}\\`.\n\n**\\`button-secondary\\`** — A white button with a hairline outline. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, 1px \\`{colors.hairline-strong}\\` border, same padding + height + radius.\n\n**\\`button-secondary-on-dark\\`** — Used over a dark hero band. Background transparent, text \\`{colors.on-dark}\\`, 1px \\`{colors.on-dark}\\` border, same rectangular shape.\n\n**\\`button-text-link\\`** — An inline UPPERCASE letter-spaced link. No background, text \\`{colors.ink}\\`, type \\`{typography.label-uppercase}\\` (13px / 700 / 1.5px tracking). Reads as \"LEARN MORE\", terminated by a \\`›\\` chevron.\n\n**\\`text-link\\`** — An inline link inside body copy. \\`{colors.ink}\\` text, no underline by default; underlines per context.\n\n### Cards & Containers\n\n**\\`hero-band-dark\\`** — Full-width dark navy hero. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`, vertical padding \\`{spacing.section}\\` (80px). Centered: model name in \\`{typography.display-xl}\\` (64px / 700) + sub-headline + vehicle render (right-aligned or below). A single \\`{component.button-primary}\\` (blue) or \\`{component.button-secondary-on-dark}\\`.\n\n**\\`hero-photo-band\\`** — A light-canvas model showcase band. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`. The vehicle render takes the wide area; right or below, a headline + two link CTAs + sub-tagline.\n\n**\\`model-card\\`** — Used in 4-up or 5-up model card grids on the homepage (\"BMW iX3\", \"BMW iX\", \"BMW 5 Series\"). Background \\`{colors.canvas}\\`, rounded \\`{rounded.none}\\`, padding \\`{spacing.lg}\\` (24px). Contents: model render at the top (\\`{component.model-card-photo}\\` on \\`{colors.surface-card}\\`), model name in \\`{typography.title-md}\\` (18px / 700) below, a one-line tagline in \\`{typography.body-sm}\\` (14px / 300), and a \\`{component.button-text-link}\\` (\"LEARN MORE ›\").\n\n**\\`model-card-photo\\`** — The card's photo plate. Background \\`{colors.surface-card}\\` (#fafafa — soft grey), rounded \\`{rounded.none}\\`, vehicle render in full silhouette. Zero padding — the photo runs edge-to-edge.\n\n**\\`feature-photo-card\\`** — A feature/lifestyle card. Background \\`{colors.canvas}\\`, padding \\`{spacing.lg}\\`. 16:9 photo at the top, \\`{typography.title-md}\\` headline + body excerpt below.\n\n**\\`spec-cell\\`** — A technical spec cell (model detail page). Transparent background, separated by hairline dividers. Value on top (\\`{typography.display-sm}\\` 24px / 700), label below (\\`{typography.label-uppercase}\\`).\n\n### Inventory & Configurator\n\n**\\`inventory-card\\`** — One card per vehicle on the dealer inventory page. Background \\`{colors.canvas}\\`, padding \\`{spacing.md}\\` (16px), rounded \\`{rounded.none}\\`. Vehicle photo on top, model + variant name + price + \"View\" link below.\n\n**\\`filter-chip\\`** + **\\`filter-chip-active\\`** — Inventory filter chips (model, year, price range). Inactive: background \\`{colors.canvas}\\`, 1px \\`{colors.hairline-strong}\\` border, text \\`{colors.ink}\\`, type \\`{typography.caption}\\`. Active: background \\`{colors.ink}\\`, text \\`{colors.on-dark}\\`. Padding 8px × 14px, radius \\`{rounded.none}\\`.\n\n**\\`configurator-option-tile\\`** + **\\`configurator-option-tile-selected\\`** — Configurator selection cell (color, wheels, upholstery). Inactive: background \\`{colors.canvas}\\`, 1px hairline. Selected: 2px \\`{colors.primary}\\` border. Padding 16px × 24px, radius \\`{rounded.none}\\`.\n\n### Inputs & Forms\n\n**\\`text-input\\`** — Standard text input. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, type \\`{typography.body-md}\\`, rounded \\`{rounded.none}\\` (0px), padding 14px × 16px, height 48px, 1px hairline border. On focus, the border thickens to ink.\n\n**\\`cookie-consent-card\\`** — Cookie banner. Background \\`{colors.canvas}\\`, 1px hairline, padding \\`{spacing.lg}\\` (24px), \\`{typography.body-sm}\\` (14px / 300 — Light even in legal copy).\n\n### Tabs / Tags\n\n**\\`category-tab\\`** + **\\`category-tab-active\\`** — Category sub-nav. Inactive: transparent + \\`{colors.muted}\\` UPPERCASE label. Active: transparent + \\`{colors.ink}\\` UPPERCASE label + 2px ink underline. 12px vertical padding, no horizontal radius.\n\n### Brand Signature\n\n**\\`m-stripe-divider\\`** — A 4px-tall horizontal tricolor stripe (\\`{colors.m-blue-light}\\` → \\`{colors.m-blue-dark}\\` → \\`{colors.m-red}\\`). Only in M-model contexts, motorsport badges, or as an M-related section divider. Absent from the corporate main flow; on M-model detail pages and the M Performance badge it plays an inline divider role.\n\n### CTA / Footer\n\n**\\`cta-band-photo\\`** — A pre-footer \"Discover the New iX3\"-style band. Background \\`{colors.surface-dark}\\` with a full-bleed vehicle photo. Centered headline in \\`{typography.display-md}\\` (32px / 700) + a single \\`{component.button-secondary-on-dark}\\`. 80px padding.\n\n**\\`footer\\`** — The closing soft-grey footer. Background \\`{colors.surface-soft}\\` (#f7f7f7 — not pure white — soft grey), text \\`{colors.body}\\`. A 4-column link list: Models / Services / Dealers / About. Vertical padding 64px. Below, a copyright line in \\`{typography.body-sm}\\` with \\`{colors.muted}\\`.\n\n## Do's and Don'ts\n\n### Do\n- Sit every page on \\`{colors.canvas}\\` (pure white); reserve \\`{colors.surface-dark}\\` for hero bands only.\n- Pair primary CTAs with \\`{colors.primary}\\` (BMW Blue) + \\`{colors.on-primary}\\` white text + \\`{rounded.none}\\` 0px corners — the corporate signature.\n- Set display headlines in BMW Type Next Latin 700 and body in Light 300. The contrast is non-negotiable.\n- Use UPPERCASE letter-spaced links like \"LEARN MORE\" as inline CTAs.\n- Place the model card photo on \\`{colors.surface-card}\\` with the title beneath — the standard BMW corporate pattern.\n- Hold section rhythm at \\`{spacing.section}\\` (80px) — tighter than BMW M's 96px.\n- Reserve the M tricolor stripe for M-model contexts and motorsport dividers.\n\n### Don't\n- Don't add a brand color other than blue — BMW Blue is the only primary action color.\n- Don't use pill or rounded buttons — \\`{rounded.none}\\` (0px) rectangular IS the brand button.\n- Don't drop display weight to 500 — the system uses 700 / 400 / 300; 500 is absent.\n- Don't bold body type — Light 300 is the BMW corporate editorial voice.\n- Don't add drop shadows to cards — depth comes from photo + color-block contrast.\n- Don't repeat the same surface mode across two consecutive bands — light → dark hero → light → light feature → dark CTA → light footer rotation is required.\n- Don't use the M tricolor stripe as a CTA fill — divider/accent role only.\n- Don't mix languages in a single page — UI language must stay consistent.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 768px | Hamburger nav; hero h1 64→40px; model card grid 1-up; configurator filter chips 2-up; footer 4 col → 1 col |\n| Tablet | 768–1024px | Top nav narrows, secondary menu hides under \"More\"; model card 2-up; inventory 2-up |\n| Desktop | 1024–1440px | Full top-nav; 4-up or 5-up model card grid; inventory 3-up; full configurator UI |\n| Wide | > 1440px | Same as desktop, content fixed at 1440px; gutters absorb the rest |\n\n### Touch Targets\n- \\`{component.button-primary}\\` minimum 48 × 48px — above WCAG AAA (44 × 44).\n- \\`{component.text-input}\\` height 48px.\n- Category tabs run with 12px vertical padding, giving an effective tap area > 44px.\n\n### Collapsing Strategy\n- The top nav collapses to a hamburger below 768px; the menu opens as a full-screen sheet.\n- The hero band's internal layout drops to a single column.\n- Model card grid 4-up/5-up → 2-up → 1-up.\n- The configurator filter chip row scrolls horizontally on mobile.\n- The M tricolor stripe stays at 4px height across every breakpoint.\n\n### Image Behavior\n- Model renders scale at every breakpoint while preserving native aspect ratios.\n- Hero photography may shift to a more vertical crop on mobile (art direction).\n- Inventory vehicle photos may move from 16:9 to 4:3 on mobile.\n\n## Iteration Guide\n\n1. Focus on a single component. Reference its YAML key directly (\\`{component.model-card}\\`, \\`{component.button-primary}\\`).\n2. New components default to \\`{rounded.none}\\` (0px). Use \\`{rounded.full}\\` only for circular icon buttons.\n3. Variants (\\`-active\\`, \\`-disabled\\`, \\`-selected\\`) live as separate entries inside the \\`components:\\` block.\n4. \\`{token.refs}\\` everywhere — never inline hex.\n5. Hover state is never documented. Only Default and Active/Pressed states.\n6. Display headlines stay BMW Type Next Latin 700; body stays Light 300; the trio is fixed.\n7. Keep UI strings in a single language — match the locale of the page.\n\n## Known Gaps\n\n- BMW Type Next Latin is licensed to BMW and not published as a public web font; Inter at weights 700/300 is documented as the substitute.\n- Animation and transition timings (configurator color swap, model card hover-reveal) are out of scope here.\n- Form validation states beyond \\`{component.text-input}\\` focus were not extracted — error/success states would need a dedicated form page.\n- The dealer inventory sub-domain shares typography and color with the main corporate site; only UI density rises (filters, tables, prices).\n- A cookie consent overlay can occlude part of the hero — the lead hero band content may not be fully captured.\n- The M tricolor stripe appears infrequently on this corporate site; full motorsport context lives on the BMW M site.\n`;\n"],"mappings":";AACO,IAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/bugatti.d.ts

@@ -0,0 +1,3 @@
+declare const bugattiBrief = "---\nversion: alpha\nname: Bugatti\ndescription: An austere luxury-automotive interface that uses near-pure black canvas, white uppercase letterspaced display, and full-bleed automotive photography as the only voltage. The system runs three custom Bugatti typefaces \u2014 Bugatti Display, Bugatti Text Regular, and Bugatti Monospace \u2014 and combines them at modest weights with wide tracking to feel European-engineered, hyper-minimal, and quietly expensive. There is no accent color, no decorative element, no chrome \u2014 only photography, typography, and the brand wordmark.\n\ncolors:\n  primary: \"#ffffff\"\n  ink: \"#ffffff\"\n  body: \"#cccccc\"\n  body-strong: \"#e6e6e6\"\n  muted: \"#999999\"\n  muted-soft: \"#666666\"\n  hairline: \"#262626\"\n  hairline-strong: \"#3a3a3a\"\n  canvas: \"#000000\"\n  surface-soft: \"#0d0d0d\"\n  surface-card: \"#141414\"\n  surface-elevated: \"#1f1f1f\"\n  on-primary: \"#000000\"\n  on-dark: \"#ffffff\"\n  on-photo: \"#ffffff\"\n  link: \"#c3d9f3\"\n  warning: \"#d4a017\"\n  success: \"#5fa657\"\n\ntypography:\n  display-xl:\n    fontFamily: \"Bugatti Display, sans-serif\"\n    fontSize: 64px\n    fontWeight: 400\n    lineHeight: 1.1\n    letterSpacing: 4px\n  display-lg:\n    fontFamily: \"Bugatti Display, sans-serif\"\n    fontSize: 48px\n    fontWeight: 400\n    lineHeight: 1.15\n    letterSpacing: 3px\n  display-md:\n    fontFamily: \"Bugatti Display, sans-serif\"\n    fontSize: 32px\n    fontWeight: 400\n    lineHeight: 1.2\n    letterSpacing: 2px\n  display-sm:\n    fontFamily: \"Bugatti Display, sans-serif\"\n    fontSize: 24px\n    fontWeight: 400\n    lineHeight: 1.3\n    letterSpacing: 1.5px\n  wordmark:\n    fontFamily: \"Bugatti Display, serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1\n    letterSpacing: 6px\n  title-md:\n    fontFamily: \"Bugatti Display, sans-serif\"\n    fontSize: 20px\n    fontWeight: 400\n    lineHeight: 1.3\n    letterSpacing: 1px\n  title-sm:\n    fontFamily: \"Bugatti Display, sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.3\n    letterSpacing: 1.5px\n  caption-uppercase:\n    fontFamily: \"Bugatti Monospace, ui-monospace, monospace\"\n    fontSize: 11px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 2px\n  body-md:\n    fontFamily: \"Bugatti Text Regular, serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"Bugatti Text Regular, serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  button:\n    fontFamily: \"Bugatti Monospace, ui-monospace, monospace\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1\n    letterSpacing: 2.5px\n  nav-link:\n    fontFamily: \"Bugatti Monospace, ui-monospace, monospace\"\n    fontSize: 12px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 2px\n\nrounded:\n  none: 0px\n  pill: 9999px\n  full: 9999px\n\nspacing:\n  xxs: 4px\n  xs: 8px\n  sm: 12px\n  md: 16px\n  lg: 24px\n  xl: 40px\n  xxl: 64px\n  section: 120px\n\ncomponents:\n  button-primary:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 14px 32px\n    height: 44px\n  button-icon:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.full}\"\n    size: 40px\n  text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.link}\"\n    typography: \"{typography.button}\"\n  top-nav:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.nav-link}\"\n    height: 56px\n  wordmark-display:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.wordmark}\"\n  hero-photo-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-xl}\"\n    padding: 96px\n  caption-overlay:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.caption-uppercase}\"\n  career-callout-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-sm}\"\n    rounded: \"{rounded.none}\"\n    padding: 16px\n    width: 320px\n  model-photo-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-md}\"\n    rounded: \"{rounded.none}\"\n  newsroom-article-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  career-listing-row:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    padding: 24px 0\n  text-input:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 12px 0\n    height: 44px\n  spec-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    padding: 24px 0\n  date-pill:\n    backgroundColor: transparent\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.caption-uppercase}\"\n  category-tag:\n    backgroundColor: transparent\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.caption-uppercase}\"\n  cta-band-photo:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-md}\"\n    padding: 80px\n  footer:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px\n---\n\n## Overview\n\nBugatti's marketing surface is the most austere interface in luxury automotive: a near-pure black canvas (`{colors.canvas}` \u2014 #000000) holding white uppercase **letterspaced** display type and full-bleed automotive photography. The system has no accent color, no surface card decoration, no shadows, no gradients, no chrome \u2014 only **photography, typography, and the brand wordmark**. Every other luxury auto site in this category (BMW M, Aston Martin, Lamborghini) uses some form of accent color or signature element; Bugatti uses nothing. The empty space, the photograph, and the precisely-tracked Bugatti Display headline ARE the brand.\n\nThe system runs **three custom Bugatti typefaces**: **Bugatti Display** (display headlines, the \"BUGATTI\" wordmark, all caps with wide tracking), **Bugatti Text Regular** (body paragraphs, a serif text face), and **Bugatti Monospace** (button labels, navigation, captions, dates \u2014 anywhere precision and machined feel matters). The split is deliberate and unbreakable: never use Bugatti Text in a button, never use Bugatti Monospace in a paragraph.\n\nDisplay sizes use weight 400 (regular) \u2014 never bold. Visual emphasis comes from **size and tracking**, not weight. Letter-spacing on the wordmark is 6px; on display headlines 2-4px; on uppercase labels 2-2.5px. Tight tracking is a brand violation. The wide spacing creates the \"engineered precision\" feel that no other luxury maker matches.\n\n**Key Characteristics:**\n- Pure black canvas (`{colors.canvas}` \u2014 #000000) with white type. The system does not have a light mode.\n- Three custom Bugatti typefaces: **Display** (uppercase headlines + wordmark), **Text Regular** (body serif), **Monospace** (buttons, captions, nav).\n- All display headlines are UPPERCASE with wide letter-spacing (2-4px). Body copy stays sentence-case at standard tracking.\n- No accent color. The only non-monochrome color anywhere on the site is `{colors.link}` (#c3d9f3) \u2014 a desaturated ice-blue used on inline anchor links, and even that appears rarely.\n- Buttons are pill-shaped (`{rounded.pill}`) with **transparent background** and a 1px white outline. Bugatti is the only luxury-auto brand whose primary CTA is fully transparent.\n- Photography is the only depth element. No drop shadows. No gradients. No card surfaces. Surface cards are `{colors.surface-card}` (#141414) at most \u2014 a barely-different-from-black tone.\n- Section rhythm is generous \u2014 `{spacing.section}` (120px) between major bands, longer than most marketing sites because Bugatti's pages are mostly photography with minimal text density.\n\n## Colors\n\n### Brand & Accent\n- **Primary** (`{colors.primary}` \u2014 #ffffff): The single brand color. White type and white CTA outlines on the black canvas.\n- **Link** (`{colors.link}` \u2014 #c3d9f3): The only non-monochrome color in the system \u2014 a desaturated ice-blue used on inline anchor links and rarely on focus states. Bugatti's brand discipline is so tight that this single token is essentially the entire chromatic vocabulary outside black-and-white.\n\n### Surface\n- **Canvas** (`{colors.canvas}` \u2014 #000000): The default page floor across every surface. Pure black.\n- **Surface Soft** (`{colors.surface-soft}` \u2014 #0d0d0d): A barely-different-from-black tone used for spec table rows and dense data sections.\n- **Surface Card** (`{colors.surface-card}` \u2014 #141414): Cards (career callout, newsroom article container, occasional content cards). Even card surfaces stay nearly-black \u2014 no contrast jump.\n- **Surface Elevated** (`{colors.surface-elevated}` \u2014 #1f1f1f): One step further from black, used for nested cards on rare dense pages.\n- **Hairline** (`{colors.hairline}` \u2014 #262626): The 1px divider tone. Visible but quiet. Used on table rows, between body sections, around card outlines.\n- **Hairline Strong** (`{colors.hairline-strong}` \u2014 #3a3a3a): A heavier divider used on the underside of input fields (input fields have no border \u2014 only an underline hairline).\n\n### Text\n- **Ink / On Dark** (`{colors.on-dark}` \u2014 #ffffff): All headline and primary text on dark canvas.\n- **Body** (`{colors.body}` \u2014 #cccccc): Default running-text color (slightly cooler than pure white). Used in body paragraphs.\n- **Body Strong** (`{colors.body-strong}` \u2014 #e6e6e6): Emphasized body / lead paragraph.\n- **Muted** (`{colors.muted}` \u2014 #999999): Footer links, dates, captions, secondary metadata. Dembrandt's frequency analysis confirms this as palette-2 (count 6, medium confidence).\n- **Muted Soft** (`{colors.muted-soft}` \u2014 #666666): A second-tier muted for very-secondary text (legal disclaimer, copyright line).\n\n### Semantic\n- **Warning** (`{colors.warning}` \u2014 #d4a017): Reserved for technical-warning callouts (specifications, recall notices). Almost never appears on marketing surfaces.\n- **Success** (`{colors.success}` \u2014 #5fa657): Order confirmation states (rare on marketing pages).\n\n## Typography\n\n### Font Family\nThe system runs **three custom Bugatti typefaces** as a rigid trinity:\n1. **Bugatti Display** \u2014 All display headlines (h1, h2, h3), the \"BUGATTI\" wordmark, model name plates. Uppercase, wide-tracked. The default for any visual emphasis.\n2. **Bugatti Text Regular** \u2014 A serif text face used exclusively for running body copy, lead paragraphs, model descriptions. Standard sentence-case, no letter-spacing.\n3. **Bugatti Monospace** \u2014 Button labels, navigation, captions, dates, monospace-precision contexts. Always uppercase with 2-2.5px tracking.\n\nThe split is functional and absolute. Bugatti Display in a button breaks the \"machined precision\" voice; Bugatti Monospace in a paragraph breaks the \"engineered elegance\" voice; Bugatti Text in a button is unthinkable.\n\nThe fallback stack walks `-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif` for Bugatti Display, `Garamond, \"Times New Roman\", serif` for Bugatti Text Regular, and `ui-monospace, \"SF Mono\", \"Cascadia Mono\", monospace` for Bugatti Monospace.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| `{typography.display-xl}` | 64px | 400 | 1.1 | 4px | Hero h1 (\"THE BUGATTI F.K.P. HOMMAGE\", \"TOURBILLON\") \u2014 Bugatti Display, uppercase, wide-tracked |\n| `{typography.display-lg}` | 48px | 400 | 1.15 | 3px | Section heads \u2014 Bugatti Display, uppercase |\n| `{typography.display-md}` | 32px | 400 | 1.2 | 2px | Sub-section heads, model names \u2014 Bugatti Display |\n| `{typography.display-sm}` | 24px | 400 | 1.3 | 1.5px | Card titles \u2014 Bugatti Display |\n| `{typography.wordmark}` | 14px | 400 | 1.0 | 6px | The \"BUGATTI\" brand wordmark in the top nav \u2014 Bugatti Display, the widest tracking in the system |\n| `{typography.title-md}` | 20px | 400 | 1.3 | 1px | Career listing titles, intro paragraphs \u2014 Bugatti Display |\n| `{typography.title-sm}` | 16px | 400 | 1.3 | 1.5px | Mid-tier headlines, callout cards |\n| `{typography.caption-uppercase}` | 11px | 400 | 1.4 | 2px | Photo captions, metadata, \"EXPLORE OUR OPPORTUNITIES\" \u2014 Bugatti Monospace, uppercase |\n| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default body \u2014 Bugatti Text Regular (a serif face), sentence case, no tracking |\n| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Footer body, fine-print legal \u2014 Bugatti Text Regular |\n| `{typography.button}` | 14px | 400 | 1.0 | 2.5px | All button labels \u2014 Bugatti Monospace, uppercase, 2.5px tracking |\n| `{typography.nav-link}` | 12px | 400 | 1.4 | 2px | Top-nav menu items (\"MENU\", \"STORE\") \u2014 Bugatti Monospace |\n\n### Principles\nThe system NEVER uses bold weight. Every Bugatti typeface is set at weight 400 (regular). Visual emphasis comes from:\n1. **Size** \u2014 64px hero vs 16px body is a 4\u00D7 hierarchy\n2. **Letter-spacing** \u2014 6px wordmark vs 0px body\n3. **Case** \u2014 Uppercase display vs sentence-case body\n4. **Family contrast** \u2014 Display vs Text Regular vs Monospace\n\nGoing to weight 700 anywhere would break the \"modest engineering\" feel and make Bugatti read like a generic luxury template.\n\nThe serif Bugatti Text Regular sets the brand apart from the all-sans luxury crowd (BMW, Aston Martin, Lamborghini all use sans-serif body type). Bugatti's serif body voice signals literary, considered, slow-reading prose \u2014 which is the brand's editorial philosophy.\n\n### Note on Font Substitutes\nIf Bugatti Display, Bugatti Text Regular, and Bugatti Monospace are unavailable, the closest open-source substitutes are:\n- **Bugatti Display** \u2192 **Saira Condensed** (variable, weight 400) at +0.05em letter-spacing\n- **Bugatti Text Regular** \u2192 **Cormorant Garamond** (regular) or **EB Garamond**\n- **Bugatti Monospace** \u2192 **JetBrains Mono** or **IBM Plex Mono** (regular weight)\n\nThe substitution preserves the three-family split, which is more important than exact typeface match.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 4px.\n- **Tokens:** `{spacing.xxs}` 4px \u00B7 `{spacing.xs}` 8px \u00B7 `{spacing.sm}` 12px \u00B7 `{spacing.md}` 16px \u00B7 `{spacing.lg}` 24px \u00B7 `{spacing.xl}` 40px \u00B7 `{spacing.xxl}` 64px \u00B7 `{spacing.section}` 120px.\n- **Section padding:** `{spacing.section}` (120px) \u2014 longer than most marketing sites because Bugatti's bands are mostly photography with minimal text. The empty space frames the cars.\n- **Card internal padding:** `{spacing.lg}` (24px) for newsroom and content cards; `{spacing.md}` (16px) for the career callout card; `{spacing.xxl}` (64px) inside hero photo bands.\n- **Gutters:** `{spacing.xl}` (40px) between cards in 2-up grids \u2014 wider than typical because Bugatti's grids are sparse.\n\n### Grid & Container\n- **Max content width:** ~1280px centered. Hero photo bands bleed full-width with no max.\n- **Editorial body:** Single 12-column grid; photo bands are full-bleed.\n- **Newsroom layout:** 2-up article grid at desktop, 1-up at tablet+mobile.\n- **Career listings:** Single column with 80px row spacing.\n\n### Whitespace Philosophy\nBugatti uses whitespace more aggressively than any luxury-auto competitor. The homepage hero is mostly photography + huge whitespace + a single sentence + a single button. The empty black space below the photograph is intentional \u2014 it lets the car breathe. Compressing the whitespace to \"fit more content\" breaks the brand's fundamental contract: that less is more.\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat | No shadow, no border | Body, top nav, footer, photo bands |\n| Soft hairline | 1px `{colors.hairline}` border | Section dividers, table rows |\n| Card surface | `{colors.surface-card}` background \u2014 no shadow | Career callout, newsroom article container |\n| Photographic depth | Full-bleed photography with edge-to-edge crop | Hero bands, model showcases \u2014 depth via subject + lens, not chrome |\n\nThe system uses no shadows, no glassmorphism, no gradients. Depth comes entirely from photography (lighting, lens, subject framing) and from the contrast between black canvas and minimally-elevated `{colors.surface-card}`.\n\n### Decorative Depth\n- None. Bugatti is the only luxury-auto brand without a single decorative element. There is no stripe, no badge, no heritage emblem on the marketing site outside the wordmark itself.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| `{rounded.none}` | 0px | All cards, photo containers, inputs, spec cells \u2014 the dominant radius |\n| `{rounded.pill}` | 9999px | All buttons (the only rounded element in the system) |\n| `{rounded.full}` | 9999px / 50% | Circular icon buttons, avatar surfaces |\n\nThe radius hierarchy is binary: rectangular for everything except buttons, which are pills. No 4px, no 8px, no 12px in between \u2014 those would feel \"designed\" rather than \"engineered.\"\n\n### Photography Geometry\nHero photography fills full-width with no rounding. Photo cards inside grids retain `{rounded.none}` (0px) corners, edge-to-edge images. Model detail shots use 16:9 or wider cinema-aspect ratios. Newsroom thumbnails use 16:9 with 0px corners. There are no avatars or rounded photo crops anywhere on the marketing site.\n\n## Components\n\n### Top Navigation\n\n**`top-nav`** \u2014 A 56px-tall transparent nav bar overlaid on the hero photo at the top of every page. No fill, no border. Carries \"MENU\" at left, the centered **wordmark-display** (\"BUGATTI\" in 14px Bugatti Display with 6px tracking), and \"STORE\" at right with a small bag icon. All labels in `{typography.nav-link}` (Bugatti Monospace, 12px, 2px tracking, uppercase).\n\n**`wordmark-display`** \u2014 The \"BUGATTI\" wordmark itself. Bugatti Display at 14px, weight 400, 6px letter-spacing. The widest tracking in the system. Centered in the nav bar at every breakpoint.\n\n### Buttons\n\n**`button-primary`** \u2014 The signature primary CTA. Background **transparent**, text `{colors.on-dark}` (white), 1px white outline, rounded `{rounded.pill}` (9999px), padding 14px \u00D7 32px, height 44px. Type `{typography.button}` \u2014 Bugatti Monospace, uppercase, 14px, 2.5px tracking. The transparent fill is unique to Bugatti \u2014 every other luxury-auto brand uses a filled or outlined-with-text-shift button. Bugatti's transparent pill IS the button.\n\n**`button-icon`** \u2014 Circular icon buttons (carousel arrows, share, language switcher). 40 \u00D7 40px, transparent background, white outline 1px, rounded `{rounded.full}`. Same outline-only treatment as the primary button.\n\n**`text-link`** \u2014 Inline body links in `{colors.link}` (#c3d9f3, the only non-monochrome color in the system). Underlined by default. Type inherits `{typography.body-md}` (Bugatti Text Regular, serif).\n\n### Cards & Containers\n\n**`hero-photo-band`** \u2014 Full-width black band with full-bleed automotive photography. The h1 in `{typography.display-xl}` sits center-aligned over the photo near the top, often paired with a small Bugatti Monospace caption (`{typography.caption-uppercase}`) below the headline and a single `{component.button-primary}` further down. Vertical padding 96px-200px depending on photo height.\n\n**`career-callout-card`** \u2014 A small right-aligned card that floats over the hero photo on the homepage with a recruiting prompt (\"Are you ready for a new adventure?\"). Background `{colors.surface-card}`, rounded `{rounded.none}` (0px), padding `{spacing.md}` (16px), width 320px. Carries a small thumbnail at top, body line, and a `{typography.caption-uppercase}` link (\"EXPLORE OUR OPPORTUNITIES\").\n\n**`model-photo-card`** \u2014 Used in model showcases (Tourbillon page, model lineup grid). Background `{colors.canvas}` (no card surface \u2014 just photo on black), rounded `{rounded.none}`. Top: 16:9 or 21:9 hero shot of the model. Below: model name in `{typography.display-md}` (32px Bugatti Display, 2px tracking), short specs line in `{typography.caption-uppercase}` (11px Bugatti Monospace), a `{component.text-link}` (\"DISCOVER\").\n\n**`newsroom-article-card`** \u2014 Used on the newsroom page (newsroom.bugatti.com). Background `{colors.canvas}` with hairline border, rounded `{rounded.none}`, padding `{spacing.lg}` (24px). Carries a 16:9 thumbnail, a `{component.date-pill}` (\"12. NOVEMBER 2025\"), a `{typography.title-md}` headline, and a body excerpt in `{typography.body-md}` (Bugatti Text Regular serif).\n\n**`career-listing-row`** \u2014 Each row of the careers page job listing. Transparent background, padding 24px vertical, hairline divider between rows. Job title in `{typography.title-md}` (Bugatti Display 20px) at left; location + department in `{typography.caption-uppercase}` at right; chevron arrow (\u2192) at far right.\n\n**`spec-cell`** \u2014 Vehicle technical-spec display on model-detail pages (Tourbillon engine specs). Transparent background with hairline dividers between cells (not between cells inside a card). Each spec shows a value in `{typography.title-md}` at top and a label in `{typography.caption-uppercase}` below. Padding 24px vertical.\n\n### Inputs & Forms\n\n**`text-input`** \u2014 Standard text input on dark canvas. Background **transparent**, text `{colors.on-dark}`, 1px hairline-strong bottom border only (no top, left, right border), padding 12px \u00D7 0px, height 44px. Type `{typography.body-md}` (Bugatti Text Regular). Placeholder in `{colors.muted}`. Focus thickens the bottom border to white.\n\n### Tags & Captions\n\n**`caption-overlay`** \u2014 Photo-overlay caption (e.g., \"HONORING THE OEYRON AND ITS VISIONARY CREATOR\"). Centered or left-aligned over photography in `{typography.caption-uppercase}` (Bugatti Monospace, 11px, 2px tracking, white).\n\n**`category-tag`** + **`date-pill`** \u2014 Both render as transparent inline labels in `{typography.caption-uppercase}`, color `{colors.muted}`. No background fill, no border. The \"tag\" is the type itself.\n\n### CTA / Footer\n\n**`cta-band-photo`** \u2014 A pre-footer \"Discover Bugatti\" band with full-bleed photography of a Bugatti car at speed and a centered headline in `{typography.display-md}` + a `{component.button-primary}` below. Vertical padding 80px. Inherits the editorial gravity of the hero through full-bleed photography.\n\n**`footer`** \u2014 Black footer that closes every page. Background `{colors.canvas}`, text `{colors.muted}`. 4-column link list at desktop covering Bugatti / Models / Heritage / Connect. Vertical padding 64px. Bottom row carries the copyright line in `{typography.body-sm}` (Bugatti Text Regular). The wordmark sits center-aligned at the very bottom. The footer never inverts.\n\n## Do's and Don'ts\n\n### Do\n- Anchor every page with full-bleed automotive photography. The cars are the brand voltage; chrome backs off entirely.\n- Keep all display headlines in UPPERCASE Bugatti Display with 2-4px letter-spacing. The wordmark gets 6px.\n- Use Bugatti Display for headlines, Bugatti Text Regular (serif!) for body, Bugatti Monospace for buttons + captions + nav. The trinity is unbreakable.\n- Keep `{component.button-primary}` transparent with a 1px white outline. The transparent pill IS the brand button.\n- Use weight 400 everywhere. Bold breaks the brand voice \u2014 the system has no bold weight role.\n- Use `{spacing.section}` (120px) between major editorial bands. The whitespace is part of the brand.\n- Reserve `{colors.link}` (#c3d9f3) for inline anchor links only. It's the system's only non-monochrome color.\n\n### Don't\n- Don't introduce any accent color outside `{colors.link}`. Bugatti's brand discipline is total monochrome + photography. Adding a brand-blue or brand-red breaks the contract.\n- Don't bold any type. The system has no bold weight \u2014 every typeface stays at 400.\n- Don't fill primary buttons. Transparent + outline only. A solid white button reads as off-brand.\n- Don't compress whitespace between sections. The 120px rhythm is part of the editorial pacing.\n- Don't use rounded corners outside buttons. Cards, photos, inputs all stay at 0px. Rounded cards read as consumer-tech, not luxury-engineered.\n- Don't tighten letter-spacing on display headlines. 2-4px tracking on Bugatti Display is non-negotiable.\n- Don't use Bugatti Display in a button (use Bugatti Monospace) or Bugatti Monospace in a paragraph (use Bugatti Text Regular). The trinity split is the brand voice.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 768px | Hamburger nav; hero h1 64\u219232px; career callout card hides; photo bands stay full-bleed; footer 4 cols \u2192 1 |\n| Tablet | 768\u20131024px | Top nav stays minimal (MENU + wordmark + STORE); 2-up newsroom grid; career rows full-width |\n| Desktop | 1024\u20131440px | Full minimal top-nav; 2-up newsroom grid; spec tables 4-up |\n| Wide | > 1440px | Same as desktop with more breathing room; max content 1280px |\n\n### Touch Targets\n- `{component.button-primary}` renders at minimum 44 \u00D7 44px (matches WCAG AAA).\n- `{component.button-icon}` is exactly 40 \u00D7 40px.\n- `{component.text-input}` height is 44px.\n- Career listing rows have 24px vertical padding; effective tap area meets 44px+ with surrounding spacing.\n\n### Collapsing Strategy\n- Top nav stays minimal at all breakpoints (MENU label + wordmark + STORE label). On mobile the labels hide behind a hamburger but the wordmark stays centered.\n- Hero photography stays full-bleed at every breakpoint. Photo crops adjust \u2014 wider crops at desktop, vertical crops on mobile.\n- The career callout card on the homepage hides at < 768px (it's a desktop-only floating element).\n- 2-up newsroom grid collapses to 1-up at < 768px.\n- Spec cells reflow from 4-up to 2-up to 1-up; values stay at the same display size regardless of column count.\n\n### Image Behavior\n- Hero photography crops responsively \u2014 wider crops at desktop, vertical crops on mobile. Bugatti cars are always shown in motion or at-angle (never flat profiles).\n- Newsroom thumbnails retain 16:9 ratio and 0px corners.\n\n## Iteration Guide\n\n1. Focus on ONE component at a time. Reference its YAML key (`{component.hero-photo-band}`, `{component.career-callout-card}`).\n2. New components default to `{rounded.none}` (0px). Only `{component.button-primary}` and `{component.button-icon}` use pill / full radius.\n3. Variants live as separate entries in `components:`.\n4. Use `{token.refs}` everywhere \u2014 never inline hex.\n5. Never document hover. Default and Active/Pressed states only.\n6. Display headlines stay UPPERCASE Bugatti Display 400 with 2-4px tracking. Body stays sentence-case Bugatti Text Regular (serif). Button labels stay Bugatti Monospace 2.5px tracking. The trinity does not blur.\n7. When in doubt about emphasis: bigger photography before bigger type.\n\n## Known Gaps\n\n- The dembrandt frequency analyzer captured only 3 colors at root level (`#000000`, `#999999`, `#c3d9f3`). The white text (#ffffff) and dark surface tones (`#0d0d0d`, `#141414`, `#1f1f1f`) were inferred from screenshot \u2014 Bugatti's pages are so monochrome that the frequency-based analyzer didn't surface body text or surface tones as distinct palette entries.\n- The three Bugatti typefaces (Display, Text Regular, Monospace) are licensed to Bugatti and not available as web fonts publicly. Substitutes are documented in the typography section.\n- Animation and transition timings (photo carousel transitions, hover-reveal of menu, configurator animations) are not in scope.\n- Form validation states beyond the underline-only `{component.text-input}` are not extracted \u2014 error / success states are inferred from general standards, not from the analyzed surfaces.\n- The configurator surface (vehicle build pages with custom paint / interior pickers) was not in the analyzed URL set; its swatch grid, customization controls, and price-summary card are not documented here.\n- The German-language newsroom (newsroom.bugatti.com/de) shares the system with the English Bugatti.com surfaces \u2014 no design-system-level differences observed, only language localization.\n- The actual Tourbillon page rendered as a sparse minimal page in the captured screenshot, suggesting either lazy-loaded content or an interactive configurator-style UI that doesn't render fully in static screenshots; engine-spec layout is documented from general luxury-auto patterns informed by the captured spec cell tokens.\n";
+
+export { bugattiBrief };

package/dist/presets/_briefs/bugatti.js

@@ -0,0 +1,460 @@
+// src/presets/_briefs/bugatti.ts
+var bugattiBrief = `---
+version: alpha
+name: Bugatti
+description: An austere luxury-automotive interface that uses near-pure black canvas, white uppercase letterspaced display, and full-bleed automotive photography as the only voltage. The system runs three custom Bugatti typefaces \u2014 Bugatti Display, Bugatti Text Regular, and Bugatti Monospace \u2014 and combines them at modest weights with wide tracking to feel European-engineered, hyper-minimal, and quietly expensive. There is no accent color, no decorative element, no chrome \u2014 only photography, typography, and the brand wordmark.
+
+colors:
+  primary: "#ffffff"
+  ink: "#ffffff"
+  body: "#cccccc"
+  body-strong: "#e6e6e6"
+  muted: "#999999"
+  muted-soft: "#666666"
+  hairline: "#262626"
+  hairline-strong: "#3a3a3a"
+  canvas: "#000000"
+  surface-soft: "#0d0d0d"
+  surface-card: "#141414"
+  surface-elevated: "#1f1f1f"
+  on-primary: "#000000"
+  on-dark: "#ffffff"
+  on-photo: "#ffffff"
+  link: "#c3d9f3"
+  warning: "#d4a017"
+  success: "#5fa657"
+
+typography:
+  display-xl:
+    fontFamily: "Bugatti Display, sans-serif"
+    fontSize: 64px
+    fontWeight: 400
+    lineHeight: 1.1
+    letterSpacing: 4px
+  display-lg:
+    fontFamily: "Bugatti Display, sans-serif"
+    fontSize: 48px
+    fontWeight: 400
+    lineHeight: 1.15
+    letterSpacing: 3px
+  display-md:
+    fontFamily: "Bugatti Display, sans-serif"
+    fontSize: 32px
+    fontWeight: 400
+    lineHeight: 1.2
+    letterSpacing: 2px
+  display-sm:
+    fontFamily: "Bugatti Display, sans-serif"
+    fontSize: 24px
+    fontWeight: 400
+    lineHeight: 1.3
+    letterSpacing: 1.5px
+  wordmark:
+    fontFamily: "Bugatti Display, serif"
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1
+    letterSpacing: 6px
+  title-md:
+    fontFamily: "Bugatti Display, sans-serif"
+    fontSize: 20px
+    fontWeight: 400
+    lineHeight: 1.3
+    letterSpacing: 1px
+  title-sm:
+    fontFamily: "Bugatti Display, sans-serif"
+    fontSize: 16px
+    fontWeight: 400
+    lineHeight: 1.3
+    letterSpacing: 1.5px
+  caption-uppercase:
+    fontFamily: "Bugatti Monospace, ui-monospace, monospace"
+    fontSize: 11px
+    fontWeight: 400
+    lineHeight: 1.4
+    letterSpacing: 2px
+  body-md:
+    fontFamily: "Bugatti Text Regular, serif"
+    fontSize: 16px
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: 0
+  body-sm:
+    fontFamily: "Bugatti Text Regular, serif"
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: 0
+  button:
+    fontFamily: "Bugatti Monospace, ui-monospace, monospace"
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1
+    letterSpacing: 2.5px
+  nav-link:
+    fontFamily: "Bugatti Monospace, ui-monospace, monospace"
+    fontSize: 12px
+    fontWeight: 400
+    lineHeight: 1.4
+    letterSpacing: 2px
+
+rounded:
+  none: 0px
+  pill: 9999px
+  full: 9999px
+
+spacing:
+  xxs: 4px
+  xs: 8px
+  sm: 12px
+  md: 16px
+  lg: 24px
+  xl: 40px
+  xxl: 64px
+  section: 120px
+
+components:
+  button-primary:
+    backgroundColor: transparent
+    textColor: "{colors.on-dark}"
+    typography: "{typography.button}"
+    rounded: "{rounded.pill}"
+    padding: 14px 32px
+    height: 44px
+  button-icon:
+    backgroundColor: transparent
+    textColor: "{colors.on-dark}"
+    rounded: "{rounded.full}"
+    size: 40px
+  text-link:
+    backgroundColor: transparent
+    textColor: "{colors.link}"
+    typography: "{typography.button}"
+  top-nav:
+    backgroundColor: transparent
+    textColor: "{colors.on-dark}"
+    typography: "{typography.nav-link}"
+    height: 56px
+  wordmark-display:
+    backgroundColor: transparent
+    textColor: "{colors.on-dark}"
+    typography: "{typography.wordmark}"
+  hero-photo-band:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.display-xl}"
+    padding: 96px
+  caption-overlay:
+    backgroundColor: transparent
+    textColor: "{colors.on-dark}"
+    typography: "{typography.caption-uppercase}"
+  career-callout-card:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.body-sm}"
+    rounded: "{rounded.none}"
+    padding: 16px
+    width: 320px
+  model-photo-card:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.display-md}"
+    rounded: "{rounded.none}"
+  newsroom-article-card:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.title-md}"
+    rounded: "{rounded.none}"
+    padding: 24px
+  career-listing-row:
+    backgroundColor: transparent
+    textColor: "{colors.on-dark}"
+    typography: "{typography.title-md}"
+    padding: 24px 0
+  text-input:
+    backgroundColor: transparent
+    textColor: "{colors.on-dark}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.none}"
+    padding: 12px 0
+    height: 44px
+  spec-cell:
+    backgroundColor: transparent
+    textColor: "{colors.on-dark}"
+    typography: "{typography.title-md}"
+    padding: 24px 0
+  date-pill:
+    backgroundColor: transparent
+    textColor: "{colors.muted}"
+    typography: "{typography.caption-uppercase}"
+  category-tag:
+    backgroundColor: transparent
+    textColor: "{colors.muted}"
+    typography: "{typography.caption-uppercase}"
+  cta-band-photo:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.display-md}"
+    padding: 80px
+  footer:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.muted}"
+    typography: "{typography.body-sm}"
+    padding: 64px
+---
+
+## Overview
+
+Bugatti's marketing surface is the most austere interface in luxury automotive: a near-pure black canvas (\`{colors.canvas}\` \u2014 #000000) holding white uppercase **letterspaced** display type and full-bleed automotive photography. The system has no accent color, no surface card decoration, no shadows, no gradients, no chrome \u2014 only **photography, typography, and the brand wordmark**. Every other luxury auto site in this category (BMW M, Aston Martin, Lamborghini) uses some form of accent color or signature element; Bugatti uses nothing. The empty space, the photograph, and the precisely-tracked Bugatti Display headline ARE the brand.
+
+The system runs **three custom Bugatti typefaces**: **Bugatti Display** (display headlines, the "BUGATTI" wordmark, all caps with wide tracking), **Bugatti Text Regular** (body paragraphs, a serif text face), and **Bugatti Monospace** (button labels, navigation, captions, dates \u2014 anywhere precision and machined feel matters). The split is deliberate and unbreakable: never use Bugatti Text in a button, never use Bugatti Monospace in a paragraph.
+
+Display sizes use weight 400 (regular) \u2014 never bold. Visual emphasis comes from **size and tracking**, not weight. Letter-spacing on the wordmark is 6px; on display headlines 2-4px; on uppercase labels 2-2.5px. Tight tracking is a brand violation. The wide spacing creates the "engineered precision" feel that no other luxury maker matches.
+
+**Key Characteristics:**
+- Pure black canvas (\`{colors.canvas}\` \u2014 #000000) with white type. The system does not have a light mode.
+- Three custom Bugatti typefaces: **Display** (uppercase headlines + wordmark), **Text Regular** (body serif), **Monospace** (buttons, captions, nav).
+- All display headlines are UPPERCASE with wide letter-spacing (2-4px). Body copy stays sentence-case at standard tracking.
+- No accent color. The only non-monochrome color anywhere on the site is \`{colors.link}\` (#c3d9f3) \u2014 a desaturated ice-blue used on inline anchor links, and even that appears rarely.
+- Buttons are pill-shaped (\`{rounded.pill}\`) with **transparent background** and a 1px white outline. Bugatti is the only luxury-auto brand whose primary CTA is fully transparent.
+- Photography is the only depth element. No drop shadows. No gradients. No card surfaces. Surface cards are \`{colors.surface-card}\` (#141414) at most \u2014 a barely-different-from-black tone.
+- Section rhythm is generous \u2014 \`{spacing.section}\` (120px) between major bands, longer than most marketing sites because Bugatti's pages are mostly photography with minimal text density.
+
+## Colors
+
+### Brand & Accent
+- **Primary** (\`{colors.primary}\` \u2014 #ffffff): The single brand color. White type and white CTA outlines on the black canvas.
+- **Link** (\`{colors.link}\` \u2014 #c3d9f3): The only non-monochrome color in the system \u2014 a desaturated ice-blue used on inline anchor links and rarely on focus states. Bugatti's brand discipline is so tight that this single token is essentially the entire chromatic vocabulary outside black-and-white.
+
+### Surface
+- **Canvas** (\`{colors.canvas}\` \u2014 #000000): The default page floor across every surface. Pure black.
+- **Surface Soft** (\`{colors.surface-soft}\` \u2014 #0d0d0d): A barely-different-from-black tone used for spec table rows and dense data sections.
+- **Surface Card** (\`{colors.surface-card}\` \u2014 #141414): Cards (career callout, newsroom article container, occasional content cards). Even card surfaces stay nearly-black \u2014 no contrast jump.
+- **Surface Elevated** (\`{colors.surface-elevated}\` \u2014 #1f1f1f): One step further from black, used for nested cards on rare dense pages.
+- **Hairline** (\`{colors.hairline}\` \u2014 #262626): The 1px divider tone. Visible but quiet. Used on table rows, between body sections, around card outlines.
+- **Hairline Strong** (\`{colors.hairline-strong}\` \u2014 #3a3a3a): A heavier divider used on the underside of input fields (input fields have no border \u2014 only an underline hairline).
+
+### Text
+- **Ink / On Dark** (\`{colors.on-dark}\` \u2014 #ffffff): All headline and primary text on dark canvas.
+- **Body** (\`{colors.body}\` \u2014 #cccccc): Default running-text color (slightly cooler than pure white). Used in body paragraphs.
+- **Body Strong** (\`{colors.body-strong}\` \u2014 #e6e6e6): Emphasized body / lead paragraph.
+- **Muted** (\`{colors.muted}\` \u2014 #999999): Footer links, dates, captions, secondary metadata. Dembrandt's frequency analysis confirms this as palette-2 (count 6, medium confidence).
+- **Muted Soft** (\`{colors.muted-soft}\` \u2014 #666666): A second-tier muted for very-secondary text (legal disclaimer, copyright line).
+
+### Semantic
+- **Warning** (\`{colors.warning}\` \u2014 #d4a017): Reserved for technical-warning callouts (specifications, recall notices). Almost never appears on marketing surfaces.
+- **Success** (\`{colors.success}\` \u2014 #5fa657): Order confirmation states (rare on marketing pages).
+
+## Typography
+
+### Font Family
+The system runs **three custom Bugatti typefaces** as a rigid trinity:
+1. **Bugatti Display** \u2014 All display headlines (h1, h2, h3), the "BUGATTI" wordmark, model name plates. Uppercase, wide-tracked. The default for any visual emphasis.
+2. **Bugatti Text Regular** \u2014 A serif text face used exclusively for running body copy, lead paragraphs, model descriptions. Standard sentence-case, no letter-spacing.
+3. **Bugatti Monospace** \u2014 Button labels, navigation, captions, dates, monospace-precision contexts. Always uppercase with 2-2.5px tracking.
+
+The split is functional and absolute. Bugatti Display in a button breaks the "machined precision" voice; Bugatti Monospace in a paragraph breaks the "engineered elegance" voice; Bugatti Text in a button is unthinkable.
+
+The fallback stack walks \`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif\` for Bugatti Display, \`Garamond, "Times New Roman", serif\` for Bugatti Text Regular, and \`ui-monospace, "SF Mono", "Cascadia Mono", monospace\` for Bugatti Monospace.
+
+### Hierarchy
+
+| Token | Size | Weight | Line Height | Letter Spacing | Use |
+|---|---|---|---|---|---|
+| \`{typography.display-xl}\` | 64px | 400 | 1.1 | 4px | Hero h1 ("THE BUGATTI F.K.P. HOMMAGE", "TOURBILLON") \u2014 Bugatti Display, uppercase, wide-tracked |
+| \`{typography.display-lg}\` | 48px | 400 | 1.15 | 3px | Section heads \u2014 Bugatti Display, uppercase |
+| \`{typography.display-md}\` | 32px | 400 | 1.2 | 2px | Sub-section heads, model names \u2014 Bugatti Display |
+| \`{typography.display-sm}\` | 24px | 400 | 1.3 | 1.5px | Card titles \u2014 Bugatti Display |
+| \`{typography.wordmark}\` | 14px | 400 | 1.0 | 6px | The "BUGATTI" brand wordmark in the top nav \u2014 Bugatti Display, the widest tracking in the system |
+| \`{typography.title-md}\` | 20px | 400 | 1.3 | 1px | Career listing titles, intro paragraphs \u2014 Bugatti Display |
+| \`{typography.title-sm}\` | 16px | 400 | 1.3 | 1.5px | Mid-tier headlines, callout cards |
+| \`{typography.caption-uppercase}\` | 11px | 400 | 1.4 | 2px | Photo captions, metadata, "EXPLORE OUR OPPORTUNITIES" \u2014 Bugatti Monospace, uppercase |
+| \`{typography.body-md}\` | 16px | 400 | 1.5 | 0 | Default body \u2014 Bugatti Text Regular (a serif face), sentence case, no tracking |
+| \`{typography.body-sm}\` | 14px | 400 | 1.5 | 0 | Footer body, fine-print legal \u2014 Bugatti Text Regular |
+| \`{typography.button}\` | 14px | 400 | 1.0 | 2.5px | All button labels \u2014 Bugatti Monospace, uppercase, 2.5px tracking |
+| \`{typography.nav-link}\` | 12px | 400 | 1.4 | 2px | Top-nav menu items ("MENU", "STORE") \u2014 Bugatti Monospace |
+
+### Principles
+The system NEVER uses bold weight. Every Bugatti typeface is set at weight 400 (regular). Visual emphasis comes from:
+1. **Size** \u2014 64px hero vs 16px body is a 4\xD7 hierarchy
+2. **Letter-spacing** \u2014 6px wordmark vs 0px body
+3. **Case** \u2014 Uppercase display vs sentence-case body
+4. **Family contrast** \u2014 Display vs Text Regular vs Monospace
+
+Going to weight 700 anywhere would break the "modest engineering" feel and make Bugatti read like a generic luxury template.
+
+The serif Bugatti Text Regular sets the brand apart from the all-sans luxury crowd (BMW, Aston Martin, Lamborghini all use sans-serif body type). Bugatti's serif body voice signals literary, considered, slow-reading prose \u2014 which is the brand's editorial philosophy.
+
+### Note on Font Substitutes
+If Bugatti Display, Bugatti Text Regular, and Bugatti Monospace are unavailable, the closest open-source substitutes are:
+- **Bugatti Display** \u2192 **Saira Condensed** (variable, weight 400) at +0.05em letter-spacing
+- **Bugatti Text Regular** \u2192 **Cormorant Garamond** (regular) or **EB Garamond**
+- **Bugatti Monospace** \u2192 **JetBrains Mono** or **IBM Plex Mono** (regular weight)
+
+The substitution preserves the three-family split, which is more important than exact typeface match.
+
+## Layout
+
+### Spacing System
+- **Base unit:** 4px.
+- **Tokens:** \`{spacing.xxs}\` 4px \xB7 \`{spacing.xs}\` 8px \xB7 \`{spacing.sm}\` 12px \xB7 \`{spacing.md}\` 16px \xB7 \`{spacing.lg}\` 24px \xB7 \`{spacing.xl}\` 40px \xB7 \`{spacing.xxl}\` 64px \xB7 \`{spacing.section}\` 120px.
+- **Section padding:** \`{spacing.section}\` (120px) \u2014 longer than most marketing sites because Bugatti's bands are mostly photography with minimal text. The empty space frames the cars.
+- **Card internal padding:** \`{spacing.lg}\` (24px) for newsroom and content cards; \`{spacing.md}\` (16px) for the career callout card; \`{spacing.xxl}\` (64px) inside hero photo bands.
+- **Gutters:** \`{spacing.xl}\` (40px) between cards in 2-up grids \u2014 wider than typical because Bugatti's grids are sparse.
+
+### Grid & Container
+- **Max content width:** ~1280px centered. Hero photo bands bleed full-width with no max.
+- **Editorial body:** Single 12-column grid; photo bands are full-bleed.
+- **Newsroom layout:** 2-up article grid at desktop, 1-up at tablet+mobile.
+- **Career listings:** Single column with 80px row spacing.
+
+### Whitespace Philosophy
+Bugatti uses whitespace more aggressively than any luxury-auto competitor. The homepage hero is mostly photography + huge whitespace + a single sentence + a single button. The empty black space below the photograph is intentional \u2014 it lets the car breathe. Compressing the whitespace to "fit more content" breaks the brand's fundamental contract: that less is more.
+
+## Elevation & Depth
+
+| Level | Treatment | Use |
+|---|---|---|
+| Flat | No shadow, no border | Body, top nav, footer, photo bands |
+| Soft hairline | 1px \`{colors.hairline}\` border | Section dividers, table rows |
+| Card surface | \`{colors.surface-card}\` background \u2014 no shadow | Career callout, newsroom article container |
+| Photographic depth | Full-bleed photography with edge-to-edge crop | Hero bands, model showcases \u2014 depth via subject + lens, not chrome |
+
+The system uses no shadows, no glassmorphism, no gradients. Depth comes entirely from photography (lighting, lens, subject framing) and from the contrast between black canvas and minimally-elevated \`{colors.surface-card}\`.
+
+### Decorative Depth
+- None. Bugatti is the only luxury-auto brand without a single decorative element. There is no stripe, no badge, no heritage emblem on the marketing site outside the wordmark itself.
+
+## Shapes
+
+### Border Radius Scale
+
+| Token | Value | Use |
+|---|---|---|
+| \`{rounded.none}\` | 0px | All cards, photo containers, inputs, spec cells \u2014 the dominant radius |
+| \`{rounded.pill}\` | 9999px | All buttons (the only rounded element in the system) |
+| \`{rounded.full}\` | 9999px / 50% | Circular icon buttons, avatar surfaces |
+
+The radius hierarchy is binary: rectangular for everything except buttons, which are pills. No 4px, no 8px, no 12px in between \u2014 those would feel "designed" rather than "engineered."
+
+### Photography Geometry
+Hero photography fills full-width with no rounding. Photo cards inside grids retain \`{rounded.none}\` (0px) corners, edge-to-edge images. Model detail shots use 16:9 or wider cinema-aspect ratios. Newsroom thumbnails use 16:9 with 0px corners. There are no avatars or rounded photo crops anywhere on the marketing site.
+
+## Components
+
+### Top Navigation
+
+**\`top-nav\`** \u2014 A 56px-tall transparent nav bar overlaid on the hero photo at the top of every page. No fill, no border. Carries "MENU" at left, the centered **wordmark-display** ("BUGATTI" in 14px Bugatti Display with 6px tracking), and "STORE" at right with a small bag icon. All labels in \`{typography.nav-link}\` (Bugatti Monospace, 12px, 2px tracking, uppercase).
+
+**\`wordmark-display\`** \u2014 The "BUGATTI" wordmark itself. Bugatti Display at 14px, weight 400, 6px letter-spacing. The widest tracking in the system. Centered in the nav bar at every breakpoint.
+
+### Buttons
+
+**\`button-primary\`** \u2014 The signature primary CTA. Background **transparent**, text \`{colors.on-dark}\` (white), 1px white outline, rounded \`{rounded.pill}\` (9999px), padding 14px \xD7 32px, height 44px. Type \`{typography.button}\` \u2014 Bugatti Monospace, uppercase, 14px, 2.5px tracking. The transparent fill is unique to Bugatti \u2014 every other luxury-auto brand uses a filled or outlined-with-text-shift button. Bugatti's transparent pill IS the button.
+
+**\`button-icon\`** \u2014 Circular icon buttons (carousel arrows, share, language switcher). 40 \xD7 40px, transparent background, white outline 1px, rounded \`{rounded.full}\`. Same outline-only treatment as the primary button.
+
+**\`text-link\`** \u2014 Inline body links in \`{colors.link}\` (#c3d9f3, the only non-monochrome color in the system). Underlined by default. Type inherits \`{typography.body-md}\` (Bugatti Text Regular, serif).
+
+### Cards & Containers
+
+**\`hero-photo-band\`** \u2014 Full-width black band with full-bleed automotive photography. The h1 in \`{typography.display-xl}\` sits center-aligned over the photo near the top, often paired with a small Bugatti Monospace caption (\`{typography.caption-uppercase}\`) below the headline and a single \`{component.button-primary}\` further down. Vertical padding 96px-200px depending on photo height.
+
+**\`career-callout-card\`** \u2014 A small right-aligned card that floats over the hero photo on the homepage with a recruiting prompt ("Are you ready for a new adventure?"). Background \`{colors.surface-card}\`, rounded \`{rounded.none}\` (0px), padding \`{spacing.md}\` (16px), width 320px. Carries a small thumbnail at top, body line, and a \`{typography.caption-uppercase}\` link ("EXPLORE OUR OPPORTUNITIES").
+
+**\`model-photo-card\`** \u2014 Used in model showcases (Tourbillon page, model lineup grid). Background \`{colors.canvas}\` (no card surface \u2014 just photo on black), rounded \`{rounded.none}\`. Top: 16:9 or 21:9 hero shot of the model. Below: model name in \`{typography.display-md}\` (32px Bugatti Display, 2px tracking), short specs line in \`{typography.caption-uppercase}\` (11px Bugatti Monospace), a \`{component.text-link}\` ("DISCOVER").
+
+**\`newsroom-article-card\`** \u2014 Used on the newsroom page (newsroom.bugatti.com). Background \`{colors.canvas}\` with hairline border, rounded \`{rounded.none}\`, padding \`{spacing.lg}\` (24px). Carries a 16:9 thumbnail, a \`{component.date-pill}\` ("12. NOVEMBER 2025"), a \`{typography.title-md}\` headline, and a body excerpt in \`{typography.body-md}\` (Bugatti Text Regular serif).
+
+**\`career-listing-row\`** \u2014 Each row of the careers page job listing. Transparent background, padding 24px vertical, hairline divider between rows. Job title in \`{typography.title-md}\` (Bugatti Display 20px) at left; location + department in \`{typography.caption-uppercase}\` at right; chevron arrow (\u2192) at far right.
+
+**\`spec-cell\`** \u2014 Vehicle technical-spec display on model-detail pages (Tourbillon engine specs). Transparent background with hairline dividers between cells (not between cells inside a card). Each spec shows a value in \`{typography.title-md}\` at top and a label in \`{typography.caption-uppercase}\` below. Padding 24px vertical.
+
+### Inputs & Forms
+
+**\`text-input\`** \u2014 Standard text input on dark canvas. Background **transparent**, text \`{colors.on-dark}\`, 1px hairline-strong bottom border only (no top, left, right border), padding 12px \xD7 0px, height 44px. Type \`{typography.body-md}\` (Bugatti Text Regular). Placeholder in \`{colors.muted}\`. Focus thickens the bottom border to white.
+
+### Tags & Captions
+
+**\`caption-overlay\`** \u2014 Photo-overlay caption (e.g., "HONORING THE OEYRON AND ITS VISIONARY CREATOR"). Centered or left-aligned over photography in \`{typography.caption-uppercase}\` (Bugatti Monospace, 11px, 2px tracking, white).
+
+**\`category-tag\`** + **\`date-pill\`** \u2014 Both render as transparent inline labels in \`{typography.caption-uppercase}\`, color \`{colors.muted}\`. No background fill, no border. The "tag" is the type itself.
+
+### CTA / Footer
+
+**\`cta-band-photo\`** \u2014 A pre-footer "Discover Bugatti" band with full-bleed photography of a Bugatti car at speed and a centered headline in \`{typography.display-md}\` + a \`{component.button-primary}\` below. Vertical padding 80px. Inherits the editorial gravity of the hero through full-bleed photography.
+
+**\`footer\`** \u2014 Black footer that closes every page. Background \`{colors.canvas}\`, text \`{colors.muted}\`. 4-column link list at desktop covering Bugatti / Models / Heritage / Connect. Vertical padding 64px. Bottom row carries the copyright line in \`{typography.body-sm}\` (Bugatti Text Regular). The wordmark sits center-aligned at the very bottom. The footer never inverts.
+
+## Do's and Don'ts
+
+### Do
+- Anchor every page with full-bleed automotive photography. The cars are the brand voltage; chrome backs off entirely.
+- Keep all display headlines in UPPERCASE Bugatti Display with 2-4px letter-spacing. The wordmark gets 6px.
+- Use Bugatti Display for headlines, Bugatti Text Regular (serif!) for body, Bugatti Monospace for buttons + captions + nav. The trinity is unbreakable.
+- Keep \`{component.button-primary}\` transparent with a 1px white outline. The transparent pill IS the brand button.
+- Use weight 400 everywhere. Bold breaks the brand voice \u2014 the system has no bold weight role.
+- Use \`{spacing.section}\` (120px) between major editorial bands. The whitespace is part of the brand.
+- Reserve \`{colors.link}\` (#c3d9f3) for inline anchor links only. It's the system's only non-monochrome color.
+
+### Don't
+- Don't introduce any accent color outside \`{colors.link}\`. Bugatti's brand discipline is total monochrome + photography. Adding a brand-blue or brand-red breaks the contract.
+- Don't bold any type. The system has no bold weight \u2014 every typeface stays at 400.
+- Don't fill primary buttons. Transparent + outline only. A solid white button reads as off-brand.
+- Don't compress whitespace between sections. The 120px rhythm is part of the editorial pacing.
+- Don't use rounded corners outside buttons. Cards, photos, inputs all stay at 0px. Rounded cards read as consumer-tech, not luxury-engineered.
+- Don't tighten letter-spacing on display headlines. 2-4px tracking on Bugatti Display is non-negotiable.
+- Don't use Bugatti Display in a button (use Bugatti Monospace) or Bugatti Monospace in a paragraph (use Bugatti Text Regular). The trinity split is the brand voice.
+
+## Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|---|---|---|
+| Mobile | < 768px | Hamburger nav; hero h1 64\u219232px; career callout card hides; photo bands stay full-bleed; footer 4 cols \u2192 1 |
+| Tablet | 768\u20131024px | Top nav stays minimal (MENU + wordmark + STORE); 2-up newsroom grid; career rows full-width |
+| Desktop | 1024\u20131440px | Full minimal top-nav; 2-up newsroom grid; spec tables 4-up |
+| Wide | > 1440px | Same as desktop with more breathing room; max content 1280px |
+
+### Touch Targets
+- \`{component.button-primary}\` renders at minimum 44 \xD7 44px (matches WCAG AAA).
+- \`{component.button-icon}\` is exactly 40 \xD7 40px.
+- \`{component.text-input}\` height is 44px.
+- Career listing rows have 24px vertical padding; effective tap area meets 44px+ with surrounding spacing.
+
+### Collapsing Strategy
+- Top nav stays minimal at all breakpoints (MENU label + wordmark + STORE label). On mobile the labels hide behind a hamburger but the wordmark stays centered.
+- Hero photography stays full-bleed at every breakpoint. Photo crops adjust \u2014 wider crops at desktop, vertical crops on mobile.
+- The career callout card on the homepage hides at < 768px (it's a desktop-only floating element).
+- 2-up newsroom grid collapses to 1-up at < 768px.
+- Spec cells reflow from 4-up to 2-up to 1-up; values stay at the same display size regardless of column count.
+
+### Image Behavior
+- Hero photography crops responsively \u2014 wider crops at desktop, vertical crops on mobile. Bugatti cars are always shown in motion or at-angle (never flat profiles).
+- Newsroom thumbnails retain 16:9 ratio and 0px corners.
+
+## Iteration Guide
+
+1. Focus on ONE component at a time. Reference its YAML key (\`{component.hero-photo-band}\`, \`{component.career-callout-card}\`).
+2. New components default to \`{rounded.none}\` (0px). Only \`{component.button-primary}\` and \`{component.button-icon}\` use pill / full radius.
+3. Variants live as separate entries in \`components:\`.
+4. Use \`{token.refs}\` everywhere \u2014 never inline hex.
+5. Never document hover. Default and Active/Pressed states only.
+6. Display headlines stay UPPERCASE Bugatti Display 400 with 2-4px tracking. Body stays sentence-case Bugatti Text Regular (serif). Button labels stay Bugatti Monospace 2.5px tracking. The trinity does not blur.
+7. When in doubt about emphasis: bigger photography before bigger type.
+
+## Known Gaps
+
+- The dembrandt frequency analyzer captured only 3 colors at root level (\`#000000\`, \`#999999\`, \`#c3d9f3\`). The white text (#ffffff) and dark surface tones (\`#0d0d0d\`, \`#141414\`, \`#1f1f1f\`) were inferred from screenshot \u2014 Bugatti's pages are so monochrome that the frequency-based analyzer didn't surface body text or surface tones as distinct palette entries.
+- The three Bugatti typefaces (Display, Text Regular, Monospace) are licensed to Bugatti and not available as web fonts publicly. Substitutes are documented in the typography section.
+- Animation and transition timings (photo carousel transitions, hover-reveal of menu, configurator animations) are not in scope.
+- Form validation states beyond the underline-only \`{component.text-input}\` are not extracted \u2014 error / success states are inferred from general standards, not from the analyzed surfaces.
+- The configurator surface (vehicle build pages with custom paint / interior pickers) was not in the analyzed URL set; its swatch grid, customization controls, and price-summary card are not documented here.
+- The German-language newsroom (newsroom.bugatti.com/de) shares the system with the English Bugatti.com surfaces \u2014 no design-system-level differences observed, only language localization.
+- The actual Tourbillon page rendered as a sparse minimal page in the captured screenshot, suggesting either lazy-loaded content or an interactive configurator-style UI that doesn't render fully in static screenshots; engine-spec layout is documented from general luxury-auto patterns informed by the captured spec cell tokens.
+`;
+export {
+  bugattiBrief
+};
+//# sourceMappingURL=bugatti.js.map