A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
Bmw M, in one page
BMW M's marketing surface is a near-pure black canvas ({colors.canvas} — #000) holding white BMW Type Next Latin headlines in confident UPPERCASE. The system has no decorative voltage of its own; brand energy comes from full-bleed automotive photography — cars cornering at speed, carbon-fiber wheel detail, driver cockpit shots, motorsport pit lanes — placed as edge-to-edge content that fills entire bands. UI chrome around the photography stays minimal: thin sans-serif copy, dividers as 1px hairlines ({colors.hairline}), all-caps button labels with no fill until hovered.
The M tricolor stripe — {colors.m-blue-light} (#0066b1) → {colors.m-blue-dark} (#1c69d4) → {colors.m-red} (#e22718) — appears sparingly as the brand's signature accent, used on the M wordmark, motorsport chrome, vehicle-tech callouts, and model badges. It is never a CTA color and never used as a background fill — the tricolor is exclusively a brand-identity marker.
Type voice runs BMW Type Next Latin in two cuts: regular for display + nav labels and Light for body + secondary copy. Display sizes use weight 700 (BMW's signature heavy-but-tight setting), while body type drops to weight 300 (Light). The contrast between heavy display and light body is the system's editorial signature.
Key Characteristics:
- Near-pure black canvas (
{colors.canvas}— #000) with white type. The system inverts almost nothing — there is no light-mode marketing surface. - Display headlines in UPPERCASE BMW Type Next Latin at weight 700. Sub-heads stay sentence-case at lighter weight.
- M tricolor (
{colors.m-blue-light}/{colors.m-blue-dark}/{colors.m-red}) used as 4px brand-stripe dividers, M-wordmark accents, and motorsport chrome — never as buttons or fills. - Photography fills entire bands edge-to-edge. Cars are always the visual subject; UI chrome backs off to small white labels overlaid on photography.
- Buttons are flat with
{rounded.none}(0px) corners and uppercase letterspaced labels. The "industrial precision" rectangular silhouette IS the brand. - Border radius is mostly zero across the system. The few exceptions:
{rounded.full}on circular icon buttons (carousel arrows, chatbot launcher) and{rounded.sm}on a handful of small toggle pills. - Spacing is generous and grid-aligned:
{spacing.section}(96px) between major bands;{spacing.xxl}(64px) inside hero photo bands;{spacing.xl}(40px) inside content cards.
Do's and don'ts
Do
- Anchor every page with full-bleed automotive photography. The cars are the brand voltage; chrome backs off.
- Use UPPERCASE display headlines in
{typography.display-xl}or{typography.display-lg}. Sentence-case display reads as off-brand. - Pair heavy display (700) with light body (300). The weight contrast is the editorial signature.
- Reserve the M tricolor stripe for brand-identity moments — wordmark accents, motorsport chrome, model badges. Never as a button fill or surface.
- Use
{rounded.none}(0px) by default. Reserve{rounded.full}for circular icon buttons only. - Letter-space all-caps labels at 1.5px. The "machined" feel is non-negotiable.
- Use
{spacing.section}(96px) between major editorial bands for grid-aligned vertical rhythm.
Don't
- Don't introduce a brand color outside the M tricolor (
{colors.m-blue-light}/{colors.m-blue-dark}/{colors.m-red}) and the heritage{colors.bmw-blue}. - Don't bold body type. Body stays at 300 (Light) — bumping to 400 or 500 makes the page feel marketing-bombastic instead of European-engineered.
- Don't use rounded buttons. The rectangular silhouette IS the brand. Rounded corners read as consumer-tech, not motorsport.
- Don't put gradient backdrops behind hero type. The hero IS the photography — the page floor stays pure black, and the photo provides the depth.
- Don't repeat the same surface mode in two consecutive bands. Rhythm: photo band → spec table → photo band → magazine grid → photo band. Two text-only bands in a row read as a corporate site.
- Don't use the M stripe as a button fill. The stripe is a divider / accent — never an action surface.
- Don't bold uppercase tracking under 1.5px on button labels — the spacing is what makes them feel "machined."
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Bmw M design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- primary: #ffffff
- ink: #ffffff
- body: #bbbbbb
- body-strong: #e6e6e6
- muted: #7e7e7e
- hairline: #3c3c3c
- hairline-strong: #262626
- canvas: #000000
- surface-card: #1a1a1a
- surface-elevated: #262626
Type:
- families: BMWTypeNextLatin, BMWTypeNextLatin Light, BMW Type Next Latin, Inter
- scale: 12, 14, 16, 18, 20, 24, 32, 40, 56
- weights: 300, 400, 700
Shape:
- radius: 0, 2, 4, 6
Spacing: 4, 8, 12, 16, 24, 40, 64, 80, 96
Rules:
- Anchor every page with full-bleed automotive photography. The cars are the brand voltage; chrome backs off.
- Use UPPERCASE display headlines in `{typography.display-xl}` or `{typography.display-lg}`. Sentence-case display reads as off-brand.
- Pair heavy display (700) with light body (300). The weight contrast is the editorial signature.
- Reserve the M tricolor stripe for brand-identity moments — wordmark accents, motorsport chrome, model badges. Never as a button fill or surface.
- Use `{rounded.none}` (0px) by default. Reserve `{rounded.full}` for circular icon buttons only.
- Letter-space all-caps labels at 1.5px. The "machined" feel is non-negotiable.
Avoid:
- Don't introduce a brand color outside the M tricolor (`{colors.m-blue-light}` / `{colors.m-blue-dark}` / `{colors.m-red}`) and the heritage `{colors.bmw-blue}`.
- Don't bold body type. Body stays at 300 (Light) — bumping to 400 or 500 makes the page feel marketing-bombastic instead of European-engineered.
- Don't use rounded buttons. The rectangular silhouette IS the brand. Rounded corners read as consumer-tech, not motorsport.
- Don't put gradient backdrops behind hero type. The hero IS the photography — the page floor stays pure black, and the photo provides the depth.
- Don't repeat the same surface mode in two consecutive bands. Rhythm: photo band → spec table → photo band → magazine grid → photo band. Two text-only bands in a…
- Don't use the M stripe as a button fill. The stripe is a divider / accent — never an action surface.
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Brand & Accent
- Primary (
{colors.primary}— #ffffff): The system's primary type and CTA color. Used for h1/h2/h3 display, body text on dark, and primary button labels (the buttons themselves are transparent or canvas-colored — the white text + outline IS the button). - M Blue Light (
{colors.m-blue-light}— #0066b1): The first stop in the M tricolor stripe. Used on M-badge accents and motorsport chrome. - M Blue Dark (
{colors.m-blue-dark}— #1c69d4): The middle stop. The same hex as{colors.bmw-blue}— BMW's heritage corporate blue, repurposed as the middle band of the M stripe. - M Red (
{colors.m-red}— #e22718): The third stop. The signature M-power red, used in the stripe and on motorsport-pace callouts. - Electric Blue (
{colors.electric-blue}— #0653b6): A separate electric-vehicle accent used on M xDrive electric model pages. Distinct from the heritage blue — feels colder, more digital.
Surface
- Canvas (
{colors.canvas}— #000000): The default page floor across every marketing surface. True black. - Surface Soft (
{colors.surface-soft}— #0d0d0d): A barely-different-from-black used for spec table cells and footer-adjacent strips. - Surface Card (
{colors.surface-card}— #1a1a1a): Cards, secondary buttons, icon-button backgrounds. - Surface Elevated (
{colors.surface-elevated}— #262626): One step lighter, used for nested cards inside dark bands. - Carbon Gray (
{colors.carbon-gray}— #2b2b2b): Carbon-fiber-inspired surface tone used on technical-spec cards.
Hairlines & Borders
- Hairline (
{colors.hairline}— #3c3c3c): The 1px divider tone on dark surfaces. Used between body sections, between table rows, around card outlines. - Hairline Strong (
{colors.hairline-strong}— #262626): Same hex as{colors.surface-elevated}— borders feel like one-step elevations rather than ink lines.
Text
- Ink / On Dark (
{colors.on-dark}— #ffffff): All headline and primary text on dark canvas. - Body (
{colors.body}— #bbbbbb): Default running-text color (slightly cooler than pure white). Used for body paragraphs and secondary metadata. - Body Strong (
{colors.body-strong}— #e6e6e6): Emphasized body / lead paragraph. - Muted (
{colors.muted}— #7e7e7e): Footer links, breadcrumbs, captions.
Semantic
- Warning (
{colors.warning}— #f4b400): Used very sparingly on technical-warning callouts. - Success (
{colors.success}— #0fa336): Order-confirmation states (rare on marketing surfaces).
Type scaleRead the full spec
Font Family
BMW Type Next Latin is BMW's licensed display + body typeface. The system uses two cuts: regular and Light. The fallback stack walks -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif.
The split is a deliberate weight-pair:
- Display (700) for headlines, navigation labels, button text, and category labels — the "stamped" voice
- Light (300) for body paragraphs, descriptive copy, and secondary metadata — the "engineered" voice
The contrast between heavy display and light body is BMW's editorial signature — never blur it by using regular (400) display or medium (500) body.
Hierarchy
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
{typography.display-xl} | 80px | 700 | 1.0 | 0 | Hero h1 ("THE ULTIMATE", "MORE BMW M.") |
{typography.display-lg} | 56px | 700 | 1.05 | 0 | Section heads ("MORE FROM BMW M MAGAZINE.") |
{typography.display-md} | 40px | 700 | 1.1 | 0 | Sub-section heads, model names |
{typography.display-sm} | 32px | 700 | 1.15 | 0 | CTA-band heads, category page titles |
{typography.title-lg} | 24px | 700 | 1.3 | 0 | Card titles in 3-up grids |
{typography.title-md} | 20px | 400 | 1.4 | 0 | Card sub-titles, lead paragraphs |
{typography.title-sm} | 18px | 400 | 1.4 | 0 | Spec callouts, intro paragraphs |
{typography.label-uppercase} | 14px | 700 | 1.3 | 1.5px | Category tabs, "VIEW MORE" inline labels |
{typography.body-md} | 16px | 300 (Light) | 1.5 | 0 | Default body — BMW Type Next Latin Light |
{typography.body-sm} | 14px | 300 (Light) | 1.5 | 0 | Footer body, cookie consent, fine print |
{typography.caption} | 12px | 400 | 1.4 | 0.5px | Photo captions, image-credit lines |
{typography.button} | 14px | 700 | 1.0 | 1.5px | All button labels — uppercase, letterspaced |
{typography.nav-link} | 14px | 400 | 1.4 | 0.5px | Top-nav menu items |
Principles
The system contrasts heavy headlines (700) against very light body (300) at all times — the gap is the editorial signature. Letter-spacing is non-trivial: button labels and category labels carry 1.5px tracking that makes them feel "machined" rather than "typed." Display headlines stay at 0 letter-spacing — BMW Type's natural cap-height handles spacing on large sizes.
UPPERCASE display is the default voice for h1/h2 — sentence case appears on body and intro paragraphs but rarely on headlines. The all-caps treatment is a brand-voice signal, not a stylistic choice.
Note on Font Substitutes
If BMW Type Next Latin is unavailable, Inter (variable) at 700/300 is the closest open-source substitute. Adjust display headline tracking to -0.5px to match BMW Type's tighter spacing at large sizes. Saira Condensed is an alternative for headlines if a slightly more compressed feel is desired.
Components and layoutRead the full spec
Top Navigation
top-nav — Black nav bar pinned to the top of every page. 64px tall, {colors.canvas} background. Carries the BMW M logo at left (M tricolor + BMW roundel + "M" wordmark), primary horizontal menu (Models, Topics, Magazine, Configurator, Fastlane), right-side cluster with language selector, search icon, account icon. Menu items render in {typography.nav-link} with sentence-case labels.
Buttons
button-primary — The signature primary CTA. Background {colors.canvas} (or transparent over photography), text {colors.on-dark} (white), 1px white border outline, rounded {rounded.none} (0px), padding 16px × 32px, height 48px. Type {typography.button} — uppercase 14px / 700 / 1.5px tracking. The rectangular silhouette and uppercase letterspaced label IS the brand button.
button-primary-outline — Same shape as primary but with transparent background and white outline only. Used over photography where a filled button would clash with the image.
button-on-light — Used on rare light-surface contexts (configurator, account dialogs). Background {colors.canvas}, text {colors.on-dark} — black button with white text, inverted from the dark-canvas default.
button-icon — Circular icon buttons (carousel controls, share, favorite). 48 × 48px, background {colors.surface-card}, white icon centered, rounded {rounded.full}. The only non-rectangular button shape in the system.
carousel-arrow — Specific 48 × 48 circular arrow used in photo carousels. Same shape as {component.button-icon} with chevron glyph.
text-link — Inline uppercase letterspaced links ("VIEW ALL MODELS", "READ MORE"). {typography.label-uppercase}, white on dark, no underline. The chevron arrow → glyph appears next to most link labels.
Cards & Containers
hero-photo-band — Full-width black band with full-bleed automotive photography filling most of the frame. The h1 uses {typography.display-xl} (80px / 700) and sits left-aligned over the photo, often with a small subtitle in {typography.body-md} below. Vertical padding {spacing.xxl} (64px). No card frame — the photo IS the band.
feature-photo-card — Used in 3-up grids for "MORE FROM BMW M MAGAZINE" and similar editorial sections. Background {colors.surface-card}, rounded {rounded.none}, internal padding {spacing.lg} (24px). Top half of the card is a 16:9 photo (full-bleed within the card); below the photo, a category tag in {typography.label-uppercase}, a {typography.title-lg} title, and a short body description.
model-card — Used in the "MORE NEW M MODELS" 3-up grid. Background {colors.canvas} (no card surface — just photo on black), rounded {rounded.none}. Top: 16:10 hero shot of the model. Below: model name in {typography.display-md} (40px / 700), short specs line in {typography.body-sm}, a {component.text-link} ("EXPLORE THIS MODEL").
magazine-article-card — A more text-forward card variant used on the magazine overview page. Background {colors.canvas} with hairline border, rounded {rounded.none}. Carries a small thumbnail at top, a category label in {typography.label-uppercase}, headline in {typography.title-lg}, and a body excerpt.
spec-cell — Technical specification cells used on model-detail pages (engine specs, weight, top speed, 0-100 time). Background {colors.surface-soft} (#0d0d0d), rounded {rounded.none}, padding {spacing.lg} (24px). Each cell holds a value in {typography.display-sm} (32px / 700) at top and a label in {typography.label-uppercase} below.
motorsport-photo-card — Edge-to-edge photo cards used in the racing-team / motorsport sections. No card surface — just a full-bleed photograph with a small overlay caption in white text at the bottom-left. The photography IS the brand here.
chatbot-launcher — A right-side card-style entry point ("BMW M CHATBOT") on the homepage. Background {colors.surface-card}, rounded {rounded.none}, padding {spacing.lg} (24px). Carries an h3 title, a short prompt, and a {component.button-primary} to launch.
category-tab + category-tab-active — The category selector tabs used on the magazine and topics pages (e.g., "ALL · MAGAZINE · MODELS · LIFESTYLE · MOTORSPORT"). Tabs render as text-only labels in {typography.label-uppercase}. Active state changes text color from {colors.body} to {colors.on-dark} and adds a 2px white underline below the label. No background fill, no rounded corners.
Inputs & Forms
text-input — Standard text input on dark surfaces. Background {colors.surface-card}, text {colors.on-dark}, type {typography.body-md}, rounded {rounded.none} (0px), padding 12px × 16px, height 48px. 1px hairline border. Focus state thickens the border to white.
cookie-consent-card — A right-side cookie-banner card visible on the homepage. Background {colors.canvas} with 1px hairline, rounded {rounded.none}, padding {spacing.lg} (24px). Body text in {typography.body-sm} (14px / 300) — Light weight even for legal text. Two buttons stacked at bottom: primary outline + text-link.
Signature Components
m-stripe-divider — The 4px horizontal stripe carrying the M tricolor ({colors.m-blue-light} → {colors.m-blue-dark} → {colors.m-red}). Used as a divider on motorsport chrome, between brand-identity sections, and as a hover-state indicator on category tabs. The most distinctive non-typographic element in the system.
cta-band-photo — A pre-footer "Drive an M" CTA band carrying full-bleed photography of a car cornering on a track, with a centered headline in {typography.display-md} and a {component.button-primary-outline} below. Vertical padding 80px. The CTA inherits the editorial gravity of the rest of the page through full-bleed photography rather than chrome.
Footer
Responsive behaviourRead the full spec
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Hamburger nav; hero h1 scales 80→48px; demo grid 1-up; photo cards stack full-width; footer 4 cols → 1 |
| Tablet | 768–1024px | Top nav stays horizontal but tightens; 2-up card grids; spec tables 2-up |
| Desktop | 1024–1440px | Full top-nav; 3-up card grids; spec tables 4-up |
| Wide | > 1440px | Same as desktop with more breathing room; max content 1440px |
Touch Targets
{component.button-primary}renders at 48 × 48px minimum — meets WCAG AAA.{component.button-icon}and{component.carousel-arrow}are exactly 48 × 48 — comfortably above the 44 × 44 minimum.{component.text-input}height is 48px.- Category tabs render as text-only labels with 12px vertical padding; effective tap area meets 44px with surrounding spacing.
Collapsing Strategy
- Top nav collapses to a hamburger sheet at < 768px; the menu opens as a full-screen black overlay with the M tricolor stripe at the top.
- Photography stays full-bleed at every breakpoint — never collapses to a margin'd container.
- Card grids reduce columns rather than scaling cards down; photography retains its native aspect ratio.
- Spec tables collapse from 4-up to 2-up to 1-up; spec values stay at
{typography.display-sm}regardless of column count. - The M-stripe divider stays at 4px height across all breakpoints.
Image Behavior
- Hero photography crops responsively — wider crops at desktop, vertical crops on mobile.
- Lifestyle and motorsport photos retain native aspect ratios; the system never letterboxes or pillarboxes.
- The M wordmark + tricolor logo scales proportionally with viewport width.
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-bmw-m {--page-bg: #000000;
--page-bg-gradient: none;
--text-color: #ffffff;
--heading-color: #ffffff;
--link-color: #ffffff;
--link-hover-color: #e6e6e6;
--border-color: #2e2e2e;
--card-bg: #000000;
--card-shadow: 0 1px 2px rgba(255,255,255,0.06);
--card-hover-shadow: 0 6px 18px rgba(255,255,255,0.12);
--header-bg: #141414;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #000000;
--footer-text-color: #a6a6a6;
--button-bg: #ffffff;
--button-text-color: #000000;
--button-hover-bg: #e6e6e6;
--button-border: none;
--button-border-radius: 4px;
--button-secondary-bg: #0f0f0f;
--button-secondary-text-color: #ffffff;
--button-secondary-hover-bg: #1f1f1f;
--button-secondary-border: 1px solid #2e2e2e;
--prompt-bg: #0d0d0d;
--prompt-text-color: #ffffff;
--base-font: var(--font-inter);
--heading-font: var(--font-inter);
--card-border-radius: 4px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- bmw 85.0%
- ibm 78.3%
- composio 77.9%
- notion 74.5%
- clickhouse 74.3%
Where this came from
- Source document
volt/design-md/bmw-m/DESIGN.md· 29.7 KB- Repository
- VoltAgent/awesome-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.