Why does Volkswagen use weight 200 for display headlines?

Volkswagen's vw-head typeface at weight 200 for display moments (47px and above) is a deliberate European design language choice that contrasts with American automotive convention. Weight 200 at 47px reads as precise and engineered rather than aggressive — it aligns with how German premium brands (Mercedes, Audi) use light-weight display type to signal confidence-through-restraint rather than authority-through-mass. GMC goes to weight 900 (maximum condensed heavy) to signal working-truck toughness; VW goes to weight 200 to signal German precision. The same vw-head family swings to weight 700 for subheadings (25px, 34px sizes) within the same page, creating a structural contrast between the ethereal headline and the grounded sub-label.

What is the difference between VW's two dark tones?

VW uses two distinct dark tones with meaningfully different roles. The first is ink-navy (#000e26), a near-black with a measurable blue cast (OKLCH chroma 0.056, hue 255 — clearly blue-shifted). This appears 1727 times as the primary text and border color — it is the most-used color by far in the system. The second is VW Dark Navy (#001e50), a proper deep midnight blue with higher chroma (0.099, hue 259). This appears 377 times and carries a mix of text, border, and background roles — most visibly as the footer brand band and in the VW roundel section. The distinction matters: ink-navy is a text color that only reveals its blue cast in side-by-side comparison; VW Dark Navy is recognizably blue and is the brand identity surface.

What corner-radius does Volkswagen use for buttons?

Volkswagen's dominant button border-radius is 100px — the extraction shows 27 occurrences of this exact value, more than any other radius by a wide margin. At a standard 60px button height, a 100px border-radius forces a complete stadium pill shape with fully circular ends. The system also uses 500px (3 occurrences) for certain mega-radius containers and 8px (10 occurrences) for card corners. The 100px pill is the signature interactive shape — much softer than GMC's zero-radius rectangles, softer even than Nissan's 40px pill, and in the same territory as Apple's pill buttons on the marketing site.

What role does yellow play in Volkswagen's brand system?

VW yellow (#ffd100) is declared as a brand-layer color in the extraction data (one of only two brand-layer colors alongside the gradient-only navy #00437a), but it appears only 5 times in the captured marketing surface, all as background fills. The primary role is the yellow ring on the VW roundel — the circular brand mark at the center of the homepage features a yellow-gold accent ring that references the roundel's historical proportions. Outside the roundel, yellow does not appear in any CTA, nav, or card context. It is a badge-identity color, not a marketing accent, making VW's approach closer to Audi's (rings-only) than to brands that inject their secondary color into button fills.

What typefaces does Volkswagen use and what should I substitute?

Volkswagen runs two proprietary typefaces. vw-head is the display and heading family, used at weight 200 for large display moments (47px, 34px) and weight 700 for bold subheadings and small heading labels. vw-text handles all body copy, navigation, and UI text at weight 400 (regular) and weight 700 (bold), falling back to Helvetica, Arial, sans-serif. For open-source substitutes: DM Sans at weight 200-300 approximates vw-head's ultra-light display proportions; Inter at weight 400 is close to vw-text at body sizes. Preserve the weight-200 treatment at display sizes — substituting weight 300 or 400 loses the defining characteristic of the VW typographic identity.

Volkswagen Design System

Volkswagen USA's marketing-site design system as a DESIGN.md file.

About Volkswagen DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source vw.com

Automotive

Volkswagen's US site opens with a full-width Atlas photograph and a headline that sets the system's typographic signature immediately: "Take a good look at the 2026 Atlas" in ultra-light vw-head at weight 200. This is not a default — it is a choice that distinguishes VW from every other automotive brand in the US market. GMC's display runs at weight 900. Ford's at 700. Nissan's at 400. Volkswagen's at 200, with -0.63px tracking pulling the already-thin letterforms even closer together into a precise, European-engineered density.

The navy blue identity sits structurally below the fold and in the footer. The dominant above-fold tone is the VW ink-navy — a near-black charcoal with a measurable blue cast (#000e26) that appears 1727 times in the page and carries every text and border occurrence. This is the brand's quietest move: pure black would be more conventional; the blue-tinted near-black ties the entire UI's text register to the VW brand palette without ever declaring a color accent above the fold. The VW roundel at the bottom of the home section sits on a navy blue band, and the yellow (#ffd100) — declared as a brand-layer color in the extraction — appears precisely where the roundel's gold ring runs, 5 occurrences total.

The pill button at 100px border-radius (27 occurrences in the extraction) is the system's warmest element. At a standard 60px button height, a 100px radius forces a full stadium pill with circular ends. This is the same move Nissan makes at 40px, but VW overshoots into the 100px+ territory shared more with luxury-tech brands (Apple's pill buttons) than with truck-and-SUV competitors. Feed this file to an AI coding tool and it will reproduce the VW-specific combination: ink-navy text as the only pervasive color, ultra-light display at weight 200, navy fill for brand identity sections, and mega-radius pill as the dominant interactive shape.

What makes it distinct

Ultra-light display tiervw-head at weight 200 and 47px with -0.63px tracking is the lightest automotive display treatment among major US brands
Navy as brand surfaceVW Dark Navy fills the footer brand band and key identity sections; unlike GMC or Nissan this navy is a fill-level presence, not just a text color
100px pill dominance27 occurrences of the 100px border-radius (and 500px for certain mega-radius elements) make the rounded pill the unchallenged shape language
Ink-navy vs true navy#000e26 (the dominant text tone) is not black but a near-black with a measurable blue cast that ties all text to the brand palette
Weight-200-to-700 typographic splitthe same vw-head family swings from 200 (display headlines) to 700 (subheads and body-bold moments) within the same composition

Live at vw.com

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

vw.com

Explore Volkswagen

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.

Volkswagen design system FAQ

Common questions about Volkswagen'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.

Volkswagen — official site

Volkswagen's public US marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

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