What is BMW's primary brand color?

BMW's primary action color is Corporate Blue — #1c69d4 — the single voltage carrying every primary CTA, active nav link, and inline brand link prefix. The pressed state shifts to a deeper #0653b6, and disabled CTAs fall back to a neutral #d6d6d6 with muted text. The M tricolor stripe (#0066b1 → #1c69d4 → #e22718) exists in the system but is scoped strictly to M-model pages and motorsport dividers — it is never used as a CTA fill on the main corporate surfaces.

What typography does BMW use, and what should I substitute?

BMW runs BMW Type Next Latin in two cuts: regular at weight 700 for display, button, and nav, and Light at 300 for body and secondary copy. Weight 400 lives in a narrow lane (caption and nav-link only), and weight 500 is deliberately absent. Display sizes scale 64 / 48 / 32 / 24px with line-heights from 1.05 to 1.25 and zero letter-spacing — BMW Type sits on a wide body so tracking stays at default. The typeface is licensed; Inter at weights 700/300 is the closest open-source substitute, with Saira Condensed as an alternate for a slightly more compressed BMW Type feel.

Why are BMW's buttons rectangular?

Every button, card, input, and configurator chip uses {rounded.none} — 0px corner radius. The only exception is icon buttons, which go fully circular. This binary radius hierarchy is the corporate-automotive dialect: rectangular reads as engineered, precise, and German. It is a deliberate departure from the soft-cornered SaaS dialect of Apple or Cal.com, and it differentiates the corporate site from BMW M's slightly sportier radii. Pill buttons or 8–14px rounded CTAs would read off-brand here.

Can I use this DESIGN.md to build a React dealer site or configurator?

Yes — the file is structured for AI coding tools (Claude, Cursor, Copilot) to read as a token system. The agent will reproduce BMW's restraint: Corporate Blue CTAs, 0px corners, 80px section rhythm, photo-on-surface-card model grids, and the 700/300 type contrast. Every color, type style, radius, and spacing value is a quoted token you can paste into Tailwind config or CSS variables. The 25 components cover the full corporate flow — hero bands, model cards, inventory cards, configurator option tiles, filter chips, spec cells, and the dark CTA band — so a dealer inventory page or model showcase composes directly from the documented primitives.

What's missing from this BMW DESIGN.md spec?

A handful of items live outside the captured surfaces. BMW Type Next Latin is licensed to BMW and not available as a public web font — Inter at 700/300 is documented as the substitute. Animation and transition timings (configurator color swap, model card hover-reveal) are out of scope. Form validation error and success states beyond the text-input focus state were not extracted. The M tricolor stripe appears infrequently on the corporate site; the full motorsport context lives on the BMW M sub-domain. Cookie consent overlays can occlude part of the hero, so a small portion of the lead band content may not be fully represented.

BMW Design System

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

About BMW DESIGN.md

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

Automotive
E-commerce & Retail

BMW's corporate design system reads like the brand itself: measured, engineered, and quietly confident. One brand action color (Corporate Blue, #1c69d4). One licensed typeface (BMW Type Next Latin). One radius for everything interactive (0px — rectangular). The atmosphere is light cream-tinted white, broken only by deep navy #1a2129 hero bands that frame model photography. Where Apple softens and Airbnb rounds, BMW squares off — the corporate dialect distinct from BMW M's motorsport-bombastic cousin.

This page packages the spec into a single DESIGN.md file. Inside: 23 colors, 14 typography styles, 7 corner radii, 8 spacing tokens, and 25 components — every primitive needed to build a configurator, an inventory grid, or a marketing band that reads BMW corporate rather than generic luxury automotive. The 700/300 weight contrast is the editorial signature; weight 500 is deliberately absent from the scale.

Feed the file to Claude, Cursor, or GitHub Copilot and the AI writes React components and Tailwind classes that match BMW's restraint — rectangular buttons, photography-driven depth, 80px section rhythm, the M tricolor stripe scoped strictly to motorsport contexts. Or treat it as a reference sheet for your own dealer flow, model showcase, or reservation funnel.

What makes it distinct

Single brand voltageBMW Corporate Blue (#1c69d4) carries every primary CTA; press shifts to #0653b6, never paired with a second accent
Two-weight typographic signatureBMW Type Next Latin at 700 display vs 300 Light body, with weight 500 deliberately absent from the scale
Rectangular dialectevery button, card, input, and configurator chip uses {rounded.none} 0px corners; only icon buttons go circular
Photography-driven depthno drop shadows anywhere; hierarchy comes from light canvas alternating with dark navy (#1a2129) hero bands at 80px section rhythm
M tricolor stripe scoped tight#0066b1 → #1c69d4 → #e22718 appears only on M-model pages and motorsport dividers, never as a CTA fill

Live at bmw.com

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

bmw.com

Explore BMW

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 design system FAQ

Common questions about BMW'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 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 --:--:--→