What is BMW M's primary brand color?

BMW M's primary surface color is pure black #000000 (the canvas token), with white #ffffff as the primary type and CTA color. The signature brand accent is the M tricolor stripe — #0066b1 (M Blue Light), #1c69d4 (M Blue Dark, also the heritage BMW corporate blue), and #e22718 (M Red). The tricolor is brand-identity-only: it appears as a 4px divider on motorsport chrome and model badges, but is never used as a button fill or background surface.

What typography does BMW M use, and what should I use if BMW Type Next isn't available?

BMW M runs BMW Type Next Latin in two cuts — regular at 700 for display, navigation labels, and button text, and Light at 300 for body and secondary copy. Display tokens range from 18px to 80px, all at weight 700 with 0 letter-spacing. Button labels run 14px / 700 with 1.5px tracking — the machined letterspacing is non-negotiable. If BMW Type Next Latin is unavailable, Inter (variable) at 700/300 is the closest open-source substitute; adjust display tracking to -0.5px to match BMW Type's tighter cap-height. Saira Condensed works for a slightly more compressed headline feel.

How should the M tricolor stripe be used?

The M tricolor stripe is a 4px-tall horizontal divider carrying #0066b1 (M Blue Light) → #1c69d4 (M Blue Dark) → #e22718 (M Red) as three equal bands. It is the only true decorative element in the system, used sparingly to mark significance — on the M wordmark logo, motorsport chrome, model-detail headers, and brand-identity sections. The stripe stays at 4px height across every breakpoint. It is never used as a button fill, surface background, or secondary action color — extending the tricolor outside its brand-identity role breaks the system.

Can I use this DESIGN.md to build a React project that looks like BMW M?

Yes — the file is structured for AI tools like Claude, Cursor, and GitHub Copilot to read and reproduce. The agent will pick up the system's defining traits: pure black canvas, white UPPERCASE display at weight 700 paired with Light 300 body, the binary 0px-or-full radius rule, 1.5px letterspaced uppercase button labels, and the M tricolor reserved for brand identity. Every color, type style, radius, and spacing token in the spec is a quoted value you can paste into Tailwind config, CSS variables, or a shadcn theme. Pair it with full-bleed automotive photography — without the cars, the chrome alone will read as generic dark mode.

Why does BMW M use sharp 0px corners almost everywhere?

The system has a deliberate binary radius rule: {rounded.none} 0px for everything rectangular (buttons, cards, photo containers, spec cells, inputs — 20 of 22 documented components), and {rounded.full} only for circular icon buttons like carousel arrows and the chatbot launcher. There is nothing in between. Sharp rectangles read as engineered motorsport precision; circles read as functional controls. Rounded buttons would push the brand toward consumer-tech aesthetics — the rectangular silhouette IS BMW M's button.

What's missing from this DESIGN.md spec?

A few things are documented in the Known Gaps section. The configurator surface (vehicle build pages with color, wheel, and interior pickers) was not in the analyzed URLs — swatch grids and comparison panels are not captured. Animation and transition timings for the photo carousel and hover-reveal effects are out of scope. Form validation states beyond the default text input — error and success variants — would need an order flow to confirm. BMW Type Next Latin weight-axis values beyond Light (300) and regular (700) are not documented, only the static weights observed in screenshots. The cookie consent overlay partially obscured the homepage hero, so secondary hero treatments cycling through different car models may carry variations not captured here.

BMW M Design System

BMW M's design system as a DESIGN.md file.

About BMW M DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source bmw-m.com

Automotive
Consumer Electronics

BMW M's design system is built around one trade: chrome backs off so photography can do the work. The canvas is true black #000000. Type is white BMW Type Next Latin in confident UPPERCASE at weight 700, paired with a Light 300 body. The brand voltage is photography — cars cornering at speed, carbon-fiber wheel detail, driver-cockpit shots — placed full-bleed so the cars themselves carry the page.

This page packages all of that into a single DESIGN.md file. Inside: 20 colors including the canonical M tricolor stops (#0066b1, #1c69d4, #e22718), 14 type styles, 9 spacing values, 5 corner radii, and 22 components — from the hero photo band to the spec cell to the M-stripe divider that marks every brand-identity moment.

Download the file and feed it to Claude, Cursor, or GitHub Copilot. The AI writes React components and Tailwind classes that match BMW M's European-engineered voice — sharp rectangles, heavy-light weight contrast, restrained accent use — rather than a generic dark-mode theme. Or just use it as a reference for your own work.

What makes it distinct

Pure black #000000 canvasevery marketing surface is dark-only with no light-mode counterpart in the public web
M tricolor stripe#0066b1 to #1c69d4 to #e22718 as a 4px divider, never a button fill or surface treatment
Binary radius{rounded.none} 0px dominates 20 of 22 components; only carousel arrows and icon buttons use {rounded.full}
Heavy-to-light weight pairdisplay headlines at BMW Type Next 700 paired with body at 300 Light, never bolded
UPPERCASE display with 1.5px tracking on button labelsthe machined letterspacing is the brand's signature voice

Live at bmw-m.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

bmw-m.com

Explore BMW M

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

BMW M design system FAQ

Common questions about BMW M's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use BMW M in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→