Volvo Cars Design System

Volvo Cars treats its marketing page as a long vertical magazine rather than a configurator. The above-fold hero is a wide cinematic shot of the XC40 parked on a charcoal driveway with the 52px hero h1 set in white over the photograph at weight 400 — no shadow, no overlay gradient, no glow. Below the fold, the page stacks: a hairline-bordered text card, a second full-bleed shot of the ES90 Electric on a concrete plinth, then two side-by-side cabin and charging-port closeups, then a row of three EX models on a wet street, then more cards. Where Tesla animates a 3D configurator and Polestar leans on minimal-product photography against pure white voids, Volvo runs documentary-style photography full bleed and surrounds it with the smallest possible chrome — ink-on-white type, a few pill CTAs, hairline dividers, nothing else.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: thirteen color tokens drawn from the 421 CSS variables Volvo exposes on the page, organized into a structural tier (true black ink, true white canvas, mid and light grey text and surface tones), a single-accent tier (a cobalt blue and a signal red that exist as feedback semantics, not brand voltage), and a small surface set. Eight typography tokens cover Volvo Centum at display, statement, heading, body, and label tiers, plus a Volvo Broad Pro display-statement tier reserved for the corporate wordmark and editorial signage. Three radii — squared zero, a small four-pixel rounding for inputs, and the full pill. Eight spacing values on a fluid clamp ladder running from 4 to 128 pixels. Fourteen component definitions covering the ink-black primary pill, the secondary ghost pill, the hairline-edged cards, the full-bleed model panel, the editorial body paragraph, and the top nav.

Feed this file to Claude or Cursor and the agent reproduces Volvo's specific moves: full-bleed model photography as the page floor rather than a hero gradient, single-family Volvo Centum across every tier, weight-400 display headlines that never tip into bold authority, binary radius scale that reserves the pill for tappable actions, and the documentary-photo-plus-text-card cadence that runs the full page. The token references resolve cleanly — `{colors.ink}` for any black, `{colors.canvas}` for any white, `{rounded.pill}` for the CTA, `{typography.statement-1}` for the corporate-signage tier — so the AI never has to invent a value. The one move worth borrowing only if your product has the photographic budget to back it: trusting cinematic photography to do the entire job of brand assertion, with no decorative chrome in between.