---
version: alpha
name: Volvo Cars
description: Scandinavian calm rendered in software — an airy white canvas, Volvo Novum's humanist sans, deep Prussian-blue ink, and a single brighter-blue accent reserved for interaction. Restraint, safety, and breathing room as a design language.
category: Auto
styles: Light, Minimal, Cool, Editorial

colors:
  # Surface / canvas — the homepage runs on near-pure white with airy expanses
  background: "#ffffff"
  surface: "#ffffff"
  surface-subtle: "#f5f5f5"     # Alternating section tint, card resting fill
  surface-muted: "#ededed"      # Tertiary panels, comparison rows, skeletons
  surface-inverse: "#141414"    # Dark hero / dark-UI panels — Volvo's dark theme base

  # Ink — Prussian-blue-leaning near-black, never a pure cold black
  ink: "#1c1c1c"                # Primary headings and body — soft graphite, not #000
  ink-display: "#003057"        # Volvo Prussian Blue — large brand statements, display type
  ink-secondary: "#56575a"      # Storm-Dust-adjacent gray for captions, meta, helper text /* estimated */
  ink-muted: "#8c8d8f"          # Disabled labels, placeholders, low-emphasis text /* estimated */
  on-inverse: "#ffffff"         # Text on the dark surface

  # Brand accent — the brighter Volvo Blue used ONLY for interaction (links, selection, CTAs)
  primary: "#1c6bba"            # Light-UI accent blue — buttons, links, selected states /* estimated from Volvo digital "accent blue" */
  on-primary: "#ffffff"
  primary-hover: "#155394"      # Darker on hover /* estimated */
  primary-pressed: "#0f3f70"    # Pressed/active /* estimated */
  primary-container: "#e7f0fa"  # Tinted accent wash — selected list rows, info panels /* estimated */
  accent-dark-ui: "#5aa9f0"     # Brighter accent reserved for the dark theme (contrast) /* estimated */

  # Brand identity blues (NOT interactive — wordmark, ceremonial moments)
  iron-blue: "#003057"          # Volvo Prussian Blue — the iron-mark / corporate blue
  logo-blue: "#0d3896"          # Volvo logo ultramarine /* estimated */

  # Borders — quiet hairlines, never heavy
  border: "#e0e0e0"             # Default 1px hairline between cards, rows, sections
  border-strong: "#c4c4c4"      # Outlined controls, resting input border
  border-focus: "#1c6bba"       # Focus ring color (matches accent) /* estimated */

  # Focus
  focus-ring: "#1c6bba"         # 2px accent ring for keyboard focus /* estimated */

  # Semantic — Volvo's published functional colours
  success: "#47962d"            # Volvo functional green
  warning: "#f7d302"            # Volvo functional yellow
  error: "#c4001a"              # Volvo functional red
  info: "#1c6bba"               # Reuses the accent blue /* estimated */

  # Shadow tint
  shadow-soft: "#1c1c1c"        # Cool near-black base for the rare soft elevation shadow

typography:
  display-hero:
    fontFamily: "Volvo Novum, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: -1px
  display:
    fontFamily: "Volvo Novum, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "Volvo Novum, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.18
    letterSpacing: -0.25px
  heading-sub:
    fontFamily: "Volvo Novum, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "Volvo Novum, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Volvo Novum, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  nav-link:
    fontFamily: "Volvo Novum, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  button-ui:
    fontFamily: "Volvo Novum, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Volvo Novum, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.1px
  label-upper:
    fontFamily: "Volvo Novum, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 1px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 128px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 16px
  pill: 9999px

components:
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 16px 40px
  nav-link:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  nav-link-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 12px 16px

  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-active:
    backgroundColor: "{colors.primary-pressed}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-strong}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 13px 27px
  button-secondary-hover:
    backgroundColor: "{colors.surface-subtle}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 13px 27px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 4px
  button-ghost-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary-hover}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 4px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-strong}"
    rounded: "{rounded.lg}"
    padding: 24px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-strong}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 14px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-focus}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 14px 16px

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink-display}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  badge-status:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Volvo Cars Design System

## Overview

Volvo Cars' digital design is Scandinavian calm translated into software. Where most automotive sites reach for dark cinematic drama and chromed urgency, Volvo opens on a near-pure white canvas (`{colors.background}`) flooded with light and air. Product photography sits in generous negative space, headlines breathe at relaxed line-heights, and the whole page reads less like a showroom hard-sell and more like a Swedish interior — warm, unhurried, quietly confident. The brand's three pillars (safety, sustainability, simplicity) become visual ones: nothing shouts, nothing crowds, nothing fights for attention.

The typographic voice is **Volvo Novum**, the brand's proprietary humanist sans-serif. It is gentle where a grotesk would be cold — open apertures, a slightly soft terminal, a friendliness that keeps a 16-billion-dollar car company feeling human. Volvo Novum runs in four primary weights, but the system leans on Regular (400) for reading and Medium (500) for emphasis. Critically, Volvo never uses the software-default "bold" — the Medium cut carries all the weight contrast the system needs. Display moments occasionally invoke Volvo Broad, the heavy condensed face reserved for short ceremonial statements, but the working interface is Novum end to end.

What distinguishes Volvo most is its **disciplined use of blue**. The deep Volvo Prussian Blue (`{colors.iron-blue}`) is the heritage color — the iron mark, the corporate identity, the color of the wordmark — and on the page it appears as `{colors.ink-display}` for large brand statements. But the working interface keeps a separate, brighter blue (`{colors.primary}`) reserved exclusively for interaction: links, selected states, and primary CTAs. Color is information here, not decoration. The functional palette (green `{colors.success}`, yellow `{colors.warning}`, red `{colors.error}`) appears only when a chart or status genuinely needs it. Everything else is white, soft graphite ink, and a quiet family of cool grays — a palette engineered, per Volvo's own portal, to meet WCAG AA contrast across both light and dark themes.

**Key Characteristics:**
- Near-pure white page canvas (`{colors.background}`) with vast breathing room — light and air are the brand
- Volvo Novum humanist sans at weight 400 for reading, 500 for emphasis — never software-default bold
- Soft graphite ink (`{colors.ink}`) instead of pure black — warmer, calmer, Scandinavian
- Deep Prussian Blue (`{colors.ink-display}`) for brand display statements; a separate brighter blue (`{colors.primary}`) for interaction only
- Single accent discipline — `{colors.primary}` marks links, selection, and primary CTAs, nothing else
- Pill-shaped primary buttons (`{rounded.pill}`) — rounded, friendly, approachable
- Quiet 1px hairline borders (`{colors.border}`) and 4–16px radii — soft, never sharp, never heavy
- Functional semantic colors (`{colors.success}`, `{colors.warning}`, `{colors.error}`) used only for genuine status, never decoration
- Large product photography in warm Nordic daylight, set in generous whitespace — never composited into drama
- Relaxed body line-height (1.6) — reading comfort over density, the way a calm room feels

## Colors

### Primary
- **Volvo White** (`{colors.background}`): The dominant canvas — page background, card surface, the airy expanse that defines the brand. Near-pure white, never warm-tinted, never gray.
- **Graphite Ink** (`{colors.ink}`): Primary headings and body copy. A soft near-black (`#1c1c1c`) rather than pure `#000` — the calm Scandinavian default that keeps the page from feeling harsh.

### Brand Accent
- **Volvo Blue (interaction)** (`{colors.primary}`): The single working accent. Used only for links, selected UI states, and primary CTAs. Volvo's own guidance: the accent "may sit on top of any light UI background colour" but never serves decoration.
- **Accent Hover / Pressed** (`{colors.primary-hover}`, `{colors.primary-pressed}`): Progressively darker blues for hover and active states.
- **Accent Container** (`{colors.primary-container}`): A pale blue wash for selected list rows and info panels.
- **Dark-UI Accent** (`{colors.accent-dark-ui}`): A brighter blue swapped in for the dark theme to maintain contrast — Volvo ships two accent blues, one per theme.

### Brand Identity Blues (non-interactive)
- **Volvo Prussian Blue** (`{colors.iron-blue}` / `{colors.ink-display}`): The heritage blue — the iron mark, the wordmark, large brand display type. Ceremonial, never a button.
- **Volvo Logo Ultramarine** (`{colors.logo-blue}`): The wordmark/iron-mark blue in legacy contexts.

### Neutrals & Text
- **Secondary Ink** (`{colors.ink-secondary}`): Captions, metadata, helper text — a Storm-Dust-adjacent cool gray.
- **Muted Ink** (`{colors.ink-muted}`): Disabled labels and placeholders.
- **Surface Subtle** (`{colors.surface-subtle}`): Alternating section tint and resting card fill — chapters the page without a colored band.
- **Surface Muted** (`{colors.surface-muted}`): Tertiary panels, comparison-table rows, skeleton loaders.
- **Surface Inverse** (`{colors.surface-inverse}`): The dark-theme base and the rare dark hero panel.

### Borders
- **Hairline Border** (`{colors.border}`): 1px default divider between cards, rows, and sections — quiet, never heavy.
- **Strong Border** (`{colors.border-strong}`): Outlined buttons and resting input borders.
- **Focus Border** (`{colors.border-focus}`): The accent-blue ring on keyboard focus.

### Semantic (Volvo functional colours)
- **Functional Green** (`{colors.success}`): Volvo's published functional green — charts, positive status. Never decorative.
- **Functional Yellow** (`{colors.warning}`): Volvo's functional yellow — caution states.
- **Functional Red** (`{colors.error}`): Volvo's functional red — errors, critical alerts.
- **Info** (`{colors.info}`): Reuses the accent blue for informational states.

### Gradient System
- Volvo is **functionally gradient-free** in chrome. Fills are flat solids; the only tonal transitions on the page come from the soft Nordic daylight in product photography. No CSS gradient buttons, no atmospheric scrims over the white canvas.

## Typography

### Font Family
- **Primary**: `Volvo Novum`, with fallbacks: `Inter`, `Helvetica Neue`, `Arial`, `sans-serif`
- **Display / ceremonial** (limited): `Volvo Broad` — the heavy condensed brand face, reserved for short statements only
- **OpenType Features**: Standard kerning and ligatures; tabular figures (`tnum`) for spec tables and pricing comparisons

*Note: Volvo Novum is a proprietary humanist sans-serif licensed to Volvo Cars. For external implementations, **Inter** at weight 400/500 is the closest free web substitute (humanist, open-aperture, neutral-warm); **Source Sans 3** and **Mulish** also capture the soft-humanist character. The brand's own rule — use the Medium cut for emphasis, never the software-default bold — should carry over to any substitute.*

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Reference those tokens directly (`{typography.display-hero}`, `{typography.body}`) rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Landing hero statements — large, relaxed, weight 400 |
| `display` | Section openers and full-width feature titles |
| `heading-section` | Page-level headings, weight 500 (Medium) |
| `heading-sub` | Card titles, sub-section heads |
| `body-large` | Intro paragraphs, lead-in copy |
| `body` | Standard reading text at a calm 1.6 line-height |
| `nav-link` | Top navigation and footer links, weight 500 |
| `button-ui` | Button labels — sentence case, weight 500 |
| `caption` | Captions, legal text, image credits |
| `label-upper` | Small uppercase eyebrow labels and badges, +1px tracking |

### Principles
- **Two working weights**: Regular (400) for reading, Medium (500) for emphasis. Volvo explicitly forbids the software-default bold — Medium is the brand's "bold."
- **Soft humanist character**: Volvo Novum's open apertures keep a giant corporation feeling human. Never substitute a cold geometric grotesk.
- **Sentence case everywhere**: Headlines, buttons, and nav use sentence case. The only uppercase is the small `{typography.label-upper}` eyebrow.
- **Relaxed reading rhythm**: Body copy opens to 1.6 line-height — comfort over density, the typographic equivalent of a calm, well-lit room.
- **Negative display tracking**: Letter-spacing tightens to `-1px` at hero sizes and relaxes to normal by body — subtle, never mannered.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Volvo's spacing is **generous and architectural**. Whitespace is not leftover — it is the product. Sections separate with 64–128px of vertical air, and the page is comfortable leaving large areas empty so a single car or statement can breathe.

### Grid & Container
- Max content width: ~1520px on large desktop, ~1280px standard reading column
- 12-column grid; content typically fills 8–12 columns
- Hero: full-bleed product photography with text constrained to an inner column
- Car showcase: 2–3 column responsive card grid with consistent aspect ratios
- Spec / comparison: 3–4 column tabular layouts for cross-model comparison

### Whitespace Philosophy
- **Air as identity**: The white canvas and 64–128px section gaps are the most recognizable thing about the brand — Scandinavian breathing room
- **Type-anchored rhythm**: A 72px hero earns 96–128px of air; a 16px paragraph needs only 16–24px
- **Tonal chaptering**: White sections alternate with `{colors.surface-subtle}` to segment the page without colored bands or dividers
- **Comfortable, never cramped**: Volvo will leave a section half-empty rather than fill it — restraint is the point

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page canvas, body text, structural containers |
| Hairline (Level 1) | `1px solid {colors.border}` | Section dividers, card edges, table rows |
| Resting Card (Level 2) | `0 1px 2px {colors.shadow-soft}` at ~8% opacity | Interactive cards at rest — barely-there lift |
| Raised (Level 3) | `0 4px 16px {colors.shadow-soft}` at ~10% opacity | Hover cards, dropdown menus, popovers |
| Dialog (Level 4) | `0 8px 32px {colors.shadow-soft}` at ~14% opacity | Modals, configurator overlays |
| Focus Ring | `0 0 0 2px {colors.focus-ring}` | Keyboard focus on interactive elements |

**Shadow Philosophy**: Volvo's depth is **soft and minimal, not dramatic**. Shadows, when they appear, are diffuse, low-opacity, and cool — the gentle shadow a piece of furniture casts in even Nordic daylight, never a hard drop. Most of the page achieves depth through the simplest means: a 1px hairline border and a tonal shift between white and `{colors.surface-subtle}`. Elevation escalates only for genuinely floating layers (menus, modals, configurator overlays). The accent-blue focus ring is the one piece of "loud" depth, and it exists for accessibility, not decoration.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-width photography blocks, dividers, flush layouts |
| `sm` | 4px | Inputs, small controls, tight UI details |
| `md` | 8px | Cards, panels, compact containers |
| `lg` | 16px | Large feature cards, product tiles, surface containers |
| `pill` | 9999px | Primary and secondary buttons, badges, chips |

Volvo's radius philosophy is **soft but restrained**. Buttons are fully rounded pills — friendly and approachable, in keeping with a brand built on human safety. Containers use a gentle 8–16px, never sharp, never extreme. There are no hard-cornered chrome elements; softness signals care.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button variants
- **`button-primary`** — Filled Volvo Blue (`{colors.primary}`) pill with white text, the only loud color moment in the UI. Used for the principal action ("Build your Volvo", "Book a test drive"). Hover darkens (`{components.button-primary-hover}`), active darkens further (`{components.button-primary-active}`).
- **`button-secondary`** — White pill with a `{colors.border-strong}` hairline and graphite text. Hover fills to `{colors.surface-subtle}` and the border darkens to `{colors.ink}`.
- **`button-ghost`** — Text-only accent-blue link button for tertiary actions; no fill, no radius, often paired with a trailing chevron.

### Cards
White surfaces (`{colors.surface}`) with a quiet `{colors.border}` hairline and 16px radius. Depth comes from the border at rest and a barely-there shadow on hover (`{components.card-hover}`) — never a heavy frame.

### Inputs
White field, `{colors.border-strong}` resting border, 4px radius, Volvo Novum at 16px. On focus the border switches to the accent blue (`{components.input-focus}`) plus a 2px focus ring.

### Badges / Tags
Pale-blue `{colors.primary-container}` pill with Prussian-blue text for informational tags (`{components.badge}`); a solid functional-green variant (`{components.badge-status}`) for positive status. Always pill-shaped, always small uppercase label type.

### Navigation
White top bar (`{components.nav-bar}`), left-aligned iron-mark wordmark, right-aligned model and account links. Links are Volvo Novum weight 500 in graphite; hover shifts the text to the accent blue (`{components.nav-link-hover}`). The bar stays fixed with a subtle hairline bottom border on scroll; mobile collapses to a full-screen white overlay menu.

## Do's and Don'ts

### Do
- Keep the page canvas near-pure white (`{colors.background}`) — light and air are the brand
- Use Volvo Novum at weight 400 for reading and 500 for emphasis — never software-default bold
- Reserve the accent blue (`{colors.primary}`) for interaction only — links, selection, primary CTAs
- Use the deep Prussian Blue (`{colors.ink-display}`) for brand display statements, not for buttons
- Make primary buttons fully-rounded pills (`{rounded.pill}`) — friendly and approachable
- Keep borders to 1px hairlines (`{colors.border}`) and depth soft and low-opacity
- Use sentence case for buttons, headlines, and nav — only the small eyebrow label is uppercase
- Let body copy breathe at 1.6 line-height — reading comfort over density
- Use the functional colors (`{colors.success}`, `{colors.warning}`, `{colors.error}`) only for genuine status
- Give sections 64–128px of vertical air — leave space half-empty when emptiness is the point

### Don't
- Don't use a pure-black (`#000000`) canvas or pure-black ink — Volvo's calm relies on soft graphite (`{colors.ink}`)
- Don't use the accent blue decoratively — it carries interaction meaning and nothing else
- Don't apply the software-default bold to Volvo Novum — use the Medium (500) cut for weight
- Don't add gradient-filled buttons or atmospheric scrims — chrome is flat solids
- Don't use heavy drop shadows or hard-cornered elements — depth is soft, radii are gentle
- Don't shout in uppercase headlines or buttons — sentence case is the brand voice
- Don't crowd the layout — Volvo would rather leave whitespace than fill it
- Don't apply functional green/yellow/red for decoration — they signal status only
- Don't substitute a cold geometric grotesk for Volvo Novum — the warmth is humanist
- Don't tint the white canvas warm or gray — the brightness is intentional

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single-column, hero type drops to 32–36px, full-width buttons |
| Mobile | 375–600px | Single-column, 36–44px hero, stacked cards |
| Tablet | 600–960px | 2-column grids begin, 48–56px hero, 1px hairlines preserved |
| Desktop | 960–1280px | 3-column grids, 56–64px hero, ~1280px container |
| Large Desktop | ≥1280px | Maximum 72px hero, ~1520px container, full whitespace rhythm |

### Touch Targets
- Primary CTAs: min 48px tap height, full-width on mobile
- Nav links: 44px tap height in the mobile overlay menu
- Configurator selectors: 56–64px tap targets for color, wheel, and trim selection

### Collapsing Strategy
- **Nav**: Horizontal model bar collapses to a hamburger that opens a full-screen white overlay with a large sentence-case link list
- **Hero**: 72px → 56px → 44px → 32px progressive scaling, weight 400 maintained
- **Car showcase**: 3-column grid → 2-column → single-column stacked
- **Spec tables**: Horizontal multi-column comparison transforms into vertically stacked spec groups
- **Section spacing**: 128px desktop → 48–64px mobile — reduces but keeps the airy pace
- **Imagery**: Full-bleed product photography preserved at every breakpoint; aspect ratios shift toward portrait on mobile

### Image Behavior
- Product imagery keeps its warm Nordic-daylight treatment at every breakpoint
- Hero car renders crop tighter on mobile but keep the same soft lighting
- No art-direction changes between breakpoints — the same calm visual language scales down
- The iron-mark wordmark scales but never becomes icon-only

---

## Agent Prompt Guide

### Quick Color Reference
- Page Background: Volvo White (`{colors.background}`)
- Alternate Section: Surface Subtle (`{colors.surface-subtle}`)
- Primary Text: Graphite Ink (`{colors.ink}`)
- Brand Display Text: Volvo Prussian Blue (`{colors.ink-display}`)
- Secondary Text: (`{colors.ink-secondary}`)
- Interactive Accent / CTA: Volvo Blue (`{colors.primary}`)
- Hairline Border: (`{colors.border}`)
- Focus Ring: (`{colors.focus-ring}`)
- Status: green (`{colors.success}`), yellow (`{colors.warning}`), red (`{colors.error}`)

### Example Component Prompts
- "Create a hero section on Volvo White (`{colors.background}`) with a headline using `{typography.display-hero}` in Graphite Ink (`{colors.ink}`), line-height 1.08. Add a primary CTA — a fully-rounded pill (`{rounded.pill}`) filled with Volvo Blue (`{colors.primary}`), white text, `{typography.button-ui}`, 14px 28px padding. Leave generous whitespace around everything."
- "Design a car card (`{components.card}`) on `{colors.surface}` with a 16px radius (`{rounded.lg}`) and a 1px `{colors.border}` hairline. Inside: a full-width product render in soft daylight, then 24px padding with a title in `{typography.heading-sub}` and a single spec line in `{colors.ink-secondary}`. On hover, add a barely-there shadow and darken the border to `{colors.border-strong}`."
- "Build a secondary button (`{components.button-secondary}`) — white fill, 1px `{colors.border-strong}` border, pill radius, graphite text in `{typography.button-ui}`. Hover fills to `{colors.surface-subtle}` and darkens the border to `{colors.ink}`."
- "Create a navigation bar (`{components.nav-bar}`) — white background, left-aligned wordmark, right-aligned links in `{typography.nav-link}` (Volvo Novum weight 500) in `{colors.ink}`. On hover, links shift to Volvo Blue (`{colors.primary}`). Keep it fixed with a 1px `{colors.border}` bottom hairline on scroll."
- "Design an info badge (`{components.badge}`) — pale-blue `{colors.primary-container}` pill with Prussian-blue text (`{colors.ink-display}`) in `{typography.label-upper}`, 4px 12px padding. For positive status use the green variant (`{components.badge-status}`) — solid `{colors.success}` with white text."
- "Build a text input (`{components.input}`) — white field, 1px `{colors.border-strong}` border, 4px radius (`{rounded.sm}`), Volvo Novum at `{typography.body}`. On focus, switch the border to `{colors.border-focus}` and add a 2px `{colors.focus-ring}` ring."

### Iteration Guide
1. Start with the white canvas (`{colors.background}`) and generous whitespace — air is the foundation
2. Set type in Volvo Novum (or Inter as substitute) at weight 400, stepping to 500 for emphasis — never bold
3. Use Graphite Ink (`{colors.ink}`), not pure black, for all reading text
4. Reserve Volvo Blue (`{colors.primary}`) for interaction only — links, selection, primary CTAs
5. Reach for the deep Prussian Blue (`{colors.ink-display}`) only for ceremonial brand display type
6. Make buttons fully-rounded pills (`{rounded.pill}`); keep containers at 8–16px radius
7. Build depth from 1px hairlines (`{colors.border}`) and tonal shifts first; add soft low-opacity shadows only for floating layers
8. Add functional color (`{colors.success}`/`{colors.warning}`/`{colors.error}`) only when status genuinely requires it
9. Use sentence case everywhere except the small uppercase eyebrow label
10. When in doubt, add whitespace, not chrome — calm restraint is the brand

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Volvo Cars. Brand names and trademarks belong to their respective owners.