Design System
Inspired by BMW

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized with sharp precision.

Explore ModelsFind Your BMW
01 / Colors

Color Palette

Brand
BMW Blue
#1c69d4
Highlight accent
Focus Blue
#0653b6
Focus states
Theme White
#ffffff
Primary surface
Neutral
Near Black
#262626
Primary text
Meta Gray
#757575
Secondary text
Silver
#bbbbbb
Muted text
02 / Typography

Typography Scale

DISPLAY HERO
Display — 60px / 300 / 1.30 / uppercase / BMWTypeNextLatin Light
Section Heading
Section — 32px / 400 / 1.30 / BMWTypeNextLatin
Nav Emphasis — SHEER DRIVING PLEASURE
Nav — 18px / 900 / 1.30 / BMWTypeNextLatin
Body — The ultimate driving machine. Precision engineering meets luxury design.
Body — 16px / 400 / 1.15 / BMWTypeNextLatin
Button Bold — EXPLORE NOW
Button — 16px / 700 / 1.20 / BMWTypeNextLatin
03 / Buttons

Button Variants

BMW Blue
Primary
Outlined
Secondary
Dark Surface
Dark

All buttons use 0px border-radius — sharp corners are non-negotiable.

04 / Cards

Card Examples

BMW iX

The future of sustainable mobility. All-electric, all BMW. Sharp corners, minimal borders.

BMW M Series

Performance without compromise. Track-ready engineering for the road.

Dark Variant

Cards on dark surfaces. No border, no radius — pure geometry.

05 / Forms

Form Elements

Default (sharp corners)
Focus (BMW Focus Blue)
Error
06 / Spacing

Spacing Scale

8
12
16
24
32
40
60
07 / Radius

Border Radius

0px

BMW uses 0px border-radius exclusively. Every element is a sharp rectangle.

08 / Elevation

Depth

Flat
No shadow — default
Photography
Dark hero sections
Focus
BMW Focus Blue ring