---
version: alpha
name: "Cadillac"
website: "https://www.cadillac.com"
description: >-
  An American luxury-automotive brand whose marketing site runs a stark near-black canvas
  (#282828) punctuated by a single charge of electric citron (#e7e000) — the volt-yellow
  trim color applied to borders, dividers, and interactive accents. Display type runs
  CadillacGothic at ultra-light weight 100 with letter-spacing pushed to 3.6–5px across
  section headings, giving the page its signature whispered-authority cadence. Every button
  corner is a sharp 0px; no softening. The system is photography-first, with full-bleed
  vehicle shots carrying all emotional weight while the typographic layer stays deliberately
  thin and spaced.

seo:
  title: "Cadillac Design System for React — citron on near-black, CadillacGothic, 15 components"
  metaDescription: "Cadillac's marketing design system as a DESIGN.md file. Near-black canvas, electric citron #e7e000 divider accent, CadillacGothic at ultra-light weight 100 with extreme letter-spacing. For React, Next.js, and AI coding tools."
  highlights:
    - "Ultra-light type as authority — CadillacGothic at weight 100 with 3.6–5px letter-spacing on section headings, the inverse of the bold-header convention in luxury automotive"
    - "Electric citron accent — #e7e000 appears 477 times as border and text accent, never as a button fill; the primary button uses deep navy #171473"
    - "Sharp 0px everywhere — no corner rounding on buttons, cards, or inputs; the geometry reads as precision engineering rather than approachability"
    - "Photography-first layout — full-bleed hero and model-lineup shots carry all visual weight; typography is intentionally thin so it does not compete"
    - "Near-black canvas — #282828 (not pure black) carries the page with white and citron type on top, 907 combined occurrences"
  tags:
    - "Automotive"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Cadillac's marketing site makes a move almost no other luxury-automotive brand attempts in its typography: it dials weight down to 100 and letter-spacing up to 5px on section headings. The surface reads "EXPLORE THE CADILLAC LINEUP" in CadillacGothic at 28px / weight 400, and "FEATURED OFFERS" at 24px / weight 400 — but the sub-labels and most running headers run at weight 100, spread wide. Where BMW holds display at weight 700 and Mercedes counts on serif gravitas, Cadillac treats thinness and air as the authority signal. The near-black canvas (#282828) underneath never goes to pure black; the slight warmth in the dark floor softens the technical tension without releasing it.

    The DESIGN.md file packages the system into a machine-readable spec. Inside: 14 color tokens from the extracted palette (near-black, electric citron, white, deep navy, mid-gray surfaces), 12 typography tokens spanning CadillacGothic and CadillacGothicNarrow at weights 100–500 across display and body tiers, a universal 0px border-radius, and 15 components covering the primary button, hero heading, featured-offer card, vehicle model tile, top nav, and navigation links. The primary CTA uses deep navy (#171473) fill — a color appearing only 20 times on the page — while the electric citron (#e7e000) functions exclusively as a border and divider accent across 235 border occurrences.

    Feed this spec to Claude or Cursor to reproduce Cadillac's discipline: CadillacGothic at weight 100 for labels, wide letter-spacing on every heading, 0px sharp corners, full-bleed photography underneath, and the citron accent reserved for structural dividers rather than fills. The move worth borrowing for any dark-canvas luxury brand is the ultra-light + extreme-tracking combination — it reads expensive precisely because it refuses to shout.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.cadillac.com"
      title: "Cadillac — official site"
      description: "Cadillac's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Cadillac's primary brand color?"
      answer: "Cadillac uses two discrete chromatic accents. The electric citron (#e7e000) is the page's dominant non-neutral color — 477 total occurrences, split between text (242) and border (235) use — functioning as a structural divider and label accent, never as a button fill. The deep navy (#171473) is the primary button background, appearing only 20 times across the page — the rarity is intentional, making the CTA an unmistakable inflection point against the near-black canvas. No third chromatic color appears in the marketing surface."
    - id: "typography"
      title: "What typeface does Cadillac use, and what are the weights?"
      answer: "The primary typeface is CadillacGothic, a proprietary sans-serif with fallbacks to Arial and NanumGothic. A narrow variant, CadillacGothicNarrow, appears in fine-print and small label contexts. Weight 100 (ultra-light) is the dominant setting — 44 extracted samples at 14px / 100 / 25.2px line height — with weight 200 used on interactive labels and buttons. Display headings step up to weight 400 at 24–28px. Letter-spacing ranges from 0.63px on body text to 5px on the widest heading tier. Inter at weight 100 with 0.04em letter-spacing is the closest open-source substitute, though the condensed vertical rhythm of CadillacGothic is hard to approximate exactly."
    - id: "corner-radius"
      title: "What corner-radius style does Cadillac use?"
      answer: "Sharp: every button, card, and surface uses 0px border-radius. The extraction found no non-zero radius values in the entire captured surface. This is consistent with the luxury-precision aesthetic Cadillac shares with Ferrari and Rolls-Royce — rounded corners read as approachable and consumer-friendly, which conflicts with the brand's engineering-authority positioning. The navigation buttons, CTA button, vehicle tiles, and offer cards all carry square corners."
    - id: "citron-accent"
      title: "Why does Cadillac use citron yellow as an accent?"
      answer: "The electric citron (#e7e000) is the brand's signature trim color, visible on physical vehicles as accent striping, interior stitching, and brake calipers. On the marketing site, the color carries exactly that structural role: it appears as horizontal divider rules, border highlights on interactive elements, and label accents — never as a button background or large fill. The 235 border occurrences versus 0 background occurrences confirm this is a disciplined perimeter-only application. Against the near-black #282828 canvas, citron achieves maximum luminance contrast while remaining a thin accent line rather than a competing surface."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a luxury automotive marketing site?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Cadillac's specific moves: near-black #282828 canvas, CadillacGothic at weight 100 with wide letter-spacing for headings, electric citron #e7e000 reserved for borders and dividers, deep navy #171473 for the single primary CTA, and universal 0px sharp corners. The 15 components cover the major marketing surfaces — hero heading, featured offer card, model lineup tile, primary button, top-nav. For the photography-first hero, note that the design depends on full-bleed vehicle images; the token system alone cannot reproduce the editorial weight that the photography supplies."

mockups:
  - "marketing-hero"
  - "media-grid"

colors:
  primary: "#171473"
  ink: "#282828"
  ink-deep: "#0d0d0d"
  ink-black: "#000000"
  citron: "#e7e000"
  canvas: "#ffffff"
  surface-1: "#f2f2f2"
  ink-muted: "#4b4b4b"
  hairline: "#d3d5d6"

typography:
  display-xl:
    fontFamily: "CadillacGothic, Arial, NanumGothic, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 36.96px
    letterSpacing: 5px
  display-md:
    fontFamily: "CadillacGothic, Arial, NanumGothic, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 31.68px
    letterSpacing: 4.32px
  heading-lg:
    fontFamily: "CadillacGothic, Arial, NanumGothic, sans-serif"
    fontSize: 20px
    fontWeight: 100
    lineHeight: 26.4px
    letterSpacing: 3.6px
  body-md:
    fontFamily: "CadillacGothic, Arial, NanumGothic, sans-serif"
    fontSize: 14px
    fontWeight: 100
    lineHeight: 25.2px
    letterSpacing: 0.63px
  body-sm:
    fontFamily: "CadillacGothicNarrow, Arial, NanumGothic, sans-serif"
    fontSize: 12px
    fontWeight: 100
    lineHeight: 21.6px
    letterSpacing: 0.54px
  body-sm-narrow:
    fontFamily: "CadillacGothicNarrow, Arial, NanumGothic, sans-serif"
    fontSize: 12px
    fontWeight: 100
    lineHeight: normal
    letterSpacing: normal
  label-md:
    fontFamily: "CadillacGothic, Arial, NanumGothic, sans-serif"
    fontSize: 14px
    fontWeight: 200
    lineHeight: 22.4px
    letterSpacing: 1.6px
  label-sm:
    fontFamily: "CadillacGothic, Arial, NanumGothic, sans-serif"
    fontSize: 15px
    fontWeight: 100
    lineHeight: 27px
    letterSpacing: 0.656px
  button-md:
    fontFamily: "CadillacGothic, Arial, NanumGothic, sans-serif"
    fontSize: 14px
    fontWeight: 200
    lineHeight: 22.4px
    letterSpacing: 1.6px
  caption:
    fontFamily: "CadillacGothic, Arial, NanumGothic, sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 25.2px
    letterSpacing: 1.6px
  emphasis:
    fontFamily: "CadillacGothic, Arial, NanumGothic, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 21.98px
    letterSpacing: 1.6px

rounded:
  none: "0px"

spacing:
  xs: "8px"
  sm: "10px"
  md: "12px"
  base: "16px"
  lg: "20px"
  xl: "24px"
  2xl: "40px"
  3xl: "64px"
  4xl: "96px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "12px 26px"
    height: "50px"
    borderColor: "{colors.primary}"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "11px 22px"
    height: "44px"
    borderColor: "{colors.ink}"
  button-citron:
    backgroundColor: "transparent"
    textColor: "{colors.citron}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "11px 22px"
    height: "44px"
    borderColor: "{colors.citron}"
  top-nav:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: "0px 16px"
    height: "88px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.label-md}"
    padding: "0px 16px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.display-md}"
    padding: "0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "0px"
  featured-offer-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "24px 0px"
    borderColor: "{colors.citron}"
  model-tile:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "20px 16px 0px"
  dark-section:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "40px 16px"
  card:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "24px"
  citron-divider:
    backgroundColor: "{colors.citron}"
    height: "1px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "12px 16px"
    height: "50px"
    borderColor: "{colors.ink-muted}"
  footer:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    padding: "40px 16px"
---

## Overview

Cadillac's marketing site is the only luxury-automotive brand in this directory that treats ultra-light type as the primary authority signal. **Whispered authority**: where BMW grounds display in weight 700 and Mercedes reaches for serif gravitas, Cadillac runs CadillacGothic at weight 100 across the majority of its text surfaces, then pulls letter-spacing to 3.6–5px on section headings. The result sounds like a whisper that still fills the room. The system's near-black canvas (#282828) holds the typography in tension against full-bleed vehicle photography — the photography supplies emotional weight, the type supplies precision discipline.

The chromatic palette is deliberately thin. Two non-neutral colors share the entire page: electric citron (#e7e000), applied exclusively as borders and divider lines (235 border occurrences, zero background fills), and deep navy (#171473), reserved for the single primary CTA button. Unlike Ferrari, which holds Rosso Corsa for CTA fills and emotion, Cadillac places its brand color on the perimeter — structural rather than focal.

Shape language is unambiguously sharp. No border-radius value above 0px was captured across the entire marketing surface. Every button, card, vehicle tile, and input field carries square corners.

**Key Characteristics:**
- Near-black canvas at #282828 (907 combined occurrences as text and border) — not pure black; a slight warmth prevents the system from reading as a developer-tool dark theme.
- Electric citron (#e7e000) used only as structural accent — borders and dividers — never as a button fill or large surface color.
- CadillacGothic at weight 100 is the dominant type setting across labels and headings; the heaviest weight captured on most surfaces is 200.
- Letter-spacing at 3.6–5px on display headings — the widest tracked setting of any automotive brand in this directory.
- Universal 0px corner radius across every component.
- Deep navy (#171473) button carries just 20 total page occurrences — kept deliberately scarce.
- Photography-first layout: full-bleed hero and model-lineup shots supply all color and emotional energy; the typographic layer remains structurally thin.

## Colors

### Canvas & Surfaces

- **Ink** (`{colors.ink}` — #282828): frequency 907. Used as text (453), border (450), background (4). The near-black page canvas and primary text color — carries the site's entire dark chromatic mass. Wired from a single hex; not a mix of colors.
- **Ink Deep** (`{colors.ink-deep}` — #0d0d0d): frequency 14. Used as background only — the deepest floor tone applied to alternating section bands, slightly darker than the primary canvas.
- **Ink Black** (`{colors.ink-black}` — #000000): frequency 8. Used as border (3), shadow (1), bg (1), text (3). Pure black, used for minimal detail accents and one shadow instance.
- **Canvas** (`{colors.canvas}` — #ffffff): frequency 251. Used as text (109), border (106), background (8), gradient (28). The white contrast surface — appears on light editorial bands, model pricing tables, and featured-offer cards.
- **Surface-1** (`{colors.surface-1}` — #f2f2f2): frequency 3. Used as background — a light off-white for card surfaces that need lift against the white canvas without going to a colored surface.
- **Ink Muted** (`{colors.ink-muted}` — #4b4b4b): frequency 5. Used as border (4), background (1). The mid-gray border tone for input fields and secondary dividers.
- **Hairline** (`{colors.hairline}` — #d3d5d6): frequency 1. A cool light-gray hairline tone for the finest dividers.

### Brand Accents

- **Citron** (`{colors.citron}` — #e7e000): frequency 477. Used as text (242), border (235). Not a fill color — a perimeter accent. All 477 occurrences are either label text or structural borders; zero background fills. Citron is the page's electrical charge, applied in thin lines rather than surfaces.
- **Primary** (`{colors.primary}` — #171473): frequency 20. Used as border (10), text (9), background (1). The deep navy behind the primary CTA button — appears just 20 times across the entire page, making the button an unmistakable focal point.

## Typography

### Font Families

The system runs two members of the Cadillac proprietary type family: **CadillacGothic** for the primary voice (display, heading, body, button, label) and **CadillacGothicNarrow** for fine print and compact secondary labels. Fallbacks walk to Arial, NanumGothic (Korean script support), then generic sans-serif. No second non-Cadillac family appears in the marketing surface.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 28px | 400 | 36.96px | 5px | Hero section headings ("EXPLORE THE CADILLAC LINEUP") |
| `{typography.display-md}` | 24px | 400 | 31.68px | 4.32px | Section h2 headings ("FEATURED OFFERS") |
| `{typography.heading-lg}` | 20px | 100 | 26.4px | 3.6px | Sub-section headings in light weight |
| `{typography.body-md}` | 14px | 100 | 25.2px | 0.63px | Default running text and body paragraphs |
| `{typography.body-sm}` | 12px | 100 | 21.6px | 0.54px | Narrow body — fine print, footnotes |
| `{typography.label-md}` | 14px | 200 | 22.4px | 1.6px | Button labels, interactive element labels |
| `{typography.button-md}` | 14px | 200 | 22.4px | 1.6px | CTA button text |
| `{typography.caption}` | 14px | 300 | 25.2px | 1.6px | Supporting captions |
| `{typography.emphasis}` | 14px | 500 | 21.98px | 1.6px | Highlighted spec values |

### Principles

Weight 100 is the system's dominant setting. The heaviest non-display weight in common use is 200, reserved for buttons and interactive labels. Display headings break to 400 — the only moment on the page that reads as conventional weight — but the letter-spacing at 4.32–5px compensates with air rather than mass. This is the opposite of how luxury brands typically signal authority: the discipline is in the space between letters, not the thickness of strokes.

### Font Substitutes

CadillacGothic is proprietary. **Inter** at weight 100 with `letter-spacing: 0.045em` on headings and `letter-spacing: 0.01em` on body is the closest open-source approximation. The narrow variant maps to **Inter Condensed** or Barlow Condensed at matching weights.

## Layout

### Spacing System

- **Base unit:** 8px, consistent with the CSS variable ladder (`--gb-spacing-8` through `--gb-spacing-240`).
- **Tokens:** `{spacing.xs}` 8px · `{spacing.sm}` 10px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 24px · `{spacing.2xl}` 40px · `{spacing.3xl}` 64px · `{spacing.4xl}` 96px.
- **Section padding:** the CSS exposes `--gb-spacing-96` (96px) and `--gb-spacing-104` (104px) as major section cadence tokens.
- **Card internal padding:** 24px (`{spacing.xl}`) on featured-offer cards; 20px (`{spacing.lg}`) on model tiles.

### Grid & Container

- **Hero:** full-bleed vehicle photography, 1440px wide, with the navigation overlay and offer copy centered within the image.
- **Model lineup:** horizontal scrolling row of vehicle thumbnail tiles at equal width, padding `0px 16px`.
- **Featured offers:** centered section at max ~1280px, citron-border cards in a column layout.
- **Icons/dealer locator:** 4-column grid on desktop.

### Rhythm

The page alternates between **dark canvas** sections (ink #282828 with white type) and **white canvas** sections (canvas #ffffff with ink type), with citron divider rules marking transitions. The rhythm is deliberate — two or three dark bands, one white band, repeat — so neither surface dominates monotonously.

## Elevation

The captured surface shows essentially no shadow tier. The 4 background occurrences of #0d0d0d create visual depth between bands through surface-color contrast rather than shadow. One shadow occurrence of #000000 suggests a minimal tooltip or dropdown shadow, but it is not a system-wide elevation layer.

- **Dark band vs. white band:** the primary depth signal is section alternation — ink canvas vs. white canvas — rather than layered component elevation.
- **Citron borders:** the 1px citron rule acts as a separation signal rather than a depth signal.

## Shapes

The radius scale is absolute zero. Every component in the extracted marketing surface carries `0px` border-radius. This is the sharpest geometry among the automotive brands in the directory — Ferrari also uses sharp corners, but the extraction showed occasional 4px inputs. Cadillac's 0px includes inputs, buttons, cards, and all panels.

Sharp corners on luxury goods communicate precision-engineering heritage: the 1950s Cadillac tailfin is angular, not rounded. The digital system echoes that in every interactive surface.

## Components

**`button-primary`** — Deep navy `{colors.primary}` fill (#171473), white text, CadillacGothic weight 200 at 14px / 1.6px tracking, 0px radius, 12×26px padding, 50px height. "VISIT IL SITE" is the canonical instance. The navy appears just 20 times on the page — the rarity is the CTA's authority.

**`button-secondary`** — Transparent fill, ink text, 1px ink border, 0px radius, 11×22px padding, 44px height. Used for secondary navigation actions.

**`button-citron`** — Transparent fill, citron text and citron border. Used for accent-CTA moments on dark-canvas bands where the electric yellow reads against the near-black.

**`top-nav`** — Ink canvas (#282828), 88px height, white text in label-md. The Cadillac crest centered above the nav links; the navigation is full-width with a 0px 16px horizontal gutter.

**`nav-link`** — Transparent background, white text, 14px / weight 200 / 1.6px tracking, 0px 16px padding. Ultra-light and widely-tracked, consistent with the body type system.

**`hero-heading`** — Ink (#282828) text on the photography overlay, CadillacGothic 28px / 400 / 5px letter-spacing. The display tier — confident through extreme tracking.

**`section-heading`** — White text on dark canvas, 24px / 400 / 4.32px — the section h2 treatment used on "FEATURED OFFERS" and similar panels.

**`body-paragraph`** — Ink text, 14px / 100 / 0.63px — the default body copy across white-canvas sections.

**`featured-offer-card`** — White canvas surface, 1px citron border on selected edges, ink text, 0px radius, 24px padding. Holds lease/finance rate, monthly payment, and CTA.

**`model-tile`** — White canvas, ink text, 0px radius, vehicle photograph top, label text below at 14px / 100.

**`dark-section`** — Ink canvas (#282828), white text, used for awards and dealer-locator bands.

**`card`** — Light surface-1 (#f2f2f2) fill, ink text, 0px radius, 24px padding.

**`citron-divider`** — 1px-height citron (#e7e000) horizontal rule used between sections and inside featured-offer cards.

**`text-input`** — White canvas, ink text, ink-muted border, 0px radius, 12×16px padding, 50px height.

**`footer`** — Ink canvas, white and light-gray text, body-sm narrow type, 40px padding.

## Do's and Don'ts

**Do** apply citron (#e7e000) exclusively as a border and divider accent. The electric yellow reads against near-black precisely because it never fills a surface — the moment it appears as a background color, it reads as caution-tape rather than luxury trim.

**Do** hold display headings at weight 400 and increase letter-spacing to 4–5px rather than stepping to weight 700. The airiness of wide tracking is the system's authority signal; compressing it to a normal tracking at bold weight destroys the Cadillac cadence.

**Do** keep primary button (#171473) occurrences scarce. Its rarity (20 page occurrences) is what makes it legible as the single action that matters; multiply navy buttons across the page and the discipline collapses.

**Do** alternate dark (#282828) and white (#ffffff) section bands to create rhythm. The page's structural logic is surface alternation — the typography alone on a monotone canvas would lose its tension.

**Don't** introduce any corner radius above 0px. Adding even 4px rounding to a button or card softens the engineering-precision language the brand has built since the 1953 Eldorado. The system has no rounding anywhere; use `{rounded.none}` throughout.

**Don't** use the citron (#e7e000) for typographic emphasis in long-form body copy. At 14px / weight 100, citron text on white canvas fails WCAG AA contrast; it only passes against the near-black canvas where the system actually deploys it.

**Don't** render CadillacGothic at weight 600 or above on headings. The heaviest captured display weight is 400 on a 28px heading. Weight 600 would make the typography indistinguishable from any generic automotive brand and abandon the ultra-light-with-tracking identity.

**Don't** fill marketing hero sections with mid-gray placeholder backgrounds (#4b4b4b). The system depends entirely on vehicle photography for its emotional register; gray placeholders expose how thin the token system is without the photography layer.

## Known Gaps

- **EV-model surfaces:** the Lyriq EV editorial reboot may expose additional brand tokens (accent tones, gradient treatments) not present in the general marketing homepage captured here.
- **Hover and focus states:** no hover captures were present in the extracted components; the state matrix (focus rings, button active-press colors) is undocumented.
- **Mobile nav:** the hamburger navigation on mobile likely collapses the wide-tracked headings into tighter spacing; those responsive breakpoints are not captured.
- **Product configurator:** the vehicle configurator at `/configure/` uses a distinct interface with its own token layer — not represented here.
- **Dark-mode offer modal:** the offer modal visible in the hero uses overlay styles not fully captured in the static extraction.
- **Dealer-locator inputs:** the dealer search input likely carries different validation states than the resting input captured here.