What is Audi's primary brand color?

Audi's international corporate surface does not commit to a saturated chromatic voltage the way BMW commits to Corporate Blue #1c69d4 or Ferrari commits to Rosso Corsa. The extracted palette is monochrome — a near-black #181d25 canvas, white #fcfcfd type on every captured role, and a small ladder of cool grays (#020203, #101319, #2c343f, #657081) for backdrops, dividers, and shadow tones. Hyperlink anchors fall back to the unstyled browser-default #0000ee. The four-ring wordmark and full-bleed model photography carry every brand moment; the brand voltage is the photograph, not a hex code.

What typography does Audi use, and what should I use if AudiType isn't available?

Audi runs AudiType as the licensed single sans family across every text role — h1 hero, h2 section headline, h3 sub-section, h4 lead, body, nav link, caption, footer. The CSS declares it as `AudiType, sans-serif` with no further fallback. Every captured size renders at weight 400 — display does not promote to 500 or 700 the way it does in BMW's 700/300 ladder or Mercedes' medium-weight Daimler-Sans. Letter-spacing is held at `normal` across the entire scale. Substitutes: Inter at weight 400 with `tracking: 0` is the closest open-source approximation; the Audi corporate font program licenses AudiType through Monotype, and Arial sits in the OS-fallback lane.

Why does Audi use only two corner radii?

Of 35 captured corner-radius values, 18 are 999px (pill — CTAs, badges, chips) and 16 are 20px (photo tiles, mosaic cards, locator card); 10px appears exactly once. The binary radius vocabulary is the corporate dialect: pill for anything interactive, 20px-soft for any photographic surface, sharp 0px for typographic bands. Where Porsche softens to a dominant 32px on every photo tile and BMW corporate squares off at 0px on every interactive surface, Audi sits between — pill on actions, 20px on photos, nothing in the middle. Mid-step values like 4px / 8px / 12px / 16px that fill out Stripe's or Linear's radius scale are absent from the captured set.

What is Audi's spacing system and why does the `--spacing-relative-*` ladder matter?

Audi declares its spacing as a fixed-pixel ladder on `:root` — `--spacing-relative-2xs` 4px, `--spacing-relative-xs` 8px, `--spacing-relative-sm` 12px, `--spacing-relative-md` 16px, `--spacing-relative-lg` 24px, `--spacing-relative-xl` 32px, `--spacing-relative-2xl` 56px, `--spacing-relative-3xl` 72px, `--spacing-relative-4xl` 88px, `--spacing-relative-5xl` 104px, `--spacing-relative-6xl` 120px, `--spacing-relative-7xl` 160px, `--spacing-relative-8xl` 216px — paired with `--page-margin: 96px` and `--page-width: 1440px` inside a `--max-content-width: 1920px` shell. The token name reads `relative`, but the values are absolute. Where Porsche interpolates with `clamp()`, Audi steps. The 96px page margin and 88-160px section rhythm are the editorial pacing signature.

Can I use this DESIGN.md to build a React car-configurator or marketing surface?

Yes — the file is built to be fed into Claude, Cursor, or any AI coding tool that reads structured design tokens. The agent will reproduce Audi's restraint — AudiType at 400, near-black canvas with white type, 999px pill CTAs, 20px softened photo tiles, the 96px page margin, the four-ring wordmark left of a horizontal menu — rather than a generic dark-luxury template. You can paste the tokens directly into Tailwind config (the `--spacing-relative-*` custom property names map one-to-one), or use the spec as an audit lens. The 18 components cover most of what a corporate-auto marketing surface needs: top nav, dark hero band, photo tile, mosaic-grid tile, locator card, pill CTA, text input, and footer.

What's missing from this DESIGN.md spec?

Several things, documented in the Known Gaps section. The extractor captured 9 base colors on the international landing page — Audi's full configurator surface (paint pickers, interior swatches, wheel options, S/RS-line accents) holds dozens of model-specific tokens not visible on the corporate marketing surface. AudiType is a licensed typeface from Monotype; Inter at weight 400 is the documented fallback. The system supports both light and dark contexts via the four-ring wordmark's color-swap, but only the dark landing-page state was captured. Animation easing tokens are not extracted. Form validation states beyond the captured text-input baseline, the my Audi account surface, the regional micro-sites (Audi USA, Audi UK), and the in-product configurator are out of scope.

Audi Design System

Audi's corporate design system as a DESIGN.md file.

About Audi DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source audi.com

Automotive

Audi's corporate surface is the inverse of Porsche's. Where Stuttgart runs a near-pure white canvas with deep-black display type and 32px softened photo tiles, Ingolstadt inverts to a near-black #181d25 backdrop holding white "#fcfcfd" type on every captured role — h1 hero, h2 section headline, body paragraph, nav link, footer caption. AudiType is the licensed single sans family, declared in CSS as `AudiType, sans-serif`, and it runs at weight 400 across an 8-step ladder from 12px caption through 40px h1. The four-ring wordmark and full-bleed cinema photography handle the brand voltage — the extracted palette holds no saturated accent, no chromatic CTA fill, no inline link color overridden from the browser default.

This page packages the system into a single DESIGN.md file using the Google Labs open spec. Inside: 18 color tokens grouped into canvas, ink-on-dark, hairline, shadow, and inverted-surface roles; 9 typography tokens at AudiType weight 400 spanning the captured 12px-through-40px ladder; 4 corner-radius values dominated by a 999px pill (18 of 35 captures) and a 20px photo tile (16 of 35); 9 spacing tokens on Audi's fixed `--spacing-relative-*` ladder anchored at a 96px `--page-margin` and a 1440px `--page-width`; and 18 components covering the dark top nav, pill CTA, 20px photo tile, mosaic editorial grid, locator card, and the inverted-on-dark footer pattern.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent writes React surfaces that read as Audi corporate — AudiType at 400 over a #181d25 canvas, 999px pill CTAs, 20px photo tiles, the four-ring wordmark left of a horizontal menu — rather than a generic dark-luxury template. Reference the `{token.refs}` directly in Tailwind config, or use the spec as an audit lens: most luxury-auto sites copy the dark-canvas move but miss the binary 999/20 radius vocabulary and the held-at-400 typographic restraint that distinguishes Audi from Mercedes' Daimler-Sans medium-weight ladder and BMW's 700/300 split.

What makes it distinct

Held-at-400 type ladderAudiType carries every captured role from 12px caption to 40px h1 at a single weight; the four-ring wordmark stands in for typographic muscle
Binary radius vocabularyevery interactive surface is either 999px pill (CTAs, chips, 18 of 35 captured shapes) or 20px softened photo tile (16 of 35); 10px shows up exactly once
Dark-canvas inversion#181d25 backdrop with #fcfcfd type on every captured role; where BMW corporate runs cream-white and Porsche runs near-pure white, Audi inverts to near-black
Photography-driven chromatic depththe extracted palette holds no brand accent; the page renders zero saturated hex codes, leaving model renders to carry every color moment
1440px page width on a 1920px max-content shell`--page-margin` at 96px, `--spacing-relative-7xl` at 160px, the ladder breathes in fixed pixel steps rather than fluid clamp()

Live at audi.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

audi.com

Explore Audi

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Audi design system FAQ

Common questions about Audi's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Audi.com — the international Audi website

The live corporate site — see the dark-canvas hero, AudiType, 999px pill CTAs, and 20px photo tiles in production.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Audi in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→