---
version: alpha
name: BMW.com
description: "A cinematic dark stage, hairline 300-weight type, and one electric BMW blue for every action."
colors:
  on-surface-variant: "#666666"
  on-surface: "#262626"
  surface: "#ffffff"
  outline: "#e6e6e6"
  error: "#d20000"
  primary: "#1c69d4"
  deep-blue: "#0653b6"
  sky-disabled: "#bbd2f3"
  graphite: "#4d4d4d"
  steel: "#8e8e8e"
  silver: "#bbbbbb"
  mist: "#f2f2f2"
  cloud: "#f6f6f6"
  ink-black: "#000000"
  signal-green: "#3db014"
  signal-amber: "#ffad1f"
typography:
  label:
    fontFamily: bmwTypeNextWeb
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
  body-3:
    fontFamily: bmwTypeNextWeb
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0em
  iconization:
    fontFamily: bmwTypeNextWeb
    fontSize: 14px
    fontWeight: 400
    lineHeight: 12px
    letterSpacing: 0.6em
  body-2:
    fontFamily: bmwTypeNextWeb
    fontSize: 14px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: 0em
  body-1:
    fontFamily: bmwTypeNextWeb
    fontSize: 16px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: 0em
  subsection-2:
    fontFamily: bmwTypeNextWeb
    fontSize: 17px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: 0em
  subsection-1:
    fontFamily: bmwTypeNextWeb
    fontSize: 19px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0em
  headline-3:
    fontFamily: bmwTypeNextWeb
    fontSize: 23px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: 0em
  headline-2:
    fontFamily: bmwTypeNextWeb
    fontSize: 28px
    fontWeight: 400
    lineHeight: 40px
    letterSpacing: 0em
  headline-1:
    fontFamily: bmwTypeNextWeb
    fontSize: 33px
    fontWeight: 400
    lineHeight: 46px
    letterSpacing: 0em
  stage-zone-1:
    fontFamily: bmwTypeNextWeb
    fontSize: 35px
    fontWeight: 400
    lineHeight: 37px
    letterSpacing: 0em
  stage-zone-0:
    fontFamily: bmwTypeNextWeb
    fontSize: 56px
    fontWeight: 400
    lineHeight: 58px
    letterSpacing: 0em
  stage-model:
    fontFamily: bmwTypeNextWeb
    fontSize: 119px
    fontWeight: 400
    lineHeight: 108px
    letterSpacing: 0em
rounded:
  buttons: 3px
  inputs: 3px
  cards-tags: 3px
spacing:
  "4": 4px
  "8": 8px
  "12": 12px
  "16": 16px
  "24": 24px
  "32": 32px
  "48": 48px
  "64": 64px
---
# BMW.com — Style Reference
> A cinematic dark stage, hairline 300-weight type, and one electric BMW blue for every action.

**Theme:** mixed

BMW.com runs a light content system punctuated by full-bleed, cinematic dark media stages — the vehicles are shot against dusk skies and slate tarmac, and the interface steps back to frame them. Its type is the signature: `bmwTypeNextWeb` set at a default weight of **300**, with uppercase display headings ("FIND YOUR DRIVE.") that whisper premium through hairline strokes rather than shouting through bold. The entire colour system is disciplined into a single chromatic action — **BMW blue `#1c69d4`** — reserved strictly for primary CTAs, live links, and the "information" semantic; everything else is a precise carbon-to-white neutral ramp. What makes this a real *system* (not just a hero) is the fully role-named token layer under the hood: `--cta`, `--nba`, `--ol`, `--filtertag`, `--select`, plus a complete error/warning/success/information semantic set — 170+ declared variables, most of them driving states you don't see on the landing frame. Corners are softened to a restrained **3px**, and micro-labels are tracked out at `.6em` in uppercase for that instrument-panel feel.

## Tokens — Colors

Featured below are the load-bearing identity roles a designer actually reads. The complete declared variable set (semantic backgrounds, per-component state colours, focus rings) is reproduced faithfully in **Quick Start**.

| Name | Value | Token | Role |
|------|-------|-------|------|
| Carbon | `#262626` | `--heading` / `--copy-text` / `--nba` | Primary text, headings, and the solid dark "next-best-action" button surface — the near-black structural anchor |
| Pure White | `#ffffff` | `--surface-background-primary` / `--cta-text` | Page canvas, all CTA label text, and nav marks over dark media |
| BMW Blue | `#1c69d4` | `--cta` / `--link-cta` / `--information` | The ONE brand action colour — primary buttons, live-link hover, info state; never decorative, never a background wash |
| Deep Blue | `#0653b6` | `--cta-hover` / `--link-active` | Pressed/active state of every blue action — the darker step under BMW blue |
| Sky Disabled | `#bbd2f3` | `--cta-disabled` | The only tint of BMW blue permitted — a disabled primary button, nothing else |
| Graphite | `#4d4d4d` | `--nba-hover` / `--scrollbar-thumb` | Dark-button hover, scrollbar thumb, and the second step down from carbon |
| Slate | `#666666` | `--disclaimer` / `--neutral` / `--select-text` | Disclaimers ("Some images may be computer generated"), muted body, placeholder-adjacent text |
| Steel | `#8e8e8e` | `--filtertag` / `--input-border-color` | Input and filter-tag borders, unselected chip outline — the mid-grey control edge |
| Silver | `#bbbbbb` | `--nba-disabled` / `--link-disabled` / `--select` | Disabled text and inactive controls |
| Hairline | `#e6e6e6` | `--border` / `--border-tag` | Dividers, card borders, and disabled outline-button edges |
| Mist | `#f2f2f2` | `--neutral-background` / `--filtertag-disabled` | Neutral fill band, disabled chip fill |
| Cloud | `#f6f6f6` | `--surface-background-secondary` | Secondary surface — form panels, quiet alternate sections |
| Ink Black | `#000000` | (hero base) / `--compare-form-price-color` | Full-bleed media stage base and the price emphasis colour |
| Signal Red | `#d20000` | `--error` | Error text and validation (on `#f7e7e9` background) — semantic only |
| Signal Green | `#3db014` | `--success` | Success/confirmation state (on `#e8f2eb` background) — semantic only |
| Signal Amber | `#ffad1f` | `--warning` | Warning state (on `#fbedc9` background) — semantic only |

## Tokens — Typography

### bmwTypeNextWeb — The single house typeface for every role · `--font-bmw-type-next`
BMW's proprietary grotesque, loaded at 300 / 400 / 500 / 700. **300 is the default** for body and — unusually — for headings too, which is the anti-convention signature: luxury display type here is *thin*, not heavy. 400 is used for inputs, **500 for anything clickable** (buttons, links), and 700 is reserved for prices. Compact, geometric, squared terminals. Substitute with Helvetica Neue for closest fidelity, or Inter / Arial.
- **Substitute:** Helvetica Neue, Inter, Arial
- **Weights:** 300 (default & headings), 400 (inputs), 500 (clickable/links), 700 (prices)
- **Sizes:** 12px, 14px, 15px, 16px, 17px, 19px, 23px, 28px, 33px, 35px, 56px, up to 119px (hero model name)
- **Line height:** 1.0–1.3 on display/headings; 1.55–1.65 on body copy
- **Letter spacing:** normal for body/headings; `.6em` uppercase for `--iconization` micro-labels
- **Role:** Whole-site workhorse. 300 for copy and display, 500 for interactive elements, 700 for prices; uppercase + wide tracking for small instrument-style labels.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| label | 12px (.75rem) | 16px | normal | `--label-1-font-size` |
| body-3 | 12px (.75rem) | 18px | — | `--body-3-font-size` |
| iconization | 14px (.875rem) | 12px | .6em (uppercase) | `--iconization-1-font-size` |
| body-2 | 14px (.875rem) | 22px | — | `--body-2-font-size` |
| body-1 | 16px (1rem) | 26px | — | `--body-1-font-size` |
| subsection-2 | 17px (1.0625rem) | 26px | — | `--subsection-2-font-size` |
| subsection-1 | 19px (1.1875rem) | 28px | — | `--subsection-1-font-size` |
| headline-3 | 23px (1.4375rem) | 32px | — | `--headline-3-font-size` |
| headline-2 | 28px (1.75rem) | 40px | — | `--headline-2-font-size` |
| headline-1 | 33px (2.0625rem) | 46px | — | `--headline-1-font-size` |
| stage-zone-1 | 35px (2.1875rem) | 37px | — | `--stage-zone-1-large-font-size` |
| stage-zone-0 | 56px (3.5rem) | 58px | — | `--stage-zone-0-single-row-font-size` |
| stage-model | 119px (7.4375rem) | 108px | — | `--stage-model-1-font-size` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** comfortable (generous body leading, airy stage margins)

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 48 | 48px (`--size` 3rem) | `--spacing-48` |
| 64 | 64px | `--spacing-64` |

### Border Radius

| Element | Value |
|---------|-------|
| buttons | 3px |
| inputs | 3px |
| cards / tags | 3px |
| icon buttons (account, search) | 50% (circle) |

### Shadows

The system uses no drop shadows — depth is a 1px inset ring, and focus is a BMW-blue ring.

| Name | Value | Token |
|------|-------|-------|
| Outline ring (light) | `inset 0 0 0 1px #f2f2f2` | — |
| Outline ring (dark) | `inset 0 0 0 1px #262626` | — |
| Focus (navigation) | `inset 0 0 0 .125rem #1c69d4` | `--focus-visible-navigation-light` |
| Focus (input) | `inset 0 0 0 .125rem #1c69d4` | `--focus-visible-input-inside` |

### Layout

- **Page max-width:** grid-driven (`calc(100vw − scrollbar − gutters×2)`); content rail ~1200–1440px
- **Section gap:** generous — full-bleed media stages butt directly against airy white content blocks
- **Card padding:** 16–24px
- **Element gap:** 8–16px; button heights 36px (small) / 52px (large)

## Components

### Primary CTA Button
**Role:** The single highest-priority action ("Offer details", "See all offers")

BMW blue `#1c69d4` fill, white `#fff` label at 15px weight 500, 3px radius. Hover deepens to `#0653b6`; disabled fades to `#bbd2f3`. Large height 52px (3.25rem), small 36px (2.25rem). No shadow — the colour alone carries it. This is the ONLY solid-blue element on the page.

### NBA / Solid Dark Button
**Role:** Secondary "next-best-action" ("Build yours")

Carbon `#262626` fill, white `#fff` label at 15px weight 500, 3px radius. Hover lightens to `#4d4d4d`; disabled to `#bbb`. Sits beside the blue primary as the quieter of two equal-width actions — dark instead of coloured, so blue always reads as the lead.

### Outline Button
**Role:** Tertiary / low-commitment action

Transparent fill, `#262626` text and a 1px `#262626` border that thickens to 2px on hover, 3px radius. Disabled border/text drop to `#e6e6e6` / `#bbb`. Rendered as an inset ring rather than a real border so it never shifts layout.

### Round Icon Button
**Role:** Nav utilities (account, search) over dark media

Circular (50% radius), transparent-to-black fill with a 1px `#fff` hairline border, white glyph. Small footprint (~1px 6px padding around a `bmw_next_icons` glyph). Used only in the transparent navigation over imagery.

### Top Navigation Bar
**Role:** Global header, floating over the hero media

Transparent background (`--navigation-background: #0000`) with a subtle bottom-up gradient scrim (`linear-gradient(0, #0000, #0006)`) so white marks stay legible over any image. BMW roundel left, primary menu (Models, Build Your Own, Shopping, Electric, Owners, About Us) with dropdown carets, and right-aligned "Choose your local BMW Center" + account + search icons — all white (`--navigation-logo` / `--navigation-claim` / `--navigation-interaction` = `#fff`). A 1px `#fff` bottom hairline. Highlighted/active nav items shift to BMW blue `#1c69d4`.

### Full-Bleed Hero Stage
**Role:** Cinematic vehicle showcase

Edge-to-edge dark photography (vehicles on tarmac against a dusk sky), no rounded corners, no card. Left-anchored content zone: an uppercase 300-weight headline (`--stage-zone-0` 56px), a sub-headline paragraph in white, then a dual-button row (blue primary + dark NBA). A small `#666`-toned disclaimer ("Some images may be computer generated") sits bottom-right. The image is the atmosphere; UI is a thin left-aligned frame.

### Stage Headline
**Role:** The hero's uppercase display line

`bmwTypeNextWeb` weight **300**, uppercase, ~56px (`--stage-zone-0-single-row`), line-height ~1.03, white on media. Never bolded — the hairline weight at large scale is the brand's typographic signature. Model-name stages can scale to 119px (`--stage-model-1`).

### Section Heading (Light)
**Role:** Content-block title on white ("Discover offers around you.")

`bmwTypeNextWeb` weight 300, `#262626`, `--headline-1`/`--headline-2` scale (28–35px), sentence case with a period. Same hairline restraint as the hero, inverted onto white.

### Filter Tag / Chip
**Role:** Faceted-filter and toggle control

Unselected: `#8e8e8e` border, `#666` text, transparent fill, 3px radius; hover border/text darken to `#262626`. Selected: `#262626` fill, `#fff` text, hover `#4d4d4d`. Disabled: `#f2f2f2` fill, `#bbb` text. The chip system carries most secondary interactions on shopping/build pages.

### Form Input
**Role:** Text entry (search, forms, compare dropdowns)

White `#fff` fill, `#8e8e8e` border (hover `#4d4d4d`), `#262626` text, `#666` placeholder, 3px radius, weight 400. Focus draws a `#1c69d4` inset ring (`--focus-visible-input-inside`). Disabled fills `#f2f2f2` with `#8e8e8e` text.

### Inline Link
**Role:** In-copy and utility navigation

`#262626` at rest, weight 500; hover shifts to BMW blue `#1c69d4`, active to `#0653b6`, disabled `#bbb`. Colour — not underline — is the primary affordance; the blue-on-hover is the only place body text turns chromatic.

### Semantic Message / Alert
**Role:** Inline validation and status

Four fixed pairs, foreground on a pale tinted background: error `#d20000` on `#f7e7e9`, warning `#ffad1f` on `#fbedc9`, success `#3db014` on `#e8f2eb`, information `#1c69d4` on `#dde8f9`. These are the ONLY non-blue chromatic colours in the whole system, and they appear strictly in status context.

### Dark Footer Band *(grafted from curated — token-consistent)*
**Role:** Site footer with link columns and locale row

Carbon `#262626` full-width band, white `#fff` link text at ~14–16px weight 500, organized in flat columns (Quick Links, BMW Websites, BMW.com, social). Column headers are plain white — no decorative chrome. A language-switcher row (English / Deutsch / Italiano / Français / Español / 日本語) of plain white links, no flags or separators. The dark band is the natural close-bracket to the dark hero.

## Do's and Don'ts

### Do
- Reserve BMW blue `#1c69d4` exclusively for actions — primary CTAs, link-hover, and the information semantic. It is the system's one lead colour.
- Set headings and hero display at weight **300** in `bmwTypeNextWeb` — the hairline weight is the signature, at any size from 28px to 119px.
- Use weight **500** for everything clickable (buttons, links) and 700 only for prices — the weight itself signals interactivity.
- Pair a blue primary CTA with a carbon `#262626` (NBA) secondary so the blue always reads as the lead of two equal buttons.
- Keep radius at **3px** on buttons, inputs, and cards; make icon-only nav buttons full circles (50%).
- Let full-bleed dark media supply all atmosphere and colour; keep UI chrome a thin, left-anchored, white frame over it.
- Uppercase and track out (`.6em`) small instrument-style labels; keep body copy sentence case with generous 1.6 leading.
- Drive states from the role tokens (`--cta-hover`, `--nba-disabled`, `--filtertag-selected`) rather than inventing new colours.

### Don't
- Do not bold the display type — weight 700+ on a headline breaks the hairline restraint that defines the brand.
- Do not use BMW blue as a background wash, section fill, or decoration — only as an action colour and its disabled tint `#bbd2f3`.
- Do not introduce accent hues outside the carbon→white neutral ramp and the four fixed semantic pairs.
- Do not add drop shadows — depth is a 1px inset ring; focus is a blue inset ring, nothing softer.
- Do not round corners past 3px (except the circular icon buttons) — the tight radius is part of the precision language.
- Do not overlay heavy UI panels on hero media — keep the vehicle photography uncontaminated and the frame minimal.
- Do not use the semantic red/green/amber outside true status context — they are not decorative colours.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#ffffff` | Primary page background (`--surface-background-primary`) |
| 1 | Secondary | `#f6f6f6` | Form panels, compare surfaces (`--surface-background-secondary`) |
| 1b | Neutral fill | `#f2f2f2` | Quiet neutral band, disabled chip fill (`--neutral-background`) |
| 2 | Media stage | `#000000` | Full-bleed dark hero base beneath vehicle photography |
| 2b | Dark band | `#262626` | Footer and solid dark buttons — the strong carbon contrast surface |

## Elevation

There is no soft elevation. Depth is expressed three ways: (1) a **1px inset ring** for outline buttons and bordered controls (`inset 0 0 0 1px #f2f2f2` / `#262626`); (2) **surface polarity** — white content butting against full-bleed black/carbon media and footer; (3) a **BMW-blue focus ring** (`inset 0 0 0 .125rem #1c69d4`) that is the system's entire "lift on interaction" vocabulary. Cards and buttons never cast a drop shadow — hierarchy comes from weight, colour, and the black/white polarity instead.

## Imagery

Photography is the atmosphere generator and the primary source of colour. The style is cinematic automotive: vehicles staged three-quarter against dramatic natural light — dusk skies, water, tarmac — with deep blue-black bodies and metallic highlights. Images are full-bleed, edge-to-edge, no rounded corners, no borders, and carry a subtle bottom gradient scrim so white nav marks and headlines stay legible. A required legal disclaimer ("Some images may be computer generated") sits small and `#666`-toned in a corner. Iconography is a dedicated glyph font (`bmw_next_icons`), thin-stroke and monochrome, matching the 300-weight type. No illustration, no stock lifestyle — vehicles are the heroes.

## Layout

Full-bleed dark media stages alternate with airy white content blocks on a grid-driven rail (`calc(100vw − scrollbar − gutters)`). The hero is a left-anchored content zone (headline → sub-headline → dual CTAs) floating over edge-to-edge photography; the navigation is transparent and floats on top with a gradient scrim rather than a solid bar. Below the fold, content returns to white with 300-weight section headings and blue CTAs. Rhythm is generous — each stage earns its vertical space with large imagery and open margins. The footer closes on a carbon `#262626` band. No sidebars; interaction density lives in the chip/filter/select system on deeper shopping pages, not the landing frame.

## Typography Signature

BMW.com's type runs a deliberate inversion of luxury-automotive convention. Where most premium brands reach for heavy display weights (700–900), BMW sets its largest moments — the 56px stage headline, the 119px model name — at weight **300**, uppercase. The hairline strokes at huge scale read as confidence, not timidity: the letterforms are wide and geometric enough to hold the space without mass. Interactivity is then encoded in *weight*, not colour: body is 300, anything clickable steps to 500, and prices to 700 — so a link is legible as a link before it ever turns blue on hover. The final register is the `--iconization` micro-label: 14px uppercase tracked out to `.6em`, an instrument-panel detail that quietly signals engineering precision. Two modes, one family: whisper-thin display up top, functional 500-weight interface below.

## Agent Prompt Guide

## Quick Color Reference
- background: `#ffffff` (canvas) / `#f6f6f6` (secondary surface)
- text: `#262626` (primary) / `#666666` (muted, disclaimers)
- border: `#e6e6e6` (hairline) / `#8e8e8e` (control edge)
- dark surface: `#262626` (footer, solid buttons) / `#000000` (media stage)
- accent / primary action: `#1c69d4` (BMW blue) — hover/active `#0653b6`, disabled `#bbd2f3`
- semantic: error `#d20000`, warning `#ffad1f`, success `#3db014`, info `#1c69d4`

## Example Component Prompts

1. **Primary CTA Button**: BMW blue `#1c69d4` fill, white `#fff` label at 15px weight 500 in bmwTypeNextWeb (or Helvetica Neue), 3px radius, height 52px, ~24px horizontal padding. Hover `#0653b6`, disabled `#bbd2f3`. No shadow.

2. **Dual-Button Hero Row**: Two equal-width buttons side by side. Left = primary blue CTA (`#1c69d4` fill, white label). Right = solid dark NBA (`#262626` fill, white label, hover `#4d4d4d`). Both 3px radius, 15px weight 500. Place on the lower-left of a full-bleed dark vehicle photograph.

3. **Stage Headline**: `bmwTypeNextWeb` Light (weight 300), uppercase, 56px, line-height ~1.03, white `#fff`, left-aligned over dark media. Below it a 16–18px weight-300 white sub-headline paragraph, then the dual-button row.

4. **Top Navigation (over media)**: Transparent bar with a `linear-gradient(0, #0000, #0006)` bottom scrim and 1px `#fff` bottom hairline. Left: BMW roundel. Center: white 15px weight-500 links with dropdown carets (Models, Build Your Own, Shopping, Electric, Owners, About Us). Right: white "Choose your local BMW Center", a circular account icon, and a circular search icon (1px `#fff` border, 50% radius).

5. **Filter Chip**: Transparent fill, 1px `#8e8e8e` border, `#666` text at 14px, 3px radius. Hover: border and text to `#262626`. Selected: `#262626` fill, `#fff` text. Use for faceted filters and toggles.

## Similar Brands

- **Audi.com** — Same premium restraint: light-weight display type, one brand accent held strictly for action, and full-bleed cinematic vehicle media.
- **Porsche.com** — Cinematic dark stages, hairline headings, and product photography carrying nearly all the colour on the page.
- **Mercedes-Benz.com** — Comparable role-named token discipline (a single lead accent, comprehensive semantic set) across a large commerce interface.
- **Genesis.com** — Minimal chrome, generous margins, and reverent full-bleed vehicle photography with a quiet, precise type system.
- **Tesla.com** — Overlay-free full-bleed heroes with a single light-weight display line and one primary action colour.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors — text & surfaces */
  --heading: #262626;
  --copy-text: #262626;
  --disclaimer: #666666;
  --surface-background-primary: #ffffff;
  --surface-background-secondary: #f6f6f6;
  --border: #e6e6e6;
  --border-tag: #e6e6e6;

  /* Colors — primary action (BMW blue) */
  --cta: #1c69d4;
  --cta-text: #ffffff;
  --cta-hover: #0653b6;
  --cta-disabled: #bbd2f3;
  --cta-text-hover: #ffffff;

  /* Colors — NBA (solid dark button) */
  --nba: #262626;
  --nba-text: #ffffff;
  --nba-hover: #4d4d4d;
  --nba-disabled: #bbb;
  --nba-text-hover: #ffffff;

  /* Colors — outline button */
  --ol: #262626;
  --ol-disabled: #e6e6e6;
  --ol-text: #262626;
  --ol-text-disabled: #bbb;
  --ol-border-width: 1px;
  --ol-border-width-hover: 2px;

  /* Colors — filter tag / chip */
  --filtertag: #8e8e8e;
  --filtertag-hover: #262626;
  --filtertag-disabled: #f2f2f2;
  --filtertag-text: #666666;
  --filtertag-text-hover: #262626;
  --filtertag-selected: #262626;
  --filtertag-selected-hover: #4d4d4d;
  --filtertag-selected-disabled: #bbb;
  --filtertag-selected-text: #ffffff;

  /* Colors — select */
  --select: #bbb;
  --select-hover: #4d4d4d;
  --select-focus: #4d4d4d;
  --select-disabled: #bbb;
  --select-text: #666666;
  --select-text-hover: #262626;
  --select-text-disabled: #8e8e8e;

  /* Colors — links */
  --link: #262626;
  --link-cta: #1c69d4;
  --link-hover: #1c69d4;
  --link-active: #0653b6;
  --link-disabled: #bbb;

  /* Colors — inputs */
  --input: #ffffff;
  --input-disabled: #f2f2f2;
  --input-text-color: #262626;
  --input-text-disabled: #8e8e8e;
  --input-placeholder-color: #666666;
  --input-border-color: #8e8e8e;
  --input-border-color-hover: #4d4d4d;

  /* Colors — navigation (over media) */
  --navigation-background: #0000;
  --navigation-border: #ffffff;
  --navigation-gradient: linear-gradient(0, #0000, #0006);
  --navigation-logo: #ffffff;
  --navigation-claim: #ffffff;
  --navigation-interaction: #ffffff;
  --navigation-interaction-disabled: #666666;
  --navigation-interaction-highlight: #1c69d4;
  --navigation-interaction-highlight-text: #0653b6;

  /* Colors — semantic */
  --error: #d20000;
  --error-background: #f7e7e9;
  --warning: #ffad1f;
  --warning-background: #fbedc9;
  --success: #3db014;
  --success-background: #e8f2eb;
  --information: #1c69d4;
  --information-background: #dde8f9;
  --neutral: #666666;
  --neutral-background: #f2f2f2;
  --dialogue: #dde8f9;

  /* Colors — focus ring */
  --focus-visible-color-highlight: #1c69d4;
  --focus-visible-color-contrast: #ffffff;
  --focus-visible-color-input: #4d4d4d;
  --focus-visible-input-inside: inset 0 0 0 .125rem #1c69d4;
  --focus-visible-navigation-light: inset 0 0 0 .125rem #1c69d4;

  /* Colors — scrollbar */
  --scrollbar-background: #e6e6e6;
  --scrollbar-thumb: #4d4d4d;

  /* Typography — family */
  --font-bmw-type-next: 'bmwTypeNextWeb', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Typography — weights */
  --default-font-weight: 300;
  --input-font-weight: 400;
  --clickable-font-weight: 500;
  --link-font-weight: 500;
  --price-font-weight: 700;

  /* Typography — scale (font-size / line-height) */
  --label-1-font-size: .75rem;        --label-1-line-height: 1rem;
  --body-3-font-size: .75rem;         --body-3-line-height: 1.125rem;
  --body-2-font-size: .875rem;        --body-2-line-height: 1.375rem;
  --iconization-1-font-size: .875rem; --iconization-1-line-height: .75rem; --iconization-1-letter-spacing: .6em;
  --body-1-font-size: 1rem;           --body-1-line-height: 1.625rem;
  --subsection-2-font-size: 1.0625rem;--subsection-2-line-height: 1.625rem;
  --subsection-1-font-size: 1.1875rem;--subsection-1-line-height: 1.75rem;
  --headline-3-font-size: 1.4375rem;  --headline-3-line-height: 2rem;
  --headline-2-font-size: 1.75rem;    --headline-2-line-height: 2.5rem;
  --headline-1-font-size: 2.0625rem;  --headline-1-line-height: 2.875rem;
  --stage-zone-1-large-font-size: 2.1875rem; --stage-zone-1-large-line-height: 2.3125rem;
  --stage-zone-0-single-row-font-size: 3.5rem; --stage-zone-0-single-row-line-height: 3.625rem;
  --stage-model-1-font-size: 7.4375rem; --stage-model-1-line-height: 6.75rem;

  /* Shape */
  --radius: 3px;
  --radius-icon-button: 50%;

  /* Sizing */
  --button-small-height: 2.25rem;   /* 36px */
  --button-large-height: 3.25rem;   /* 52px */
  --size: 3rem;                     /* 48px */

  /* Spacing (base 4px) */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors — identity */
  --color-carbon: #262626;
  --color-graphite: #4d4d4d;
  --color-slate: #666666;
  --color-steel: #8e8e8e;
  --color-silver: #bbbbbb;
  --color-hairline: #e6e6e6;
  --color-mist: #f2f2f2;
  --color-cloud: #f6f6f6;
  --color-white: #ffffff;
  --color-ink: #000000;

  /* Colors — BMW blue action */
  --color-bmw-blue: #1c69d4;
  --color-bmw-blue-deep: #0653b6;
  --color-bmw-blue-disabled: #bbd2f3;
  --color-info-bg: #dde8f9;

  /* Colors — semantic */
  --color-error: #d20000;
  --color-error-bg: #f7e7e9;
  --color-warning: #ffad1f;
  --color-warning-bg: #fbedc9;
  --color-success: #3db014;
  --color-success-bg: #e8f2eb;

  /* Typography */
  --font-bmw: 'bmwTypeNextWeb', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --text-label: .75rem;
  --text-body-sm: .875rem;
  --text-body: 1rem;
  --text-subsection: 1.1875rem;
  --text-headline-3: 1.4375rem;
  --text-headline-2: 1.75rem;
  --text-headline-1: 2.0625rem;
  --text-stage: 3.5rem;
  --text-stage-model: 7.4375rem;

  --font-weight-light: 300;
  --font-weight-input: 400;
  --font-weight-clickable: 500;
  --font-weight-price: 700;

  /* Shape */
  --radius-default: 3px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
}
```