BMW M

version alpha

name BMW M

description A motorsport-engineering interface anchored on a near-black canvas with white BMW Type Next Latin display headlines in confident UPPERCASE. The brand carries no decorative voltage — its energy comes from full-bleed automotive photography (cars on tracks, driver-cockpit shots, carbon-fiber detail) and the iconic M tricolor stripe (light blue → dark blue → red) used sparingly as a brand signature on logos, dividers, and motorsport chrome. Type stays light to medium weight to feel European-engineered, never American-bombastic.

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" surface-soft: "#0d0d0d" on-primary: "#000000" on-dark: "#ffffff" m-blue-light: "#0066b1" m-blue-dark: "#1c69d4" m-red: "#e22718" bmw-blue: "#1c69d4" electric-blue: "#0653b6" carbon-gray: "#2b2b2b" warning: "#f4b400" success: "#0fa336"

typography display-xl: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 80px fontWeight: 700 lineHeight: 1 letterSpacing: 0 display-lg: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 56px fontWeight: 700 lineHeight: 1.05 letterSpacing: 0 display-md: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 40px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0 display-sm: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 32px fontWeight: 700 lineHeight: 1.15 letterSpacing: 0 title-lg: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0 title-md: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 title-sm: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 label-uppercase: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 1.5px body-md: fontFamily: "BMWTypeNextLatin Light, BMWTypeNextLatin, sans-serif" fontSize: 16px fontWeight: 300 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: "BMWTypeNextLatin Light, sans-serif" fontSize: 14px fontWeight: 300 lineHeight: 1.5 letterSpacing: 0 caption: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.5px button: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1 letterSpacing: 1.5px nav-link: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.5px

rounded none: 0px xs: 2px sm: 4px md: 6px full: 9999px

spacing xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 40px xxl: 64px section: 96px

components button-primary: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 16px 32px height: 48px button-primary-outline: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 16px 32px height: 48px button-on-light: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 16px 32px button-icon: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" rounded: "{rounded.full}" size: 48px text-link: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.label-uppercase}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.nav-link}" height: 64px hero-photo-band: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.display-xl}" padding: 96px m-stripe-divider: backgroundColor: transparent textColor: "{colors.on-dark}" height: 4px feature-photo-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" typography: "{typography.title-md}" rounded: "{rounded.none}" padding: 24px model-card: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.title-lg}" rounded: "{rounded.none}" padding: 24px magazine-article-card: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.title-md}" rounded: "{rounded.none}" padding: 24px spec-cell: backgroundColor: "{colors.surface-soft}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 24px cookie-consent-card: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 24px category-tab: backgroundColor: transparent textColor: "{colors.body}" typography: "{typography.label-uppercase}" padding: 12px 0 category-tab-active: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.label-uppercase}" padding: 12px 0 text-input: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 12px 16px height: 48px chatbot-launcher: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" typography: "{typography.title-md}" rounded: "{rounded.none}" padding: 24px cta-band-photo: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.display-md}" padding: 80px motorsport-photo-card: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.title-md}" rounded: "{rounded.none}" carousel-arrow: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" rounded: "{rounded.full}" size: 48px footer: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-sm}" padding: 64px

Overview

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.

Colors

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).

Typography

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, "