BMW Design System

---

version: alpha

name: BMW-design-analysis

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

---

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:**

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:

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.

| 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 |

BMW Type Next Latin is a licensed BMW typeface. Open-source alternatives:

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.

| 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.

| 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.

**`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).

**`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.

**`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-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}`.

**`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).

**`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.

**`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-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}`.

| 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 |

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.