getrelay 0.1.0

package/design-md/bmw/DESIGN.md

@@ -0,0 +1,544 @@
+---
+version: alpha
+name: BMW
+description: 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.
+
+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 — 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 — 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.
+
+The 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.
+
+The 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.
+
+**Key Characteristics:**
+- Light `{colors.canvas}` is the base surface; dark navy `{colors.surface-dark}` appears only inside hero bands — page rhythm relies on contrast.
+- BMW corporate blue (`{colors.primary}` — #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** — 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 — just white plate + photo + title.
+- Photography (model renders) sits in environment, no shadow — depth comes entirely from color-block contrast.
+- M tricolor stripe appears only in M-model contexts — 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}` — #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}` — #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.
+
+### Surface
+- **Canvas** (`{colors.canvas}` — #ffffff): The default page surface.
+- **Surface Soft** (`{colors.surface-soft}` — #f7f7f7): Soft grey for the footer and sub-navigation bands.
+- **Surface Card** (`{colors.surface-card}` — #fafafa): The light plate behind a model card's photo block.
+- **Surface Strong** (`{colors.surface-strong}` — #ebebeb): A slightly heavier grey used as a section divider.
+- **Surface Dark** (`{colors.surface-dark}` — #1a2129): Dark navy for hero bands and large dark CTAs. Not pure black — carries a warm undertone.
+- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #262e38): One step lighter, used for nested cards on top of the dark hero.
+
+### Hairlines
+- **Hairline** (`{colors.hairline}` — #e6e6e6): The 1px divider — input outline, configurator card outline, table separator.
+- **Hairline Strong** (`{colors.hairline-strong}` — #cccccc): A more visible 1px outline — disabled secondary buttons, emphasized table border.
+
+### Text
+- **Ink** (`{colors.ink}` — #262626): All display and primary text. Not pure black — soft against photography.
+- **Body** (`{colors.body}` — #3c3c3c): Default running text.
+- **Body Strong** (`{colors.body-strong}` — #1a1a1a): Emphasized paragraphs and lead text.
+- **Muted** (`{colors.muted}` — #6b6b6b): Footer links, breadcrumbs, captions.
+- **Muted Soft** (`{colors.muted-soft}` — #9a9a9a): Disabled text, fine-print legal.
+- **On Primary** (`{colors.on-primary}` — #ffffff): White text on a blue button.
+- **On Dark** (`{colors.on-dark}` — #ffffff): White text on a dark hero band.
+- **On Dark Soft** (`{colors.on-dark-soft}` — #bbbbbb): A slightly muted white for secondary text on dark bands.
+
+### Semantic
+- **Success** (`{colors.success}` — #22c55e): Confirmation messages and "available" indicators.
+- **Warning** (`{colors.warning}` — #f59e0b): Warning callouts.
+- **Error** (`{colors.error}` — #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) → display headlines, button labels, nav links
+- BMW Type Next Latin Light (300) → paragraphs, descriptive copy
+- BMW Type Next Latin (400) → caption, neutral nav-link contexts
+
+This three-way split mirrors BMW M's — 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 — 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** — 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** — "LEARN MORE"-style CTAs run uppercase with 1.5px tracking. The "machined precision" voice.
+- **Weight 400 lives in a narrow lane** — 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) — close match at weight 700/300. Leave letter-spacing at 0.0em.
+- **Saira Condensed** — for a slightly more compressed BMW Type feel.
+
+## Layout
+
+### Spacing System
+- **Base unit:** 8px.
+- **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.
+- **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 — 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 — 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`** — 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.
+- **Photographic depth** — 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 — 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 — 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 — 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`** — 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`** — 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}`.
+
+**`button-secondary`** — 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`** — Used over a dark hero band. Background transparent, text `{colors.on-dark}`, 1px `{colors.on-dark}` border, same rectangular shape.
+
+**`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.
+
+**`text-link`** — An inline link inside body copy. `{colors.ink}` text, no underline by default; underlines per context.
+
+### Cards & Containers
+
+**`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}`.
+
+**`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.
+
+**`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 ›").
+
+**`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.
+
+**`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.
+
+**`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}`).
+
+### Inventory & Configurator
+
+**`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.
+
+**`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}`.
+
+**`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}`.
+
+### Inputs & Forms
+
+**`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.
+
+**`cookie-consent-card`** — Cookie banner. Background `{colors.canvas}`, 1px hairline, padding `{spacing.lg}` (24px), `{typography.body-sm}` (14px / 300 — Light even in legal copy).
+
+### Tabs / Tags
+
+**`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.
+
+### Brand Signature
+
+**`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.
+
+### CTA / Footer
+
+**`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.
+
+**`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}`.
+
+## 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 — 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 — the standard BMW corporate pattern.
+- Hold section rhythm at `{spacing.section}` (80px) — 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 — BMW Blue is the only primary action color.
+- Don't use pill or rounded buttons — `{rounded.none}` (0px) rectangular IS the brand button.
+- Don't drop display weight to 500 — the system uses 700 / 400 / 300; 500 is absent.
+- Don't bold body type — Light 300 is the BMW corporate editorial voice.
+- Don't add drop shadows to cards — depth comes from photo + color-block contrast.
+- Don't repeat the same surface mode across two consecutive bands — light → dark hero → light → light feature → dark CTA → light footer rotation is required.
+- Don't use the M tricolor stripe as a CTA fill — divider/accent role only.
+- Don't mix languages in a single page — UI language must stay consistent.
+
+## Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|---|---|---|
+| Mobile | < 768px | Hamburger nav; hero h1 64→40px; model card grid 1-up; configurator filter chips 2-up; footer 4 col → 1 col |
+| Tablet | 768–1024px | Top nav narrows, secondary menu hides under "More"; model card 2-up; inventory 2-up |
+| Desktop | 1024–1440px | 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 × 48px — above WCAG AAA (44 × 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 → 2-up → 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 — 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 — 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 — 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 — 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.

package/design-md/bmw/README.md

@@ -0,0 +1,5 @@
+# Bmw Inspired Design System
+
+Design system details have been moved to: https://getdesign.md/bmw/design-md
+
+You can also view previews, dark mode examples, and download options on getdesign.md.