Audi · Design system breakdown
Premium-automotive design language spanning web, configurator, and in-car.
A community-authored style reference in Markdown — colors, type, spacing, and an AI-ready prompt. Unofficial; not affiliated with Audi.
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.
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.
| Token | Value | Role |
|---|---|---|
| color-brand-red | #bb0a30 | Audi red, brand mark and accent |
| color-text-primary | #000000 | Default body text on light |
| color-bg-page | #ffffff | Default page surface |
| color-bg-dark | #000000 | Premium dark surfaces, in-car HMI |
| font-family-display | AudiType Wide, sans-serif | Editorial display typography |
| spacing-grid | 8px | Base spacing step on 8-point grid |
Token names and values are illustrative — refer to the system's official tokens reference for the canonical, current set.
If you're evaluating this system
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.
