--- version: alpha name: "Volvo Cars" website: "https://www.volvocars.com" description: >- A Swedish automaker whose marketing page is structured as a long vertical stack of photography panels — full-bleed lifestyle shots of the XC40, ES90, and EX models alternating with hairline-bordered text cards on a pure white floor. The system runs Volvo Centum across every typographic tier with no second display family, sits the hero h1 at 52px in weight 400 (never bold), pairs every CTA as a fully-rounded ink-black pill, and rejects rounded corners on every surface except those pills. Sustainability and electrification copy carries the same chrome as the model showcases — no green tinting, no eco-iconography, no decorative gradients. The page floor is white, the ink is true black, and the only color that appears at all is the photography. seo: title: "Volvo Cars Design System for React — ink-on-white, Volvo Centum, 14 components" metaDescription: "Volvo Cars' marketing system as a DESIGN.md file. Pure white canvas, true-black ink, Volvo Centum across every tier, photography-led panels, and fully-rounded pill CTAs. Tokens for React, Next.js, and AI coding tools." highlights: - "Photography is the system — every above-fold panel is a full-bleed model shot; brand chrome is just ink, white, and pill CTAs around the photography" - "Single-family typography — Volvo Centum carries display, heading, body, button, and nav with no second sans, and a tertiary Volvo Broad Pro reserved for the wordmark only" - "Display weight 400 across the system — the 52px hero h1 sits at regular, not bold; the 32-34px section headings match" - "Binary radius scale — every surface is squared (0px) except the pill CTAs, which use a full 9999px capsule" - "Monochrome palette — true black ink, true white canvas, a single mid-grey for secondary text; brand-color accents (cobalt blue, signal red) exist as CSS variables but barely render on the marketing page" tags: - "Automotive" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.volvocars.com" title: "Volvo Cars — official site" description: "Volvo Cars' public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Volvo Cars' primary brand color?" answer: "Volvo Cars' marketing system is functionally monochrome. The dominant chrome is true black ink on true white canvas — black appears 326 times on the captured page as text (146), border (178), background (1), and a single gradient end-stop, while white renders 64 times. There is no held-in-reserve brand accent in the chrome at all. The CSS exposes a cobalt blue wired as `--v-color-foreground-accent-blue` and a signal red wired as `--v-color-foreground-feedback-red`, but neither renders meaningfully on the captured page. 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. The discipline is closer to Patagonia or Aesop than to a typical category brand." - id: "typography" title: "What typeface does Volvo Cars use, and what should I use as a substitute?" answer: "Volvo Cars runs Volvo Centum across every tier of the system — display, statement, heading, body, button, nav, label. The fallback stack walks Helvetica Neue, Helvetica, Noto Sans, Segoe UI, Arial, sans-serif. A second family, Volvo Broad Pro (with Volvo Broad and Arial Black as fallbacks) carries the corporate wordmark statement-signature tier only and never appears as running text. Display sizes are fluid: the statement-1 token clamps from 72px on mobile to 148px on wide desktop in weight 400, the hero h1 settles at 52px in weight 400, and section headings run 20px to 34px in weight 400 to 600. Body sits at 16px / 400 / 24px line height. Inter at the same weights is the closest open-source substitute; for the Broad Pro display, Manrope ExtraBold at 800 transfers cleanly." - id: "radii-and-pills" title: "What corner-radius scale does Volvo Cars use?" answer: "The scale is binary: squared surfaces everywhere, except pill CTAs. The CSS exposes four radius tokens — default at zero, small at four pixels, medium at eight pixels, large at sixteen pixels, and a shape-emphasis token at the full pill (9999 pixels). Only the pill renders meaningfully on the captured marketing page; the four pill occurrences are exactly the primary and secondary CTAs in the hero. Every card, every image container, every text panel, every footer band sits at the zero default. The discipline mirrors the typographic restraint — when softness happens, it happens only at the single tappable action, and the rest of the page reads as a series of squared editorial blocks." - id: "sustainability-styling" title: "Why does Volvo's sustainability messaging not use any green chrome?" answer: "Volvo's electrification and sustainability copy carries the same chrome as the model showcases — ink-on-white type, hairline dividers, pill CTAs, no green tinting, no leaf icons, no eco-badge gradients. The CSS does declare green tokens for feedback states (a deep forest-green at hex #04771d for foreground text and a paler #d7f9df for backgrounds), but these are reserved for form-validation success states inside the configurator and not used in marketing chrome. The decision keeps the brand voice consistent across product categories — an EX90 spread reads the same way an XC40 spread reads, with the photography carrying the only chromatic load. The move trusts the audience to read electrification as default rather than as a separate marketing register." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own automotive marketing site?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Volvo Cars' 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. You can also reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The one move worth borrowing only if you have the photography budget to back it is the no-decorative-chrome approach — Volvo gets away with it because the model photography carries the brand entirely, and without that grade of imagery the page reads as undressed rather than disciplined." mockups: - "marketing-hero" - "editorial-article" colors: ink: "#000000" ink-soft: "#5e5e5e" ink-muted: "#7b8082" canvas: "#ffffff" surface-1: "#fafafa" surface-gray: "#e3e3e3" hairline: "#f0f0f0" accent-blue: "#0b2ded" signal-red: "#cb232c" feedback-red-surface: "#e52715" feedback-green-surface: "#048220" feedback-orange-surface: "#ce6700" feedback-orange-bg: "#ffe8d1" typography: statement-1: fontFamily: "\"Volvo Centum\", \"Helvetica Neue\", Helvetica, \"Noto Sans\", \"Segoe UI\", Arial, sans-serif" fontSize: 148px fontWeight: 400 lineHeight: "calc(1em + 0.5rem)" letterSpacing: 0 display-xl: fontFamily: "\"Volvo Centum\", \"Helvetica Neue\", Helvetica, \"Noto Sans\", \"Segoe UI\", Arial, sans-serif" fontSize: 52px fontWeight: 400 lineHeight: 60px letterSpacing: 0 heading-md: fontFamily: "\"Volvo Centum\", \"Helvetica Neue\", Helvetica, \"Noto Sans\", \"Segoe UI\", Arial, sans-serif" fontSize: 34px fontWeight: 400 lineHeight: 42px letterSpacing: 0 heading-sm: fontFamily: "\"Volvo Centum\", \"Helvetica Neue\", Helvetica, \"Noto Sans\", \"Segoe UI\", Arial, sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 30px letterSpacing: 0 body-lg: fontFamily: "\"Volvo Centum\", \"Helvetica Neue\", Helvetica, \"Noto Sans\", \"Segoe UI\", Arial, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 32px letterSpacing: 0 body-md: fontFamily: "\"Volvo Centum\", \"Helvetica Neue\", Helvetica, \"Noto Sans\", \"Segoe UI\", Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 button-md: fontFamily: "\"Volvo Centum\", \"Helvetica Neue\", Helvetica, \"Noto Sans\", \"Segoe UI\", Arial, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 24px letterSpacing: 0 caption: fontFamily: "\"Volvo Centum\", \"Helvetica Neue\", Helvetica, \"Noto Sans\", \"Segoe UI\", Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 20px letterSpacing: "0.24px" statement-signature: fontFamily: "\"Volvo Broad Pro\", \"Volvo Broad\", \"Arial Black\", sans-serif" fontSize: 84px fontWeight: 400 lineHeight: "calc(1em + 0.5rem)" letterSpacing: 0 rounded: none: "0px" sm: "4px" md: "8px" lg: "16px" pill: "9999px" spacing: xs: "4px" sm: "8px" md: "12px" base: "16px" lg: "24px" xl: "48px" 2xl: "64px" 3xl: "96px" 4xl: "128px" components: hero-section: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: "96px 24px" hero-heading: backgroundColor: transparent textColor: "{colors.canvas}" typography: "{typography.display-xl}" padding: "0px" statement-heading: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.statement-1}" section-heading: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.heading-md}" body-paragraph: backgroundColor: transparent textColor: "{colors.ink-soft}" typography: "{typography.body-md}" body-paragraph-emphasis: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.heading-sm}" button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "12px 24px" height: "44px" button-secondary: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "12px 24px" height: "44px" borderColor: "{colors.ink}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "16px 24px" height: "64px" nav-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "8px 12px" card-hairline: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "44px 30px" borderColor: "{colors.hairline}" model-panel: backgroundColor: "{colors.surface-gray}" textColor: "{colors.ink}" typography: "{typography.heading-md}" rounded: "{rounded.none}" padding: "0" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "12px 16px" height: "44px" borderColor: "{colors.ink-muted}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-soft}" typography: "{typography.body-md}" padding: "48px 24px" --- ## Overview 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:** - Pure white canvas (`{colors.canvas}` — #ffffff), not the off-white cream that Cloudflare or Aesop run — the contrast against full-bleed photography needs maximum chromatic gap. - True black ink (`{colors.ink}` — #000000) used at intensity — 326 captured occurrences, 178 of them as borders, dominant across every typographic and chrome tier. - Single typography family Volvo Centum across display, heading, body, button, and nav, with a Volvo Broad Pro statement-signature tier reserved for the wordmark only. - Display weight 400 across the system, emphasis at weight 600 — no 700+ bold moment anywhere on the captured page. - Binary radius scale — every surface squared at zero except the pill CTAs (`{rounded.pill}` — 9999px). Four pill occurrences total on the page. - Photography stack — every other panel is a full-bleed model or lifestyle shot; the cards between them are hairline-bordered editorial blocks. - Fluid spacing on clamp ladders — the statement-1 tier clamps from 72px to 148px, section padding from 32px to 64px, gutters from 16px to 32px depending on viewport. - Sustainability messaging carries no green chrome — electrification copy reads the same as the model showcases, with no eco-iconography or tinted accents. ## Colors ### Structural - **Ink** (`{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. - **Canvas** (`{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`. - **Surface-1** (`{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. - **Surface Gray** (`{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. - **Hairline** (`{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`. ### Text - **Ink Soft** (`{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. - **Ink Muted** (`{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. ### Accent (declared, rarely rendered) - **Accent Blue** (`{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. - **Signal Red** (`{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. ### Feedback (semantic, configurator-only) - **Feedback Red Surface** (`{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. - **Feedback Green Surface** (`{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. - **Feedback Orange Surface** (`{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. - **Feedback Orange Bg** (`{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. ## Typography ### Font Families 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. ### Hierarchy | 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 | ### Principles 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. ### Note on Font Substitutes 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. ## Layout ### Spacing System - **Base unit:** fluid. The system runs CSS `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. - **Fixed-step tokens:** `{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. - **Section padding (vertical):** 96px between major model showcases, dropping to 64px between editorial cards. - **Card internal padding:** 44px x 30px on hairline-bordered text cards, 16px x 24px on smaller index cards. ### Grid & Container - **Max content width:** 81rem (1296px) on the page-content grid (`--v-size-grid-maxwidth`), with an absolute hard ceiling at 160rem (2560px) for ultra-wide editorial spreads. - **Twelve-column grid** with 16-32px fluid gutters (`--v-grid-columns: 12`). - **Hero:** full-bleed cinematic photograph, content overlaid at ~1080px max-width, left-aligned at the bottom-left third of the frame. - **Model showcase:** full-bleed image panels alternate with hairline-bordered text cards in a vertical stack — no two-column splits, no card carousels. - **Sub-grids:** sidebar widths run from 15rem narrow to 29rem wide for the configurator-step rail and the financing-options rail. ### Rhythm 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. ## Elevation 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). - **Flat (no shadow):** hero, every model panel, every text card, every footer band — 100% of structural surfaces. - **Tonal lift:** `{colors.surface-gray}` (#e3e3e3) cards sit on `{colors.canvas}` (#ffffff). The lift reads quietly — a single tonal step rather than a layered elevation. - **Photographic depth:** the cinematic lighting inside each model shot does the depth work — the XC40 driveway shadow, the ES90 plinth highlight, the EX-trio reflection on wet asphalt — without any drawn shadow in the chrome. ## Shapes 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. ## Components **`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's and Don'ts **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. ## Known Gaps - **Hover and focus states:** the captured marketing page exposes the resting state of the pill CTAs and the secondary ghost pill; the full state matrix (focus rings, active press, disabled tints) lives inside the configurator and is not represented here. - **Form input error states:** `{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. - **Dark mode:** the captured marketing surface is light-only. The CSS exposes `--v-color-state-inverted-*` variants for inversion contexts but no dark-mode variant is rendered on the public marketing pages. - **Configurator chrome:** this DESIGN.md captures the marketing site only. The build-your-car configurator (`shop.volvocars.com`) carries a richer token system — step-rail panels, swatch chips, accessory cards, financing tables — that is not represented here. - **Owner portal and service surfaces:** the My Volvo owner portal, the service-booking flow, and the dealer-locator carry their own surface tokens and notification chrome not represented in this file. - **Motion:** the hero photograph and the model panels animate on scroll-into-view (subtle parallax, fade-in on cards) but the spec captures end-state values only. Easing curves are declared as `--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. - **Statement-tier rendering:** the `{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.