Audi UI

# Audi UI — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Audi. "Audi UI" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Audi UI
**Owner:** Audi
**Official documentation:** https://www.audi.com/ci/
**Visual character:** Vorsprung reduction: black, white, warm greys, one precise red, and Audi Type doing all the talking — automotive minimalism as doctrine.

---

## Summary

Premium-automotive design language spanning web, configurator, and in-car.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Black | `#000000` | `--audi-black` | Primary brand, text, and buttons |
| White | `#ffffff` | `--audi-white` | Surfaces |
| Grey 70 | `#4c4c4c` | `--audi-grey-70` | Secondary text |
| Grey 10 | `#e5e5e5` | `--audi-grey-10` | Borders and dividers |
| Grey 5 | `#f2f2f2` | `--audi-grey-5` | Subtle background |
| Progressive Red | `#f50537` | `--audi-red` | The single Audi accent — alerts and brand moments |

## Typography

- **Body:** Audi Type — weights 400, 700 — `'AudiType', 'AudiTypeVar', Verdana, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| order-1 | `48px` | `58px` |
| order-2 | `36px` | `44px` |
| order-3 | `24px` | `30px` |
| copy-1 | `16px` | `24px` |
| copy-2 | `14px` | `20px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `16px` · `24px` · `40px` · `64px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `0` |

## Quick start (CSS)

```css
/* Audi UI — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://www.audi.com/ci/ */

:root {
  /* Color */
  --audi-black: #000000; /* Primary brand, text, and buttons */
  --audi-white: #ffffff; /* Surfaces */
  --audi-grey-70: #4c4c4c; /* Secondary text */
  --audi-grey-10: #e5e5e5; /* Borders and dividers */
  --audi-grey-5: #f2f2f2; /* Subtle background */
  --audi-red: #f50537; /* The single Audi accent — alerts and brand moments */

  /* Typography */
  --font-body: 'AudiType', 'AudiTypeVar', Verdana, sans-serif;

  /* Type scale */
  --text-order-1: 48px /* line-height 58px */;
  --text-order-2: 36px /* line-height 44px */;
  --text-order-3: 24px /* line-height 30px */;
  --text-copy-1: 16px /* line-height 24px */;
  --text-copy-2: 14px /* line-height 20px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;

  /* Radius */
  --radius-default: 0;
}
```

## Origin

Audi UI has roots in the Audi Corporate Identity programs and has matured into a system covering Audi.com, the vehicle configurator, the myAudi customer portal, and the in-vehicle MMI surfaces. The current public guidance is part of the broader Audi CI portal and represents one of the few automotive design systems with serious public documentation.

## Governance

Audi's central brand and digital design teams maintain the system; component implementations are internal and shared with agency partners under license. Updates ride the longer cadence of automotive product cycles, not SaaS release rhythms.

## Known for

- Premium-restraint visual language — wide negative space, monochrome with red accent, type as architecture.
- Vehicle configurator patterns — option pickers, conflict resolution between trims, and price breakdown surfaces — are unusually rigorous.
- Cross-surface coherence between marketing web, transactional flows (build & price), and in-car HMI.

## Underrated

- The AudiType typeface family is a load-bearing brand asset with weight ramps tuned for both editorial spreads and dense data tables.
- The system's accessibility guidance addresses in-vehicle constraints (driver attention, glance time) that pure-web design systems never confront.

## Watch out for

- Patterns assume luxury-automotive context — long consideration cycles, high price points, premium photography. They don't translate to mass-market commerce.
- Public guidance is presentational; the production component code is not open. Adopting Audi UI means rebuilding to spec.

## Components worth studying

- **Vehicle Configurator** — Stepwise option picker with live render, conflict resolution between trims, and persistent price summary.
- **Media Stage** — Full-bleed photography or video hero with overlaid restrained typography and subtle scroll-triggered transitions.
- **Specification Table** — Dense comparative data table for technical specs, with locale-aware unit handling and grouped rows.

## When to choose Audi UI

Study Audi UI if you're working in automotive, premium goods, or any product whose entire job is communicating restraint and quality. Don't apply it to dense SaaS tools — its patterns assume editorial breathing room.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Audi UI by Audi — Premium-automotive design language spanning web, configurator, and in-car. Character: Vorsprung reduction: black, white, warm greys, one precise red, and Audi Type doing all the talking — automotive minimalism as doctrine. Use a primary colour near #000000, the typeface "Audi Type" (or a close equivalent), corner radius around 0, a spacing rhythm on a 4px base. Lean into what it's known for: Premium-restraint visual language — wide negative space, monochrome with red accent, type as architecture. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [Audi CI portal](https://www.audi.com/ci/)
- [Audi.com](https://www.audi.com/)
- [AudiType (typography)](https://www.audi.com/ci/en/guides/typography.html)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/audi-ui) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._