Photography panels on white, true-black ink, Volvo Centum at regular weight and fully rounded pills: Volvo Cars' site for React, Next.js and AI tools.
Curated by Dov Azencot, updated May 19, 2026. Source volvocars.com (opens in a new tab).
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.
5 highlights
Volvo Cars in production, as captured. Scroll the window to see the whole page.
Volvo Cars's system anchors on #0b2ded (accent-blue) as its primary color. Type is set in Volvo Centum across 9 tokens from 12px to 148px, weights 400–600. Shape language is sharp — components average 1px corner radius, favoring crisp rectangles.
Sparing, CTA-only voltage · 1
Page and card backgrounds · 3
Headlines, body, captions · 3
Dividers, outlines, rules · 1
Specialty colors · 5
Set in Volvo Centum across 9 tokens, from 12px to 148px, weights 400–600. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.
5 corner radii and 9 spacing values. Shape language: sharp, on a 8px base radius.
Each rendered from its tokens (color, type, radius, padding) on Volvo Cars's own canvas.
Volvo Cars's tokens on the kind of product it builds.
Engineered for every road ahead
The performance, comfort and technology that make every drive feel new.
The long way home, along the coast
Two thousand miles of coast road, three countries and one tank of patience in the new grand tourer.
Volvo Cars staff · 8 min readSome roads are only worth it if you take your time. The people who build the places we live are starting to plan for decades, not seasons, and the work is already changing what gets made.
Volvo Cars's tokens, its components and how to use this DESIGN.md in your project.
Specs, directories and component libraries that pair with this design system.
One machine-readable file. Drop it into Claude Code, Cursor, VS Code or any AI tool that reads DESIGN.md.
One machine-readable file: every color, type, radius, spacing, and component token of Volvo Cars.
Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match Volvo Cars's visual language.
Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.
Volvo Cars' marketing system inverts the dev-tools convention of brand chrome carrying the visual force. Photography is the system. The above-fold hero on volvocars.com is a wide cinematic shot of the XC40 parked on a charcoal driveway with the 52px h1 set in white over the photograph at weight 400 — no overlay gradient, no glow, no shadow, no decorative panel. Below the fold the page stacks vertically: a hairline-bordered text card, a full-bleed ES90 Electric on a concrete plinth, two side-by-side cabin and charging-port closeups, a row of three EX models on a wet street, then a closing pair of cards. Where Tesla animates a 3D configurator and Polestar leans on 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 chromatic discipline reinforces the move. The captured page renders true black {colors.ink} 326 times — 146 as text, 178 as border, one as background, one inside a gradient — and true white {colors.canvas} 64 times. Mid-grey {colors.ink-soft} carries fourteen secondary text moments. That is essentially the entire palette. The CSS declares 16 additional brand-layer values (a cobalt blue {colors.accent-blue}, a signal red {colors.signal-red}, feedback-state greens and oranges) but none of them render meaningfully in the marketing chrome — they live inside the configurator's form-validation states and the dealer-locator's status flags. The brand voltage, such as it is, comes from the photography: the metallic paint colors of the models do the chromatic work a brand accent would do elsewhere.
Typography is Volvo Centum across every tier — a single proprietary sans handling display, statement, heading, body, button, and label. A second family, Volvo Broad Pro, exists only as the corporate signature tier (the heaviest typographic moment in the system at weight 400) and never appears as running text. Display weight tops out at 400; emphasis goes to weight 600 at the small heading and button tiers. There is no 700+ moment anywhere on the marketing page. The hero h1 at 52px in weight 400 is the loudest typographic moment — deliberately measured so the photography behind it remains the protagonist.
Key Characteristics:
{colors.canvas} — #ffffff), not the off-white cream that Cloudflare or Aesop run — the contrast against full-bleed photography needs maximum chromatic gap.{colors.ink} — #000000) used at intensity — 326 captured occurrences, 178 of them as borders, dominant across every typographic and chrome tier.{rounded.pill} — 9999px). Four pill occurrences total on the page.{colors.ink} — #000000): frequency 326. Used as text (146), border (178), background (1), gradient (1). The dominant chrome color across the entire page. Wired in CSS as --v-color-foreground-primary, --v-color-always-black, --v-color-surface-neutral, and --v-color-state-primary-medium. True black, not a near-black graphite.{colors.canvas} — #ffffff): frequency 64 — used as background (16), text (26), border (22). The page floor. Wired as --v-color-background-primary, --v-color-always-white, --v-color-foreground-inverted.{colors.surface-1} — #fafafa): the secondary background — appears once as --v-color-background-secondary. A near-imperceptible warmth shift from canvas, used inside the configurator's stepper panels and the news-card secondary surfaces.{colors.surface-gray} — #e3e3e3): the model-panel background tone used behind the ES90 hero card. Wired as --v-color-surface-gray. The single mid-grey surface in the system.{colors.hairline} — #f0f0f0): the border separator used inside feedback components and card outlines. Wired as --v-color-background-feedback-gray and --v-color-background-feedback-red.{colors.ink-soft} — #5e5e5e): frequency 14 — the secondary text tone for body paragraphs and lead copy. Wired as --v-color-foreground-secondary. The single mid-grey text moment in the system.{colors.ink-muted} — #7b8082): the tertiary text tone, used for caption labels and metadata. Wired as --v-color-foreground-tertiary. Slightly warmer than the ink-soft grey to keep the photographic surroundings from feeling cold.{colors.accent-blue} — #0b2ded): a saturated cobalt wired as --v-color-foreground-accent-blue and --v-color-surface-accent-blue. Declared as the brand secondary accent but barely renders in the marketing chrome — reserved for editor selection states and dealer-locator pinpoints.{colors.signal-red} — #cb232c): the brand signal red wired as --v-color-foreground-feedback-red. One captured occurrence on the page, used as the inline-error text color inside form chrome.{colors.feedback-red-surface} — #e52715): the validation-error surface fill wired as --v-color-surface-feedback-red and --v-color-state-feedback-red-medium. Lives inside the configurator's form-validation chrome.{colors.feedback-green-surface} — #048220): the validation-success fill wired as --v-color-surface-feedback-green. Reserved for form-success and the dealer-stock availability badge.{colors.feedback-orange-surface} — #ce6700): the warning fill wired as --v-color-surface-feedback-orange. Reserved for service-recall and warranty-notification badges inside the owner portal.{colors.feedback-orange-bg} — #ffe8d1): the soft warning surround wired as --v-color-background-feedback-orange. The pale-orange fill behind warning text inside notification cards.The system runs Volvo Centum for every spoken tier — display, statement, heading, body, button, nav, and caption. The fallback stack walks Helvetica Neue, Helvetica, Noto Sans, Segoe UI, Arial, sans-serif. A second family, Volvo Broad Pro, carries the statement-signature tier reserved for the corporate wordmark and editorial signage moments; it never appears as running text or button label.
There is no third family — no monospace, no second sans, no serif tier. Volvo Centum does the labor of every typographic surface the marketing page renders, and the discipline holds across the configurator, the news index, and the financial-services subpages.
| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
{typography.statement-1} | 148px fluid | 400 | calc(1em + 0.5rem) | Editorial signage moments — clamps from 72px to 148px |
{typography.statement-signature} | 84px fluid | 400 | calc(1em + 0.5rem) | Volvo Broad Pro signature tier — clamps from 40px to 84px |
{typography.display-xl} | 52px | 400 | 60px | Hero h1 ("Volvo XC40") |
{typography.heading-md} | 34px | 400 | 42px | Section h2 |
{typography.heading-sm} | 20px | 600 | 30px | Sub-section / card title |
{typography.body-lg} | 24px | 400 | 32px | Lead paragraph beneath display |
{typography.body-md} | 16px | 400 | 24px | Default running text |
{typography.button-md} | 16px | 600 | 24px | Pill CTA label |
{typography.caption} | 12px | 400 | 20px | Metadata, footer chrome |
Display weight tops out at 400. The hero h1 at 52px / 400 is the loudest typographic moment in the marketing chrome — deliberately measured so the photography behind it remains visually dominant. Emphasis goes to weight 600 at the small heading and button tiers, never to 700+. The statement-1 token at the wide-desktop clamp ceiling reaches 148px — that scale only renders in the corporate-signage editorial spreads, never in the model-showcase cadence. Volvo Broad Pro at the statement-signature tier is the only display tier that diverges from Centum, and it appears in vertical-signage compositions where the corporate wordmark needs the wider geometry to read at scale.
Volvo Centum is a licensed proprietary family. Inter at the same weights is the closest open-source substitute; the proportions transfer cleanly at the 16-24px body sizes. For the statement-1 fluid tier, Söhne or Aktiv Grotesk at weight 400 carry the same humanist warmth. For the Volvo Broad Pro statement-signature tier, Manrope ExtraBold at weight 800 or Inter Black at weight 900 are the closest free substitutes — the geometry diverges slightly but the visual force transfers.
clamp() ladders rather than fixed scale steps — --v-space-pagemargin clamps from 16px on mobile to 64px on wide desktop, --v-space-gutter from 16px to 32px, --v-space-md from 24px to 48px.{spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 48px · {spacing.2xl} 64px · {spacing.3xl} 96px · {spacing.4xl} 128px. The 24px and 4px values are the dominant tokens — 12 captured occurrences each.--v-size-grid-maxwidth), with an absolute hard ceiling at 160rem (2560px) for ultra-wide editorial spreads.--v-grid-columns: 12).The page alternates between full-bleed photographic and constrained editorial card bands. There is no atmospheric gradient between bands — each photographic panel terminates at the edge of the viewport, and the next text card begins immediately below with a hairline dividing rule. The 96px section-padding tier reads as breathing room; the 44x30 card padding reads as editorial generosity; together they pace the page as a vertical magazine rather than as a scrollable hero stack.
The system has essentially no shadow tier. The captured page renders zero shadow occurrences in the structural CSS variables — depth comes entirely from photography (the model imagery carries its own lighting) and from surface contrast ({colors.surface-gray} panels lifted against the {colors.canvas} floor by a ~6% lightness gap).
{colors.surface-gray} (#e3e3e3) cards sit on {colors.canvas} (#ffffff). The lift reads quietly — a single tonal step rather than a layered elevation.The radius scale is binary: every surface squared at zero, except the pill CTAs.
{rounded.none} 0px — the structural default (--v-shape-default). Every card, every image container, every text panel, every nav band, every footer block sits at zero.{rounded.sm} 4px — declared as --v-radius-sm for inputs and small chips inside the configurator. Rarely renders on the marketing page.{rounded.md} 8px — declared as --v-radius-md for the configurator panel corners. Not visible on the captured marketing surface.{rounded.lg} 16px — declared as --v-radius-lg for the dealer-locator results and the saved-build cards. Not visible on the marketing page.{rounded.pill} 9999px — wired as --v-shape-emphasis. The four occurrences on the captured page are exactly the primary and secondary CTAs in the hero (configure / book a test drive / find a retailer).The discipline is the move. When softness happens, it happens only at the single tappable action. Every other surface reads as a squared editorial block — including the photographic panels, which terminate at the viewport edge without a rounded corner.
hero-section — Full-bleed cinematic model photograph with the h1 overlaid in white. 96x24 padding on the inner content stack, no border-radius. The model name sits at the bottom-left third of the frame; the primary and secondary pill CTAs sit immediately below the headline.
hero-heading — White text on the photograph, Volvo Centum 52px / 400. The display tier — confidence by scale, not by weight.
statement-heading — Ink text at the statement-1 fluid tier — clamps from 72px on mobile to 148px on ultra-wide desktop. Used for editorial signage moments inside the design-story and sustainability spreads.
section-heading — Ink text at 34px / 400, used for "Build your car" and other section h2s.
body-paragraph — Ink-soft {colors.ink-soft} text at 16px / 400 — the workhorse paragraph style. Mid-grey, not pure black, to keep long-form reading comfortable.
body-paragraph-emphasis — Ink text at the 20px / 600 heading-sm tier — used inside cards where a single sentence needs to read as emphasis without being treated as a heading.
button-primary — The signature CTA. Ink-black {colors.ink} fill, white text, full pill {rounded.pill} 9999px radius, 12x24 padding, 44px height. The "Build your car" pill is the canonical instance, sitting beneath the hero h1.
button-secondary — Transparent fill with ink text and a 1px ink-black border. Pill radius, 12x24 padding, 44px height. Used for "Find a retailer" and other secondary actions beside the primary pill.
top-nav — White {colors.canvas} surface, 64px height, no border. The Volvo wordmark sits flush left; product-category links (Cars, Buy & Order, Owners, Support) sit center; the country selector and account icon sit flush right.
nav-link — Transparent background, ink text in {typography.body-md}, 8x12 padding. No hover background visible in the captured surface — the hover state is a faint underline.
card-hairline — White {colors.canvas} surface, 1px {colors.hairline} border, no border-radius, 44x30 internal padding. The default text card — holds feature explanations, sustainability talking points, and the financial-services blocks.
model-panel — Full-bleed photograph with no border-radius and no padding. The model name and price sit in a hairline-bordered text card immediately below the photograph, not overlaid.
text-input — White surface, ink text, 1px {colors.ink-muted} border, {rounded.sm} 4px radius, 12x16 padding, 44px height. Used inside the dealer-locator and the build-quote forms.
footer — White canvas, ink-soft text, 48x24 padding. No surface contrast against the page floor — the footer continues the canvas with a hairline top rule and the category-link grid stacked beneath.
Do trust the photography to carry the chromatic load. The system's single structural move is the full-bleed cinematic photograph stack — model shots, charging-port closeups, lifestyle scenes. Adding a brand-color overlay or a hero gradient would compromise the documentary tone and tip the page from magazine into showroom.
Do keep display weight at 400. The hero h1 at 52px / 400 is the loudest typographic moment in the marketing chrome; bumping to 700 turns the editorial dek into a generic auto-shout and undercuts the principle of letting the photography lead.
Do reserve the pill ({rounded.pill} — 9999px) for the primary and secondary hero CTAs only. Multiplying pills across the page dilutes the single tappable-action signal and softens the squared editorial discipline.
Do keep sustainability and electrification copy in the same chrome as the model showcases. Green tinting, leaf icons, eco-badge gradients would create a second visual register and undercut the principle that electrification is default rather than a separate marketing track.
Don't introduce a rounded-card tier at 8 or 16 pixels. The CSS declares {rounded.md} and {rounded.lg} but the marketing surface never renders them; importing those values would soften the squared editorial blocks and weaken the binary radius discipline.
Don't use {colors.accent-blue} (#0b2ded) as a CTA fill or a link color in marketing chrome. It is declared as the brand secondary accent but reserved for editor selection states and dealer-locator pinpoints — using it on a button reads as a system fault.
Don't use the feedback colors ({colors.feedback-red-surface}, {colors.feedback-green-surface}, {colors.feedback-orange-surface}) outside of configurator validation states and owner-portal notification badges. Outside those contexts they read as decorative accents and break the monochrome discipline.
Don't swap the canvas from pure white to a cream or off-white. The contrast between true white and full-bleed photography is intentional — softening it to cream would muddy the documentary lighting inside each model shot and dull the chromatic punch of the metallic-paint colors.
{component.text-input} carries the resting state; error styling uses {colors.feedback-red-surface} and {colors.signal-red} inside the configurator forms but is not exposed on the marketing surface.--v-color-state-inverted-* variants for inversion contexts but no dark-mode variant is rendered on the public marketing pages.shop.volvocars.com) carries a richer token system — step-rail panels, swatch chips, accessory cards, financing tables — that is not represented here.--v-transition-easing-regular (cubic-bezier(0.45,0,0.4,1)) and --v-transition-easing-entrance (cubic-bezier(0,0,0.1,1)) but the staging is not exposed.{typography.statement-1} and {typography.statement-signature} tiers are declared in the CSS variables but render only on editorial design-story spreads (not on the standard model-showcase page) — the captured page does not exercise the full fluid range.Acura, Alfa Romeo, BMW and 40 more in Automotive: each brand's colors, type and components in one file your AI agent builds from.
The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
Billing
Billed once a year in USD. Cancel anytime.
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
For freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Billed once a year in USD. Cancel anytime.
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
For freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
Everything in Individual, plus
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Everything in Team, plus
4.9 out of 5 from 150+ developers
Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.
