Dark Mode

# 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 Models Find 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

Model
Default (sharp corners)
Location
Focus (BMW Focus Blue)
VIN
Error
Notes

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