BMW-M Design System

---

version: alpha

name: BMW-M-design-analysis

description: A motorsport-engineering interface anchored on a near-black canvas with white BMW Type Next Latin display headlines in confident UPPERCASE. The brand carries no decorative voltage — its energy comes from full-bleed automotive photography (cars on tracks, driver-cockpit shots, carbon-fiber detail) and the iconic M tricolor stripe (light blue → dark blue → red) used sparingly as a brand signature on logos, dividers, and motorsport chrome. Type stays light to medium weight to feel European-engineered, never American-bombastic.

colors:

primary: "#ffffff"

ink: "#ffffff"

body: "#bbbbbb"

body-strong: "#e6e6e6"

muted: "#7e7e7e"

hairline: "#3c3c3c"

hairline-strong: "#262626"

canvas: "#000000"

surface-card: "#1a1a1a"

surface-elevated: "#262626"

surface-soft: "#0d0d0d"

on-primary: "#000000"

on-dark: "#ffffff"

m-blue-light: "#0066b1"

m-blue-dark: "#1c69d4"

m-red: "#e22718"

bmw-blue: "#1c69d4"

electric-blue: "#0653b6"

carbon-gray: "#2b2b2b"

warning: "#f4b400"

success: "#0fa336"

typography:

display-xl:

fontFamily: "BMWTypeNextLatin, sans-serif"

fontSize: 80px

fontWeight: 700

lineHeight: 1

letterSpacing: 0

display-lg:

fontFamily: "BMWTypeNextLatin, sans-serif"

fontSize: 56px

fontWeight: 700

lineHeight: 1.05

letterSpacing: 0

display-md:

fontFamily: "BMWTypeNextLatin, sans-serif"

fontSize: 40px

fontWeight: 700

lineHeight: 1.1

letterSpacing: 0

display-sm:

fontFamily: "BMWTypeNextLatin, sans-serif"

fontSize: 32px

fontWeight: 700

lineHeight: 1.15

letterSpacing: 0

title-lg:

fontFamily: "BMWTypeNextLatin, sans-serif"

fontSize: 24px

fontWeight: 700

lineHeight: 1.3

letterSpacing: 0

title-md:

fontFamily: "BMWTypeNextLatin, sans-serif"

fontSize: 20px

fontWeight: 400

lineHeight: 1.4

letterSpacing: 0

title-sm:

fontFamily: "BMWTypeNextLatin, sans-serif"

fontSize: 18px

fontWeight: 400

lineHeight: 1.4

letterSpacing: 0

label-uppercase:

fontFamily: "BMWTypeNextLatin, sans-serif"

fontSize: 14px

fontWeight: 700

lineHeight: 1.3

letterSpacing: 1.5px

body-md:

fontFamily: "BMWTypeNextLatin Light, BMWTypeNextLatin, sans-serif"

fontSize: 16px

fontWeight: 300

lineHeight: 1.5

letterSpacing: 0

body-sm:

fontFamily: "BMWTypeNextLatin Light, sans-serif"

fontSize: 14px

fontWeight: 300

lineHeight: 1.5

letterSpacing: 0

caption:

fontFamily: "BMWTypeNextLatin, sans-serif"

fontSize: 12px

fontWeight: 400

lineHeight: 1.4

letterSpacing: 0.5px

button:

fontFamily: "BMWTypeNextLatin, sans-serif"

fontSize: 14px

fontWeight: 700

lineHeight: 1

letterSpacing: 1.5px

nav-link:

fontFamily: "BMWTypeNextLatin, sans-serif"

fontSize: 14px

fontWeight: 400

lineHeight: 1.4

letterSpacing: 0.5px

rounded:

none: 0px

xs: 2px

sm: 4px

md: 6px

full: 9999px

spacing:

xxs: 4px

xs: 8px

sm: 12px

md: 16px

lg: 24px

xl: 40px

xxl: 64px

section: 96px

components:

button-primary:

backgroundColor: "{colors.canvas}"

textColor: "{colors.on-dark}"

typography: "{typography.button}"

rounded: "{rounded.none}"

padding: 16px 32px

height: 48px

button-primary-outline:

backgroundColor: transparent

textColor: "{colors.on-dark}"

typography: "{typography.button}"

rounded: "{rounded.none}"

padding: 16px 32px

height: 48px

button-on-light:

backgroundColor: "{colors.canvas}"

textColor: "{colors.on-dark}"

typography: "{typography.button}"

rounded: "{rounded.none}"

padding: 16px 32px

button-icon:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.on-dark}"

rounded: "{rounded.full}"

size: 48px

text-link:

backgroundColor: transparent

textColor: "{colors.on-dark}"

typography: "{typography.label-uppercase}"

top-nav:

backgroundColor: "{colors.canvas}"

textColor: "{colors.on-dark}"

typography: "{typography.nav-link}"

height: 64px

hero-photo-band:

backgroundColor: "{colors.canvas}"

textColor: "{colors.on-dark}"

typography: "{typography.display-xl}"

padding: 96px

m-stripe-divider:

backgroundColor: transparent

textColor: "{colors.on-dark}"

height: 4px

feature-photo-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.on-dark}"

typography: "{typography.title-md}"

rounded: "{rounded.none}"

padding: 24px

model-card:

backgroundColor: "{colors.canvas}"

textColor: "{colors.on-dark}"

typography: "{typography.title-lg}"

rounded: "{rounded.none}"

padding: 24px

magazine-article-card:

backgroundColor: "{colors.canvas}"

textColor: "{colors.on-dark}"

typography: "{typography.title-md}"

rounded: "{rounded.none}"

padding: 24px

spec-cell:

backgroundColor: "{colors.surface-soft}"

textColor: "{colors.on-dark}"

typography: "{typography.body-md}"

rounded: "{rounded.none}"

padding: 24px

cookie-consent-card:

backgroundColor: "{colors.canvas}"

textColor: "{colors.on-dark}"

typography: "{typography.body-sm}"

rounded: "{rounded.none}"

padding: 24px

category-tab:

backgroundColor: transparent

textColor: "{colors.body}"

typography: "{typography.label-uppercase}"

padding: 12px 0

category-tab-active:

backgroundColor: transparent

textColor: "{colors.on-dark}"

typography: "{typography.label-uppercase}"

padding: 12px 0

text-input:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.on-dark}"

typography: "{typography.body-md}"

rounded: "{rounded.none}"

padding: 12px 16px

height: 48px

chatbot-launcher:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.on-dark}"

typography: "{typography.title-md}"

rounded: "{rounded.none}"

padding: 24px

cta-band-photo:

backgroundColor: "{colors.canvas}"

textColor: "{colors.on-dark}"

typography: "{typography.display-md}"

padding: 80px

motorsport-photo-card:

backgroundColor: "{colors.canvas}"

textColor: "{colors.on-dark}"

typography: "{typography.title-md}"

rounded: "{rounded.none}"

carousel-arrow:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.on-dark}"

rounded: "{rounded.full}"

size: 48px

footer:

backgroundColor: "{colors.canvas}"

textColor: "{colors.body}"

typography: "{typography.body-sm}"

padding: 64px

---

BMW M's marketing surface is a near-pure black canvas (`{colors.canvas}` — #000) holding white BMW Type Next Latin headlines in **confident UPPERCASE**. The system has no decorative voltage of its own; brand energy comes from **full-bleed automotive photography** — cars cornering at speed, carbon-fiber wheel detail, driver cockpit shots, motorsport pit lanes — placed as edge-to-edge content that fills entire bands. UI chrome around the photography stays minimal: thin sans-serif copy, dividers as 1px hairlines (`{colors.hairline}`), all-caps button labels with no fill until hovered.

The **M tricolor stripe** — `{colors.m-blue-light}` (#0066b1) → `{colors.m-blue-dark}` (#1c69d4) → `{colors.m-red}` (#e22718) — appears sparingly as the brand's signature accent, used on the M wordmark, motorsport chrome, vehicle-tech callouts, and model badges. It is never a CTA color and never used as a background fill — the tricolor is exclusively a brand-identity marker.

Type voice runs **BMW Type Next Latin** in two cuts: regular for display + nav labels and Light for body + secondary copy. Display sizes use weight 700 (BMW's signature heavy-but-tight setting), while body type drops to weight 300 (Light). The contrast between heavy display and light body is the system's editorial signature.

**Key Characteristics:**

**BMW Type Next Latin** is BMW's licensed display + body typeface. The system uses two cuts: regular and Light. The fallback stack walks `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`.

The split is a deliberate weight-pair:

The contrast between heavy display and light body is BMW's editorial signature — never blur it by using regular (400) display or medium (500) body.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 80px | 700 | 1.0 | 0 | Hero h1 ("THE ULTIMATE", "MORE BMW M.") |

| `{typography.display-lg}` | 56px | 700 | 1.05 | 0 | Section heads ("MORE FROM BMW M MAGAZINE.") |

| `{typography.display-md}` | 40px | 700 | 1.1 | 0 | Sub-section heads, model names |

| `{typography.display-sm}` | 32px | 700 | 1.15 | 0 | CTA-band heads, category page titles |

| `{typography.title-lg}` | 24px | 700 | 1.3 | 0 | Card titles in 3-up grids |

| `{typography.title-md}` | 20px | 400 | 1.4 | 0 | Card sub-titles, lead paragraphs |

| `{typography.title-sm}` | 18px | 400 | 1.4 | 0 | Spec callouts, intro paragraphs |

| `{typography.label-uppercase}` | 14px | 700 | 1.3 | 1.5px | Category tabs, "VIEW MORE" inline labels |

| `{typography.body-md}` | 16px | 300 (Light) | 1.5 | 0 | Default body — BMW Type Next Latin Light |

| `{typography.body-sm}` | 14px | 300 (Light) | 1.5 | 0 | Footer body, cookie consent, fine print |

| `{typography.caption}` | 12px | 400 | 1.4 | 0.5px | Photo captions, image-credit lines |

| `{typography.button}` | 14px | 700 | 1.0 | 1.5px | All button labels — uppercase, letterspaced |

| `{typography.nav-link}` | 14px | 400 | 1.4 | 0.5px | Top-nav menu items |

The system contrasts heavy headlines (700) against very light body (300) at all times — the gap is the editorial signature. Letter-spacing is non-trivial: button labels and category labels carry 1.5px tracking that makes them feel "machined" rather than "typed." Display headlines stay at 0 letter-spacing — BMW Type's natural cap-height handles spacing on large sizes.

UPPERCASE display is the default voice for h1/h2 — sentence case appears on body and intro paragraphs but rarely on headlines. The all-caps treatment is a brand-voice signal, not a stylistic choice.

If BMW Type Next Latin is unavailable, **Inter** (variable) at 700/300 is the closest open-source substitute. Adjust display headline tracking to -0.5px to match BMW Type's tighter spacing at large sizes. **Saira Condensed** is an alternative for headlines if a slightly more compressed feel is desired.

BMW M trusts photography to do the visual work. Whitespace around photography is restrained — the cars fill the frame, and copy sits below or beside them in tightly-aligned columns. Where whitespace appears (between body sections, around CTAs), it's always uniform `{spacing.section}` (96px). The system never adds atmospheric backdrops, gradients, or decoration — empty space stays as empty black canvas.

| Level | Treatment | Use |

|---|---|---|

| Flat | No shadow, no border | Body sections, top nav, footer, photo bands |

| Soft hairline | 1px `{colors.hairline}` border | Section dividers, card outlines, table rows |

| Card surface | `{colors.surface-card}` background over canvas — no shadow | Feature photo cards, magazine cards, chatbot launcher |

| Photographic depth | Full-bleed photography with edge-to-edge crop | Hero bands, motorsport features — depth via subject matter, not chrome |

The system uses no drop shadows and no layered chrome. Depth comes entirely from photography (subject + lens + lighting) and the contrast between black canvas and slightly-elevated `{colors.surface-card}`.

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | All buttons, cards, photo containers, spec cells, inputs — the dominant radius |

| `{rounded.xs}` | 2px | Almost no use — reserved for legal CTAs |

| `{rounded.sm}` | 4px | Small toggle pills on configurator surfaces |

| `{rounded.md}` | 6px | Rare — small dropdown menu items |

| `{rounded.full}` | 9999px / 50% | Circular icon buttons, carousel arrows, chatbot launcher |

The radius hierarchy is "almost always 0, sometimes circular." This binary radius decision is a deliberate brand-language choice — sharp rectangles read as engineered precision; circles read as functional controls. Nothing in between.

Hero photography fills full-width with no rounding. Photo cards inside grids retain `{rounded.none}` corners, edge-to-edge images. Carbon-wheel detail shots and motorsport-pit photos use 16:9 or 21:9 cinema-aspect ratios. Driver portraits in racing-team grids use 4:5 portrait crops, also with sharp corners.

**`top-nav`** — Black nav bar pinned to the top of every page. 64px tall, `{colors.canvas}` background. Carries the BMW M logo at left (M tricolor + BMW roundel + "M" wordmark), primary horizontal menu (Models, Topics, Magazine, Configurator, Fastlane), right-side cluster with language selector, search icon, account icon. Menu items render in `{typography.nav-link}` with sentence-case labels.

**`button-primary`** — The signature primary CTA. Background `{colors.canvas}` (or transparent over photography), text `{colors.on-dark}` (white), 1px white border outline, rounded `{rounded.none}` (0px), padding 16px × 32px, height 48px. Type `{typography.button}` — uppercase 14px / 700 / 1.5px tracking. The rectangular silhouette and uppercase letterspaced label IS the brand button.

**`button-primary-outline`** — Same shape as primary but with transparent background and white outline only. Used over photography where a filled button would clash with the image.

**`button-on-light`** — Used on rare light-surface contexts (configurator, account dialogs). Background `{colors.canvas}`, text `{colors.on-dark}` — black button with white text, inverted from the dark-canvas default.

**`button-icon`** — Circular icon buttons (carousel controls, share, favorite). 48 × 48px, background `{colors.surface-card}`, white icon centered, rounded `{rounded.full}`. The only non-rectangular button shape in the system.

**`carousel-arrow`** — Specific 48 × 48 circular arrow used in photo carousels. Same shape as `{component.button-icon}` with chevron glyph.

**`text-link`** — Inline uppercase letterspaced links ("VIEW ALL MODELS", "READ MORE"). `{typography.label-uppercase}`, white on dark, no underline. The chevron arrow → glyph appears next to most link labels.

**`hero-photo-band`** — Full-width black band with full-bleed automotive photography filling most of the frame. The h1 uses `{typography.display-xl}` (80px / 700) and sits left-aligned over the photo, often with a small subtitle in `{typography.body-md}` below. Vertical padding `{spacing.xxl}` (64px). No card frame — the photo IS the band.

**`feature-photo-card`** — Used in 3-up grids for "MORE FROM BMW M MAGAZINE" and similar editorial sections. Background `{colors.surface-card}`, rounded `{rounded.none}`, internal padding `{spacing.lg}` (24px). Top half of the card is a 16:9 photo (full-bleed within the card); below the photo, a category tag in `{typography.label-uppercase}`, a `{typography.title-lg}` title, and a short body description.

**`model-card`** — Used in the "MORE NEW M MODELS" 3-up grid. Background `{colors.canvas}` (no card surface — just photo on black), rounded `{rounded.none}`. Top: 16:10 hero shot of the model. Below: model name in `{typography.display-md}` (40px / 700), short specs line in `{typography.body-sm}`, a `{component.text-link}` ("EXPLORE THIS MODEL").

**`magazine-article-card`** — A more text-forward card variant used on the magazine overview page. Background `{colors.canvas}` with hairline border, rounded `{rounded.none}`. Carries a small thumbnail at top, a category label in `{typography.label-uppercase}`, headline in `{typography.title-lg}`, and a body excerpt.

**`spec-cell`** — Technical specification cells used on model-detail pages (engine specs, weight, top speed, 0-100 time). Background `{colors.surface-soft}` (#0d0d0d), rounded `{rounded.none}`, padding `{spacing.lg}` (24px). Each cell holds a value in `{typography.display-sm}` (32px / 700) at top and a label in `{typography.label-uppercase}` below.

**`motorsport-photo-card`** — Edge-to-edge photo cards used in the racing-team / motorsport sections. No card surface — just a full-bleed photograph with a small overlay caption in white text at the bottom-left. The photography IS the brand here.

**`chatbot-launcher`** — A right-side card-style entry point ("BMW M CHATBOT") on the homepage. Background `{colors.surface-card}`, rounded `{rounded.none}`, padding `{spacing.lg}` (24px). Carries an h3 title, a short prompt, and a `{component.button-primary}` to launch.

**`category-tab`** + **`category-tab-active`** — The category selector tabs used on the magazine and topics pages (e.g., "ALL · MAGAZINE · MODELS · LIFESTYLE · MOTORSPORT"). Tabs render as text-only labels in `{typography.label-uppercase}`. Active state changes text color from `{colors.body}` to `{colors.on-dark}` and adds a 2px white underline below the label. No background fill, no rounded corners.

**`text-input`** — Standard text input on dark surfaces. Background `{colors.surface-card}`, text `{colors.on-dark}`, type `{typography.body-md}`, rounded `{rounded.none}` (0px), padding 12px × 16px, height 48px. 1px hairline border. Focus state thickens the border to white.

**`cookie-consent-card`** — A right-side cookie-banner card visible on the homepage. Background `{colors.canvas}` with 1px hairline, rounded `{rounded.none}`, padding `{spacing.lg}` (24px). Body text in `{typography.body-sm}` (14px / 300) — Light weight even for legal text. Two buttons stacked at bottom: primary outline + text-link.

**`m-stripe-divider`** — The 4px horizontal stripe carrying the M tricolor (`{colors.m-blue-light}` → `{colors.m-blue-dark}` → `{colors.m-red}`). Used as a divider on motorsport chrome, between brand-identity sections, and as a hover-state indicator on category tabs. The most distinctive non-typographic element in the system.

**`cta-band-photo`** — A pre-footer "Drive an M" CTA band carrying full-bleed photography of a car cornering on a track, with a centered headline in `{typography.display-md}` and a `{component.button-primary-outline}` below. Vertical padding 80px. The CTA inherits the editorial gravity of the rest of the page through full-bleed photography rather than chrome.

**`footer`** — Black footer that closes every page. Background `{colors.canvas}`, text `{colors.body}`. 4-column link list at desktop covering BMW M Models / BMW M Lifestyle / Owners / Company. Vertical padding 64px. Bottom row carries the BMW corporate disclaimer in `{typography.caption}` and language selector. The footer never inverts — it stays black even when the body might transition.

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 768px | Hamburger nav; hero h1 scales 80→48px; demo grid 1-up; photo cards stack full-width; footer 4 cols → 1 |

| Tablet | 768–1024px | Top nav stays horizontal but tightens; 2-up card grids; spec tables 2-up |

| Desktop | 1024–1440px | Full top-nav; 3-up card grids; spec tables 4-up |

| Wide | > 1440px | Same as desktop with more breathing room; max content 1440px |

1. Focus on ONE component at a time. Reference its YAML key (`{component.hero-photo-band}`, `{component.spec-cell}`).

2. New components default to `{rounded.none}` (0px). Only use `{rounded.full}` if it's a circular icon button.

3. Variants (`-active`, `-disabled`) live as separate entries in `components:`.

4. Use `{token.refs}` everywhere — never inline hex.

5. Never document hover states. Default and Active/Pressed only.

6. Display headlines stay UPPERCASE 700; body stays sentence-case 300. Never blur the contrast.

7. The M tricolor is brand-identity-only — never extend it to system tokens for "primary action."

8. When in doubt about emphasis: bigger photography before bigger type.