A motorsport-engineering interface anchored on a near-black canvas with white BMW Type Next Latin display headlines in confident UPPERCASE. Brand voltage comes from full-bleed automotive photography.
The system has no decorative voltage — energy comes from full-bleed photography. The M tricolor stripe is the only true brand-identity color signal; it never appears as a button fill.
Display at weight 700, body at weight 300 (Light). The contrast between heavy display and light body is the editorial signature. UPPERCASE for h1/h2 with 1.5px letter-spacing on labels.
All buttons render at 0px radius with 1.5px letter-spacing on uppercase labels. The "machined precision" feel is non-negotiable — rounded corners read as consumer-tech, not motorsport.
Cards lead with edge-to-edge photography. Chrome around the photos backs off — small uppercase tags, heavy display titles, light-weight body excerpts.
Spec table cells display vehicle technical data. Sharp corners, large display numbers, uppercase labels. No card chrome — values sit in a 4-up grid with hairline dividers.
From the original 1986 prototype to the V8 hybrid of 2025 — how the wagon became the canvas for M's wildest experiments.
Ask anything about M cars, models, motorsport history, or technology.
Book your M Track Days experience at the Nürburgring or M Driving Academy.
Inputs are 0px radius, surface-card background, hairline border. Focus state thickens the border to white.
Section rhythm 96px between major editorial bands.
Almost always 0px. Reserve full radius for circular icon buttons only.
No drop shadows. Depth comes from photography subjects + lighting and from the contrast between black canvas and slightly-elevated surface-card.
No shadow. Body, top nav, footer, photo bands.
1px hairline border. Section dividers, card outlines.
surface-card over canvas — visible elevation.
Full-bleed photo. Subject + lens does shadow's work.
carbon-gray on tech-spec cards. Texture overlay optional.
4px tricolor stripe as brand-identity divider.
| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Hamburger nav; hero h1 80→48px; photo cards stack full-width; spec grid 1-up. |
| Tablet | 768–1024px | Top nav tightens; 2-up card grids; spec tables 2-up. |
| Desktop | 1024–1440px | Full top-nav; 3-up card grids; 4-up spec grids. |
| Wide | > 1440px | Same as desktop with more breathing room; max content 1440px. |