# Bmw M · Design system migration spec

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

> This site effectively combines automotive photography with a premium, dark-themed UI to create an aspirational brand experience that showcases high-performance vehicles.

## 1. Identity DNA

The design system for BMW M operates on a principle of **precision engineering on a white void**. Every element is placed with the exacting care of a component on a blueprint, isolated in generous space to emphasize its form and technical integrity.

**One-liner:** A premium automotive brand experience showcasing high-performance vehicles and lifestyle.
**Keywords:** automotive · performance · premium · luxury · racing
**Analogy:** A high-end automotive magazine meets a luxury product showroom.

## 2. Color

The palette is built on a stark, high-contrast monochrome foundation—white for the void, a deep ink for definition. A single, muted technical blue serves as a confident brand identifier, its use as restrained as a signature on a technical drawing.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#262626` | main background |
| `--ink` | `#ffffff` | body text |
| `--muted` | `#bbbbbb` | placeholder |
| `--accent` | `#1c69d4` | single accent |
| `--line` | `rgba(186, 186, 186, 0.2)` | divider |

**Color principle:** Dark, dramatic background to let vehicle photography dominate; high-contrast white text for clarity; brand blue for primary actions.

The guiding principle is high-contrast minimalism, where color is a deliberate mark, not decoration.

## 3. Typography

Typography is exclusively transitional-serif, a category choice that bridges the classicism of automotive heritage with the clean precision of technical documentation. This voice conveys premium quality and engineering confidence without resorting to modern sans-serif trends.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.0 | 900 | -1px | Hero headlines |
| heading | 24px | 1.0 | 400 | normal | Section titles |
| body | 16px | 1.15 | 400 | normal | Body text and navigation |

**Type rules:**
- Headlines are often all-caps for emphasis.
- Body text maintains a consistent 16px size across the interface.
- High contrast (white on dark) is used throughout for maximum legibility.

## 4. Spacing

The spacing rhythm is open and generous, using vast white space to frame and elevate the form of each element.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Spacious layout with significant padding around major content blocks to let imagery breathe.

## 5. Surfaces

Surfaces are defined by shape and color contrast rather than explicit boundaries. There are no visible borders; instead, the stark background and precise forms create their own definition through sheer placement.

- **Radius:** sm 4px · md 8px · lg 24px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.3) 0px 1px 5px 0px
  - rgba(0, 0, 0, 0.5) 0px 4px 25px 0px
- **Borders:** Subtle, thin white borders used sparingly for separation.

## 6. Layout

The layout skeleton is radically minimal, often collapsing to a centered, single-column composition. This approach focuses all attention on a primary graphic element, such as a hero 3D ring, isolating it within the white void like a specimen under examination.

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

**Skeleton:** Full-width hero sections with split layouts for text and imagery, followed by grid-based content cards.

## 7. Motion & Interaction

The motion philosophy favors implication over action. Static gradients on 3D forms suggest materiality and weight, implying the object's physical presence rather than animating its behavior.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.8, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transforms for hover states and interactions.
  - Long-duration transforms for subtle background or image movements.

- **Hover:** Subtle color or transform changes on interactive elements.
- **Click:** Immediate visual feedback through color shifts.
- **Transition:** All interactive elements feature smooth transitions for a polished feel.
- **Keyboard:** Standard keyboard navigation support for menus and links.

## 8. Voice & Don'ts

The editorial voice is confident, technical, and understated—a tone of luxury that speaks through precision rather than volume. It aligns with the visual system by avoiding exclamation and embracing formal clarity.

- **Tone:** Confident, aspirational, and premium.
- **Headline style:** Bold, direct, and often all-caps to convey power and excitement.
- **CTA style:** Simple, action-oriented, and high-contrast.
- **Avoid:** Playful language / Excessive punctuation / Low-contrast text

### Don'ts
- ❌ Don't use light backgrounds — the screenshot shows a consistent dark theme throughout.
- ❌ Don't use decorative or handwritten fonts — the screenshot shows a clean, modern sans-serif font.
- ❌ Don't use rounded corners on primary buttons — the screenshot shows sharp, rectangular buttons.
- ❌ Don't use a wide variety of accent colors — the screenshot shows a single, dominant brand blue.
- ❌ Don't use complex grids with many columns — the screenshot shows a simple, focused layout.
- ❌ Don't use small, cramped text — the screenshot shows generous spacing and clear typography.

The system deliberately forgoes playful elements, decorative UI, and visual clutter to maintain its uncompromising focus on product and engineering purity.

## System Prompt (paste into AI tool)

```
This is a premium automotive brand website focusing on high-performance vehicles. The design uses a dark charcoal background (#262626) to let dramatic vehicle photography dominate, with white text (#ffffff) for high contrast and a brand blue (#1c69d4) for primary actions. Typography is a modern, clean sans-serif (BMW Type Next) used in various weights, with bold, all-caps headlines for impact. Key donts: avoid light backgrounds, avoid decorative fonts, and avoid rounded corners on primary buttons. The layout is spacious and editorial, prioritizing large imagery and clear, aspirational messaging.
```
