Refined neutrals with BMW Blue as the primary interactive accent. Light theme uses Alpine White surfaces; dark theme uses Night Black. Signal colors reserved for semantic states.
Neutral Palette
Alpine White
#ffffff
Primary background, base surface
Glacier Silver
#f5f5f5
Secondary surface, sections
Sophisto Grey
#e8e8e8
Tertiary surface, cards
Border Light
#e0e0e0
Borders, dividers
Carbon Black
#1a1a1a
Primary text, headings
Dark Ink
#333333
Body text, readable content
Medium Grey
#666666
Secondary text, labels
Muted Grey
#999999
Placeholders, disabled states
Brand & Accent
BMW Blue
#1C69D4
Primary brand, links, CTAs
BMW Blue Dark
#1658b8
Hover state, active buttons
BMW Blue Light
#4d8fe6
Accent highlights, selected
Gold Accent
#c4a265
Premium, M Sport highlights
Semantic Signals
Signal Green
#00b050
Success, positive confirmation
Signal Red
#d42e12
Error, destructive actions
Signal Yellow
#f5a623
Warning, caution indicators
Chrome Silver
#c0c0c0
Metallic accents, decorative
Typography
Type Scale
BMW Type as primary typeface (Inter substitute). Geometric precision with light-weight hero text (300) and authoritative headings (600). 10-step scale from 12px caption to 72px hero.
CaptionMeta info · Labels · Footer12px / 1.5 / 0.04px
Fonts
PrimaryBMW Type300–700 · 12–72px
LightBMW Type Light300 · 40–72px · Heroes only
MonoBMW Mono400–500 · Specs & data
FallbackInterSubstitute for all above
Layout
Spacing & Shapes
Base unit 8px. Spacious density with generous breathing room. 15-step spacing scale, precise border radii favoring clean edges over softness.
Spacing Scale (8px base)
44px
88px
1616px
2424px
3232px
4848px
6464px
9696px
Border Radius
sharp0px
subtle2px
buttons4px
cards8px
Shadows
Subtleborder only
Card0 2px 8px
Elevated0 4px 16px
Modal0 8px 32px
Elevation
Surfaces
4 surface levels using subtle background differentiation rather than shadows. Light theme progresses from Alpine White to Sophisto Grey; dark theme from Night Black to Graphite.
Light Theme Surfaces
Alpine White#ffffffLevel 0
Glacier Silver#f5f5f5Level 1
Sophisto Grey#e8e8e8Level 2
Mineral White#f0f0f0Level 3
Dark Theme Surfaces
Night Black#0a0a0aLevel 0
Carbon Dark#141414Level 1
Shadow Grey#1e1e1eLevel 2
Graphite#2a2a2aLevel 3
Components
Button Variants
Primary filled (BMW Blue), secondary outline, and ghost text variants. All use 4px radius with generous 12px/32px padding for a premium, spacious feel.
Primary Action Button
Main call to action — highest visual weight
.btn-primary
BMW Blue (#1C69D4) background, white text, 4px radius. Hover transitions to BMW Blue Dark (#1658b8). Use exclusively for the single most important action.
Secondary Outline Button
Secondary actions, feature CTAs
.btn-secondary
BMW Blue text, BMW Blue border, 4px radius. Fills with BMW Blue on hover with white text. For secondary actions that still need visibility.
Ghost Text Button
Tertiary actions, inline links
.btn-ghost
BMW Blue text, no border, no background. Underline appears on hover. For less prominent actions and inline links.
Premium Card
Elevated content, product features
.card
The new BMW i7
Pure electric luxury. Up to 625 km range with breathtaking acceleration.
Alpine White background, 1px Border Light border, 4px radius. Focus state changes border to BMW Blue with a subtle 3px ring shadow.
Navigation Bar
Primary site navigation
.nav
BMW
ModelsElectricConfigurator
Sticky top bar, Alpine White background with 1px Border Light bottom border. Logo left, centered links, CTA right. Links are Carbon Black, 14px, weight 500.
Guidelines
Do's & Don'ts
Do — Embrace
Alpine White / Night Black as primary backgrounds
BMW Blue exclusively for CTAs, links, and interactive elements
8px grid with generous 32px section gaps
Weight 300 for hero text, 600 for headings
4px radius for buttons, 8px for cards — precise edges
Subtle shadows (0 2px 8px) over heavy elevation
Gold Accent sparingly for M Sport or premium tiers