@hex-core/themes 0.1.1 → 0.2.0

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

@@ -0,0 +1,3 @@
+declare const bmwBrief = "---\nversion: alpha\nname: BMW\ndescription: BMW's corporate site \u2014 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 \u2014 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 \u2014 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 \u2014 heavy display next to thin paragraph \u2014 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}` \u2014 #1c69d4), works alone across every primary CTA \u2014 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}` \u2192 `{colors.m-blue-dark}` \u2192 `{colors.m-red}`) only appears in motorsport contexts and as M-model badges/dividers \u2014 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 \u2014 filter chips, model cards, price tables \u2014 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 \u2014 page rhythm relies on contrast.\n- BMW corporate blue (`{colors.primary}` \u2014 #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** \u2014 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 \u2014 just white plate + photo + title.\n- Photography (model renders) sits in environment, no shadow \u2014 depth comes entirely from color-block contrast.\n- M tricolor stripe appears only in M-model contexts \u2014 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}` \u2014 #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}` \u2014 #0066b1) + **M Blue Dark** (`{colors.m-blue-dark}` \u2014 #1c69d4) + **M Red** (`{colors.m-red}` \u2014 #e22718): The M tricolor stripe \u2014 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}` \u2014 #ffffff): The default page surface.\n- **Surface Soft** (`{colors.surface-soft}` \u2014 #f7f7f7): Soft grey for the footer and sub-navigation bands.\n- **Surface Card** (`{colors.surface-card}` \u2014 #fafafa): The light plate behind a model card's photo block.\n- **Surface Strong** (`{colors.surface-strong}` \u2014 #ebebeb): A slightly heavier grey used as a section divider.\n- **Surface Dark** (`{colors.surface-dark}` \u2014 #1a2129): Dark navy for hero bands and large dark CTAs. Not pure black \u2014 carries a warm undertone.\n- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` \u2014 #262e38): One step lighter, used for nested cards on top of the dark hero.\n\n### Hairlines\n- **Hairline** (`{colors.hairline}` \u2014 #e6e6e6): The 1px divider \u2014 input outline, configurator card outline, table separator.\n- **Hairline Strong** (`{colors.hairline-strong}` \u2014 #cccccc): A more visible 1px outline \u2014 disabled secondary buttons, emphasized table border.\n\n### Text\n- **Ink** (`{colors.ink}` \u2014 #262626): All display and primary text. Not pure black \u2014 soft against photography.\n- **Body** (`{colors.body}` \u2014 #3c3c3c): Default running text.\n- **Body Strong** (`{colors.body-strong}` \u2014 #1a1a1a): Emphasized paragraphs and lead text.\n- **Muted** (`{colors.muted}` \u2014 #6b6b6b): Footer links, breadcrumbs, captions.\n- **Muted Soft** (`{colors.muted-soft}` \u2014 #9a9a9a): Disabled text, fine-print legal.\n- **On Primary** (`{colors.on-primary}` \u2014 #ffffff): White text on a blue button.\n- **On Dark** (`{colors.on-dark}` \u2014 #ffffff): White text on a dark hero band.\n- **On Dark Soft** (`{colors.on-dark-soft}` \u2014 #bbbbbb): A slightly muted white for secondary text on dark bands.\n\n### Semantic\n- **Success** (`{colors.success}` \u2014 #22c55e): Confirmation messages and \"available\" indicators.\n- **Warning** (`{colors.warning}` \u2014 #f59e0b): Warning callouts.\n- **Error** (`{colors.error}` \u2014 #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) \u2192 display headlines, button labels, nav links\n- BMW Type Next Latin Light (300) \u2192 paragraphs, descriptive copy\n- BMW Type Next Latin (400) \u2192 caption, neutral nav-link contexts\n\nThis three-way split mirrors BMW M's \u2014 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 \u2014 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** \u2014 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** \u2014 \"LEARN MORE\"-style CTAs run uppercase with 1.5px tracking. The \"machined precision\" voice.\n- **Weight 400 lives in a narrow lane** \u2014 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) \u2014 close match at weight 700/300. Leave letter-spacing at 0.0em.\n- **Saira Condensed** \u2014 for a slightly more compressed BMW Type feel.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 8px.\n- **Tokens:** `{spacing.xxs}` 4px \u00B7 `{spacing.xs}` 8px \u00B7 `{spacing.sm}` 12px \u00B7 `{spacing.md}` 16px \u00B7 `{spacing.lg}` 24px \u00B7 `{spacing.xl}` 32px \u00B7 `{spacing.xxl}` 48px \u00B7 `{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 \u2014 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 \u2014 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`** \u2014 a 4px-tall horizontal tricolor stripe (`{colors.m-blue-light}` \u2192 `{colors.m-blue-dark}` \u2192 `{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** \u2014 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 \u2014 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 \u2014 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 \u2014 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`** \u2014 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`** \u2014 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 \u00D7 32px, height 48px, rounded `{rounded.none}` (0px \u2014 rectangular). Press state: `button-primary-active` shifts to `{colors.primary-active}`.\n\n**`button-secondary`** \u2014 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`** \u2014 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`** \u2014 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 `\u203A` chevron.\n\n**`text-link`** \u2014 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`** \u2014 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`** \u2014 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`** \u2014 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 \u203A\").\n\n**`model-card-photo`** \u2014 The card's photo plate. Background `{colors.surface-card}` (#fafafa \u2014 soft grey), rounded `{rounded.none}`, vehicle render in full silhouette. Zero padding \u2014 the photo runs edge-to-edge.\n\n**`feature-photo-card`** \u2014 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`** \u2014 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`** \u2014 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`** \u2014 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 \u00D7 14px, radius `{rounded.none}`.\n\n**`configurator-option-tile`** + **`configurator-option-tile-selected`** \u2014 Configurator selection cell (color, wheels, upholstery). Inactive: background `{colors.canvas}`, 1px hairline. Selected: 2px `{colors.primary}` border. Padding 16px \u00D7 24px, radius `{rounded.none}`.\n\n### Inputs & Forms\n\n**`text-input`** \u2014 Standard text input. Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, rounded `{rounded.none}` (0px), padding 14px \u00D7 16px, height 48px, 1px hairline border. On focus, the border thickens to ink.\n\n**`cookie-consent-card`** \u2014 Cookie banner. Background `{colors.canvas}`, 1px hairline, padding `{spacing.lg}` (24px), `{typography.body-sm}` (14px / 300 \u2014 Light even in legal copy).\n\n### Tabs / Tags\n\n**`category-tab`** + **`category-tab-active`** \u2014 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`** \u2014 A 4px-tall horizontal tricolor stripe (`{colors.m-blue-light}` \u2192 `{colors.m-blue-dark}` \u2192 `{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`** \u2014 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`** \u2014 The closing soft-grey footer. Background `{colors.surface-soft}` (#f7f7f7 \u2014 not pure white \u2014 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 \u2014 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 \u2014 the standard BMW corporate pattern.\n- Hold section rhythm at `{spacing.section}` (80px) \u2014 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 \u2014 BMW Blue is the only primary action color.\n- Don't use pill or rounded buttons \u2014 `{rounded.none}` (0px) rectangular IS the brand button.\n- Don't drop display weight to 500 \u2014 the system uses 700 / 400 / 300; 500 is absent.\n- Don't bold body type \u2014 Light 300 is the BMW corporate editorial voice.\n- Don't add drop shadows to cards \u2014 depth comes from photo + color-block contrast.\n- Don't repeat the same surface mode across two consecutive bands \u2014 light \u2192 dark hero \u2192 light \u2192 light feature \u2192 dark CTA \u2192 light footer rotation is required.\n- Don't use the M tricolor stripe as a CTA fill \u2014 divider/accent role only.\n- Don't mix languages in a single page \u2014 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\u219240px; model card grid 1-up; configurator filter chips 2-up; footer 4 col \u2192 1 col |\n| Tablet | 768\u20131024px | Top nav narrows, secondary menu hides under \"More\"; model card 2-up; inventory 2-up |\n| Desktop | 1024\u20131440px | 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 \u00D7 48px \u2014 above WCAG AAA (44 \u00D7 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 \u2192 2-up \u2192 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 \u2014 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 \u2014 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 \u2014 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 \u2014 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";
+
+export { bmwBrief };

package/dist/presets/_briefs/bmw.js

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