Audi Design System

Overview

Audi's international corporate surface is the inverse of Porsche's. Where Stuttgart runs a near-pure white canvas with deep-black display type and softens every photo tile to 32px, Ingolstadt inverts the canvas to a near-black {colors.canvas} (#181d25) holding white {colors.on-canvas} ("#fcfcfd") on every captured text role — hero h1, h2 section headline, body paragraph, nav link, footer caption. AudiType is the licensed single sans family, and it carries every role at weight 400 from 12px caption through 40px h1.

Held-at-400: where BMW corporate runs a 700/300 weight split and Mercedes leans on Daimler-Sans medium weight, Audi holds every captured role — 40px h1, 32px h2, 24px h3, 18px body, 14px nav, 12px caption — at weight 400 with letter-spacing pinned at normal. The four-ring wordmark and full-bleed cinema photography stand in for typographic muscle. Display headlines do not bold; nav items do not promote weight on hover; the discipline reads as engineered restraint.

Binary radius vocabulary: of 35 captured corner-radius values, 18 are 999px pill ({rounded.full} — CTAs, badges, chips) and 16 are 20px ({rounded.lg} — photo tiles, mosaic cards, locator card). A 10px outlier shows up exactly once. Mid-step values like 4px / 8px / 12px / 16px that fill out a typical SaaS radius scale are absent — Audi runs pill on actions, 20px on photographic surfaces, sharp 0px on typographic bands, and nothing in between.

Key Characteristics:

• Single typeface: AudiType at weight 400 across every captured text role.
• Near-black canvas ({colors.canvas} — "#181d25") with white type ({colors.on-canvas} — "#fcfcfd") on every role.
• Binary radius — 999px pill ({rounded.full}) on CTAs, 20px ({rounded.lg}) on photo tiles.
• Fixed --spacing-relative-* ladder — 4px through 216px in 13 steps, no clamp().
• 96px --page-margin inside a 1440px --page-width on a 1920px --max-content-width shell.
• No saturated brand voltage in the extracted palette — photography carries every chromatic moment.
• Letter-spacing held at normal across the entire scale.

Colors

Canvas & Surface

• Audi Near-Black ({colors.canvas} — "#181d25") — frequency 11. Used as bg (11). The dominant canvas across the hero band, section bodies, and footer — not pure black, slight cool tilt.
• Canvas Soft ({colors.canvas-soft} — "#2c343f") — frequency 10. Used as border (4), shadow (6). A lighter slate that surfaces on shadow tones and elevated card backdrops on the dark canvas.
• Canvas Strong ({colors.canvas-strong} — "#020203") — frequency 7. Used as bg (7). A near-pure black that anchors the deepest mosaic tiles and the lowest cinema band.
• Canvas Deepest ({colors.canvas-deepest} — "#101319") — frequency 1. Used as bg (1). The single occurrence of an even-deeper grade for the editorial mosaic.

Text on Dark

• On Canvas ({colors.on-canvas} — "#fcfcfd") — frequency 421. Used as text (213), border (208). The dominant text color across every captured role — h1, h2, body, nav, footer. Not pure white; near-white with a faint cool tilt.
• On Canvas Soft ({colors.on-canvas-soft} — "#657081") — frequency 7. Used as bg (7). A desaturated slate-blue that paints the primary CTA fill before the white-on-hover inversion.
• Pure Ink ({colors.ink} — "#000000") — frequency 419. Used as text (204), border (204), gradient (11). Sourced from the document base style; surfaces on third-party widget chrome and as the gradient termination on cinema photography.

Hairlines & Borders

• Hairline ({colors.hairline} — "#fcfcfd") — same hex cluster as on-canvas. 1px white divider on the dark canvas, also paints every captured border ring on pill CTAs and chips.
• Hairline Soft ({colors.hairline-soft} — "#657081") — same hex cluster as on-canvas-soft. Lower-contrast hairline reserved for form-input rest state.

Shadow & Glow

• Shadow Tint ({colors.shadow-tint} — "#2c343f") — frequency 6 as shadow. The blue-slate shadow color that echoes the brand canvas; shadows add atmosphere on the dark surface rather than depth.
• Shadow Glow ({colors.shadow-glow} — "#dbdfe6") — frequency 1 as shadow. A rare near-white shadow used as a soft highlight glow beneath photo tiles.

Semantic

• Link Default ({colors.link-default} — "#0000ee") — frequency 226. Used as text (113), border (113). The unstyled browser-default hyperlink blue — Audi does not override anchor color on the captured landing surface, leaving the user-agent default in place.
• On Pill ({colors.on-pill} — "#fcfcfd") — pill CTA text on rest state.
• On Pill Inverted ({colors.on-pill-inverted} — "#181d25") — pill CTA text on hover when the fill flips white.
• Border on Dark ({colors.border-on-dark} — "#fcfcfd") — same hex cluster as on-canvas. The 1px white ring on every captured pill CTA, chip, and secondary button.

Typography

Font Family

AudiType is the licensed single sans family across every text role. The CSS declaration is AudiType, sans-serif with no further fallback chain. There is no display/body family split — the four-ring wordmark sits in for any custom display moment.

Hierarchy

Principles

• Every weight is 400. Display does not promote to 500 or 700 the way BMW corporate runs 700-display; emphasis comes from size and the four-ring wordmark rather than weight.
• Letter-spacing is normal everywhere. No tracking on display, no uppercase tracking on CTAs or nav. The system rejects the typographic-muscle move that BMW M and Bugatti use.
• Fixed-pixel ladder. AudiType steps in pixel values rather than fluid clamp() — --spacing-relative-* lives on :root as absolute pixels, not viewport-relative units.

Note on Font Substitutes

AudiType is licensed to Audi AG through Monotype's corporate font program. Inter at weight 400 with tracking: 0 is the closest open-source approximation; Arial at weight 400 is the OS-level fallback.

Layout

Spacing System

• Base unit: the brand uses an 8px base rhythm — --spacing-relative-xs 8px, --spacing-relative-md 16px, --spacing-relative-xl 32px.
• Tokens: {spacing.2xs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 56px · {spacing.3xl} 72px · {spacing.page-margin} 96px.
• Section padding: 32px vertical / 96px horizontal is the captured dominant band rhythm (extracted as 32px 96px and 0px 96px 32px).

Grid & Container

• --page-width: 1440px inside --max-content-width: 1920px — the content shell breathes from 1440 to 1920 on wide displays.
• --page-margin: 96px — the gutter between the page width and the viewport edge.
• Hero photography goes full-bleed; model grid runs 2-up at desktop on 20px-radius photo tiles.

Whitespace Philosophy

Editorial pacing on a fixed ladder. The cinema hero owns the top viewport, then the editorial mosaic runs photo tiles at 20px radius with 12-24px gaps. The 96px page margin and 32-160px section rhythm anchor the corporate cadence — where Porsche interpolates with clamp(), Audi steps in --spacing-relative-* pixels.

Elevation & Depth

The system uses photographic depth + canvas grade elevation. Drop shadows surface only as 0px 0px 2px, 0px 0px 8px, and 0px 0px 12px cool-slate {colors.shadow-tint} glows (extracted at frequencies 13, 6, and 12) — soft halos beneath photo tiles rather than directional shadows.

Decorative Depth

• Full-bleed model photography is the brand's primary depth treatment — every model tile is a photograph framed at a 20px radius rather than a flat fill.
• White 1px ring on dark — pill CTAs and chips ride a 1px {colors.border-on-dark} ring on the near-black canvas; the ring is the visual weight, not a fill.

Shapes

Border Radius Scale

The radius vocabulary is binary by default. Of 35 captured shapes, 18 land at 999px pill and 16 at 20px softened photo tile. The single 10px outlier sits on a form input. Mid-step values like 4px / 8px / 12px / 16px that fill out a typical SaaS radius scale are absent — Audi commits to pill or 20px, nothing in between.

Components

Top Navigation

top-nav — Dark-canvas top nav, 64px tall, padded 0px × 96px (the page margin). Layout: four-ring wordmark left, primary horizontal menu (Company / Investor Relations / Innovation / Sustainability / Careers) center, search + locale right. Nav links render in {typography.nav-link} (14px / 400) — white text on the near-black canvas, never uppercase-tracked.

nav-link — Transparent background, text {colors.on-canvas}, typography {typography.nav-link}, padded 0px × 16px.

Hero Bands

hero-band-cinema — Full-bleed near-black cinema band. Background {colors.canvas} ("#181d25") holds the model photograph (Audi RS 5 in the captured surface); display h1 in {typography.display-xl} (40px / 400) renders white. Zero padding — photograph fills edge-to-edge.

hero-headline — Transparent overlay headline. Text {colors.on-canvas} ("#fcfcfd"), typography {typography.display-xl}.

section-headline — h2 below the cinema band. Background transparent, text {colors.on-canvas}, typography {typography.display-lg} (32px / 400), padded 32px top, 96px sides.

sub-headline — h3 for editorial mosaic tiles. Background transparent, text {colors.on-canvas}, typography {typography.display-md} (24px / 400).

body-paragraph — Lead body. Background transparent, text {colors.on-canvas}, typography {typography.body-lg} (18px / 400 / 1.555).

Tiles & Cards

photo-tile — The brand's signature photographic surface. {colors.canvas-soft} backdrop holds the model photograph; tile rounded at {rounded.lg} (20px); typography {typography.display-md} for the tile label. Zero padding — photograph fills the rounded frame.

mosaic-tile-photo — Editorial mosaic-grid tile. Background {colors.canvas-deepest} ("#101319") for the lowest grade, same 20px radius, typography {typography.display-md}.

locator-card — "Find Your Audi Dealer" card. Background {colors.canvas-soft}, text {colors.on-canvas}, body in {typography.body-lg}, 24px padding, 20px radius. Holds a CTA + map glyph.

Buttons

button-primary — Slate-fill pill on the dark canvas. Background {colors.on-canvas-soft} ("#657081"), text {colors.on-pill}, typography {typography.button} (14px / 400 / no tracking), padding 12px × 24px, height 48px, rounded {rounded.full} (pill), 1px {colors.border-on-dark} ring. Where BMW corporate's button is a sharp 0px Corporate Blue rectangle and Porsche's is a fully pilled white slug, Audi's is a slate-pill with a white outline on the near-black canvas.

button-primary-hover — Hover state. Fill inverts to {colors.on-canvas} ("#fcfcfd"), text inverts to {colors.on-pill-inverted} ("#181d25"), ring stays at 1px white.

button-secondary — Transparent pill with 1px white ring. Background transparent, text {colors.on-canvas}, 1px white border, pill radius.

badge-pill — Small caption pill. Background transparent, text {colors.on-canvas}, caption typography (12px / 400), pill radius, 4px × 12px padding, 1px white ring.

Forms

text-input — Background transparent, text {colors.on-canvas}, body-md typography, rounded {rounded.sm} (10px), padding 12px × 16px, height 48px, 1px {colors.hairline-soft} border.

text-input-focus — Focus state. Border promotes from {colors.hairline-soft} to 1px {colors.on-canvas} — the only chromatic shift in the form chrome, since the palette holds no saturated focus accent.

Footer

footer — Closing dark footer. Background {colors.canvas}, text {colors.on-canvas}, body-sm typography, 72px × 96px padding. Multi-column link list.

footer-link — Background transparent, text {colors.on-canvas-soft} ("#657081"), body-sm typography.

Do's and Don'ts

Do

• Hold every text role at weight 400. AudiType never promotes display to 500 or 700.
• Pin letter-spacing at normal across the full scale, including CTA labels and nav.
• Render CTA buttons as fully-pilled {rounded.full} rectangles with a 1px white ring on the dark canvas.
• Round photo tiles, mosaic cards, and locator cards to {rounded.lg} (20px) — the brand's photographic-surface signature.
• Pad the page gutter at 96px ({spacing.page-margin}) and step section rhythm in --spacing-relative-* pixels rather than clamp().
• Let the model photograph and the four-ring wordmark carry every chromatic moment; the canvas holds zero saturated brand voltage.

Don't

• Don't fill the primary CTA with the browser-default link blue {colors.link-default} ("#0000ee"). It surfaces in the extraction at frequency 226 because Audi never overrides anchor color on the landing page — it is a user-agent default on unstyled inline links, not a brand voltage. For primary CTAs use the slate-pill / hover-inverts-white pattern.
• Don't promote any text role to weight 500 or 700. Emphasis comes from size and from the four-ring wordmark — a 40px h1 at weight 700 reads as Mercedes Daimler-Sans, not Audi.
• Don't use a 4px / 8px / 12px / 16px mid-step radius on cards or tiles. The brand commits to 999px pill or 20px photo tile — mid-step values read as Stripe or Linear, not Audi corporate.
• Don't add uppercase tracking to nav links or CTAs. AudiType's CTA renders at 14px / 400 / no tracking — uppercase-tracked labels break the held-at-400 discipline that BMW M, Bugatti, and Ferrari rely on.
• Don't paint {colors.canvas} ("#181d25") as a button fill on a light page. The token is canvas-first; surfacing it as a CTA fill on a white page reads as a generic dark button rather than the inverted Audi corporate surface.
• Don't ladder section rhythm at 48px or 64px. The captured rhythm steps from {spacing.xl} 32px to {spacing.2xl} 56px to {spacing.3xl} 72px — --spacing-relative-2xl skips 48px deliberately.
• Don't extract a CTA fill from a third-party cookie banner widget. The brand's CTA color is what appears on actual product CTAs, not the consent overlay's button.

Known Gaps

• The extractor captured 9 base colors on the international landing page; the 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's corporate font program; Inter at weight 400 with tracking: 0 is the documented open-source fallback, with Arial as the OS-level fallback.
• The system supports both light and dark contexts via the four-ring wordmark's color-swap and the corporate stylesheet's prefers-color-scheme queries, but only the dark landing-page state was captured.
• Animation easing and duration tokens are declared in the corporate stylesheet but not exercised on the captured landing surface.
• Form validation states beyond the captured text-input baseline (error, success, disabled) are out of scope.
• The my Audi account surface, the regional micro-sites (Audi USA, Audi UK, Audi DE), and the in-product car configurator are out of scope — this spec captures the international corporate marketing landing only.
• The M-equivalent S/RS-line motorsport sub-brand surfaces (which carry red accents and bolder display weight) are not covered by the corporate palette captured here.