# BMW M — Design System
> Home of high performance cars
- **Canonical:** https://uiuxskills.com/library/bmw-m
- **Source:** https://www.bmw-m.com/en/index.html
- **Category:** Automotive
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 80%
- **License:** MIT
- **Last updated:** 2026-06-09T23:17:18.070Z

---

---
version: alpha
name: BMW M
tagline: M. The most powerful letter in the world.
description: High-performance motorsport-inspired automotive brand
tone: High-performance, precise, passionate, and authoritative
color-scheme: dark
colors:
  primary: "#E31B23"
  secondary: "#008AC9"
  tertiary: "#002C5B"
  background: "#0F0F0F"
  surface: "#1C1C1C"
  surface-container: "#262626"
  on-primary: "#FFFFFF"
  on-surface: "#E0E0E0"
  on-background: "#FFFFFF"
  outline: "#3A3A3A"
  accent-teal: "#3AAEA9"
typography:
  display-lg:
    fontFamily: BMW Type Next, Helvetica Neue, Arial, sans-serif
    fontSize: 3.5rem
    fontWeight: 800
    lineHeight: "1.1"
    letterSpacing: "-0.03em"
  display-md:
    fontFamily: BMW Type Next, Helvetica Neue, Arial, sans-serif
    fontSize: 2.75rem
    fontWeight: 800
    lineHeight: "1.15"
    letterSpacing: "-0.02em"
  headline-lg:
    fontFamily: BMW Type Next, Helvetica Neue, Arial, sans-serif
    fontSize: 2rem
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: BMW Type Next, Helvetica Neue, Arial, sans-serif
    fontSize: 1.5rem
    fontWeight: 700
    lineHeight: "1.25"
    letterSpacing: 0em
  headline-sm:
    fontFamily: BMW Type Next, Helvetica Neue, Arial, sans-serif
    fontSize: 1.25rem
    fontWeight: 700
    lineHeight: "1.3"
    letterSpacing: 0em
  body-lg:
    fontFamily: BMW Type Next, Helvetica Neue, Arial, sans-serif
    fontSize: 1.125rem
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0em
  body-md:
    fontFamily: BMW Type Next, Helvetica Neue, Arial, sans-serif
    fontSize: 1rem
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0em
  body-sm:
    fontFamily: BMW Type Next, Helvetica Neue, Arial, sans-serif
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: "1.4"
    letterSpacing: 0em
  label-lg:
    fontFamily: BMW Type Next, Helvetica Neue, Arial, sans-serif
    fontSize: 0.875rem
    fontWeight: 700
    lineHeight: "1"
    letterSpacing: 0.05em
  label-sm:
    fontFamily: BMW Type Next, Helvetica Neue, Arial, sans-serif
    fontSize: 0.75rem
    fontWeight: 700
    lineHeight: "1"
    letterSpacing: 0.08em
rounded:
  sm: 0px
  md: 2px
  lg: 4px
  xl: 8px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.sm}"
    padding: 12px 32px
    height: 48px
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.on-background}"
    textColor: "{colors.background}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.sm}"
    padding: 12px 32px
    height: 48px
    width: auto
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.on-background}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.sm}"
    padding: 12px 32px
    height: 48px
    width: auto
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    padding: 24px
    height: auto
    width: 100%
  card-elevated:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-background}"
    rounded: "{rounded.sm}"
    padding: 24px
    height: auto
    width: 100%
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-background}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 10px 16px
    height: 44px
    width: 100%
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-background}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 10px 16px
    height: 44px
    width: 100%
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.on-background}"
    typography: "{typography.label-lg}"
  link-hover:
    textColor: "{colors.primary}"
    typography: "{typography.label-lg}"
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.md}"
    padding: 4px 8px
    height: 24px
    width: auto
  badge-success:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.md}"
    padding: 4px 8px
    height: 24px
    width: auto
  badge-accent:
    backgroundColor: "{colors.accent-teal}"
    textColor: "{colors.background}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.md}"
    padding: 4px 8px
    height: 24px
    width: auto
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
    width: 100%
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.5)
  md: 0 4px 8px rgba(0,0,0,0.6)
  lg: 0 12px 24px rgba(0,0,0,0.8)
---

## Overview

BMW M represents the high-performance, racing-derived division of BMW. Its visual identity is defined by a dark, aggressive, and premium aesthetic that mirrors the engineering precision and raw power of its vehicles. High-contrast typography, sharp edges, and the iconic M tricolor accents create an intense, adrenaline-fueled digital experience.

## Colors

The BMW M color palette is designed to evoke the high-octane atmosphere of motorsport while maintaining a premium, luxury feel. It relies on a deep, near-black canvas punctuated by the legendary M tricolor accents and high-contrast functional colors.

*   **Primary (#E31B23)**: The iconic BMW M Red, representing power, speed, and racing heritage. Used for high-impact CTAs and active states.
*   **Secondary (#008AC9)**: The iconic BMW M Light Blue, representing the Bavarian flag and precision engineering. Used for standard informational badges.
*   **Tertiary (#002C5B)**: The iconic BMW M Dark Blue, representing the connection between racing and the road. Used for success badges and secondary brand accents.
*   **Background (inferred) (#0F0F0F)**: Deep, near-black background that establishes the premium dark-mode aesthetic.
*   **Surface (inferred) (#1C1C1C)**: Slightly lighter dark gray for cards and content containers to establish visual hierarchy.
*   **Surface-container (#262626)**: Secondary dark gray container tone used for interactive elements and elevated card states.
*   **On-primary (inferred) (#FFFFFF)**: High-contrast white text used on primary red and dark blue elements.
*   **On-surface (inferred) (#E0E0E0)**: Light gray text for secondary readability on dark surfaces.
*   **On-background (inferred) (#FFFFFF)**: Pure white text for maximum legibility against the dark background.
*   **Outline (inferred) (#3A3A3A)**: Subtle dark gray border color to define boundaries without breaking the dark aesthetic.
*   **Accent-teal (#3AAEA9)**: Teal accent color, representing electrified performance and Neue Klasse technology.

## Typography

The typography of BMW M is bold, authoritative, and engineered for maximum impact. It utilizes the custom BMW Type Next family to convey technical precision and high performance.

*   **display-lg (inferred)**: Ultra-bold, high-impact headers for hero sections and major model announcements.
*   **display-md (inferred)**: Bold headers for secondary hero sections and prominent landing page titles.
*   **headline-lg (inferred)**: Used for major section titles and magazine article headings.
*   **headline-md (inferred)**: Used for card titles and medium-sized section headers.
*   **headline-sm (inferred)**: Small headers for promotional blocks and interactive widgets.
*   **body-lg (inferred)**: Introductory body text and featured article summaries.
*   **body-md (inferred)**: Standard body copy for articles, descriptions, and general content.
*   **body-sm (inferred)**: Small body copy for disclaimers, cookie notices, and secondary metadata.
*   **label-lg (inferred)**: Uppercase, bold labels for buttons and primary navigation links.
*   **label-sm (inferred)**: Uppercase, bold labels for small badges, tags, and category indicators.

## Layout

The layout is built on a high-impact, media-heavy grid utilizing an 8px base spacing unit. It features full-bleed hero sections and asymmetric multi-column grids for magazine articles and model showcases. Spacing is generous, creating a premium, uncluttered feel that lets the automotive photography dominate.

The observed section order from top-to-bottom is: `nav` -> `hero` -> `quiz-promo` -> `magazine-grid` -> `models-carousel` -> `lifestyle-promo` -> `chatbot-promo` -> `footer`. The hero composition pattern consists of a full-bleed high-impact automotive hero image with a bold, left-aligned uppercase title, subtitle, and a single primary CTA button. The responsive behavior collapses multi-column magazine cards into a single-column stack on mobile devices, maintaining full-bleed imagery.

## Elevation & Depth

BMW M relies heavily on flat design with high-contrast color boundaries rather than soft shadows. Depth is primarily established through dark overlays on images and subtle background shifts between `{colors.background}` and `{colors.surface}`. When shadows are used, they are dark and tight, matching the high-contrast aesthetic.

*   **elevation.sm (inferred)**: Used for low-level card lift and subtle interactive elements.
*   **elevation.md (inferred)**: Used for dropdown menus, popovers, and floating action elements.
*   **elevation.lg (inferred)**: Used for modal overlays, drawer menus, and high-priority dialogs.

## Shapes

The brand utilizes sharp, aggressive corners for almost all primary components, including buttons, cards, and image containers. This sharp-edged philosophy reinforces the technical, high-performance, and precision-engineered nature of the BMW M brand.

*   **rounded.sm (0px)**: The default shape for all primary buttons, cards, input fields, and image containers.
*   **rounded.md (2px)**: Applied to small metadata badges to provide a micro-level distinction.
*   **rounded.lg (4px)**: Reserved for secondary interactive elements requiring minor softening.
*   **rounded.xl (8px)**: Rarely used, restricted to specific promotional components.
*   **rounded.full (9999px)**: Reserved strictly for circular icons or pill-shaped system indicators.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### button-primary
The primary action element, styled with `{colors.primary}` background and `{colors.on-primary}` text. It uses `{typography.label-lg}` in uppercase, features sharp `{rounded.sm}` corners, and has a fixed height of 48px. Use this for the main call to action in hero sections or primary forms. On hover, it transitions to `{components.button-primary-hover}` with `{colors.on-background}` background and `{colors.background}` text.

### button-secondary
An outlined button with a transparent background, `{colors.on-background}` text, and a `{colors.outline}` border. It shares the same `{rounded.sm}` shape and `{typography.label-lg}` typography as the primary button. Use this for secondary actions, such as "Read More" or secondary filters.

### card
The default content container, utilizing `{colors.surface}` background and `{colors.on-surface}` text with `{rounded.sm}` corners. Use this to group related articles, model details, or promotional content. For highlighted or interactive states, use `{components.card-elevated}` which shifts the background to `{colors.surface-container}` and text to `{colors.on-background}`.

### input-field
Standard text input container styled with `{colors.surface}` background, `{colors.on-background}` text, and a `{colors.outline}` border. It features `{rounded.sm}` corners and uses `{typography.body-md}`. On focus, it transitions to `{components.input-field-focus}`, changing the border color to `{colors.primary}`.

### link
Text-based navigation elements using `{colors.on-background}` and `{typography.label-lg}`. On hover, it transitions to `{components.link-hover}` which changes the text color to `{colors.primary}`.

### badge
Small metadata tags used to label categories or vehicle statuses. Standard badges use `{colors.secondary}` background with `{colors.on-primary}` text. Success or heritage badges use `{components.badge-success}` with `{colors.tertiary}` background. Electrified or Neue Klasse badges use `{components.badge-accent}` with `{colors.accent-teal}` background and `{colors.background}` text. All badges use `{rounded.md}` and `{typography.label-sm}`.

### divider
A thin structural line used to separate content blocks. It has a height of 1px, spans the full width of its container, and is colored with `{colors.outline}`.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` as the primary accent color for high-impact CTAs and active states. | Do not use `{colors.primary}` for non-interactive elements or body text. |
| Ensure all primary buttons use `{rounded.sm}` to maintain the sharp, technical brand aesthetic. | Never use rounded corners larger than `{rounded.lg}` on primary UI components like buttons or cards. |
| Set body text to `{colors.on-background}` or `{colors.on-surface}` to maintain high contrast against dark backgrounds. | Never pair low-contrast text with `{colors.surface-container}` without verifying readability. |
| Apply `{colors.surface}` or `{colors.surface-container}` to group related content cards cleanly. | Do not use light backgrounds as the primary canvas; maintain the dark-mode aesthetic with `{colors.background}`. |
| Use `{typography.display-lg}` in uppercase for major hero headlines to convey power and authority. | Do not use lowercase or italic styling for `{typography.display-lg}` headings. |
| Separate distinct content blocks with a subtle `{colors.outline}` colored `{components.divider}`. | Do not use thick, high-contrast borders or dividers that clutter the layout. |
| Reserve `{colors.accent-teal}` and `{components.badge-accent}` strictly for electric/hybrid or Neue Klasse contexts. | Avoid using `{colors.accent-teal}` for standard brand actions or combustion engine badges. |
| Keep elevations flat or use dark, tight shadows like `{elevation.sm}`. | Do not use soft, diffuse, light-colored shadows like standard web elevations. |

## Content Style

The voice of BMW M is direct, action-oriented, and high-energy. CTA labels are short and punchy, using active verbs in uppercase format (e.g., "EXPERIENCE NOW", "TEST YOURSELF", "SUBSCRIBE NOW"). 

Headlines are bold, authoritative, and performance-driven. They make heavy use of uppercase styling, short declarative statements, and direct references to the "M" heritage to establish power and technical dominance.

Copy density is kept low. The visual layout prioritizes high-impact media, with short paragraphs and bullet points serving as secondary support to the imagery. Whitespace is used generously to maintain a premium, uncluttered editorial feel.

## Imagery & Icons

The brand relies on dramatic, high-contrast photographic imagery. Vehicles are captured in dynamic motion on racetracks or positioned in sleek, dark urban environments. The visual style features heavy use of dark backdrops, asphalt textures, and glowing LED headlights to emphasize performance, speed, and engineering precision. Icons are minimal, sharp-edged, and high-contrast, matching the technical aesthetic of the interface. Avoid abstract illustrations; focus on realistic, high-performance automotive photography.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for BMW M, a high-performance motorsport-inspired automotive brand with a precise, authoritative, and dark-mode aesthetic. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.display-lg}`, `{rounded.sm}` — never hardcode hex values, font sizes, or pixel lengths.
2. Use only the component variants defined under `components:`. Do not invent states, sizes, or variants the spec does not list.
3. Shapes are intentionally sharp. Default all buttons, cards, and inputs to `{rounded.sm}`. Escalate to `{rounded.md}` or higher only when the spec explicitly assigns it (e.g., badges use `{rounded.md}`).
4. Consult the Do's and Don'ts table before rendering any component. If a user request conflicts with it — such as using `{colors.primary}` on body text or applying soft shadows — surface the conflict explicitly before proceeding.
5. Follow the Layout section for composition: full-bleed hero with left-aligned uppercase headline, single primary CTA, and mobile-first column collapse at 768px.

## Output contract

**Must:**
- Use token names for every color, type style, spacing, radius, and elevation value.
- Render all interactive components with their specified hover, focus, and disabled states (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{spacing.xs}` through `{spacing.2xl}` for all padding and gap values; use the 8px base rhythm.
- Write CTA labels in short, uppercase, active-verb format per the Content Style section (e.g., "CONFIGURE NOW").
- Maintain `{colors.background}` as the page canvas; all surfaces stack from it using `{colors.surface}` and `{colors.surface-container}`.

**Must NOT:**
- Invent colors, type scales, radii, or elevation values absent from the spec.
- Use generic system defaults when a brand token exists.
- Apply `{colors.accent-teal}` outside electric, hybrid, or Neue Klasse contexts.
- Use lowercase or italic styling on `{typography.display-lg}` or `{typography.display-md}` headings.
- Rewrite, replace, or invent page copy, navigation items, or content hierarchy.
- Apply light backgrounds, soft diffuse shadows, or rounded corners larger than `{rounded.lg}` on primary components.

## When in doubt
- If a value is not defined in the spec, ask the product team before inventing one.
- For ambiguous background roles, default to `{colors.surface}` for containers and `{colors.background}` for the page canvas.
- Prefer composing existing components over introducing new tokens.
- Tokens marked "(inferred)" are visual approximations. If an authoritative token file exists, it supersedes the spec.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px, collapsing multi-column layouts to a single-column stack.