Primary
#ffffff
BMW M Design Language
Born onthe track.
A precision-led visual system built on a black canvas, high-contrast type, engineered spacing, and the unmistakable M tricolor signature.
01 / Foundation
Color system
Near-black surfaces and crisp white typography carry the interface. M colors stay concentrated in brand signatures, navigation states, and purposeful accents.
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
M tricolor signature
Use the three colors in sequence and reserve the treatment for concise brand moments.
Light blue
#0066b1Dark blue
#1c69d4Red
#e22718
02 / Voice
Typography
BMW Type Next Latin defines the source system. This preview uses Barlow Condensed and Barlow as accessible visual substitutes.
Aa M4
Barlow Condensed · 400–700
Ag 0123
Barlow · 300–700
display-xl
M PERFORMANCE
80 / 80 · 700 · 0
display-lg
Born on the track
56 / 58.8 · 700 · 0
display-md
Maximum precision
40 / 44 · 700 · 0
display-sm
Motorsport engineering
32 / 36.8 · 700 · 0
title-lg
BMW M4 Competition
24 / 31.2 · 700 · 0
title-md
Uncompromising dynamics
20 / 28 · 400 · 0
title-sm
Track-ready technology
18 / 25.2 · 400 · 0
label-uppercase
Explore the models
14 / 18.2 · 700 · 1.5
body-md
Performance shaped by decades of motorsport experience.
16 / 24 · 300 · 0
body-sm
Engineered to deliver control at every apex.
14 / 21 · 300 · 0
caption
Model specification · European configuration
12 / 16.8 · 400 · 0.5
button
Discover more
14 / 14 · 700 · 1.5
nav-link
Models · Experience · Motorsport
14 / 19.6 · 400 · 0.5
03 / Rhythm
Spacing & shapes
A compact 4px foundation scales into generous 96px section spacing. Corners stay controlled and technical.
Spacing scale
XXS
4px
XS
8px
SM
12px
MD
16px
LG
24px
XL
40px
XXL
64px
Section
96px
Radius scale
None · 0
XS · 2px
SM · 4px
MD · 6px
Full · 9999px
04 / Depth
Surfaces
Depth is expressed through tightly stepped black and gray surfaces, with borders separating functional regions.
#000000
#0d0d0d
#1a1a1a
#262626
05 / Interface
Components
Square controls, concise labels, clear active states, and modular specifications keep the experience direct.
BMW M4
Competition Coupé
Performance data shown as a disciplined, scan-friendly module.
530HP
3.50–100 km/h
650Nm
8Speed M Steptronic
06 / Direction
Guidelines
Preserve the system’s technical restraint: contrast, typography, and imagery carry the energy.
Do
- Anchor primary layouts to the black canvas.
- Keep display headlines concise, bold, and uppercase.
- Use the M tricolor as a controlled brand signature.
- Preserve documented spacing and interaction states.
Avoid
- Introducing colors outside the documented palette.
- Replacing white ink with an arbitrary neutral.
- Softening every control with large corner radii.
- Flattening spacing or component states for convenience.