Volkswagen Design System

Overview

Volkswagen's US marketing site runs a typographic experiment that no other major automotive brand in the United States attempts. Ultra-light European restraint. The hero headline — vw-head at weight 200 — sits at the opposite end of the display-weight spectrum from GMC's weight-900 Stratum, Toyota's weight-700 sans, and Ford's weight-800 condensed. Where those brands declare authority through typographic mass, VW declares it through precision: 47px ultra-light letterforms with -0.63px tracking that pull the narrow strokes into a controlled density. The vw-head family then swings to weight 700 for subheadings and card titles within the same page, creating a visual contrast between the engineering restraint of the display tier and the grounded confidence of the supporting text.

The blue identity runs as two distinct tones. The ink-navy (#000e26 — 1727 occurrences) carries every text and border occurrence on the page; it is not pure black but a near-black with a perceptible blue cast that ties the entire UI's text register to the brand palette. The VW Dark Navy (#001e50 — 377 occurrences) is the brand identity surface — it fills the footer brand band, the VW roundel section, and key structural moments below the fold. Where Nissan holds its identity layer entirely monochrome, VW surfaces the navy at section-level fills.

Key Characteristics:

• Ink-navy ({colors.ink} — #000e26): 1727 total occurrences as text and border — the dominant UI color; a near-black with measurable blue chroma tying every text occurrence to the brand.
• VW Dark Navy ({colors.primary} — #001e50): 377 occurrences across text, border, and background — the brand identity fill color for footer bands and roundel sections.
• vw-head at weight 200 for all display headlines (47px); weight 700 for subheads (34px, 25px); vw-text at weight 400 for body.
• 100px border-radius pill as the dominant button and input shape — 27 occurrences in the extraction, far more than any other radius.
• Yellow accent ({colors.accent-yellow} — #ffd100) as a brand-layer roundel element only — 5 background occurrences, zero text or border occurrences.
• 8px card radius ({rounded.sm}) as the only non-pill non-zero radius in the system.
• vw-text runs at weight 400 and 700 for all body, nav, and UI text; Helvetica and Arial as fallbacks.
• Deep black ({colors.canvas-black} — #000000) for the footer surface; this is the darkest zone, distinct from the ink-navy text color.

Colors

Brand

• VW Dark Navy ({colors.primary} — #001e50): frequency 377. Used as text (186), border (186), background (4), gradient (1). The brand identity surface — footer band, roundel section, strong brand accent. A readable midnight blue at 25% lightness.
• Accent Yellow ({colors.accent-yellow} — #ffd100): frequency 5, all as backgrounds. Declared as a brand-layer color in the extraction. Appears in the VW roundel badge element only; does not enter the marketing UI chrome.
• Gradient Navy ({colors.gradient-navy} — #00437a): frequency 1, in gradient only. The mid-blue gradient stop on the hero-to-navy overlay gradient.

Text & Border

• Ink ({colors.ink} — #000e26): frequency 1727. Used as text (865), border (862). The dominant near-black with blue cast — carries the full text and border register across the marketing surface. OKLCH chroma 0.056 at hue 255 confirms a genuine blue-navy tint.
• Mid-Gray ({colors.mid-gray} — #6a767d): frequency 46. Used as text (23), border (23). Secondary text — card meta labels, caption rows, sub-label text below offer cards.
• Ink Dark ({colors.ink-dark} — #3c484d): frequency 2. A cool dark-gray that appears in specific muted-text contexts.
• Ink Near ({colors.ink-near} — #101010): frequency 2. Near-pure black appearing on specific high-contrast text elements.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 261. Used as text (122), border (122), background (15), shadow (2). The page floor, card surfaces, and the text/border tone used on dark sections.
• Canvas Black ({colors.canvas-black} — #000000): frequency 57. Used as background (13), text (21), gradient (2). Footer surface and deep gradient stop in photography overlays.
• Surface-1 ({colors.surface-1} — #dfe4e8): frequency 5, all as backgrounds. A cool blue-gray used for alternate section backgrounds and card background variants.

Hairline

• Hairline ({colors.hairline} — #c2cacf): frequency 1, as background. A light blue-gray surface — the lightest tinted surface in the palette.

Typography

Font Families

The system runs two proprietary typefaces: vw-head for display and heading moments (weight 200 through 700) and vw-text (and vw-text, Helvetica, Arial, sans-serif for component-level UI) for body, nav, and label text (weight 400 and 700). There is no mono tier.

The distinguishing move is the 200–700 weight split within vw-head. Display at weight 200 reads as architectural precision; the same family at weight 700 reads as functional confidence. The two weights do the work that two completely different typefaces would do in a less disciplined system.

Hierarchy

Principles

Weight 200 at 47px is the defining typographic move. The -0.63px tracking tightens the already-narrow ultra-light strokes into precision-cut letterforms — readable at scale, otherworldly thin in proximity to the weight-700 subheads one section below. The same family alternating 200-to-700 within a single page layout is rare in automotive marketing, closer to a design system from Zara or Acne Studios than from Ford or GMC.

Note on Font Substitutes

vw-head and vw-text are Volkswagen proprietary typefaces not available publicly. For vw-head at weight 200 display: DM Sans at weight 200–300 is the closest open-source match for the proportions and light-weight feel. Inter at weight 200 at larger sizes is another candidate. For vw-text at body sizes, Inter at weight 400–700 transfers cleanly. Preserve the weight-200 treatment at the display tier — any heavier substitute changes the brand's typographic identity fundamentally.

Layout

Spacing System

• Base unit: 4px — the most frequent individual padding value in the extraction (24 occurrences at 4px, 37 at "4px 0px").
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 40px · {spacing.3xl} 80px.
• Section-level padding: hero and brand-band sections pad to 80px vertically; offer card sections pad to 32px.
• Button horizontal padding: {spacing.xl} (32px) left and right on pill CTAs; height is fixed at 60px.
• Nav horizontal padding: {spacing.xl} (32px) — the widest common horizontal padding in the system.

Grid & Container

• Max content width: approximately 1440px on hero and brand-band sections; ~1280px on offers grid and model selector.
• Hero: full-bleed vehicle photography, white display headline left-aligned, pill CTA below.
• Offers section: 2-up card grid on white canvas — each card holds a model photograph, offer terms, and a pill CTA.
• Model selector: horizontal tab strip with model names, links to individual model overview pages.
• "What goes into each and every Volkswagen" section: 3-column editorial feature grid with photography and body paragraphs.
• Brand-band: full-width VW Dark Navy {colors.primary} section centered on the VW roundel.

Rhythm

The page alternates between white editorial bands (offers, model selector, brand copy) and full-bleed photography moments (hero, lifestyle section, 2026 Atlas feature). Within the white bands, content is set in the ink-navy text register at generous spacing. The navy brand-band near the footer provides a structural anchor: the first non-white non-photography surface on the page, it reintroduces the brand identity color after a long editorial stretch.

Elevation

The VW marketing surface shows minimal shadow usage — {colors.canvas} (#ffffff) appears 2 times as a shadow value, suggesting very faint white-highlight shadows on specific dark-surface elements. The system otherwise relies on surface-color contrast (white card on canvas-black footer, photography panels against white editorial bands) for depth hierarchy.

• Flat: the dominant mode — hero, white editorial bands, nav, footer.
• Card separation: {colors.surface-1} (#dfe4e8) as light blue-gray card backgrounds in the offers section, lifted against the white canvas floor.
• Shadow: minimal — 2 white-channel shadow occurrences only.

Shapes

The radius scale is pill-dominant with an 8px card variant.

• {rounded.none} 0px — hero sections, full-bleed photography panels, the nav bar.
• {rounded.sm} 8px — offer cards and content cards. 10 occurrences.
• {rounded.pill} 100px — all buttons and text inputs. 27 occurrences — the dominant radius by count.
• {rounded.mega} 500px — 3 occurrences on certain large container elements; renders as a mega-pill for oversized interactive containers.
• {rounded.full} 50% — the VW roundel badge mark and circular icon buttons.

At 100px radius on a 60px-tall button, the pill is geometrically forced: the 30px cap height is smaller than the 100px radius, so the button ends are perfect semicircles. This is intentional — the pill is not aspirational softness but geometric completeness. VW makes the pill harder than Nissan's 40px pill because the math is unambiguous: the ends are exactly circular, not "almost" circular.

Components

button-primary — Ink-navy {colors.ink} fill, white text, {rounded.pill} 100px radius, 0x32px padding, 60px height. The dominant CTA across offers, model pages, and the brand band.

button-secondary — Transparent fill, ink-navy text and border, {rounded.pill} 100px radius, same dimensions. Used for secondary "Learn More" and "Build & Price" CTAs.

button-outline-white — Transparent fill, white text and border, {rounded.pill} 100px radius. Applied over dark photography sections.

top-nav — White {colors.canvas} surface, ink-navy text, 64px height, 32px horizontal padding. VW roundel logo mark flush left, model/offers/shopping links center, account cluster right.

nav-link — VW Dark Navy {colors.primary} border and text on a pill shape, {rounded.pill} 100px radius, 32px horizontal padding, 60px height. The captured nav-link style renders as a pill outline — the same pill treatment as the CTA buttons.

hero-heading — White text, {typography.display-xl} (47.712px / weight 200 / -0.63424px tracking). The ultra-light display headline on photography sections.

section-heading — Ink-navy text, same {typography.display-xl} token, on white canvas editorial sections. "Offers," "Wherever you're headed."

section-heading-bold — Ink-navy text at {typography.display-md} (34.496px / weight 700). The bolder sub-section header tier — model names, feature section headings.

body-paragraph — White text at {typography.body-md} (16px / 400) on photography overlays.

body-paragraph-ink — Ink-navy text at {typography.body-md} on white editorial canvas.

card — White {colors.canvas} fill, ink-navy text, {rounded.sm} 8px radius, 16px padding, {colors.surface-1} border. The default editorial card — holds article teasers, press items, model callouts.

offer-card — White fill, ink-navy text, {rounded.sm} 8px radius, 24px padding. Used in the 2-up offers grid — holds financing terms (APR, months), model photo, and pill CTA.

brand-band — VW Dark Navy {colors.primary} fill, white text, no radius, 80x32px padding. The full-width brand identity section centered on the VW roundel; the single brand-color fill moment above the footer.

model-tab — Transparent fill, ink-navy text, {rounded.pill} radius, minimal padding. The horizontal model-selector tab strip.

text-input — White canvas fill, ink-navy text and border, {rounded.pill} 100px radius, 0x32px padding, 60px height. The search field — same pill geometry as the buttons, creating unified interactive affordance.

footer — Pure black {colors.canvas-black} surface, white text at {typography.body-sm}, 40x32px padding. Houses VW wordmark, site-map column links (Models, Offers, Dealer tools, About), and social icon cluster.

Do's and Don'ts

Do use weight 200 for all display headlines. The ultra-light vw-head at 47px is the defining typographic identity of the brand — substituting weight 400 or 700 at display sizes makes the page read like any other automotive site.

Do apply {rounded.pill} (100px) to every button and text input. The fully-geometric pill — where the radius exceeds half the element height, forcing perfect semicircular ends — is the system's signature interactive shape; inconsistent radius choices (mixing 100px pills with 8px cards) are intentional, not an error.

Do use {colors.ink} (#000e26) rather than pure black for all text. The blue-tinted near-black is a design choice that ties the entire text register to the brand palette — replacing it with #000000 removes a subtle but cumulative brand signal.

Do reserve {colors.primary} (VW Dark Navy) for brand-identity band fills and structural accent moments. The navy fills the footer brand band and the roundel section; it should not enter card or button fills where it would compete with the ink-navy text color.

Don't use {colors.accent-yellow} (#ffd100) in the marketing UI chrome. The yellow appears only as a roundel badge element — 5 total background occurrences, zero text or border occurrences. Injecting yellow into a button fill or section header would read as borrowed from a different brand system entirely.

Don't use the {rounded.sm} (8px) radius on buttons. Cards use 8px; buttons use 100px. Mixing these within the same component family destroys the shape hierarchy that distinguishes interactive affordances (pill) from content containers (card).

Don't render vw-head at weight 200 for text below 32px. Ultra-light weight at small sizes loses legibility quickly — below 32px, the system switches to weight 700 subheadings. Applying weight 200 to body or label text breaks the typographic legibility contract.

Don't use {colors.canvas-black} (#000000) for above-the-fold sections. Pure black belongs only to the footer. Above-fold dark surfaces should use full-bleed vehicle photography rather than flat black fills — a black section above the fold reads as an unfinished hero rather than a brand moment.

Known Gaps

• EV-specific tokens: the ID.4 and ID.Buzz EV models may carry additional accent colors (the ID.4's distinct light-blue EV badge treatment is not captured from the main marketing surface).
• Hover and active states: button hover behavior and active nav states are not captured; it is unknown whether VW injects a color change or changes the border weight on pill-button hover.
• Dark-mode surface: the site does not expose a dark-mode toggle; the near-black surfaces on the page are structural photography and footer elements, not a full dark theme.
• Form validation states: text-input error, success, and disabled states are not represented — the captured marketing surface shows resting state only.
• Configurator surface: the Build & Price configurator carries a richer token system (color-swatch selectors, option comparison grids, 3D exterior viewer) that is not accessible from the main marketing surface capture.
• VW Golf / GTI sub-brand: the performance GTI and Golf R sub-brands historically use a distinct red-accent identity that may override the standard VW navy tokens on their respective model pages.