---
version: alpha
name: bmw.com
description: "Light product system built on #ffffff with #1c69d4 as the primary CTA accent. Type anchored in bmwTypeNextWeb at 35px / weight 300. Extracted automatically from https://bmw.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  bmw.com is built on a pure-white canvas (rgb(255,255,255)).
  The system uses rgb(28, 105, 212) as the high-saturation accent for primary actions.
  Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside bmwTypeNextWeb as the primary typeface.
  A layered elevation system (5 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 58 keyframe animations plus transition-driven interactions.

colors:
  background: "#ffffff"
  surface-1: "rgba(221, 232, 249, 0.5)"
  surface-2: "#f2f2f2"
  ink: "#262626"
  primary: "#1c69d4"
  on-primary: "#ffffff"
  primary-hover: "#009640"
  semantic-error: "#d20000"
  semantic-success: "#3db014"
  semantic-warning: "#ffad1f"

typography:
  display-xl:
    fontFamily: "bmwTypeNextWeb, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 43px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: 0
  display-md:
    fontFamily: "bmwTypeNextWeb, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 23px
    fontWeight: 300
    lineHeight: 1.57
    letterSpacing: 0
  body:
    fontFamily: "bmwTypeNextWeb, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 15px
    fontWeight: 300
    lineHeight: 1.6
    letterSpacing: 0
  button:
    fontFamily: "bmwTypeNextWeb, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 20px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 0

rounded:
  none: 0px
  xs: 3px
  sm: 8px
  md: 14px
  lg: 20px
  xl: 32px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 6px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 40px
  xxl: 104px

components:
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 12px
  button-ghost-2:
    backgroundColor: "transparent"
    textColor: "#000000"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 16px
  button-light--invert:
    backgroundColor: "{colors.on-primary}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"

extracted_at: "2026-06-11T04:59:50.718Z"
completeness: 65
scoreVersion: "v2"

---

# Design System — bmw.com
> Extracted automatically by Prism from https://bmw.com
> Date: 2026-06-11
> Viewport: Desktop 1440x900 + Mobile 390x844
> Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted).


## 0. Design DNA

**Density**: sparse  |  **Motion**: expressive  |  **Weight**: medium  |  **Aesthetic**: product-neutral

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#ffffff` |
| Type posture | sans-led (bmwTypeNextWeb) | "BMW Occasions Certifiées." |
| Color assertion | dual-accent | #1c69d4 |
| Whitespace | sparse | section rhythm 96px |
| Interaction | expressive | 58 keyframes, 11 transitions |
| Radius language | 3px-rounded | from token scale |

**Prism fingerprint**: `neutral-canvas · sans-display · dual-accent · 3px-rounded · expressive-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(255,255,255)` is the page background. Every component composits against this.
> - **Accent**: `rgb(28, 105, 212)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 15px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 96px between major bands. Card padding: 24px.
> - **Default radius**: 8px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

bmw.com uses a pure-white canvas (`#ffffff`), letting typography, color and imagery carry the visual weight. 

Typography is anchored in **bmwTypeNextWeb**. Headlines run at a remarkably light weight (300) — restraint over assertion, creating an editorial calm that invites reading rather than demanding it. 

Body text reads in Near-Black (`#262626`) — softened from pure black, a small but deliberate detail that lowers reading friction. **Link Cta** (`#1c69d4`) is the single high-saturation color in the system — it earns its presence only on interactive elements, making CTAs and links the unmistakable focal points against the otherwise neutral palette. Elevation is built from multi-layer shadow stacks (5 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. 
Motion design uses smooth easing curves for polished state transitions. 

**Key Characteristics:**
- Background: Pure White (`#ffffff`)
- Primary typeface: bmwTypeNextWeb
- Primary text: Near-Black (`#262626`)
- Accent: Link Cta (`#1c69d4`)
- Display: 43px weight 300
- Shadow system: 5 distinct elevation levels
- Custom fonts loaded: bmwTypeNextWeb

## 2. Color Palette & Roles

### Background & Surface
- **Pure White** (`#ffffff`): Page background (primary)
- **Surface Background Primary** (`#f6f6f6`): Surface / elevated background (CSS var)
- **Translucent Light Gray (50%)** (`rgba(221, 232, 249, 0.5)`): Surface / elevated background
- **Off-White** (`#f2f2f2`): Surface / elevated background
- **Whitesmoke** (`#e6e6e6`): Surface / elevated background

### Text & Content
- **Near-Black** (`#262626`): Primary body text
- **Pure Black** (`#000000`): Secondary text
- **#0000ee** (`#0000ee`): Secondary text

### Accent & Interactive
- **Link Cta** (`#1c69d4`): Interactive / accent
- **#009640** (`#009640`): Interactive / accent
- **#4eae32** (`#4eae32`): Interactive / accent
- **#c7d301** (`#c7d301`): Interactive / accent
- **Gold** (`#ffed00`): Interactive / accent
- **Amber** (`#fbb900`): Interactive / accent
- **Bright Orange** (`#ec6607`): Interactive / accent

### Full Extracted Palette
**18 colors rendered on the page** + **10** more declared in design tokens (CSS custom properties — not necessarily painted). (15 categorized above + 13 additional below.)
Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.

- `#e30613` — Red
- `#efefef` — Off-White
- `#666666` — Slate Grey
- `#8e8e8e` — Grey *(token)*
- `#3db014` — Success *(token)*
- `#e8f2eb` — Whitesmoke *(token)*
- `#d20000` — Error *(token)*
- `#ffad1f` — Warning *(token)*
- `#fbedc9` — Vibrant Yellow *(token)*
- `#4d4d4d` — Charcoal *(token)*
- `#0653b6` — Link Active *(token)*
- `#bbd2f3` — Light Blue *(token)*
- `#f7e7e9` — Light Gray *(token)*

### Gradients & Decorative Fills

- `linear-gradient(0,#0000,#0006)` — (--navigation-gradient)

### CSS Custom Properties (Design Tokens)

**Font Size Token**
- `--headline-2-font-size`: `2.1875rem`
- `--body-3-font-size`: `.75rem`
- `--label-1-font-size`: `.75rem`
- `--stage-price-tag-price-font-size`: `2.6875rem`

**Font Weight Token**
- `--default-font-weight`: `300`
- `--input-font-weight`: `400`
- `--price-font-weight`: `700`
- `--link-font-weight`: `500`

**Spacing Token**
- `--iconization-1-letter-spacing`: `.6em`
- `--grid-addtional-spacing`: `4rem`

**Other tokens**
- `--input-text-hover`: `#262626`
- `--ol-light-text-disabled`: `#8e8e8e`
- `--input-placeholder-color`: `#666`
- `--ol-text-disabled`: `#bbb`
- `--compare-dropdown-label-color`: `#666`
- `--cta-text-hover`: `#fff`
- `--cta-text`: `#fff`
- `--swiper-theme-color`: `$gs0`

## 3. Typography Rules

### Font Families
- **Primary**: `bmwTypeNextWeb`
- **Secondary**: `bmw_next_icons`

### Custom Fonts Loaded
- **bmwTypeNextWeb** weight 300 (normal)
- **bmwTypeNextWeb** weight 400 (normal)
- **bmwTypeNextWeb** weight 500 (normal)
- **bmwTypeNextWeb** weight 700 (normal)
- **bmw_next_icons** weight 300 (normal)
- **bmw_next_icons** weight 400 (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | bmwTypeNextWeb | 43px | 300 | 1.4 | normal | Main headline (h1) |
| Sub-heading | bmwTypeNextWeb | 23px | 300 | 1.57 | normal | Third-level heading (h3) |
| Button Large | bmwTypeNextWeb | 20px | 300 | 1.5 | normal | Button label (20px) |
| Body | bmwTypeNextWeb | 15px | 300 | 1.6 | normal | Standard reading text |
| Button | bmwTypeNextWeb | 15px | 500 | 1.15 | normal | Button label (15px) |
| Button Small | bmwTypeNextWeb | 12px | 500 | 1.33 | normal | Button label (12px) |

### Font Weight Scale

CSS custom properties define 5 explicit weight steps:
- `--default-font-weight`: `300` — Light
- `--input-font-weight`: `400` — Regular
- `--link-font-weight`: `500` — Medium
- `--clickable-font-weight`: `500` — Medium
- `--price-font-weight`: `700` — Bold

### Full Font Size Scale

Sizes detected in the design (descending): `48px`, `43px`, `35px`, `28px`, `24px`, `23px`, `20px`, `18px`, `17.25px`, `16px`, `15px`, `14px`, `12px`, `9px`

> 9 size(s) detected outside the sampled hierarchy (48px, 35px, 28px, 24px, 18px, 17.25px, 16px, 14px, 9px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

### OpenType & Variable Font Features

The typography uses these OpenType features intentionally — this is a sophisticated type system, not a default fallback:

- **ligatures** — common letter pairs replaced with refined glyphs (fi, fl, etc.)

**Clone instruction:** Enable these in your CSS:
```css
body {
  font-feature-settings: "liga";
}
```

## 4. Component Stylings

### Buttons

**Ghost**
- Background: `transparent`
- Text: `#ffffff` `{colors.on-primary}`
- Padding: 0px 12px
- Radius: 0px
- Font: 15px weight 500
- Use: Subtle action, toolbar, nav button

**Ghost**
- Background: `transparent`
- Text: `#000000`
- Padding: 16px
- Radius: 0px
- Font: 12px weight 500
- Use: Subtle action, toolbar, nav button

**Light / Invert**
- Background: `#ffffff` `{colors.on-primary}`
- Text: `#262626` `{colors.ink}`
- Padding: 0px
- Radius: 50%
- Shadow: `rgba(0, 0, 0, 0.16) 0px 6px 20px 0px, rgba(0, 0, 0, 0.24) 0px 0px 1px 0px`
- Font: 15px weight 500
- Use: Bright CTA on dark sections

**Subtle**
- Background: `rgba(221, 232, 249, 0.5)` `{colors.surface-1}`
- Text: `#262626` `{colors.ink}`
- Padding: 12px 20px
- Radius: 3px
- Font: 15px weight 500
- Use: Quiet action against page bg

**Light / Invert**
- Background: `#ffffff` `{colors.on-primary}`
- Text: `#262626` `{colors.ink}`
- Padding: 12px 20px
- Radius: 3px
- Font: 15px weight 300
- Use: Bright CTA on dark sections

**Primary Brand**
- Background: `#1c69d4` `{colors.primary}`
- Text: `#ffffff` `{colors.on-primary}`
- Padding: 4px
- Radius: 3px
- Font: 15px weight 500
- Use: Primary CTA / brand action


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative

- **FooterLink**:
  - **hover:** text #262626 → #1c69d4, border changes

*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*

```yaml
component-behaviors:
  button:
    default:
      bg: "rgb(239, 239, 239)"
      fg: "rgb(0, 0, 0)"
      border: "2px outset rgb(0, 0, 0)"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 238)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 238)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(38, 38, 38)"
    hover:
      bg: "transparent"
      fg: "rgb(28, 105, 212)"
```

**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.


## 4c. Component Vocabulary (Closed System)

*This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.*

### Buttons
- **4 shape(s)** in this system: `Ghost`, `Light / Invert`, `Subtle`, `Primary Brand`
- **DO NOT introduce new buttons variants** without justification

## 5. Layout Principles

### Layout Type
**top-nav + content**

### Grid
Single column, centered content

### Max Width
calc(100vw - 0px - 6rem*2)

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 6px |
| sm | 8px |
| md | 12px |
| base | 16px |
| lg | 24px |
| xl | 40px |
| 2xl | 96px |
| 3xl | 104px |

### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 3px | Tiny corners (badges, micro elements) |
| Sm | 8px | Buttons, inputs, small elements |
| Md | 14px | Cards, containers |
| Lg | 20px | Large rounded elements, pill segments |
| Xl | 32px | Category strips, featured containers |
| Full | 9999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `0px` |
| Page Body | `0px` |
| Navigation | `0px` |

**Shape Personality**: Sharp & Angular — No rounding. Precise, editorial, enterprise feel.

**Full Radius Spectrum**: 0px, 3px, 8px, 10px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `104px` | Top/bottom of full-bleed hero sections |
| **section** | `40px` | Between major bands (color change, content shift) |
| **subsection** | `24px` | Within a section, between content groups |
| **card** | `12px` | Card padding, list-item spacing |
| **compact** | `8px` | Form fields, tight clusters, badge padding |
| **micro** | `6px` | Icon-text gap, tag inner padding |

**Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.).

## 5c. Widget & Structure Library

Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values).

**4/8 structural patterns detected.**

### Hero Pattern

- **Composition:** centered — Centered composition — heading + subheading + CTAs stacked vertically, content centered horizontally. Common for SaaS marketing pages.
- **Viewport coverage:** full-viewport hero (≥70% screen height)
- **Heading:** "Bienvenue sur le site officiel BMW France - Le plaisir de conduire." — 43px left-aligned
- **Subheading:** "Jusqu’au 31 Mai 2026, profitez d’un crédit à un taux exceptionnel de 2,90%, sur une sélection de BMW d'occasion.3"
- **Media:** present, positioned top
- **CTAs:** 8 (primary: "Découvrez-la")
- **Clone instruction:** Reproduce the **centered** layout. Use the heading font-size token at the documented size. Place media top of text.

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** logo-left-links-left — Logo and links both on the left (CTAs typically right)
- **Height:** 84px
- **Logo:** ✓ present
- **Nav links:** 2 primary items
- **CTAs in nav:** 0 (no buttons — links only)
- **Clone instruction:** Build a static logo left links left navigation. Link-only — no button styling needed.

### Card Grid Pattern

- **Card count:** 3 cards detected
- **Columns (desktop):** 3-up grid
- **Card dimensions:** 424×836px (aspect 0.51:1)
- **Gap:** 0px between cards
- **Content:** ✗ no image
- **Clone instruction:** Build a 3-column grid (desktop) with cards at ~0.51:1 aspect ratio. Text/icon-only cards (no photography).

### Footer Pattern

- **Columns:** 6
- **Links:** 68 total
- **Height:** 1399px
- **Includes:** ✗ no newsletter | ✓ social icons |  ✓ copyright
- **Clone instruction:** Build a 6-column footer with ~11 links per column, social media links, and a copyright line.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgba(0, 0, 0, 0.16) 0px 5px 40px 0px` | Cards, elevated surfaces |
| Layered (Level 2) | <br>`rgba(0, 0, 0, 0.16) 0px 6px 20px 0px`,<br>`rgba(0, 0, 0, 0.24) 0px 0px 1px 0px` | Cards, elevated surfaces |
| Layered (Level 3) | <br>`rgba(0, 0, 0, 0.5) 0px -1px 8px 0px` | Cards, elevated surfaces |
| Inset (Level 4) | <br>`rgb(242, 242, 242) 0px 0px 0px 1px inset` | Buttons, pressed-state elements |

**Shadow Philosophy**: Multi-layered shadow system creating natural, atmospheric depth. Each shadow level combines multiple layers for realistic elevation.

## 7. Motion & Interaction

### Dominant Easing Curves

| Curve | Semantic Name |
|-------|---------------|
| `ease` | CSS ease — Default |
| `ease-in-out` | Ease In-Out — Symmetric |
| `ease-in` | Ease In — Accelerating |

### Duration Scale

| Value | Tier | Typical Use |
|-------|------|-------------|
| `50ms` | Instant | State toggles, instant feedback |
| `150ms` | Fast | Hover states, micro-interactions |
| `200ms` | Normal | Panel open/close, navigation |
| `250ms` | Normal | Panel open/close, navigation |
| `500ms` | Slow | Hero animations, page transitions |

### Copy-Paste Transition Snippets

**Background**
```css
transition: background 0.05s ease-in-out;
```

**Transform**
```css
transition: transform 0.25s ease-in-out;
```

**All Props**
```css
transition: left 0.15s cubic-bezier(0, 0.5, 0.5, 1);
```

**Transform**
```css
transition: transform 0.25s cubic-bezier(0.5, 0, 0.5, 1) 0.5s, opacity 0.15s cubic-bezier(0.5, 0, 1, 0.5);
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `fade-in` | Color Pulse | background-color | Element entrance |
| `spin` | Rotate / Spin | transform | Loading indicator |
| `grow` | Custom | height, width | UI transition |
| `cmp-search__loading-indicator-spin` | Rotate / Spin | transform | Loading indicator |
| `grow-up` | Scale | transform | UI transition |
| `label-fade-in` | Fade | opacity | Element entrance |
| `label-arrows-left-fade-out` | Fade + Move | opacity, transform | Element exit |
| `label-arrows-right-fade-out` | Fade + Move | opacity, transform | Element exit |
| `pulse-single` | Fade + Move | opacity, transform | Attention / status |
| `pulse-double` | Fade + Move | opacity, transform | Attention / status |
| `grow-icon` | Custom | height, width | UI transition |
| `fade-icon` | Fade | opacity | UI transition |
| `spin-icon` | Rotate / Spin | transform | Loading indicator |
| `effect-grow` | Fade + Move | opacity, transform | UI transition |
| `effect-shrink` | Fade + Move | opacity, transform | UI transition |
| `effect-enter` | Fade + Move | opacity, transform | Element entrance |
| `effect-exit` | Fade + Move | opacity, transform | Element exit |
| `fade-in-out` | Fade | opacity, translate | Element entrance |
| `scroll` | Slide | transform | UI transition |
| `popover-backdrop-fade-in` | Fade | opacity | Element entrance |

> *38 additional animations omitted (repetitive variants). See raw keyframes in `raw-css.json`.*

### Motion Fingerprint

- **Speed Character**: Balanced Pacing (median duration: `200ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 58 unique animations (58 total including variants)

> This design moves with balanced pacing timing using custom cubic-bezier curves, creating a UI that feels natural and fluid.

## 8. Do's and Don'ts

### Do
- Use Near-Black (`#262626`) for text — not pure black, it's warmer and more readable
- Use bmwTypeNextWeb as the primary typeface — it defines the brand personality
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use Link Cta (`#1c69d4`) as the primary accent — it's the brand's signature interactive color
- Use small 3px radius for buttons — this design system uses subtle rounding, not pill shapes
- Maintain nav height at 84px — consistent vertical space for the navigation bar
- Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar
- Include exactly 8 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
- Use a 3-column grid on desktop — density matters for this content type
- Build a content-dense footer (6 columns, ~68 links) — this site treats the footer as a sitemap, not an afterthought

### Don't
- Don't use pure black (`#000000`) for text — the near-black adds warmth
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't invent new shadow values — use only the extracted shadow levels
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't over-round buttons with pill or large radius — the system uses restrained, sharp-ish corners
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
- Don't make the nav sticky — this design lets it scroll away to maximize content focus
- Don't put a CTA button in the nav — this design uses links only at the top


## 7b. Enforceable Brand Rules

*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*

```yaml
rules:
  - id: brand-canvas-001
    type: do
    rule: "Always use the page background `rgb(255,255,255)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(255,255,255)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(28, 105, 212)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(28, 105, 212)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 480px | Single column, compact spacing |
| Mobile Large | 550px | Expanded mobile layout |
| Mobile Large | 599px | Expanded mobile layout |
| Mobile Large | 767px | Expanded mobile layout |
| Tablet | 1023px | Multi-column grids begin |
| Desktop | 1279px | Full feature layout |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `43px` | `33px` |
| heading | line-height | `60px` | `46px` |
| body | font-size | `15px` | `14px` |
| body | line-height | `24px` | `22px` |
| nav | padding | `0px 96px` | `0px 24px` |
| nav | height | `84px` | `68px` |
| button | font-size | `15px` | `14px` |
| sidebar | width | `314px` | `300px` |

### Collapsing Strategy
- Headlines: 43px → 33px on mobile
- Navigation: horizontal links → hamburger menu on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 1px 6px padding
- Navigation: adequate spacing between items
- Interactive elements: minimum 44px touch target recommended

### Collapsing Narrative

How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):

- **Hero CTAs:** 8 on desktop → 4 on mobile (secondary CTAs dropped on small screens).
- **Navigation collapses to hamburger** — 2 links visible on desktop, 0 on mobile (the rest hide behind a menu toggle).
- **Card grid: 3-up → 1-up** — cards stack as viewport narrows, becoming a vertical list on mobile.
- **Footer columns collapse:** 6 columns (desktop) → 4 columns (mobile).


## 7c. Visual Effects & Dynamic Behavior

*The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.*

- **Clip-path shapes** — 1 non-rectangular cut(s).
- **Scroll-driven reveals** — content animates in on scroll (CSS scroll-timeline). Build fade/translate reveal-on-scroll for below-fold bands.
- **CSS-variable animations** (5) — animated custom properties.

> **Motion fingerprint**: non-rectangular shapes (1), CSS scroll-driven animations

## 9b. Visual Tone & Photography

**Tone:** Mixed photography + illustration

A balanced mix of photographic content and vector graphics. Photos likely carry product/lifestyle context while SVG handles icons, logos, and decorative accents.

**Canonical Brand Image (OG):**
- https://www.bmw.fr
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Hero Image (above-fold dominant visual):**
- Aspect: 2.29:1 (landscape (16:9-ish))
- Rendered size: 1440×630px
- Alt text: "BMW X1 M Sport"
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 2 (33%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 1 (17%)
- Ultra-wide (>2.3): 3 (50%)

**Media Format Mix:**
- SVG: 1 (icons, illustrations, decorative geometry)

**Average rendered image size:** 1088×434px
**Above-fold image count:** 2 / 6

**Decorative Patterns Detected:**
- 5 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth

**Clone instruction for decorative work:** This is a gradient-rich design — invest in multi-stop CSS gradients (3+ color stops), not solid backgrounds.

**Imagery Guidance for clones:**
- Mix photography and illustration intentionally: photos for product/context, vectors for icons + decorative accents.
- Respect the format split — replacing JPGs with illustrations (or vice versa) will shift the brand tone.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Pure White (`#ffffff`)
- Primary text: Near-Black (`#262626`)
- Accent: Link Cta (`#1c69d4`)
- Border: Translucent Pure Black (40%) (`rgba(0, 0, 0, 0.4)`)
- Font: bmwTypeNextWeb
- Body: 15px weight 300

### Example Component Prompts
- "Create a hero section on Pure White background (#ffffff). Headline at 43px bmwTypeNextWeb weight 300, line-height 1.4, color #262626."
- "Create the primary CTA button: `#1c69d4` background, `#ffffff` text, 3px border-radius, 4px padding, 500 weight, bmwTypeNextWeb font."
- "Build navigation: relative on `#ffffff`. bmwTypeNextWeb 15px weight 300 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to Pure White (`#ffffff`) — every component is composited against this exact base.
2. **Typography**: All type in bmwTypeNextWeb, weight range 300–700. Never exceed 700 — heavier weights break the brand's tonal restraint.
3. **Accent**: Link Cta (`#1c69d4`) — one accent, applied consistently to CTAs, active states, and links. Never introduce a second saturated color.
4. **Motion**: All transitions use `cubic-bezier(0,0.5,0.5,1)`. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `0px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (6px–40px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
7. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*

```css
/* Colors */
:root {
  --ca-on-primary: #ffffff;
  --ca-surface-1: #dde8f9;
  --ca-surface-2: #f2f2f2;
  --ca-ink: #262626;
  --ca-primary: #1c69d4;
  --ca-primary-hover: #009640;
  --ca-semantic-error: #d20000;
  --ca-semantic-success: #3db014;
  --ca-semantic-warning: #ffad1f;
}

/* Typography */
:root {
  --ca-font-primary: "bmwTypeNextWeb", system-ui, sans-serif;
  --ca-text-display: 43px;
  --ca-text-body: 15px;
  --ca-text-button: 20px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 6px;
  --ca-space-sm: 8px;
  --ca-space-md: 12px;
  --ca-space-base: 16px;
  --ca-space-lg: 24px;
  --ca-space-xl: 40px;
  --ca-space-2xl: 96px;
  --ca-space-3xl: 104px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 3px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 14px;
  --ca-radius-lg: 20px;
  --ca-radius-xl: 32px;
  --ca-radius-full: 9999px;
}
```


## 13. Page Structure Skeleton

*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*

```yaml
page-skeleton:
  - section: hero
    tag: div
    classes: ["root", "container", "responsivegrid", "style-container--disable-hscroll"]
    height: 3477px
    width: full-bleed
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["container", "responsivegrid", "aem-GridColumn--default--12"]
    height: 630px
    width: 1272px
    layout: block
    children: 1
  - section: navigation
    tag: nav
    height: 84px
    width: full-bleed
    layout: flex-row justify=normal
    children: 3
    padding: "0px 96px"
  - section: feature-section
    tag: main
    height: 3477px
    width: 1272px
    layout: block
    children: 1
  - section: feature-section
    tag: div
    height: 3477px
    width: full-bleed
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["container", "responsivegrid", "style-container--fixed"]
    height: 3477px
    width: 1272px
    layout: block
    children: 1
  - section: feature-section
    tag: div
    height: 630px
    width: 1272px
    layout: block
    children: 1
  - section: feature-section
    tag: div
    height: 630px
    width: 1248px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 630px
    width: full-bleed
    layout: block
    children: 3
  - section: feature-section
    tag: div
    classes: ["container", "responsivegrid", "style-container--start", "aem-GridColumn--small--none"]
    height: 220px
    width: 624px
    layout: block
    children: 1
  - section: feature-section
    tag: div
    height: 220px
    width: 624px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["container", "responsivegrid", "aem-GridColumn--xlarge--7", "aem-GridColumn--medium--none"]
    height: 136px
    width: 624px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 136px
    width: 624px
    layout: block
    children: 1
  - section: sidebar
    tag: div
    height: 260px
    width: 314px
    layout: flex-column-reverse justify=normal
    children: 2
  - section: feature-section
    tag: div
    classes: ["container", "responsivegrid", "style-common--cmp-spacing-top-12", "aem-GridColumn--default--12"]
    height: 340px
    width: 1272px
    layout: block
    children: 1
  - section: feature-section
    tag: div
    height: 340px
    width: 1272px
    layout: block
    children: 1
  - section: feature-section
    tag: div
    height: 340px
    width: 1272px
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["container", "responsivegrid", "style-common--cmp-spacing-top-12", "aem-GridColumn--default--12"]
    height: 300px
    width: 1272px
    layout: block
    children: 1
  - section: feature-section
    tag: div
    height: 300px
    width: 1272px
    layout: block
    children: 1
  - section: content-section
    tag: div
    classes: ["container", "responsivegrid", "aem-GridColumn--default--12"]
    height: 210px
    width: 1272px
    layout: block
    children: 1
  - section: content-section
    tag: div
    height: 210px
    width: 1272px
    layout: block
    children: 1
  - section: content-section
    tag: div
    classes: ["container", "responsivegrid", "aem-GridColumn--small--none", "aem-GridColumn--medium--none"]
    height: 206px
    width: 636px
    layout: block
    children: 1
  - section: content-section
    tag: div
    height: 206px
    width: 636px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["container", "responsivegrid", "aem-GridColumn--small--none", "aem-GridColumn--medium--none"]
    height: 206px
    width: 318px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 206px
    width: 318px
    layout: block
    children: 1
```

**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).


## 14. Copy Library (Real Content from Source)

*Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.*

```yaml
copy:
  section-headings:
    - "BMW X1 M Sport."
    - "Trouvez votre BMW."
    - "Nouvelle BMW M2 M xDrive"
    - "Jusqu’au 31 Mai 2026, profitez d’un crédit à un taux exceptionnel de 2,90%, sur une sélection de BMW"
    - "Offre Avantage 6+"
  sub-headings:
    - "440 €/mois sans apport.1 Entretien inclus."
    - "BMW Neuves."
    - "Contact et informations"
  ctas:
    - "Gamme électrique"
    - "BMW AI Assistant."
    - "Découvrez-la"
    - "Demandez une offre"
    - "Trouvez votre BMW"
  navigation:
    - "Skip to main content"
    - "Modèles & Configurateur"
    - "Offres exclusives"
  footer-links:
    - "Inscrivez-vous"
    - "Service à la clientèle"
```

**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.


## 15. Asset Inventory (Image Roles & Ratios)

*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*

```yaml
assets:
  logo:
    count: 1
    avg-ratio: 1.60
    common-aspect: "~16:9 landscape"
  hero:
    count: 4
    avg-ratio: 2.81
    common-aspect: "~16:6 banner"
    sample-alts:
      - "BMW X1 M Sport"
      - "Une vidéo dynamique montre le véhicule sous tous les angles "
      - "Vidéo de conduite dynamique présentant le véhicule sous tous"
  thumbnail:
    count: 5
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "Facebook"
      - "Instagram"
```

**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.


## 16. Component HTML Templates

*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*

### Button (primary action)
```html
<button class="btn btn-primary">
  Gamme électrique
</button>
```
_Source pattern detected: padding `0px 12px` · radius `0px` · weight `500`_

**Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling.


## 17. Content Architecture & Resources (Links by Purpose)

*The page's links classified by purpose — the information architecture to reproduce. Categories, featured images, devices and projects are extracted from the rendered DOM, not guessed.*

**By purpose:** **nav** 7 · **social** 4 · **footer** 16 · **other** 33

**Signals:** 5/60 links carry a featured image · dominant link roles: inline-link (33), footer-link (20), navigation (7).


---
## Extraction Completeness: 65/100 (C)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 21 | 25 | 15 named colors |
| Typography | 15 | 20 | 6 roles defined |
| Components | 4 | 20 | 1 specs extracted |
| Motion & Interaction | 12 | 15 | Keyframes |
| CSS Custom Properties | 8 | 10 | 167 vars |
| Responsive Breakpoints | 5 | 5 | 6 breakpoints |
| Variable Fonts | 0 | 5 | None detected |

## 12. Known Gaps & Confidence

Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback.

*Auto-detected extraction limitations — understand before building:*

- **Licensed web fonts (bmwTypeNextWeb, bmw_next_icons)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics).
- **Sparse component extraction** — fewer than 5 component types detected. Highly dynamic sections (modals, datepickers, carousels) require interaction to render and are not captured in a static pass.

| Category | What's missing | Fallback strategy |
|----------|----------------|-------------------|
| **Form inputs** | No text input fields detected on this page | Use the documented border-radius + accent border on focus; 12-16px padding inside |

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 167 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 6 typography roles inferred |
| §4 Components | Low | 1 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 18 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 6 breakpoints detected |
| §9b Photography | High | 6 images, hero present |

## 11.1 CSS Implementation Guide (CSS Interception Engine v2.15+)

*Ready-to-use CSS from Prism's CSS Interception Engine — intercepted directly from the site's CSS files (bypasses CORS). Copy-paste into your `<style>` block.*

### Font Loading

10 font file(s) captured (809KB total). When running `prism add`, fonts are saved to `extractions/bmw.com/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'bmwTypeNextWeb';
  /* src: url('/fonts/bmwTypeNextWeb.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'bmwTypeNextWeb';
  /* src: url('/fonts/bmwTypeNextWeb.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'bmwTypeNextWeb';
  /* src: url('/fonts/bmwTypeNextWeb.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'bmwTypeNextWeb';
  /* src: url('/fonts/bmwTypeNextWeb.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'bmw_next_icons';
  /* src: url('/fonts/bmw_next_icons.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'bmw_next_icons';
  /* src: url('/fonts/bmw_next_icons.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

**63 @keyframes found** — these are the real animation definitions:

```
@keyframes cmp-search__loading-indicator-spin { ... }
@keyframes fade-in { ... }
@keyframes spin { ... }
@keyframes grow { ... }
@keyframes grow-up { ... }
@keyframes label-fade-in { ... }
@keyframes label-arrows-left-fade-out { ... }
@keyframes label-arrows-right-fade-out { ... }
@keyframes pulse-single { ... }
@keyframes pulse-double { ... }
@keyframes grow-icon { ... }
@keyframes fade-icon { ... }
@keyframes spin-icon { ... }
@keyframes effect-grow { ... }
@keyframes effect-shrink { ... }
@keyframes effect-enter { ... }
@keyframes effect-exit { ... }
@keyframes expand-width { ... }
@keyframes expand-height { ... }
@keyframes collapse-height { ... }
@keyframes collapse-width { ... }
@keyframes nudge-shadow-drop { ... }
@keyframes fade-in-out { ... }
@keyframes scroll { ... }
@keyframes popover-backdrop-fade-in { ... }
@keyframes popover-backdrop-fade-out { ... }
@keyframes popover-scale-up { ... }
@keyframes popover-scale-down { ... }
@keyframes popover-slide-in-bottom { ... }
@keyframes popover-slide-out-bottom { ... }
@keyframes popover-fade-in { ... }
@keyframes popover-fade-out { ... }
@keyframes notification-toast { ... }
@keyframes appearance { ... }
@keyframes grow-and-fade-mobile { ... }
@keyframes grow-and-fade-desktop { ... }
@keyframes disappearance { ... }
@keyframes globalnavigation-tout-fade-in { ... }
@keyframes roll-text { ... }
@keyframes dlo-background-fade-in { ... }
@keyframes dlo-background-fade-out { ... }
@keyframes dlo-content-slide-in { ... }
@keyframes dlo-content-slide-out { ... }
@keyframes shimmer { ... }
@keyframes compare-slide-in-down { ... }
@keyframes compare-slide-out-up { ... }
@keyframes color-switch-hotspot-pulse { ... }
@keyframes color-switch-hotspot-fade-in { ... }
@keyframes color-switch-gesture-hint-fade-in { ... }
@keyframes move-right-5px { ... }
@keyframes rotate-right-45deg { ... }
@keyframes color-switch-reduced-animation { ... }
@keyframes slide-out-left { ... }
@keyframes slide-out-right { ... }
@keyframes slide-in-left { ... }
@keyframes slide-in-right { ... }
@keyframes fade-out { ... }
@keyframes hide { ... }
@keyframes cycle-suggestions { ... }
@keyframes dissolve { ... }
@keyframes overflow-transition { ... }
@keyframes fade-shadow-before { ... }
@keyframes fade-shadow-after { ... }
```

<details><summary>Full keyframes CSS (63 animations)</summary>

```css
@keyframes cmp-search__loading-indicator-spin{0{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
@keyframes fade-in{0{background-color:#0000}
@keyframes spin{0{transform:rotate(45deg)}
@keyframes grow{0{height:calc(var(--size)*var(--factor)*.5);width:calc(var(--size)*var(--factor)*.5)}
@keyframes grow-up{0%{transform:scaleY(0)}
@keyframes label-fade-in{0%{opacity:1}14.23%{opacity:1}28.56%{opacity:0}42.84%{opacity:0}57.06%{opacity:1}
@keyframes label-arrows-left-fade-out{0%{opacity:1;transform:translate3d(0,-50%,-1px)}50%{opacity:1;transform:translate3d(0,-50%,-1px)}
@keyframes label-arrows-right-fade-out{0%{opacity:1;transform:translate3d(0,-50%,-1px)}50%{opacity:1;transform:translate3d(0,-50%,-1px)}
@keyframes pulse-single{0%{opacity:0;transform:translate(-50%,-50%) scale(1)}16.7%{opacity:1;transform:translate(-50%,-50%) scale(1)}
@keyframes pulse-double{0%{opacity:0;transform:translate(-50%,-50%) scale(1)}7%{opacity:1;transform:translate(-50%,-50%) scale(1)}42.1%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}57.9%{opacity:0;transform:translate(-50%,-50%) scale(1)}64.9%{opacity:1;transform:translate(-50%,-50%) scale(1)}
@keyframes grow-icon{0%{height:1rem;width:1rem}
@keyframes fade-icon{0%{opacity:0}
@keyframes spin-icon{0%{transform:rotate(45deg)}
@keyframes effect-grow{0%{opacity:0;transform:scale(.2)}
@keyframes effect-shrink{0%{opacity:1;transform:scale(1)}
@keyframes effect-enter{0%{opacity:0;transform:translateY(20px)}
@keyframes effect-exit{0%{opacity:1;transform:translateY(0)}
@keyframes expand-width{0%{border-radius:1.625rem;width:3.25rem}
@keyframes expand-height{0%{height:3.25rem}
@keyframes collapse-height{0%{height:calc(3.25rem + var(--stickysidebar-mobile-nudge-height-grow))}
@keyframes collapse-width{0%{border-radius:.5rem;width:calc(3.25rem + var(--stickysidebar-mobile-nudge-width-grow))}
@keyframes nudge-shadow-drop{0%{box-shadow:0 .375rem 1.25rem 0 #00000029,0 0 .0625rem 0 #0000003d}
@keyframes fade-in-out{50%{opacity:1;translate:0}
@keyframes scroll{0%{transform:translateY(-2.5rem)}25%{transform:translateY(-1.5rem)}
@keyframes popover-backdrop-fade-in{0%{opacity:0}
@keyframes popover-backdrop-fade-out{0%{opacity:1}
@keyframes popover-scale-up{0%{opacity:0;transform:scale(0)}
@keyframes popover-scale-down{0%{opacity:1;transform:scale(1)}
@keyframes popover-slide-in-bottom{0%{opacity:0;transform:translateY(100%)}
@keyframes popover-slide-out-bottom{0%{opacity:1;transform:translateY(0)}
@keyframes popover-fade-in{0%{opacity:0;transform:translateY(-5%)}
@keyframes popover-fade-out{0%{opacity:1}
@keyframes notification-toast{0%{opacity:0;transform:translateX(150%)}10%,90%{opacity:1;transform:translateX(0)}
@keyframes appearance{0%{opacity:0}
@keyframes grow-and-fade-mobile{0%{height:1.5rem;opacity:1;width:1.5rem}65%{height:2.5rem;opacity:0;width:2.5rem}66%{height:1.5rem;opacity:0;width:1.5rem}
@keyframes grow-and-fade-desktop{0%{height:2rem;opacity:1;width:2rem}65%{height:3.25rem;opacity:0;width:3.25rem}66%{height:2rem;opacity:0;width:2rem}
@keyframes disappearance{0%{opacity:.7}25%{opacity:.7}
@keyframes globalnavigation-tout-fade-in{0%{opacity:0}
@keyframes roll-text{0%{transform:translateX(0)}
@keyframes dlo-background-fade-in{0%{background-color:#0000}
@keyframes dlo-background-fade-out{0%{background-color:#000000ad}
@keyframes dlo-content-slide-in{0%{transform:translateX(100%)}
@keyframes dlo-content-slide-out{0%{transform:translateX(0)}
@keyframes shimmer{0%{background-position:-376px 0}
@keyframes compare-slide-in-down{0%{opacity:0;transform:translateY(-100%)}
@keyframes compare-slide-out-up{0%{opacity:1;transform:translateZ(0)}
@keyframes color-switch-hotspot-pulse{0%{box-shadow:0 0 .0625rem 0 #ffffffb3}50%{box-shadow:0 0 .0625rem .625rem #fff0}
@keyframes color-switch-hotspot-fade-in{0%{opacity:0;visibility:visible}
@keyframes color-switch-gesture-hint-fade-in{0%{opacity:0;visibility:visible}20%{opacity:1;visibility:visible}30%{opacity:1;visibility:visible}40%{opacity:1;visibility:visible}60%{opacity:1;visibility:visible}70%{opacity:1;visibility:visible}80%{opacity:1;visibility:visible}
@keyframes move-right-5px{0%,20%,50%,90%,to{translate:80%}40%,70%{translate:100%}}
@keyframes rotate-right-45deg{0%,20%,50%,90%,to{transform:rotate(0deg)}40%,70%{transform:rotate(15deg)}}
@keyframes color-switch-reduced-animation{0%{opacity:1;visibility:visible}99%{opacity:1;visibility:visible}
@keyframes slide-out-left{0%{opacity:1;transform:translateX(0)}
@keyframes slide-out-right{0%{opacity:1;transform:translateX(0)}
@keyframes slide-in-left{0%{opacity:0;transform:translateX(-20px)}
@keyframes slide-in-right{0%{opacity:0;transform:translateX(20px)}
@keyframes fade-out{0%{opacity:1}
@keyframes hide{0%{display:block;opacity:1;width:100%}
@keyframes cycle-suggestions{0%{transform:translateY(0)}
@keyframes dissolve{0%{transform:translateX(250%)}
@keyframes overflow-transition{0%{margin-left:0}54%{margin-left:0}72%{margin-left:var(--suggestion-overflow-amount)}
@keyframes fade-shadow-before{0%{opacity:0}44%{opacity:0}45%{opacity:1}
@keyframes fade-shadow-after{0%{opacity:1}62%{opacity:1}63%{opacity:0}
```
</details>

### Brand Gradient Palette

**13 complex gradients captured** from the site's CSS. The first few are the most prominent visual decorations:

```css
/* Gradient 1 */
background: linear-gradient(to right,#fff0 0,#fff calc(var(--grid-full);

/* Gradient 2 */
background: linear-gradient(to left,#fff0 0,#fff calc(var(--grid-full);

/* Gradient 3 */
background: linear-gradient(110.14deg,#262626 11.9%,#26262600 43.19%);

/* Gradient 4 */
background: radial-gradient(circle at left bottom,#fff 0,#fff6 34%,#ffffff1a 55%,#0000 100%);

/* Gradient 5 */
background: radial-gradient(circle at left bottom,#fff 0,#fff9 25%,#fff0 62%,#0000 100%);

```

### Hover State CSS (Intercepted)

**92 hover rule lines** captured from CSS files. Key interactive transitions from real CSS (not inferred):

```css
.cmp-dropdown__option--current,.cmp-dropdown__option:hover{background-color:rgba(0,0,0,0.1)}

.cmp-toggleswitch[aria-pressed]:hover::before{background-color:#a9a9a9}

.cmp-toggleswitch[aria-pressed='true']:hover::before{background-color:#006400}

@media screen and (min-width:1280px) and (hover:hover) and (pointer:fine){.a11y-button-back-to-nav:active:hover,.a11y-button-back-to-nav:focus:hover,.a11y-button-skip-to-compare-belt:active:hover,.a11y-button-skip-to-compare-belt:focus:hover,.a11y-button-skip:active:hover,.a11y-button-skip:focus:hover{background-color:#0653b6;box-shadow:none;color:#fff}

.cmp-contentnavigation--active .cmp-contentnavigation__selected-value,.cmp-contentnavigation--active .cmp-contentnavigation__selected-value:active,.cmp-contentnavigation--active .cmp-contentnavigation__selected-value:focus,.cmp-contentnavigation--active .cmp-contentnavigation__selected-value:hover{background-color:#fff;color:#262626}

@media screen and (hover:hover) and (pointer:fine){.cmp-contentnavigation--active .cmp-contentnavigation__selected-value:hover{background-color:#fff;box-shadow:none;color:#262626}

.cmp-contentnavigation--active .cmp-contentnavigation__selected-value:focus-visible,.cmp-contentnavigation--active .cmp-contentnavigation__selected-value:focus-visible:hover{box-shadow:0 0 0 .0625rem #fff,0 0 0 .3125rem #1c69d4}

.cmp-contentnavigation--active .cmp-contentnavigation__selected-value.focus-visible,.cmp-contentnavigation--active .cmp-contentnavigation__selected-value.focus-visible:hover{box-shadow:0 0 0 .0625rem #fff,0 0 0 .3125rem #1c69d4}

.cmp-contentnavigation--active .cmp-contentnavigation__selected-value:focus-visible,.cmp-contentnavigation--active .cmp-contentnavigation__selected-value:focus-visible:hover{box-shadow:inset 0 0 0 .25rem #1c69d4,0 0 0 .0625rem #fff}

.cmp-contentnavigation--active .cmp-contentnavigation__selected-value.focus-visible,.cmp-contentnavigation--active .cmp-contentnavigation__selected-value.focus-visible:hover{box-shadow:inset 0 0 0 .25rem #1c69d4,0 0 0 .0625rem #fff}

.cmp-contentnavigation__list-link,.cmp-contentnavigation__list-link:active,.cmp-contentnavigation__list-link:focus,.cmp-contentnavigation__list-link:hover{background-color:#0000;color:#666}

@media screen and (hover:hover) and (pointer:fine){.cmp-contentnavigation__list-link:hover{background-color:#0000;box-shadow:none;color:#262626}

.cmp-contentnavigation__list-link:focus-visible,.cmp-contentnavigation__list-link:focus-visible:hover{box-shadow:0 0 0 .0625rem #fff,0 0 0 .3125rem #1c69d4}

.cmp-contentnavigation__list-link.focus-visible,.cmp-contentnavigation__list-link.focus-visible:hover{box-shadow:0 0 0 .0625rem #fff,0 0 0 .3125rem #1c69d4}

.cmp-contentnavigation__list-link:focus-visible,.cmp-contentnavigation__list-link:focus-visible:hover{box-shadow:inset 0 0 0 .25rem #1c69d4,0 0 0 .0625rem #fff}

.cmp-contentnavigation__list-link.focus-visible,.cmp-contentnavigation__list-link.focus-visible:hover{box-shadow:inset 0 0 0 .25rem #1c69d4,0 0 0 .0625rem #fff}

.cmp-contentnavigation__list-link:focus-visible,.cmp-contentnavigation__list-link:focus-visible:hover{box-shadow:inset 0 0 0 .25rem #1c69d4,0 0 0 .0625rem #fff}

.cmp-contentnavigation__list-link.focus-visible,.cmp-contentnavigation__list-link.focus-visible:hover{box-shadow:inset 0 0 0 .25rem #1c69d4,0 0 0 .0625rem #fff}

@media screen and (min-width:768px) and (hover:hover) and (pointer:fine){.cmp-contentnavigation__list-link:hover{border-bottom-color:#4d4d4d}

.cmp-contentnavigation__selected-value,.cmp-contentnavigation__selected-value:active,.cmp-contentnavigation__selected-value:focus,.cmp-contentnavigation__selected-value:hover{background-color:#fffffff2;color:#262626}
```

> **Note**: All values above are extracted from the live site's CSS files. The font files are saved locally by Prism and embedded in the output HTML. Use them as-is for maximum fidelity.

## 11.2 Measured Reality (CDP Engine)

Captured directly from Chrome's engine across **all 1798 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**12 breakpoints** read from the live `@media` rules (not guessed):
`480px` · `550px` · `599px` · `767px` · `768px` · `992px` · `1023px` · `1024px` · `1279px` · `1280px` · `1919px` · `1920px`

### Measured Design Scale
**Type scale by usage** (× = paint count): `15px`×1267 · `12px`×317 · `24px`×51 · `23px`×47 · `35px`×29 · `20px`×27 · `18px`×14 · `43px`×8

**Radius scale** (× = paint count): `3px`×13 · `50%`×3 · `10px`×1 · `8px`×1

**Weights** (× = paint count): `300`×1676 · `500`×85 · `400`×27 · `700`×6

**Layout gaps** (× = paint count): `4px`×17 · `8px`×2 · `normal 16px`×2 · `normal 8px`×2 · `4px normal`×1

**Elevation (real shadows)**:
```css
rgb(38, 38, 38) 0px 0px 0px 1px inset
rgb(242, 242, 242) 0px 0px 0px 1px inset
rgba(0, 0, 0, 0.16) 0px 5px 40px 0px
rgba(0, 0, 0, 0.16) 0px 6px 20px 0px, rgba(0, 0, 0, 0.24) 0px 0px 1px 0px
```

### Provenance — measured styles on key elements
Read from the live CSSOM (includes runtime-injected CSS). This is *what actually styles the page*, by element:

```css
body { font-size:var(--body-2-font-size); font-weight:var(--default-font-weight) }
h1 { font-size:2em }
h1 { font-size:var(--headline-1-font-size) }
h1 { font-weight:var(--default-font-weight) }
h1 { font-size:24px; font-weight:300 }
h2 { font-weight:var(--default-font-weight) }
h2 { font-size:var(--headline-2-font-size) }
h2 { font-size:16px }
button { font-family:inherit; font-size:100% }
button { font-weight:var(--clickable-font-weight) }
a { font-weight:var(--clickable-font-weight) }
```

> Selectors normalised to their semantic element — source class names are often build-hashed (`.bgDIHX`) and not reusable. The declarations + CSS vars are the transferable part.

---
*Generated by Prism — automated Playwright extraction + design analysis.*
*Source: https://bmw.com | 2026-06-11T04:59:50.747Z*
*Values extracted via getComputedStyle() (rendered) + CSS custom properties (tokens, marked `(token)`). Token-only values may not be painted — verify against the live site before shipping.*