Untitled Design System

### Spacing System

• Base unit: 4px.

• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 40px · {spacing.xxl} 64px · {spacing.section} 96px.

• Section padding (vertical): {spacing.section} (96px) between major editorial bands.

• Hero photo bands: {spacing.xxl} (64px) internal vertical padding around the hero h1 + sub-headline pair.

• Card internal padding: {spacing.lg} (24px) for content and model cards; {spacing.xl} (40px) for spec-cell tables.

• Gutters: {spacing.lg} (24px) between cards in 3-up grids; {spacing.md} (16px) inside footer columns.

### Grid & Container

• Max content width: ~1440px centered on marketing pages — wider than typical SaaS to give photography breathing room.

• Editorial body: Single 12-column grid; photo bands bleed full-bleed (no max-width).

• Card grids: 3-up at desktop, 2-up at tablet, 1-up at mobile.

• Footer: 4-column link list at desktop, 2-up at tablet, 1-up at mobile.

### Whitespace Philosophy

BMW M trusts photography to do the visual work. Whitespace around photography is restrained — the cars fill the frame, and copy sits below or beside them in tightly-aligned columns. Where whitespace appears (between body sections, around CTAs), it's always uniform {spacing.section} (96px). The system never adds atmospheric backdrops, gradients, or decoration — empty space stays as empty black canvas.

### Border Radius Scale

| Token | Value | Use |

|---|---|---|

| {rounded.none} | 0px | All buttons, cards, photo containers, spec cells, inputs — the dominant radius |

| {rounded.xs} | 2px | Almost no use — reserved for legal CTAs |

| {rounded.sm} | 4px | Small toggle pills on configurator surfaces |

| {rounded.md} | 6px | Rare — small dropdown menu items |

| {rounded.full} | 9999px / 50% | Circular icon buttons, carousel arrows, chatbot launcher |

The radius hierarchy is "almost always 0, sometimes circular." This binary radius decision is a deliberate brand-language choice — sharp rectangles read as engineered precision; circles read as functional controls. Nothing in between.

### Photography Geometry

Hero photography fills full-width with no rounding. Photo cards inside grids retain {rounded.none} corners, edge-to-edge images. Carbon-wheel detail shots and motorsport-pit photos use 16:9 or 21:9 cinema-aspect ratios. Driver portraits in racing-team grids use 4:5 portrait crops, also with sharp corners.

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

1. Focus on ONE component at a time. Reference its YAML key ({component.hero-photo-band}, {component.spec-cell}).

2. New components default to {rounded.none} (0px). Only use {rounded.full} if it's a circular icon button.

3. Variants (-active, -disabled) live as separate entries in components:.

4. Use {token.refs} everywhere — never inline hex.

5. Never document hover states. Default and Active/Pressed only.

6. Display headlines stay UPPERCASE 700; body stays sentence-case 300. Never blur the contrast.

7. The M tricolor is brand-identity-only — never extend it to system tokens for "primary action."

8. When in doubt about emphasis: bigger photography before bigger type.

• The dembrandt frequency analyzer captured the white text (count 955) as the highest-frequency token. The black canvas was inferred from screenshot — dembrandt's body-background sampling didn't surface it as a top palette entry, but the page is unambiguously black-on-white-text.

• The exact M tricolor stops are documented from public BMW brand guidelines; the screenshots show the stripe as a small element but pixel-sampling at this resolution doesn't reliably distinguish #0066b1 from #1c69d4. Treat the documented stops as canonical based on BMW Design Works' published brand spec.

• BMW Type Next Latin weight axis values beyond Light (300) and regular (700) are not documented — only the static weights observed in screenshots.

• Animation and transition timings (photo carousel transitions, hover-reveal effects, configurator interactions) are not in scope.

• Form validation states beyond {component.text-input} defaults are not extracted — error / success input variants would need a configurator or order flow to confirm.

• The configurator surface (vehicle build pages with color / wheel / interior pickers) was not in the analyzed URL set; its swatch grid, comparison panels, and price-summary card are not documented here.

• The cookie consent overlay obscured part of the homepage hero in the captured screenshot; secondary hero treatments (different car models cycling through the hero band) may carry variations not captured.