# Bmw · Design system migration spec

> Source: https://www.bmw.com  ·  Curated by OpenDesign  ·  en

> Worth including as a benchmark for premium automotive brand digital presence—demonstrates how dramatic photography and restrained typography create luxury without excess.

## 1. Identity DNA

The design system for BMW is defined by an almost surgical commitment to **precision and minimalism**. It operates not through accumulation but through the deliberate, refined placement of singular elements against a field of silence.

**One-liner:** A premium automotive website with dark atmospheric heroes, clean typography, and bold blue accents.
**Keywords:** Premium · Automotive · Performance · Elegant · Restrained
**Analogy:** A luxury automotive showroom showcasing high-performance vehicles through dramatic photography.

## 2. Color

The palette is an exercise in high-contrast restraint, built upon a primary canvas of pure, unyielding white. A single blue accent and subtle metallic gradients provide the only relief, creating a field of stark, premium clarity.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--ink` | `#414141` | body text |
| `--muted` | `#727171` | placeholder |
| `--accent` | `#1C69D4` | single accent |
| `--line` | `rgba(65, 65, 65, 0.2)` | divider |

**Color principle:** Minimalist palette anchored by deep charcoal and crisp white, punctuated by a singular BMW blue accent for actions.

The governing principle is subtraction: every color must justify its presence against the dominant white void.

## 3. Typography

Typography is handled with the same restraint as the palette, employing a refined transitional serif for the brand mark. This choice communicates a heritage of precision, with letterforms given vast negative space to breathe and assert their elegance.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.05 | 300 | -0.5px | Hero headlines and promotional announcements |
| headline | 35px | 1.2 | 300 | -0.25px | Section headers and secondary titles |
| body | 18px | 1.5 | 300 | 0px | Descriptive text and paragraphs |
| small | 15px | 1.6 | 300 | 0px | Navigation links, buttons, and utility text |
| caption | 12px | 1.35 | 300 | 0px | Disclaimers and fine print |

**Type rules:**
- Headlines use light weight (300) for an elegant, premium feel.
- Button text uses medium weight (500) for clear call-to-action emphasis.
- Tight negative letter-spacing on large display type for visual density.
- Body text maintains generous line-height (1.5-1.6) for comfortable reading.

## 4. Spacing

Spacing operates on a rhythm of symmetrical centering and vast negative space, creating a visual silence that directs all attention inward.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px grid system with generous horizontal padding (96px on desktop hero sections) for breathing room.

## 5. Surfaces

Surfaces are treated as planes of absolute flatness. Shadows and borders are deliberately excluded, leaving only the purity of form and the subtle interplay of metallic gradients on the central motif.

- **Radius:** sm 0px · md 2px · lg 5px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.25) 0px 4px 4px 0px
  - rgba(0, 0, 0, 0.2) 0px 0px 18px 0px
- **Borders:** Thin 1px borders in muted charcoal (#414141) for subtle separation, no heavy outlines.

## 6. Layout

The layout skeleton is a study in singular focus: a single, perfectly centered column. This absolute symmetry eliminates distraction, framing the central geometric element as the sole architectural subject of the interface.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed hero imagery with left-aligned text overlays, transitioning to centered white content sections below.

## 7. Motion & Interaction

Motion is implied rather than executed, suggested through a segmented metallic gradient that evokes smooth, continuous rotation. The philosophy is one of understated dynamism, where potential energy is preferred over overt animation.

- **Durations:** micro 100ms · small 200ms · medium 500ms
- **Easing:** `cubic-bezier(0.455, 0.03, 0.515, 0.955)`
- **Patterns:**
  - Quick 0.1s color transitions on interactive elements for responsive feedback.
  - Smooth 0.5s opacity fade-ins for content reveals.
  - Subtle width and position transitions for expandable navigation elements.

- **Hover:** Immediate color change on text links and buttons, subtle opacity shifts on imagery.
- **Click:** Clean state transitions without heavy scale or transform effects.
- **Transition:** Consistent use of cubic-bezier easing for all interactive state changes.
- **Keyboard:** Standard focus management with visible focus indicators on interactive elements.

## 8. Voice & Don'ts

The editorial voice is silent, precise, and refined, mirroring the visual discipline. Communication is minimal, with headlines set in a minimalist serif with tight tracking, allowing the design's clarity to carry the message.

- **Tone:** Confident, premium, and informative without being pushy.
- **Headline style:** All-caps display type with periods for declarative statements (e.g., 'LEASE THE 2026 BMW X5 xDRIVE40i.')
- **CTA style:** Direct action verbs ('Learn more', 'Offer details', 'See all offers') in sentence case on blue buttons.
- **Avoid:** Excessive exclamation marks / Casual slang / Overly technical jargon / Cluttered text layouts

### Don'ts
- ❌ don't use rounded corners on primary buttons — screenshot shows sharp 0-2px radius instead
- ❌ don't add decorative gradients or patterns — screenshot shows flat photographic heroes with subtle dark overlays
- ❌ don't use bold/heavy typography weights — screenshot shows predominantly light (300) weight headlines
- ❌ don't introduce multiple accent colors — screenshot shows only BMW blue (#1C69D4) as the sole chromatic accent
- ❌ don't create busy multi-column hero layouts — screenshot shows single full-bleed images with left-aligned text
- ❌ don't use drop shadows on content cards — screenshot shows flat, clean surfaces without layered elevation

The system deliberately avoids all noise: loud colors, clutter, skeuomorphism, and any element that would compromise its core principle of refined purity.

## System Prompt (paste into AI tool)

```
BMW.com is a premium automotive brand website featuring dramatic full-viewport photography paired with restrained, elegant typography. The design uses a light grotesque-sans typeface (bmwTypeNextWeb) at predominantly light weight (300) for headlines, creating a luxurious feel. The color palette is minimal: white (#FFFFFF) backgrounds, charcoal ink (#414141), and a single BMW blue accent (#1C69D4) for calls-to-action. Key hex colors include the blue accent, white backgrounds, and charcoal (#262626) for dark overlays. Hero sections use full-bleed automotive photography with gradient overlays for text legibility. Critical donts: never use rounded button corners (keep sharp/square), never add multiple accent colors (blue is the only chromatic element), and never use heavy font weights for headlines (always light/300). The layout transitions from dramatic dark photographic heroes to clean white content sections. Navigation is minimal with clean horizontal links and dropdown chevrons.
```
