Design System Analysis of BMW

BMW corporate site. On a light canvas, the BMW corporate blue (#1c69d4) carries every primary CTA; dark navy hero bands frame model photography. Heavy 700 display weight against Light 300 body in BMW Type Next Latin is the editorial signature.

iX3
100% electric BMW. Reserve yours now.
01 — Color Palette

BMW Blue + light canvas + dark navy

A single primary action color: BMW Blue. Light canvas pages, dark navy hero bands, soft gray card surfaces. The M tricolor only appears in M-model contexts.

Brand

primary (BMW Blue)
#1c69d4
All primary CTAs and the blue text-link prefix.
primary-active
#0653b6
Press state.
primary-disabled
#d6d6d6
Disabled CTA.

M Tricolor (M context only)

m-blue-light
#0066b1
First stop of the M tricolor stripe.
m-blue-dark
#1c69d4
Middle stop. Same as the corporate blue.
m-red
#e22718
Third stop. M-power red.

Surface

canvas
#ffffff
Default page surface.
surface-soft
#f7f7f7
Footer and sub-nav band.
surface-card
#fafafa
Photo plate inside the model card.
surface-dark
#1a2129
Hero band, dark CTA. Not pure black — carries a warm undertone.
surface-dark-elevated
#262e38
Nested card on top of the dark hero.
hairline
#e6e6e6
1px divider, input outline.

Text

ink
#262626
Display and primary text.
body
#3c3c3c
Default running text.
muted
#6b6b6b
Footer link, breadcrumb, caption.
on-dark-soft
#bbbbbb
Secondary text on dark bands.
02 — Typography Scale

BMW Type Next Latin · 700/300 contrast

Display weight 700 against body weight 300 (Light) — the contrast is the editorial signature. Inter is used here as a substitute.

display-xl64px / 700 / 1.05 / 0
Exactly What You Need
display-lg48px / 700 / 1.1 / 0
The New BMW iX3
display-md32px / 700 / 1.15 / 0
BMW iX
display-sm24px / 700 / 1.25 / 0
Driving Pleasure at Its Peak
title-lg20px / 700 / 1.3 / 0
The New iX3
title-md18px / 700 / 1.4 / 0
BMW 5 Series Sedan
title-sm16px / 700 / 1.4 / 0
BMW M3 Competition
body-md16px / 300 (Light) / 1.55
Discover the new BMW iX3 with technology, driving dynamics, and sustainable design that raise the standard.
body-sm14px / 300 (Light) / 1.55
Footer body and fine-print legal — Light weight even in legal copy.
caption12px / 400 / 1.4 / 0.5px
Photo: BMW · 2026
label-uppercase13px / 700 / 1.3 / 1.5px
LEARN MORE
button14px / 700 / 1.0 / 0.5px
Book a Test Drive
nav-link14px / 400 / 1.4 / 0.3px
Models · Next Generation · Pre-Owned · Dealers · Test Drive
03 — Button Variants

Blue primary, white outline secondary

All buttons are 0px corner radius (rectangular). No pills, no rounded shapes — the corporate "engineered precision" voice.

button-primary
BMW Blue / on-primary white / 0px radius
button-primary-active
primary-active deep blue
button-primary-disabled
button-secondary
canvas / ink / hairline-strong outline
button-secondary-on-dark
Transparent + white outline on a dark hero
button-text-link
UPPERCASE 1.5px tracking + chevron
text-link
Inline link inside body copy.
04 — Model Cards

5-up grid: Next Generation models

The signature homepage pattern. Model photo on a `surface-card` plate, title underneath, closed off with an UPPERCASE "LEARN MORE" link.

The New iX3

100% electric BMW. Sustainable luxury.

BMW iX

Innovation, luxury, and sustainability.

BMW X3

Sporty SAV. Premium comfort.

BMW 5 Series Sedan

The executive sedan, redesigned.

BMW 5 Series Sport

Enriched with M Performance.
05 — Hero Band (Dark)

BMW iX3

Pure electric driving thrill. 0–100 km/h in 4.9 seconds. 600+ km range. Fast-charge 200 km in 10 minutes.

06 — Spec Cells

Technical data — gridded layout

340 PS
Engine Power
4.9 s
0 – 100 km/h
213 km/h
Top Speed
605 km
WLTP Range
81 kWh
Battery
10 min
Fast Charge (200 km)
M xDrive
Drivetrain
M Compound
Brakes
07 — Inventory + Filter

Dealer vehicle inventory

Dealer inventory page — a horizontal row of filter chips above an inventory card per vehicle.

BMW iX3
xDrive50 · Inline 6 electric · 2025
€68,900
BMW iX
xDrive40 · Sport · 2025
€84,500
BMW X3 30e
Plug-in Hybrid · M Sport · 2025
€72,400
BMW 530i
M Sport · Automatic · 2025
€78,200
08 — Configurator Options

Build-and-reserve flow. Color, upholstery, and wheel choices — selected variant carries a 2px BMW Blue border.

Color selection

09 — Form & Cookie

All inputs are 0px corner with a 1px hairline outline. On focus the border shifts to 2px ink.

Cookie usage. We use cookies on this site to improve your experience. You can manage your preferences.

10 — Category Tabs
All
Electric
Hybrid
Petrol
M Performance
11 — Brand Signature: M Stripe

M tricolor stripe — only ever appears in M-model contexts.

12 — Spacing Scale
xxs · 4px
xs · 8px
sm · 12px
md · 16px
lg · 24px
xl · 32px
xxl · 48px
section · 80px
13 — Border Radius

Almost always 0px. Full radius is reserved for circular icon buttons.

0 · none
2 · xs
4 · sm
8 · md
12 · lg
full
14 — Elevation & Depth

No drop shadows. Depth comes from photography and the dark/light surface contrast.

Flat / Canvas

Body, top nav, hero bands.

Soft hairline

1px hairline border. Configurator option tile.

Dark hero

surface-dark — dark-tone photo blended with a dark gradient.

Photographic

Edge-to-edge photography does the job of chrome.

Card surface

surface-card — model card photo plate.

M-stripe accent

4px tricolor — only in the M context.

15 — CTA Band (Dark)

Get in touch with your nearest BMW dealer

16 — Responsive Behavior
NameWidthKey Changes
Mobile< 768pxHamburger nav; hero h1 64→40px; model card 1-up; configurator chips 2-up.
Tablet768–1024pxTop nav narrows; model card 2-up; inventory 2-up.
Desktop1024–1440pxFull top-nav; 4–5 up model card; inventory 3-up.
Wide> 1440pxContent stays pinned at 1440px; the gutters absorb the rest.
375
mobile
600
small phone
768
tablet
1024
laptop
1280
desktop
1440
wide

Touch Targets

Collapsing Strategy