BMW Design System

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.

...

Key Characteristics:

• Light {colors.canvas} is the base surface; dark navy {colors.surface-dark} appears only inside hero bands — page rhythm relies on contrast.
• ...

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

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

Semantic

• Success ({colors.success} — #22c55e): Confirmation messages and "available" indicators.
• Warning ({colors.warning} — #f59e0b): Warning callouts.
• ...

Font Family

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

Hierarchy

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

Note on Font Substitutes

• Inter (variable) — close match at weight 700/300. Leave letter-spacing at 0.0em.
• Saira Condensed — for a slightly more compressed BMW Type feel.

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

Grid & Container

• Max content width: ~1440px center-aligned.
• Editorial body: A single 12-column grid.
• ...

Whitespace Philosophy

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.

Border Radius Scale

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

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

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

Breakpoints

Touch Targets

• {component.button-primary} minimum 48 × 48px — above WCAG AAA (44 × 44).
• {component.text-input} height 48px.
• ...

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

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

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.

• ...

"Create a vehicle detail page: sharp layouts, BMW blue (#1c69d4) CTA buttons, and high-contrast bold titles."

The parsed design tokens extracted from the core stylesheet of this design system: