Color Palette
Shadow Colors
No dedicated shadow color tokens detected — shadows use inline rgba values.
Typography
Base Font · bmwTypeNextWeb / Rajdhani
BMW Type
The ultimate driving machine. Sheer driving pleasure.
Light · 300
Regular · 400
Medium · 500
Bold · 700
Mono Font · IBM Plex Mono
Plex Mono
const bmwConfig = { series: "M5", year: 2026 }
Regular · 400
Medium · 500
Discover BMW Models
Heading 4XL · 29px · Bold · line-height: 42px
Configure Your BMW
Heading 3XL · 25px · Bold · line-height: 36px
The 5 Series
Heading 2XL · 24px · Bold · line-height: 32px
Sheer Driving Pleasure, Redefined
Heading XL · 20px · Medium · line-height: 30px
Experience the perfect balance of performance, luxury, and innovation in every BMW model.
Body Large · 18px · Regular · line-height: 28px
Every BMW vehicle is crafted with precision engineering and cutting-edge technology.
Body Default · 16px · Regular · line-height: 26px
Starting from ₹65,90,000 · Available in 8 colours
Body Small · 14px · Regular · line-height: 22px
SERIES 3 · SERIES 5 · X5 · M4
Caption / Label · 12px · Medium · line-height: 20px · letter-spacing: 0.1em
Letter Spacing
No letter-spacing tokens detected in the BMW design system.
Spacing
Spacing Scale
13 tokens — 2px → 227.625px
Borders
Border Widths
Two border widths used throughout the system. Hairline for subtle divisions, Thin for active states and emphasis. --border-width-hairline: 1px · --border-width-thin: 2px
Shadows / Elevation
Shadow Tokens
5 tokens
Inset Dark
×82
rgb(38,38,38) inset 1px — dark outlines
Inset Mid
×6
rgb(142,142,142) inset 1px — hover state
Drop Large
×2
rgba(0,0,0,.16) 5px 40px — panels
Drop XL
×1
6px 20px + 1px outline — modals
Bottom Up
×1
rgba(0,0,0,.5) -1px 8px — bars
Z-Index
| Layer | Value | Usage |
|---|
| Background | -999 | Deepest background layers, canvas decorations |
| Below | -1 | Elements positioned behind base content |
| Navigation | 10 | Sticky headers, primary navigation |
| Popover | 20 | Dropdowns, tooltips, context menus |
| Overlay High | 6010 | Top-level overlays |
| Dialog Base | 6040 | Modal dialogs |
| Dialog Top | 6050 | Nested dialogs |
| Alert | 6060 | System alerts, toasts |
| Critical | 6120 | Critical system overlays |
Breakpoints
XS Breakpoint
480px
Extra small mobile
SM Breakpoint
550px
Small mobile
MD Breakpoint
599px
Medium mobile
LG Breakpoint
767px
Large mobile / small tablet
XL Breakpoint
768px
Tablet portrait
2XL Breakpoint
992px
Tablet landscape
3XL Breakpoint
1023px
Small desktop
BP-8 Breakpoint
1024px
Desktop standard
BP-9 Breakpoint
1279px
Large desktop
BP-10 Breakpoint
1280px
Wide desktop
BP-11 Breakpoint
1919px
Full HD
BP-12 Breakpoint
1920px
4K / Ultra-wide
Opacity
Opacity Tokens
1 token detected
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
| Text Token | Background Token | Ratio | WCAG Rating |
|---|
| Dark Gray 2 | Dark Gray | 2.64:1 | Fail |
| Dark Gray 2 | White | 5.74:1 | AA |
| Dark Gray 2 | Black | 3.66:1 | AA Large |
| Dark Gray 2 | Dark Gray 3 | 1.47:1 | Fail |
| Dark Gray 2 | Blue | 1.1:1 | Fail |
| Dark Blue | Dark Gray | 2.55:1 | Fail |
| Dark Blue | White | 5.94:1 | AA |
| Dark Blue | Black | 3.54:1 | AA Large |
| Dark Blue | Dark Gray 3 | 1.42:1 | Fail |
| Dark Blue | Blue | 1.14:1 | Fail |
| Blue 2 | Dark Gray | 1.61:1 | Fail |
| Blue 2 | White | 9.4:1 | AAA |
| Blue 2 | Black | 2.23:1 | Fail |
| Blue 2 | Dark Gray 3 | 1.11:1 | Fail |
| Blue 2 | Blue | 1.8:1 | Fail |
CSS Variables Reference
Dark Gray--color-dark-gray#262626
White--color-white#FFFFFF
Black--color-black#000000
Dark Gray 3--color-dark-gray-3#4D4D4D
Light Gray--color-light-gray#E6E6E6
Light Gray 2--color-light-gray-2#EFEFEF
Light Gray 3--color-light-gray-3#BBBBBB
White 2--color-white-2#F6F6F6
Dark Gray 2--color-dark-gray-2#666666
Dark Blue--color-dark-blue#0066B1
Blue 2--color-blue-2#0000EE
Mid Gray--color-mid-gray#8E8E8E
Base Font--font-family-basebmwTypeNextWeb
Light--font-weight-light300
Regular--font-weight-regular400
Medium--font-weight-medium500
Bold--font-weight-bold700
Caption--font-size-2xs12px
Body Small--font-size-xs14px
Body Default--font-size-sm16px
Body Base--font-size-base17px
Body Large--font-size-lg18px
Heading SM--font-size-xl20px
Heading MD--font-size-2xl24px
Heading LG--font-size-3xl25px
Heading XL--font-size-4xl29px
Space 32--space-32227.625px
Hairline--border-width-hairline1px
Thin--border-width-thin2px
Medium--radius-md8px 8px 0px
Large--radius-lg10px 10px 0px
Instant--duration-instant50ms
Fast--duration-fast150ms
Normal--duration-normal200ms
Slow--duration-slow250ms
Slower--duration-slower300ms
Long--duration-duration-6400ms
Ease In--easing-ease-inease-in
Ease In Out--easing-ease-in-outease-in-out
Ease Out--easing-ease-outease-out
Linear--easing-linearlinear
Background--z-1-999
Below--z-2-1
Navigation--z-310
Popover--z-420
Overlay--z-56010
Dialog--z-66040
Alert--z-86060
Critical--z-96120
Design System Preview · BMW (Light) · Generated 14/04/2026 · 13 color tokens · 9 font-size · 1 font-family · 4 font-weight · 10 line-height · 13 spacing · 4 radius · 2 border-width · 5 shadow · 6 duration · 4 easing · 9 z-index · 12 breakpoint · 1 opacity