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, in one page
BMW's corporate site carries a far more measured, corporate-automotive interface than its motorsport-bombastic cousin BMW M. The atmosphere is light: {colors.canvas} (#ffffff) is the base surface, {colors.surface-card} (#fafafa) carries the soft-grey card plates, and dark navy {colors.surface-dark} (#1a2129) appears only inside hero bands — one per page, framing the lead model render.
Type runs BMW's licensed BMW Type Next Latin at two weights: heavy 700 (display + button + nav) and Light 300 (body + secondary copy). That contrast — heavy display next to thin paragraph — is the editorial signature, channeling the brand's "European-engineered" voice. Weight 500 is deliberately absent; weight 400 only appears on caption and nav-link in neutral utility contexts.
The brand action color, BMW corporate blue ({colors.primary} — #1c69d4), works alone across every primary CTA — buttons are rectangular, 0px corner, with white type. The site rotates a blue-button + dark-navy-hero combination across page rhythm. The M tricolor stripe ({colors.m-blue-light} → {colors.m-blue-dark} → {colors.m-red}) only appears in motorsport contexts and as M-model badges/dividers — never in the corporate site's main language.
The configuration and reservation flows add a dealer-side inventory UI on top of the same system — filter chips, model cards, price tables — but typography and color stay identical; only density goes up.
Key Characteristics:
- Light
{colors.canvas}is the base surface; dark navy{colors.surface-dark}appears only inside hero bands — page rhythm relies on contrast. - BMW corporate blue (
{colors.primary}— #1c69d4) acts as the single primary action color. - BMW Type Next Latin: weight 700 display against weight 300 body is the signature.
- Buttons are rectangular, 0px radius — corporate dialect, distinct from M's sportier radii.
- Model cards run as 4-up or 5-up grids with no hairline border or only minimal border — just white plate + photo + title.
- Photography (model renders) sits in environment, no shadow — depth comes entirely from color-block contrast.
- M tricolor stripe appears only in M-model contexts — not part of the corporate language.
- Section rhythm holds at
{spacing.section}(80px) for every major band.
Do's and don'ts
Do
- Sit every page on
{colors.canvas}(pure white); reserve{colors.surface-dark}for hero bands only. - Pair primary CTAs with
{colors.primary}(BMW Blue) +{colors.on-primary}white text +{rounded.none}0px corners — the corporate signature. - Set display headlines in BMW Type Next Latin 700 and body in Light 300. The contrast is non-negotiable.
- Use UPPERCASE letter-spaced links like "LEARN MORE" as inline CTAs.
- Place the model card photo on
{colors.surface-card}with the title beneath — the standard BMW corporate pattern. - Hold section rhythm at
{spacing.section}(80px) — tighter than BMW M's 96px. - Reserve the M tricolor stripe for M-model contexts and motorsport dividers.
Don't
- Don't add a brand color other than blue — BMW Blue is the only primary action color.
- Don't use pill or rounded buttons —
{rounded.none}(0px) rectangular IS the brand button. - Don't drop display weight to 500 — the system uses 700 / 400 / 300; 500 is absent.
- Don't bold body type — Light 300 is the BMW corporate editorial voice.
- Don't add drop shadows to cards — depth comes from photo + color-block contrast.
- Don't repeat the same surface mode across two consecutive bands — light → dark hero → light → light feature → dark CTA → light footer rotation is required.
- Don't use the M tricolor stripe as a CTA fill — divider/accent role only.
- Don't mix languages in a single page — UI language must stay consistent.
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 design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- primary: #1c69d4
- primary-active: #0653b6
- primary-disabled: #d6d6d6
- ink: #262626
- body: #3c3c3c
- body-strong: #1a1a1a
- muted: #6b6b6b
- muted-soft: #9a9a9a
- hairline: #e6e6e6
- hairline-strong: #cccccc
Type:
- families: BMW Type Next Latin, -apple-system, BlinkMacSystemFont, Segoe UI
- scale: 12, 13, 14, 16, 18, 20, 24, 32, 48
- weights: 300, 400, 700
Shape:
- radius: 0, 2, 4, 8, 12
Spacing: 4, 8, 12, 14, 16, 24, 32, 48, 64, 80
Rules:
- Sit every page on `{colors.canvas}` (pure white); reserve `{colors.surface-dark}` for hero bands only.
- Pair primary CTAs with `{colors.primary}` (BMW Blue) + `{colors.on-primary}` white text + `{rounded.none}` 0px corners — the corporate signature.
- Set display headlines in BMW Type Next Latin 700 and body in Light 300. The contrast is non-negotiable.
- Use UPPERCASE letter-spaced links like "LEARN MORE" as inline CTAs.
- Place the model card photo on `{colors.surface-card}` with the title beneath — the standard BMW corporate pattern.
- Hold section rhythm at `{spacing.section}` (80px) — tighter than BMW M's 96px.
Avoid:
- Don't add a brand color other than blue — BMW Blue is the only primary action color.
- Don't use pill or rounded buttons — `{rounded.none}` (0px) rectangular IS the brand button.
- Don't drop display weight to 500 — the system uses 700 / 400 / 300; 500 is absent.
- Don't bold body type — Light 300 is the BMW corporate editorial voice.
- Don't add drop shadows to cards — depth comes from photo + color-block contrast.
- Don't repeat the same surface mode across two consecutive bands — light → dark hero → light → light feature → dark CTA → light footer rotation is required.
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Brand & Accent
- BMW Blue (Primary) (
{colors.primary}— #1c69d4): The single brand action color. All primary CTAs, "Learn More" link prefixes (blue text), nav-link active state. Press shifts to{colors.primary-active}(#0653b6). - M Blue Light (
{colors.m-blue-light}— #0066b1) + M Blue Dark ({colors.m-blue-dark}— #1c69d4) + M Red ({colors.m-red}— #e22718): The M tricolor stripe — appears on the corporate site only on M-model pages and the "M" badge. Never as CTA colors.
Surface
- Canvas (
{colors.canvas}— #ffffff): The default page surface. - Surface Soft (
{colors.surface-soft}— #f7f7f7): Soft grey for the footer and sub-navigation bands. - Surface Card (
{colors.surface-card}— #fafafa): The light plate behind a model card's photo block. - Surface Strong (
{colors.surface-strong}— #ebebeb): A slightly heavier grey used as a section divider. - Surface Dark (
{colors.surface-dark}— #1a2129): Dark navy for hero bands and large dark CTAs. Not pure black — carries a warm undertone. - Surface Dark Elevated (
{colors.surface-dark-elevated}— #262e38): One step lighter, used for nested cards on top of the dark hero.
Hairlines
- Hairline (
{colors.hairline}— #e6e6e6): The 1px divider — input outline, configurator card outline, table separator. - Hairline Strong (
{colors.hairline-strong}— #cccccc): A more visible 1px outline — disabled secondary buttons, emphasized table border.
Text
- Ink (
{colors.ink}— #262626): All display and primary text. Not pure black — soft against photography. - Body (
{colors.body}— #3c3c3c): Default running text. - Body Strong (
{colors.body-strong}— #1a1a1a): Emphasized paragraphs and lead text. - Muted (
{colors.muted}— #6b6b6b): Footer links, breadcrumbs, captions. - Muted Soft (
{colors.muted-soft}— #9a9a9a): Disabled text, fine-print legal. - On Primary (
{colors.on-primary}— #ffffff): White text on a blue button. - On Dark (
{colors.on-dark}— #ffffff): White text on a dark hero band. - On Dark Soft (
{colors.on-dark-soft}— #bbbbbb): A slightly muted white for secondary text on dark bands.
Semantic
- Success (
{colors.success}— #22c55e): Confirmation messages and "available" indicators. - Warning (
{colors.warning}— #f59e0b): Warning callouts. - Error (
{colors.error}— #dc2626): Validation errors.
Type scaleRead the full spec
Font Family
The system runs BMW Type Next Latin in two cuts: regular (display + UI labels) and BMW Type Next Latin Light (body + secondary copy). Fallback stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif.
The display/body split is functional:
- BMW Type Next Latin (700) → display headlines, button labels, nav links
- BMW Type Next Latin Light (300) → paragraphs, descriptive copy
- BMW Type Next Latin (400) → caption, neutral nav-link contexts
This three-way split mirrors BMW M's — corporate and the M sub-brand share the same typographic DNA; only the weight/size ratios differ.
Hierarchy
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
{typography.display-xl} | 64px | 700 | 1.05 | 0 | Hero h1 ("iX3", model name) |
{typography.display-lg} | 48px | 700 | 1.1 | 0 | Section heads |
{typography.display-md} | 32px | 700 | 1.15 | 0 | Sub-section heads |
{typography.display-sm} | 24px | 700 | 1.25 | 0 | CTA-band headlines |
{typography.title-lg} | 20px | 700 | 1.3 | 0 | Card group titles |
{typography.title-md} | 18px | 700 | 1.4 | 0 | Model card title, intro paragraphs |
{typography.title-sm} | 16px | 700 | 1.4 | 0 | Inventory card title, list label |
{typography.body-md} | 16px | 300 (Light) | 1.55 | 0 | Default body — BMW Type Next Latin Light |
{typography.body-sm} | 14px | 300 (Light) | 1.55 | 0 | Footer body, fine-print |
{typography.caption} | 12px | 400 | 1.4 | 0.5px | Photo captions, meta |
{typography.label-uppercase} | 13px | 700 | 1.3 | 1.5px | "LEARN MORE" inline links, category tabs |
{typography.button} | 14px | 700 | 1.0 | 0.5px | Standard CTA button label |
{typography.nav-link} | 14px | 400 | 1.4 | 0.3px | Top-nav menu items |
Principles
- The 700/300 contrast is the editorial signature. Weight 500 is absent from the system.
- No negative letter-spacing — BMW Type Next Latin works on a wide body, so tracking stays at default. Apple/Cal.com-style tightening reads off-brand here.
- UPPERCASE inline links — "LEARN MORE"-style CTAs run uppercase with 1.5px tracking. The "machined precision" voice.
- Weight 400 lives in a narrow lane — only caption and nav-link, both neutral utility roles.
Note on Font Substitutes
BMW Type Next Latin is a licensed BMW typeface. Open-source alternatives:
- Inter (variable) — close match at weight 700/300. Leave letter-spacing at 0.0em.
- Saira Condensed — for a slightly more compressed BMW Type feel.
Components and layoutRead the full spec
Top Navigation
top-nav — A white sticky nav bar pinned to the top of the page. 64px tall, {colors.canvas} background. Left: BMW circular badge logo; center: primary horizontal menu (Models, Next Generation, Pre-Owned, Dealers, Test Drive); right: cart icon, language picker, profile. Menu items render in {typography.nav-link} (14px / 400 / 0.3px tracking).
Buttons
button-primary — The signature primary CTA. Background {colors.primary} (BMW Blue #1c69d4), text {colors.on-primary}, type {typography.button} (BMW Type Next Latin 14px / 700 / 0.5px tracking), padding 14px × 32px, height 48px, rounded {rounded.none} (0px — rectangular). Press state: button-primary-active shifts to {colors.primary-active}.
button-secondary — A white button with a hairline outline. Background {colors.canvas}, text {colors.ink}, 1px {colors.hairline-strong} border, same padding + height + radius.
button-secondary-on-dark — Used over a dark hero band. Background transparent, text {colors.on-dark}, 1px {colors.on-dark} border, same rectangular shape.
button-text-link — An inline UPPERCASE letter-spaced link. No background, text {colors.ink}, type {typography.label-uppercase} (13px / 700 / 1.5px tracking). Reads as "LEARN MORE", terminated by a › chevron.
text-link — An inline link inside body copy. {colors.ink} text, no underline by default; underlines per context.
Cards & Containers
hero-band-dark — Full-width dark navy hero. Background {colors.surface-dark}, text {colors.on-dark}, vertical padding {spacing.section} (80px). Centered: model name in {typography.display-xl} (64px / 700) + sub-headline + vehicle render (right-aligned or below). A single {component.button-primary} (blue) or {component.button-secondary-on-dark}.
hero-photo-band — A light-canvas model showcase band. Background {colors.canvas}, text {colors.ink}. The vehicle render takes the wide area; right or below, a headline + two link CTAs + sub-tagline.
model-card — Used in 4-up or 5-up model card grids on the homepage ("BMW iX3", "BMW iX", "BMW 5 Series"). Background {colors.canvas}, rounded {rounded.none}, padding {spacing.lg} (24px). Contents: model render at the top ({component.model-card-photo} on {colors.surface-card}), model name in {typography.title-md} (18px / 700) below, a one-line tagline in {typography.body-sm} (14px / 300), and a {component.button-text-link} ("LEARN MORE ›").
model-card-photo — The card's photo plate. Background {colors.surface-card} (#fafafa — soft grey), rounded {rounded.none}, vehicle render in full silhouette. Zero padding — the photo runs edge-to-edge.
feature-photo-card — A feature/lifestyle card. Background {colors.canvas}, padding {spacing.lg}. 16:9 photo at the top, {typography.title-md} headline + body excerpt below.
spec-cell — A technical spec cell (model detail page). Transparent background, separated by hairline dividers. Value on top ({typography.display-sm} 24px / 700), label below ({typography.label-uppercase}).
Inventory & Configurator
inventory-card — One card per vehicle on the dealer inventory page. Background {colors.canvas}, padding {spacing.md} (16px), rounded {rounded.none}. Vehicle photo on top, model + variant name + price + "View" link below.
filter-chip + filter-chip-active — Inventory filter chips (model, year, price range). Inactive: background {colors.canvas}, 1px {colors.hairline-strong} border, text {colors.ink}, type {typography.caption}. Active: background {colors.ink}, text {colors.on-dark}. Padding 8px × 14px, radius {rounded.none}.
configurator-option-tile + configurator-option-tile-selected — Configurator selection cell (color, wheels, upholstery). Inactive: background {colors.canvas}, 1px hairline. Selected: 2px {colors.primary} border. Padding 16px × 24px, radius {rounded.none}.
Inputs & Forms
text-input — Standard text input. Background {colors.canvas}, text {colors.ink}, type {typography.body-md}, rounded {rounded.none} (0px), padding 14px × 16px, height 48px, 1px hairline border. On focus, the border thickens to ink.
cookie-consent-card — Cookie banner. Background {colors.canvas}, 1px hairline, padding {spacing.lg} (24px), {typography.body-sm} (14px / 300 — Light even in legal copy).
Tabs / Tags
category-tab + category-tab-active — Category sub-nav. Inactive: transparent + {colors.muted} UPPERCASE label. Active: transparent + {colors.ink} UPPERCASE label + 2px ink underline. 12px vertical padding, no horizontal radius.
Brand Signature
m-stripe-divider — A 4px-tall horizontal tricolor stripe ({colors.m-blue-light} → {colors.m-blue-dark} → {colors.m-red}). Only in M-model contexts, motorsport badges, or as an M-related section divider. Absent from the corporate main flow; on M-model detail pages and the M Performance badge it plays an inline divider role.
Responsive behaviourRead the full spec
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Hamburger nav; hero h1 64→40px; model card grid 1-up; configurator filter chips 2-up; footer 4 col → 1 col |
| Tablet | 768–1024px | Top nav narrows, secondary menu hides under "More"; model card 2-up; inventory 2-up |
| Desktop | 1024–1440px | Full top-nav; 4-up or 5-up model card grid; inventory 3-up; full configurator UI |
| Wide | > 1440px | Same as desktop, content fixed at 1440px; gutters absorb the rest |
Touch Targets
{component.button-primary}minimum 48 × 48px — above WCAG AAA (44 × 44).{component.text-input}height 48px.- Category tabs run with 12px vertical padding, giving an effective tap area > 44px.
Collapsing Strategy
- The top nav collapses to a hamburger below 768px; the menu opens as a full-screen sheet.
- The hero band's internal layout drops to a single column.
- Model card grid 4-up/5-up → 2-up → 1-up.
- The configurator filter chip row scrolls horizontally on mobile.
- The M tricolor stripe stays at 4px height across every breakpoint.
Image Behavior
- Model renders scale at every breakpoint while preserving native aspect ratios.
- Hero photography may shift to a more vertical crop on mobile (art direction).
- Inventory vehicle photos may move from 16:9 to 4:3 on mobile.
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-bmw {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #262626;
--heading-color: #262626;
--link-color: #1c69d4;
--link-hover-color: #1653a7;
--border-color: #d8d8d8;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(38,38,38,0.06);
--card-hover-shadow: 0 6px 18px rgba(38,38,38,0.12);
--header-bg: #262626;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #727272;
--button-bg: #1c69d4;
--button-text-color: #ffffff;
--button-hover-bg: #1653a7;
--button-border: none;
--button-border-radius: 4px;
--button-secondary-bg: #f2f2f2;
--button-secondary-text-color: #262626;
--button-secondary-hover-bg: #e5e5e5;
--button-secondary-border: 1px solid #d8d8d8;
--prompt-bg: #f4f4f4;
--prompt-text-color: #262626;
--base-font: var(--font-helvetica);
--heading-font: var(--font-roboto);
--card-border-radius: 4px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
volt/design-md/bmw/DESIGN.md· 27.0 KB- Repository
- VoltAgent/awesome-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.