Untitled Design System

### Spacing System

• Base unit: 4px, with the working scale built on multiples of 4 and 8.

• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 20px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.xxxl} 40px · {spacing.section} 80px.

• Section padding (full-bleed band → next band): {spacing.section} (80px) on desktop, collapsing to {spacing.xxxl} (40px) on mobile.

• Promo-tile internal padding: {spacing.xxl} (32px) all sides on desktop.

• Configurator row vertical padding: {spacing.xl} (24px) top/bottom with hairline divider between rows.

### Grid & Container

• Max content width ≈ 1440px. Beyond that, content remains centred and the dark/light bands extend full-bleed.

• Promo grid on the homepage: a 2-column tile grid on desktop, dropping to 1-up on mobile. Each tile is square-cornered ({rounded.none}) with the photography or solid colour as the background.

• Vehicle range grids: 3 to 4 cars per row at desktop, collapsing 2-up at tablet and 1-up at small mobile.

• Configurator uses a fixed left visualisation pane (~60% width) with a right-hand scrolling option list (~40% width) on desktop.

### Whitespace Philosophy

• Whitespace is structural, not decorative. Sections are separated by colour-blocking (white → black) rather than soft padding ramps.

• Inside cards and configurator rows, padding is generous but never airy — the brand is mass-market, so density is acceptable.

• Hairline {colors.hairline} dividers on white surfaces create the sense of catalogue precision; on dark surfaces, {colors.divider-dark} carries the same role.

### Border Radius Scale

| Token | Value | Use |

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

| {rounded.none} | 0px | Tiles, vehicle cards, dividers, banner bands, full-bleed images. |

| {rounded.xs} | 2px | Default buttons (primary yellow, secondary black, outline). |

| {rounded.sm} | 3px | Tab panels, small chips. |

| {rounded.md} | 4px | Form labels, inline tags. |

| {rounded.pill} | 46px | Sub-nav pills, "yeni" / "NEW" badges, decorative carousel chips. |

| {rounded.full} | 9999px | Configurator colour swatches, avatar dots. |

### Photography Geometry

• Vehicle photography is always square-cornered ({rounded.none}). No rounded vehicle hero shots, no soft-edged car cards.

• Aspect ratios cluster around 16:9 (hero bands), 1:1 (square promo tiles), and 4:3 (vehicle range cards). Lifestyle imagery sometimes runs 2:1 wide for full-bleed bands.

• Avatars and small profile cues — when present — use {rounded.full} circles to contrast with the otherwise square geometry.

### Breakpoints

| Name | Width | Key Changes |

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

| Desktop XL | ≥ 1440px | Full max-width container, 3–4 column vehicle grid, 2-up promo tile grid. |

| Desktop | 1280–1439px | Same layout, container shrinks to viewport with {spacing.xl} side padding. |

| Tablet Large | 1024–1279px | Vehicle grid drops to 3-up, configurator left/right panes resize to 55/45. |

| Tablet | 768–1023px | Promo tile grid collapses to 2-up, sub-nav pills become horizontal scroll. |

| Mobile Large | 426–767px | Vehicle grid 2-up, configurator switches to stacked panes (visualisation on top, options below), nav collapses to hamburger. |

| Mobile | ≤ 425px | All grids 1-up, hero {typography.display-xl} clamps to ~40px, section padding {spacing.section} collapses to {spacing.xxxl}. |

### Touch Targets

• All buttons ship at minimum 44×44px on mobile; default {component.button-primary} is 48px tall, comfortably exceeding WCAG AAA.

• {component.sub-nav-pill} (36px) is bumped to 40px tall on mobile via increased vertical padding.

• {component.button-icon-square} (40px) sits at the WCAG AA minimum and remains tappable, but should grow to 44px when used as a primary navigation control.

### Collapsing Strategy

• Top-level nav collapses to hamburger at < 1024px; the logo and login icon stay anchored.

• 2-up promo grid collapses to 1-up at < 768px; tile padding shrinks from {spacing.xxl} to {spacing.lg}.

• Configurator switches from side-by-side to stacked at < 1024px, with the visualisation pinned to the top of the viewport on scroll.

• Display headlines clamp: {typography.display-xl} 56px → 40px → 32px across the breakpoint ladder.

• Sub-nav pills convert from a wrap row to a horizontal scroll-rail at < 768px.

### Image Behavior

• Vehicle photography is served at 1.5× and 2× DPR; below 768px, the system swaps to a portrait-oriented composition where art direction allows.

• Hero atmospheric gradients (R5, E-TECH) load lazily after primary content; they are not blocking.

• Lifestyle / commercial photography in {component.promo-tile-dark} keeps the same 16:9 framing across breakpoints, cropping inward rather than letterboxing.

1. Focus on ONE component at a time. Most components share {rounded.xs}, {colors.canvas} / {colors.surface-dark}, and NouvelR — only the role-specific tokens ({colors.primary}, {component.promo-tile-yellow}) shift between variants.

2. Reference component names and tokens directly ({colors.primary}, {component.button-primary-pressed}, {rounded.pill}) — do not paraphrase.

3. Run npx @google/design.md lint DESIGN.md after edits; the orphaned-tokens warning will catch unused entries before they ship.

4. Add new variants as separate entries (-pressed, -disabled, -outline) — do not bury them in prose.

5. Default body type to {typography.body-md}; reach for {typography.subtitle} only on hero subtitles and lead paragraphs.

6. Keep {colors.primary} scarce — if more than one yellow element appears per viewport, ask whether one of them should drop to {colors.surface-dark} or {colors.canvas} instead.

• Active/pressed visual states are not consistently observable in static surfaces; button-primary-pressed documents the extracted darkened-yellow value, but no other component has a pressed variant promoted to the YAML.

• Drop-shadow values exist in the extracted tokens but are rarely surfaced visually; only the configurator's sticky summary bar uses them on the captured pages.

• The MyRenault application surfaces (logged-in product) are out of scope for this extraction — only the public marketing canvas is documented.

• Form-field focus styling is not extracted; the system likely relies on a thicker bottom border at {colors.ink}, but this is not visually confirmed on the captured pages.