---
version: alpha
name: Audi
description: Vorsprung durch Technik made digital — a near-black #181d25 canvas with #fcfcfd type, AudiType at a single weightless 400, pill-shaped CTAs against 20px softened photo tiles, and Progressive Red held back as a rare interactive spark while model photography carries every other color moment.

colors:
  # Canvas — Audi inverts to near-black where BMW runs cream and Porsche runs white
  background: "#181d25"
  surface: "#181d25"
  surface-card: "#1f242d"      # Lifted dark tile / card container — slight elevation off the canvas
  surface-inverted: "#ffffff"  # Inverted light surface — content blocks that flip to white

  # Ink — a single near-white reads on every dark role
  ink: "#fcfcfd"
  ink-secondary: "#a5acb8"     # Subdued labels, meta, captions on dark
  ink-muted: "#6b7280"         # Disabled / placeholder text
  ink-inverted: "#181d25"      # Dark ink on the inverted white surface
  on-background: "#fcfcfd"
  on-surface: "#fcfcfd"
  on-primary: "#ffffff"
  on-inverted: "#181d25"

  # Brand accent — Progressive Red, Audi's signature, used as a rare spark not a fill
  primary: "#f50537"           # Progressive Red — Pantone 032 C, RGB 245/5/55
  primary-hover: "#d10430"     # Darkened red on hover
  primary-pressed: "#b00328"   # Deepest red on press

  # Borders — faint hairlines in a near-borderless dark system
  border: "#2c323c"            # Hairline divider on dark canvas
  border-strong: "#3a4150"     # Heavier outline — secondary/ghost button stroke
  border-inverted: "#e4e6ea"   # Hairline on the inverted white surface

  # Shadow tint — depth comes from photography, shadows are barely present
  shadow-soft: "#000000"       # opaque approx of rgba(0,0,0,0.4) tile shadow — Google format requires hex

typography:
  display-hero:
    fontFamily: "AudiType, Audi Type, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.5px
  display:
    fontFamily: "AudiType, Audi Type, Helvetica Neue, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "AudiType, Audi Type, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "AudiType, Audi Type, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "AudiType, Audi Type, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "AudiType, Audi Type, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "AudiType, Audi Type, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  button-ui:
    fontFamily: "AudiType, Audi Type, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.25px
  caption:
    fontFamily: "AudiType, Audi Type, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  label-meta:
    fontFamily: "AudiType, Audi Type, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.25px

spacing:
  # Fixed --spacing-relative-* ladder, anchored at a 96px page margin. No fluid clamp().
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px       # --page-margin
  5xl: 160px      # --spacing-relative-7xl

rounded:
  # Binary radius system: pill for interactive, 20px for photo tiles, 10px a rare exception
  none: 0px
  sm: 10px        # Rare — appears once, small inline chips
  lg: 20px        # Softened photo / content tile
  pill: 9999px    # CTAs, chips, toggles — the dominant interactive shape

components:
  # Top navigation — transparent over the dark canvas
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 20px 96px

  nav-link:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  nav-link-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  # Primary CTA — white pill on dark, the workhorse action
  button-primary:
    backgroundColor: "{colors.surface-inverted}"
    textColor: "{colors.ink-inverted}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.border-inverted}"
    textColor: "{colors.ink-inverted}"

  # Accent CTA — Progressive Red pill, used sparingly for the single hero action
  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-accent-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-accent-active:
    backgroundColor: "{colors.primary-pressed}"
    textColor: "{colors.on-primary}"

  # Ghost / secondary — outlined pill on the dark canvas
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-ghost-hover:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"

  # Photo tile — the 20px softened content card carrying model imagery
  photo-tile:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px

  # Standard card on dark canvas
  card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px

  # Inverted card — flips to white surface for editorial blocks
  card-inverted:
    backgroundColor: "{colors.surface-inverted}"
    textColor: "{colors.ink-inverted}"
    rounded: "{rounded.lg}"
    padding: 32px

  # Chip — pill tag for filters / categories
  chip:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.label-meta}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
  chip-active:
    backgroundColor: "{colors.surface-inverted}"
    textColor: "{colors.ink-inverted}"

  # Form input on dark
  input:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 14px 16px
  input-focus:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"

  # Badge — Progressive Red marker for "new" / status
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-meta}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  # Hero section — full-bleed dark with model photography
  hero-section:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    typography: "{typography.display-hero}"
    rounded: "{rounded.none}"
    padding: 96px 96px

  # Meta info text block
  meta-block:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 8px 0
---

# Audi Design System

## Overview

Audi's digital design is the brand's tagline rendered in pixels — Vorsprung durch Technik, advancement through technology, expressed as restraint rather than decoration. Where BMW alternates dark photography with cream content sections and Porsche commits to pure black, Audi inverts to a near-black `{colors.background}` — a deep blue-tinted charcoal that reads as engineered rather than dramatic. Against it, a single near-white `{colors.ink}` does all the talking. The result is a cockpit-grade interface: calm, precise, and confident enough to leave most of the canvas dark and empty.

The typography is built entirely on AudiType, the proprietary typeface Paul van der Laan and Pieter van Rosmalen drew for the brand in 2015 to replace Audi Sans. It runs at a single weightless weight 400 across the whole scale — from a 40px display down to 12px meta labels — clean geometric letterforms with subtle humanist softening that hold up at billboard scale and screen size alike. There is no bold, no light, no weight contrast to lean on; hierarchy comes from size and space, never from heaviness. This is typography as engineering tolerance — one part, machined to fit every job.

What makes Audi distinctive is its discipline with color. The chrome carries no saturated brand color at all — Progressive Red (`{colors.primary}`, Pantone 032 C) is held in reserve, deployed as a rare spark on a single hero CTA or a status badge, never as a fill or a background. The actual color in the experience comes from model photography: cars lit against the dark canvas, the way a vehicle sits under showroom spots. The shape language is equally binary — interactive elements are 999px pills (`{rounded.pill}`), content imagery sits in 20px softened tiles (`{rounded.lg}`), and almost nothing else has a radius. A fixed 96px page margin (`{spacing.4xl}`) and 1440px page width frame everything in generous, deliberate whitespace.

**Key Characteristics:**
- Near-black `{colors.background}` (#181d25) canvas — Audi inverts where BMW and Porsche stay light
- AudiType at a single weight 400 across the entire scale — hierarchy from size, never weight
- Progressive Red (`{colors.primary}`) held back as a rare interactive spark — never a fill or surface
- Model photography carries every color moment — the chrome itself is colorless
- Binary radius: 999px pills (`{rounded.pill}`) for interactive, 20px (`{rounded.lg}`) for photo tiles
- Pill-shaped CTAs as the dominant action shape — white pill default, red pill for the single hero action
- Fixed 96px page margin (`{spacing.4xl}`) and 1440px page width — generous, machined whitespace
- Single near-white ink (`{colors.ink}`) on every dark role — calm, high-clarity contrast
- Relaxed 1.5 body line-height — readable, unhurried, premium pacing
- A faint hairline border system (`{colors.border}`) in an otherwise borderless dark surface

## Colors

### Canvas
- **Audi Near-Black** (`{colors.background}`): The dominant canvas (#181d25) — a deep blue-tinted charcoal, used as the full-page backdrop and surface.
- **Lifted Tile** (`{colors.surface-card}`): A slightly raised dark surface for cards and photo tiles, lifting them just off the canvas.
- **Inverted White** (`{colors.surface-inverted}`): The flip-to-light surface for editorial content blocks that break from the dark scheme.

### Ink
- **Audi White** (`{colors.ink}`): The single near-white (#fcfcfd) used for all primary text on dark — headlines, body, labels.
- **Secondary Ink** (`{colors.ink-secondary}`): Subdued gray for meta, captions, and inactive nav links.
- **Muted Ink** (`{colors.ink-muted}`): Disabled and placeholder text.
- **Inverted Ink** (`{colors.ink-inverted}`): Dark text on the inverted white surface.

### Brand Accent
- **Progressive Red** (`{colors.primary}`): Audi's signature accent (#f50537, Pantone 032 C). Used as a rare spark — a single hero CTA, a status badge — never as a background or large fill.
- **Red Hover / Pressed** (`{colors.primary-hover}`, `{colors.primary-pressed}`): Darkened states for interaction feedback on red actions.

### Borders
- **Hairline** (`{colors.border}`): Faint divider on the dark canvas.
- **Strong Outline** (`{colors.border-strong}`): Heavier stroke for ghost / secondary buttons.
- **Inverted Hairline** (`{colors.border-inverted}`): Divider on the white surface.

### Shadows
- **Shadow Tint** (`{colors.shadow-soft}`): Barely-present black tile shadow (flattened from `rgba(0,0,0,0.4)`). Depth comes from photography, not box-shadows.

## Typography

### Font Family
- **Primary**: `AudiType` (proprietary), with fallbacks: `Audi Type, Helvetica Neue, Arial, sans-serif`
- AudiType ships at a single working weight (400) across the brand's digital surfaces — there is no bold/light pairing in the chrome.

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Reference those tokens directly rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | 40px hero headline — the largest type on the page |
| `display` | 32px major display headings |
| `heading-section` | 28px section titles |
| `heading-sub` | 22px subheadings |
| `body-large` | 18px lead paragraphs |
| `body` | 16px standard body text |
| `nav-link` | 15px navigation items |
| `button-ui` | 15px CTA labels — slight 0.25px tracking |
| `caption` | 13px captions and fine print |
| `label-meta` | 12px meta labels, badges, chips |

### Principles
- **One weight, total reliance on scale**: AudiType weight 400 carries everything from 40px display to 12px meta. Hierarchy is built from size and whitespace, never from weight contrast — the opposite of BMW's 300-vs-900 tension.
- **Tightened display, relaxed body**: Display tokens pull negative tracking (`-0.5px` to `-0.25px`) for a precise, machined headline; body runs an unhurried 1.5 line-height for premium readability.
- **Geometric with a humanist touch**: AudiType's clean geometry signals engineering; its subtle softening keeps it from feeling cold.
- **Single typeface, every scale**: One family handles billboard and screen — unity through restraint.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. The system runs a fixed `--spacing-relative-*` ladder in pixel steps — no fluid `clamp()`. Base unit is 8px, climbing to a `{spacing.4xl}` 96px page margin and a `{spacing.5xl}` 160px section gap.

Whitespace is the luxury material here. The dark canvas is left deliberately empty, and the 96px page margin frames content with showroom-grade breathing room.

### Grid & Container
- Max content width: 1440px (`--page-width`)
- Page margin: 96px (`--page-margin`, `{spacing.4xl}`)
- Content sits in a centered grid framed by generous side margins
- Photo tiles arrange in flexible multi-column grids

### Whitespace Philosophy
- **Empty as engineered**: The dark canvas is mostly negative space — restraint signals confidence.
- **Fixed, not fluid**: Spacing steps in deliberate pixel increments rather than scaling continuously, giving every breakpoint a precise, intentional feel.
- **Generous margins**: The 96px page margin is non-negotiable — content never crowds the edge.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Photography (Level 0) | Full-bleed model imagery on dark canvas | Hero backgrounds |
| Flat (Level 1) | `{colors.background}` canvas, no shadow | Page surface |
| Tile (Level 2) | `{colors.surface-card}` lifted surface, faint `{colors.shadow-soft}` | Photo tiles, cards |
| Inverted (Level 3) | `{colors.surface-inverted}` white block | Editorial content breaks |
| Focus (Accessibility) | `{colors.primary}` outline | Focus states |

**Shadow Philosophy**: Audi uses almost no box-shadows. Depth is created by lifting tiles slightly with `{colors.surface-card}` against the near-black canvas and, above all, by full-bleed model photography. The lighting in the imagery does the elevation work — the UI itself stays flat and engineered.

## Shapes

The complete radius scale is in the `rounded:` token block above. Audi runs a near-binary system.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed sections, nav, hero |
| `sm` | 10px | Rare exception — appears once, small inline chips |
| `lg` | 20px | Softened photo / content tiles |
| `pill` | 9999px | CTAs, chips, toggles — the dominant interactive shape |

The shape language is intentional and tight: if it is interactive, it is a 999px pill; if it holds imagery, it is a 20px tile. The 10px radius is a near-vestigial exception. There is no mid-range radius drift.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them.

### Button variants
- **`button-primary`** — White pill (`{rounded.pill}`) with dark text, the everyday action. Hover lifts to a soft off-white.
- **`button-accent`** — Progressive Red pill, reserved for the single most important action on a view. Hover and active darken the red.
- **`button-ghost`** — Outlined pill on the dark canvas, secondary actions. Hover fills with the lifted tile color.

### Cards
- **`photo-tile`** — The 20px (`{rounded.lg}`) lifted tile carrying model imagery, the signature content unit.
- **`card`** — Standard 20px dark card on the canvas.
- **`card-inverted`** — Flips to a white surface for editorial blocks.

### Inputs
- **`input`** — Dark lifted surface, 10px radius (`{rounded.sm}`), near-white text. Focus keeps the surface and signals via outline.

### Badges / Chips
- **`badge`** — Progressive Red pill marker for "new" / status.
- **`chip`** — Pill filter tag; `chip-active` flips to a white fill with dark text.

### Navigation
- **`nav-bar`** — Transparent over the dark canvas, AudiType 15px links in secondary ink that brighten to full white on hover. Framed by the 96px page margin.

## Do's and Don'ts

### Do
- Build on the near-black `{colors.background}` (#181d25) canvas — the dark inversion is the Audi signature
- Set all type in AudiType at weight 400 — let size and space create hierarchy
- Reserve Progressive Red (`{colors.primary}`) for a single hero CTA or a status badge — keep it rare
- Make every interactive element a 999px pill (`{rounded.pill}`)
- Put imagery in 20px softened tiles (`{rounded.lg}`)
- Hold the 96px page margin (`{spacing.4xl}`) and 1440px max width
- Let model photography carry the color — keep the chrome colorless
- Use relaxed 1.5 line-height for body, tightened tracking for display

### Don't
- Don't switch to a light canvas — Audi inverts where competitors stay light
- Don't use Progressive Red as a background or large fill — it's a spark, not a surface
- Don't introduce bold or light AudiType weights — the system is single-weight 400
- Don't use mid-range radii — the system is pill / 20px tile, nothing in between (the lone 10px is an exception, not a tier)
- Don't crowd the edges — the 96px margin is non-negotiable
- Don't add decorative color to the chrome — the photography does all the emoting
- Don't lean on shadows for depth — lift tiles with `{colors.surface-card}` and let imagery do the work

---

## Responsive Behavior

*(Preserved from the original corpus's 9-section format — Google's parser keeps unknown sections.)*

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <480px | Single column, page margin collapses toward 16–24px |
| Mobile Large | 480–768px | Single column, slightly wider margins |
| Tablet | 768–1024px | 2-column tile grids begin |
| Desktop | 1024–1440px | Full multi-column layout, page margin grows toward 96px |
| Large Desktop | >1440px | Capped at 1440px page width, margins center the content |

### Touch Targets
- Pill CTAs maintain a comfortable height (~48px) for touch; chips stay tappable at min 44px.

### Collapsing Strategy
- Hero: 40px display scales down, dark canvas and full-bleed photography maintained
- Navigation: horizontal links collapse to a menu
- Photo tiles: multi-column grid stacks to a single column
- Page margin: 96px shrinks proportionally on smaller viewports

### Image Behavior
- Model photography stays full-bleed or fills its 20px tile edge-to-edge at every size
- Imagery is the priority content — it never crops to a thumbnail on mobile

---

## Agent Prompt Guide

*(Preserved from the original corpus's 9-section format — the copy-paste payload section.)*

### Quick Color Reference
- Background: Audi Near-Black (`{colors.background}`)
- Text: Audi White (`{colors.ink}`)
- Secondary text: Secondary Ink (`{colors.ink-secondary}`)
- Brand accent: Progressive Red (`{colors.primary}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA: White pill (`{colors.surface-inverted}` fill, `{colors.ink-inverted}` text)

### Example Component Prompts

- "Create an Audi hero: full-bleed model photography over a near-black `{colors.background}` canvas. Headline in AudiType 40px weight 400, `-0.5px` tracking, `{colors.ink}` white. Place a single white pill CTA (`{rounded.pill}`, `{colors.surface-inverted}` fill, dark text) and, if a second action is needed, a ghost outlined pill. 96px page margin."
- "Build an Audi photo tile: 20px radius (`{rounded.lg}`), `{colors.surface-card}` lifted surface, model image filling the top, AudiType 22px weight 400 heading and 16px body in `{colors.ink}` below. Barely-there shadow."
- "Design an Audi primary button: 999px pill (`{rounded.pill}`), `{colors.surface-inverted}` white fill, `{colors.ink-inverted}` dark text, AudiType 15px weight 400 with 0.25px tracking, 14px/28px padding. Hover to soft off-white."
- "Design the rare Audi accent button: Progressive Red pill (`{colors.primary}`), white text, same pill shape and padding. Use it once per view for the most important action; hover darkens to `{colors.primary-hover}`."
- "Create Audi navigation: transparent bar over the dark canvas, AudiType 15px weight 400 links in `{colors.ink-secondary}` that brighten to `{colors.ink}` on hover. Frame with the 96px page margin."
- "Build an Audi filter chip row: pill chips (`{rounded.pill}`) in `{colors.surface-card}` with `{colors.ink}` text; active chip flips to a white fill (`{colors.surface-inverted}`) with dark text."

### Iteration Guide

1. Start with the near-black `{colors.background}` canvas and generous emptiness — restraint first.
2. Set everything in AudiType weight 400; build hierarchy from size and the 96px margin, not weight.
3. Make every interactive element a 999px pill (`{rounded.pill}`); put imagery in 20px tiles (`{rounded.lg}`).
4. Add Progressive Red (`{colors.primary}`) last, and only once — a single hero CTA or status badge.
5. Let model photography carry all the color; keep the chrome colorless white-on-dark.
6. Skip shadows — lift tiles with `{colors.surface-card}` and let imagery create depth.
7. Hold the 1440px page width and 96px margin at desktop; collapse proportionally below.

---

## 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 Audi. Brand names and trademarks belong to their respective owners.