# Design System Inspired by Volvo

## 1. Visual Theme & Atmosphere

Volvo's web presence is Scandinavian-minimalist automotive — the iron-mark logo (the circle-and-arrow ancient alchemical symbol for iron), a near-monochrome chrome with pure-white canvas and dark gray ink, and considered photography in muted Nordic palettes. The atmosphere is human-centric-safety + Scandi design restraint. The cars are photographed in environments that suggest the family, the journey, and the values they exist to protect: a winding road through a Scandinavian forest, an XC90 parked beside a fjord at dusk, an EX30 in a snowy mountain pass.

Where German luxury automotive (Audi, Mercedes, BMW) leans into precision-engineering and performance, Volvo leans into safety, sustainability, and Scandi design values. The chrome reads as "we care about your family more than we care about your lap time." That tonal commitment shapes every photograph and microcopy moment.

The iron-mark logo is the brand mark — the circle-and-arrow symbol — used pure black on white or pure white on dark. It is one of the most-recognized automotive marks in the world and has been the Volvo identity since the 1920s. The chrome treats it with reverence — modest scale, never animated, never tinted.

**Key Characteristics:**
- Iron-mark logo as brand mark
- Volvo Novum typography — proprietary geometric humanist sans
- Pure white canvas with dark gray ink — Scandi minimalism
- Photography in Nordic environments — forests, fjords, twilight, snow
- Cool-tone secondary palette (muted teal, deep navy, fog gray)
- Configurator with model variants and trim levels
- Safety-callout chrome on family-vehicle pages

## 2. Color Palette & Roles

### Primary
- **Volvo Navy** (`#1f3a5c`): The brand's deep navy — used on primary CTAs and as the secondary accent
- **Pure Black** (`#1a1a1a`): The ink color
- **Pure White** (`#ffffff`): The canvas

### Surface & Background
- **Pure White** (`#ffffff`): Page canvas
- **Surface Soft** (`#f7f7f5`): Slightly warm alternating sections
- **Surface Dark** (`#1a1a1a`): Dark sections (model showcases)
- **Hairline** (`#dadada`): 1px borders

### Neutrals & Text
- **Ink** (`#1a1a1a`): Primary text
- **Body** (`#2e2e2e`): Default body text
- **Muted** (`#707070`): Captions
- **Muted Soft** (`#9d9d9d`): Fine-print

### Cool-Tone Secondary (Nordic accent palette)
- **Fjord Teal** (`#5a8a96`): Used on EV product chrome
- **Twilight Blue** (`#3a5573`): Section accent
- **Fog Gray** (`#a8a8a8`): Soft neutral background tint

### Semantic
- **Success** (`#2e7d32`): Green
- **Warning** (`#d4a017`): Amber
- **Error** (`#b53e3e`): Red error

## 3. Typography Rules

### Font Family
- **Display + Body**: `Volvo Novum, Helvetica Neue, Arial, sans-serif` — proprietary geometric humanist sans

### Hierarchy
- **Hero h1** — 48–64px Volvo Novum weight 500, line-height 1.1
- **Section h2** — 32–40px weight 500
- **Card title** — 20–22px weight 500
- **Body** — 16–18px weight 400, line-height 1.5
- **Caption** — 13–14px weight 400
- **Button label** — 14–16px weight 500

### Principles
- Weight 500 is the workhorse — never 700+. The restraint matches the Scandi positioning
- Display headlines lean on generous size, not heavy weight
- Body sits at 16–18px for considered reading
- Tracking neutral (0)

## 4. Layout & Spacing

The site uses a 12-column grid with a max content width of 1280–1440px. Section padding is 96–120px vertical. Vehicle hero sections use full-bleed cinematic photography.

## 5. Componentry Feel

- **Vehicle hero photography** — Full-bleed cinematic photo of the car in a Nordic environment with the model name overlaid in display sans weight 500
- **Configurator trim picker** — Horizontal row of trim badges (Core, Plus, Ultra) with feature comparison on click
- **Primary CTA (rect)** — Volvo Navy fill or pure black fill, white text, 0–4px radius, 48px height, weight-500 label
- **Secondary CTA** — Transparent fill, 1px navy or black border
- **Model comparison row** — Horizontal row of vehicle thumbnails with name, starting price, primary spec (range, MPG, safety rating)
- **Safety callout band** — Section dedicated to Volvo's safety positioning — IIHS ratings, crash test stills, autonomous-safety feature list

## 6. Voice / Microcopy Do's & Don'ts

**Do.** Use considered safety-and-family language ("Designed around you", "Protecting what matters"). Reference Swedish heritage. Lead with the human, not the machine.

**Don't.** Don't write performance-machine copy (that's BMW/Audi territory). Don't use exclamation points. Don't sanitize the Nordic environmental context.

## 7. Motion Vocabulary

Considered editorial motion. Fade-in reveals on scroll (350ms ease-out). Slow crossfade carousels (1.5s). Configurator changes use a 250ms ease. The brand reads as Scandinavian-deliberate, never kinetic.

## 8. Anti-patterns to Avoid

- **Don't add saturated chromatic accents.** Volvo chrome is monochrome + cool-tone secondary
- **Don't sanitize the Nordic photography environments.** They are the brand atmosphere
- **Don't replace Volvo Novum with Helvetica.** Geometric humanist proportions are signature
- **Don't add kinetic motion.** Volvo reads as deliberate, not fast
- **Don't use heavy display weight (700+).** Volvo's restraint matches the Scandi positioning
- **Don't paint the chrome in saturated tech-blue.** The cool secondary palette is muted, not bright
- **Don't anthropomorphize vehicles.** The brand is human-first, vehicle-second
