---
version: alpha
name: "Mazda USA"
website: "https://www.mazdausa.com"
description: >-
  A Japanese automaker whose marketing site commits almost entirely to all-uppercase typography — "Mazda Type" runs every nav link, section title, and chip in capitals at 9-18px with 1.2-3.5px tracking, while the only sentence-case prose on the page lives inside small body paragraphs and a single h2 in mixed case. The system runs on a 101010 near-black ink (frequency 908) over pure white, with 3px small-step rounding everywhere except a rare 999px pill on filter chips. Hero photography is cinematic dark — black film with chromatic moonlight — and there is no chromatic brand voltage at the chrome layer at all. Where Subaru holds a single Pleiades blue and Toyota carries chromatic category chips, Mazda runs a monochrome system and lets uppercase tracking carry every typographic voice.

seo:
  title: "Mazda Design System for React — Mazda Type uppercase tracking, monochrome chrome, 16 components"
  metaDescription: "Mazda USA's marketing-site design system as a DESIGN.md file. Mazda Type uppercase tracking carries every label, monochrome chrome over cinematic dark photography, 3px small-step rounding. For React, Next.js, and AI tools."
  highlights:
    - "Uppercase-everywhere typography — Mazda Type runs nav, chips, section titles, and labels in all caps at 9-18px with 1.2-3.5px tracking"
    - "Monochrome chrome — no brand voltage at the chrome layer; 101010 ink, white canvas, and 999 muted gray are the only chromatic tokens"
    - "Cinematic dark hero — full-bleed black film carries the CX-5 hero photograph with white display headline at 35px capitalized and 3.5px tracking"
    - "3px small-step rounding — frequency 14 across cards and surfaces; only the filter-chip strip uses the 999px pill alternate"
    - "Tracking as hierarchy — letter-spacing carries the typographic hierarchy where most brands use weight; the 18px section title at 1.8px tracking reads as the loudest typographic move"
  tags:
    - "Automotive"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Mazda's marketing site commits to a typographic move almost no other automotive brand makes at this scale. **All-uppercase everywhere.** Nav links sit at 11px / 500 in capitals with 2px tracking. Section titles run at 35px / 500 in capitals with 3.5px tracking. Filter chips, footer labels, every category headline, every CTA — capitals, tracked. The only sentence-case prose on the page lives inside small body paragraphs ("We engineer vehicles with the power to transform every drive...") and a single h2 ("A Mazda MX-5 Owner 25 Years In The Making"). The discipline is editorial-magazine on the chrome layer — closer to a Wallpaper* spread than to a Toyota landing page — and it gives the system its visual signature.

    The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 11 color tokens drawn entirely from neutral grayscale — 101010 ink (frequency 908), pure white canvas, a D5D5D5 secondary text, a 999 muted gray, a 676565 photo-overlay neutral, and a single 263854 deep-blue accent that appears just once in the captured page. There is no brand voltage in the conventional sense; the chrome is genuinely monochrome. 14 typography tokens map Mazda Type across uppercase chips (9-18px / 500 / 1.2-2.8px tracking), uppercase Bold callouts (11-13px / 700 / 2-2.6px tracking), and the rare sentence-case body and h2 tiers. 4 radius tokens center on 3px small-step rounding with a 999px pill alternate. 16 component definitions cover the dark cinematic hero, the white feature-card grid, the chip-filter strip, and the chevron-circle slide-control.

    Feed this file to Claude or Cursor and it will reproduce Mazda's specific moves: all-uppercase tracked typography on every nav, chip, and section title; monochrome chrome with zero chromatic brand voltage; cinematic dark hero photography; and 3px small-step rounding. The token references resolve cleanly without invention. The single move worth borrowing only if your category supports cinematic photography is the willingness to let uppercase tracking carry every chromatic moment the chrome would normally do — most brands need at least one accent voltage, and Mazda gets away without one because the imagery is doing the work.
  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.mazdausa.com"
      title: "Mazda — official site"
      description: "Mazda USA'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 Mazda's primary brand color?"
      answer: "Mazda's marketing chrome ships zero chromatic brand voltage. The dominant token is near-black ink #101010 at frequency 908 — used 448 times as text, 447 as border, and 13 as background. Pure white #ffffff handles the page floor at 403 occurrences, and a D5D5D5 secondary gray (128 occurrences) plus a 999 muted gray (110 occurrences) carry every other surface. A deep-blue #263854 and a #007aff Swiper-default blue each appear just once or zero times. The system is genuinely monochrome at the chrome layer; chromatic interest comes entirely from the cinematic dark photography that fills the hero band and feature-card grid."
    - id: "typography"
      title: "What typeface does Mazda use, and what should I use as a substitute?"
      answer: "The system runs Mazda Type — a custom corporate sans licensed by Mazda — across every tier, with fallbacks walking to Helvetica, Arial, and sans-serif. The defining typographic move is uppercase tracking: nav links sit at 11px / 500 in capitals with 2px tracking, section titles at 35px / 500 capitalized with 3.5px tracking, and chips at 11-13px / 700 in capitals with 2-2.6px tracking. The only sentence-case tiers are the body paragraph (14-16px / 400) and one section h2 at 18px / 500. The closest open-source substitute is Inter at weights 400, 500, and 700 with manual uppercase + tracking applied via CSS letter-spacing — the proportions transfer cleanly and Inter's wide cap height reads correctly at the tracked sizes."
    - id: "uppercase-discipline"
      title: "Why does Mazda use uppercase typography almost everywhere?"
      answer: "The uppercase-everywhere treatment is the system's primary brand signature. Across the captured page, 14 of the 20 most-used typographic signatures are uppercase with letter-spacing between 1.2px and 3.5px. The closest peer convention is luxury automotive (Maserati, Aston Martin) and high-fashion editorial (Wallpaper*, Cereal). The decision signals premium-but-accessible: uppercase tracked sans reads as architectural and considered without the heavy serifs that signal traditional luxury or the bold sans that signals dealer-funnel urgency. Sentence-case prose is reserved for the rare longer-form copy block where lowercase legibility is required."
    - id: "hero-band"
      title: "What does Mazda's hero look like?"
      answer: "The hero is a full-bleed cinematic dark photograph — captured as a black film carrying the CX-5 vehicle photo with chromatic moonlight tones — with a 35px white display headline ('5 SIDES OF THE CX-5') in Mazda Type weight 500 / 3.5px tracking centered over the lower third of the frame. Below the headline sit two secondary CTAs and a small dot-pagination indicator. The dark photographic canvas is the system's primary chromatic moment; below the hero the page inverts to pure white with monochrome chip filters, dark feature-card photography tiles, and a section h2 at 18px / 500 in capitalized case."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own premium automotive 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 Mazda's specific moves: all-uppercase tracked typography on nav, chips, and section titles; monochrome chrome with zero brand voltage; cinematic dark hero photography; and 3px small-step rounding. The tokens resolve cleanly. Every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the monochrome-chrome move only works if your photography is cinematic enough to carry the chromatic load — stock automotive shots will leave the page reading as gray-on-gray, and you'll need to introduce at least one accent voltage to compensate."

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

colors:
  ink: "#101010"
  ink-deep: "#000000"
  ink-soft: "#2b2b2b"
  ink-overlay: "#676565"
  ink-muted: "#7a7a7a"
  ink-secondary: "#999999"
  hairline: "#d5d5d5"
  hairline-soft: "#e7e7e7"
  canvas: "#ffffff"
  accent-navy: "#263854"
  surface-blue-gray: "#4a5b6e"

typography:
  display-hero:
    fontFamily: "\"Mazda Type\""
    fontSize: 35px
    fontWeight: 500
    lineHeight: 42px
    letterSpacing: "3.5px"
  section-title:
    fontFamily: "\"Mazda Type\", helvetica, arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 22px
    letterSpacing: "1.8px"
  section-title-mixed:
    fontFamily: "\"Mazda Type\", helvetica, arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 19.8px
    letterSpacing: 0
  label-caps-lg:
    fontFamily: "\"Mazda Type\", helvetica, arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 18.2px
    letterSpacing: "2.8px"
  label-caps-md:
    fontFamily: "\"Mazda Type\", helvetica, arial, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 17px
    letterSpacing: "2.6px"
  label-caps-sm:
    fontFamily: "\"Mazda Type\", helvetica, arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 16px
    letterSpacing: "2.4px"
  label-caps-xs:
    fontFamily: "\"Mazda Type\", helvetica, arial, sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 14px
    letterSpacing: "2px"
  label-caps-xxs:
    fontFamily: "\"Mazda Type\", helvetica, arial, sans-serif"
    fontSize: 9px
    fontWeight: 700
    lineHeight: 18px
    letterSpacing: "2px"
  button-md:
    fontFamily: "\"Mazda Type\", helvetica, arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: "1.3px"
  body-md:
    fontFamily: "\"Mazda Type\", helvetica, arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0
  body-md-tracked:
    fontFamily: "\"Mazda Type\""
    fontSize: 14px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: 0
  body-sm:
    fontFamily: "\"Mazda Type\", helvetica, arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 17px
    letterSpacing: "0.28px"
  body-12:
    fontFamily: "\"Mazda Type\", helvetica, arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 22px
    letterSpacing: "0.1px"
  caption-emphasis:
    fontFamily: "\"Mazda Type\", helvetica, arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 22px
    letterSpacing: "1.8px"

rounded:
  none: "0px"
  xs: "3px"
  full: "999px"

spacing:
  xs: "4px"
  sm: "8px"
  md: "10px"
  base: "12px"
  lg: "20px"
  xl: "24px"
  2xl: "28px"
  3xl: "56px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xs}"
    padding: "12px 24px"
    height: "44px"
    borderColor: "{colors.ink}"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xs}"
    padding: "12px 24px"
    height: "44px"
    borderColor: "{colors.ink}"
  button-ghost-dark:
    backgroundColor: transparent
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xs}"
    padding: "12px 24px"
    height: "44px"
    borderColor: "{colors.canvas}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label-caps-xs}"
    rounded: "{rounded.none}"
    padding: "0px 24px"
    height: "56px"
  nav-link:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.label-caps-xs}"
    padding: "0px 12px"
  hero-band:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-hero}"
    rounded: "{rounded.none}"
    padding: "0"
  hero-heading:
    backgroundColor: transparent
    textColor: "{colors.canvas}"
    typography: "{typography.display-hero}"
  hero-eyebrow:
    backgroundColor: transparent
    textColor: "{colors.canvas}"
    typography: "{typography.label-caps-xxs}"
  section-heading:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.section-title}"
  body-paragraph:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  body-paragraph-tracked:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body-md-tracked}"
  filter-chip:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label-caps-sm}"
    rounded: "{rounded.full}"
    padding: "8px 20px"
    height: "32px"
    borderColor: "{colors.ink}"
  filter-chip-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.label-caps-sm}"
    rounded: "{rounded.full}"
    padding: "8px 20px"
    height: "32px"
  feature-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label-caps-lg}"
    rounded: "{rounded.xs}"
    padding: "20px"
    borderColor: "{colors.hairline-soft}"
  feature-card-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.label-caps-lg}"
    rounded: "{rounded.xs}"
    padding: "20px"
  chevron-circle:
    backgroundColor: transparent
    textColor: "{colors.canvas}"
    rounded: "{rounded.full}"
    height: "40px"
    borderColor: "{colors.canvas}"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label-caps-xs}"
    padding: "56px 24px"
---

## Overview

Mazda's marketing site commits to a typographic move almost no other automotive brand makes at this scale. **Uppercase tracking as voice.** Across the captured page, 14 of the 20 most-used typographic signatures are uppercase capitals with letter-spacing between 1.2px and 3.5px — nav links at 11px / 500 with 2px tracking, filter chips at 12-13px / 700 with 2.4-2.6px tracking, the hero display at 35px / 500 with 3.5px tracking, and the section title at 18px / 500 with 1.8px tracking. The only sentence-case prose tiers on the page are the body paragraph (14-16px / 400) and a single mixed-case h2 ("A Mazda MX-5 Owner 25 Years In The Making"). The discipline is editorial-magazine on the chrome layer — closer to a Wallpaper* or Cereal spread than to a Toyota landing page — and it gives the system its visual signature.

The chrome ships **no chromatic brand voltage at all**. Where Subaru holds a single Pleiades-blue in reserve and BMW carries a saturated blue-and-red Motorsport accent, Mazda runs a genuinely monochrome system. The 11 captured color tokens are entirely grayscale — 101010 ink (frequency 908), pure white canvas (403), a D5D5D5 secondary gray (128), a 999 muted gray (110), plus a handful of subtle neutrals. A deep-blue 263854 appears once as a photo-overlay accident. The single non-neutral hex declared in CSS is the Swiper carousel's default 007aff — wired as a vendor variable that never renders on the page. The chromatic load lives entirely in the cinematic dark photography that fills the hero band and feature-card grid.

Tracking does the labor of hierarchy. **Where most brands use weight, Mazda uses letter-spacing.** Display sizes range from 35px (hero) down to 9px (footnote chip), but the more important variation across the system is the tracking scale: 0px on sentence-case prose, 0.1-0.28px on slightly-tracked sentence body, 1.2-1.3px on button labels and small-caps callouts, 1.8-2px on section titles and nav links, 2.4-2.8px on filter chips, and 3.5px on the hero display. The tracking ladder is the system's primary hierarchical device. Weight does some work — 500 for most caps, 700 for Bold callouts — but tracking carries the heavier signal.

**Key Characteristics:**
- All-uppercase chrome — nav, chips, section titles, footer labels, and every CTA in Mazda Type capitals with 1.2-3.5px tracking.
- Monochrome palette — `{colors.ink}` (#101010, frequency 908) carries text and border; pure `{colors.canvas}` (#ffffff) handles the page floor; the page ships zero chromatic accent at the chrome layer.
- Hero band is cinematic dark — `{colors.ink}` canvas with full-bleed CX-5 photography and a 35px white display ("5 SIDES OF THE CX-5") at 3.5px tracking.
- 3px small-step rounding (`{rounded.xs}` — frequency 14) on every card and surface; only the filter-chip strip uses the 999px pill alternate (`{rounded.full}` — frequency 3).
- Tracking-as-hierarchy: 0px on body prose, 1.8-2px on section titles, 2-3.5px on every uppercase label.
- The single sentence-case h2 on the page ("A Mazda MX-5 Owner 25 Years In The Making") at 18px / 500 / 0 tracking is the typographic outlier — a deliberate softening for editorial long-form copy.
- Filter-chip rail uses a single black-fill active state — no Pleiades blue, no chromatic emphasis. The active chip simply inverts ink and canvas.
- Bold weight (700) is reserved for the smallest uppercase labels (8-13px) where 500 weight would lose legibility at the tracked sizes.

## Colors

### Ink

- **Ink** (`{colors.ink}` — #101010): frequency 908. Used as text (448), background (13), border (447). The dominant token across every surface — primary text on white, hero canvas background, filter-chip active fill, footer label color. Slightly warmer than pure black (3-point lightness lift) and softer against the cinematic dark photography. The single hex that effectively defines the system.
- **Ink Deep** (`{colors.ink-deep}` — #000000): frequency 21. Used as text (9), background (3), border (9). Pure black is rare — scoped to a few incidental UI fragments and the page's very small darkest-tone shadows.
- **Ink Soft** (`{colors.ink-soft}` — #2b2b2b): frequency 6. Used as text (3), border (3). A slightly-lifted dark gray used inside disclaimers and tertiary text rows.
- **Ink Overlay** (`{colors.ink-overlay}` — #676565): frequency 13. Used as text (6), background (1), border (6). The overlay neutral inside the dark cinematic-card surfaces — a mid-warmth gray that survives against both the white canvas and the dark photo tile.
- **Ink Muted** (`{colors.ink-muted}` — #7a7a7a): frequency 8. Used as text (4), border (4). A secondary disclaimer tone.
- **Ink Secondary** (`{colors.ink-secondary}` — #999999): frequency 110. Used as text (55), border (55). The dominant secondary text tone — sub-headlines under section titles, model meta-strips, footer category sub-rows.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 403. Used as text (177), background (48), border (178). The page floor below the hero band, the feature-card fill, the filter-chip inactive fill. Pure white reading the inversion against the dark hero and dark feature tiles. The extraction clustered an adjacent off-white near-white into this token; both render as the same surface.

### Hairline

- **Hairline** (`{colors.hairline}` — #d5d5d5): frequency 128. Used as text (64), border (64). The default neutral border tone — model-card outlines, filter-chip strip dividers, footer category rails. A quiet warm-gray.
- **Hairline Soft** (`{colors.hairline-soft}` — #e7e7e7): frequency 2 — background only. The lightest neutral, used inside subtle column dividers and the feature-card resting outlines.

### Accent (incidental, non-brand)

- **Accent Navy** (`{colors.accent-navy}` — #263854): frequency 2. Used as text (1), border (1). A deep navy that appears just twice in the captured page — most likely an artifact of vehicle-color overlay or an accent on a single tile. Not a brand voltage; do not deploy as a token.
- **Surface Blue-Gray** (`{colors.surface-blue-gray}` — #4a5b6e): frequency 1 — background only. A single occurrence on a photographic overlay band. Same status as the accent-navy.

The vendor variable `--swiper-theme-color: #007aff` is declared in CSS but never renders on the page; the Swiper carousel uses its own theme that Mazda overrides through component styling.

## Typography

### Font Family

The system runs **Mazda Type** — a custom corporate sans licensed by Mazda — as the sole brand family across every tier. Fallbacks walk `helvetica, arial, sans-serif`. There is no separate display serif, no secondary sans, no monospace. The defining typographic decision is the commitment to a single family with hierarchy carried by weight + tracking + case, not by family variation.

Two body-text rows are wired to the bare `"Mazda Type"` family name without the fallback stack — these are the rare sentence-case tiers and they fall back to the system default if the font fails to load. Every other tier walks the full Helvetica fallback.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-hero}` | 35px | 500 | normal | 3.5px | Hero h1 ("5 SIDES OF THE CX-5") — all-caps, widest tracking |
| `{typography.section-title}` | 18px | 500 | 22px | 1.8px | Section title ("FOR THOSE WHO DO MORE THAN MOVE") |
| `{typography.section-title-mixed}` | 18px | 500 | 19.8px | 0 | Single mixed-case h2 ("A Mazda MX-5 Owner 25 Years In The Making") |
| `{typography.label-caps-lg}` | 14px | 500 | 18.2px | 2.8px | Feature-card uppercase headline |
| `{typography.label-caps-md}` | 13px | 700 | normal | 2.6px | Larger uppercase callout, primary chip label |
| `{typography.label-caps-sm}` | 12px | 700 | normal | 2.4px | Mid-size uppercase chip and section eyebrow |
| `{typography.label-caps-xs}` | 11px | 500 | 14px | 2px | Top-nav links ("Build & Price", "Find a Dealer") |
| `{typography.label-caps-xxs}` | 9px | 700 | 18px | 2px | Smallest uppercase footnote, badge text |
| `{typography.button-md}` | 14px | 500 | 20px | 1.3px | CTA button label |
| `{typography.body-md}` | 16px | 400 | 28px | 0 | Long-form body paragraph (the rare sentence-case tier) |
| `{typography.body-md-tracked}` | 14px | 400 | 22px | 0 | Body prose inside dark feature tiles |
| `{typography.body-sm}` | 14px | 400 | 17px | 0.28px | Sentence-case body with light tracking |
| `{typography.body-12}` | 12px | 500 | 22px | 0.1px | Sentence-case footnote (slightly-tracked) |
| `{typography.caption-emphasis}` | 18px | 500 | 22px | 1.8px | Same as section title — used inside feature-card captions |

### Principles

The system's hierarchy lives in tracking, not in weight or family. Display weight stays at 500 for almost every tier; 700 is reserved for the smallest uppercase callouts (8-13px) where 500 weight would lose legibility at the tracked sizes. The tracking ladder runs: 0 (body), 0.1-0.28px (slightly-tracked body), 1.2-1.3px (small caps), 1.8-2px (section titles, nav), 2-2.8px (chips, mid-size caps), 3.5px (hero display). This is the inverse of the convention — most brands use weight to signal hierarchy and reserve tracking for one or two specific moments. Mazda uses tracking pervasively and weight sparingly.

The single mixed-case h2 ("A Mazda MX-5 Owner 25 Years In The Making") at 18px / 500 / 0 tracking is the typographic outlier — a deliberate softening for editorial long-form copy where uppercase tracking would feel mechanical. The presence of this single tier reveals the discipline of the rest of the system: every other display moment is uppercase + tracked because the brand has decided that mixed-case prose is reserved for editorial story copy only.

### Note on Font Substitutes

Mazda Type is proprietary. The closest open-source substitute is **Inter** at weights 400, 500, and 700 with uppercase + letter-spacing applied via CSS — Inter's wide cap height transfers cleanly at the 9-35px tracked sizes. **Geist** (Vercel's open-source sans) is a tighter alternative for the 35px hero tier. For the rare sentence-case body tiers, the system Helvetica fallback Mazda already declares carries the typography acceptably.

## Layout

### Spacing System

- **Base unit:** 4px (with 8px and 12px as the dominant modules).
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 10px · `{spacing.base}` 12px · `{spacing.lg}` 20px · `{spacing.xl}` 24px · `{spacing.2xl}` 28px · `{spacing.3xl}` 56px.
- **Section padding (vertical):** ~56px between major sections; the hero band extends edge-to-edge with no top padding.
- **Card internal padding:** `{spacing.lg}` (20px) on the white feature-card and the dark feature-card, with 32×27px on the chip-card filter row.
- **Top-nav padding:** 0 vertical (height-driven), `{spacing.xl}` (24px) horizontal.

### Grid & Container

- **Max content width:** ~1290px on the feature-card row and section bands; the hero band extends to the viewport edge.
- **Hero band:** full-bleed cinematic dark canvas with the CX-5 photograph filling the band and the hero display + secondary CTAs centered over the lower third.
- **Filter-chip strip:** horizontal pill-rail above the model grid carrying 4-6 vehicle-class chips with 8-20px padding between chips.
- **Feature-card grid:** 4-column row for the cinematic dark feature tiles, alternating with a 2-column "story" band for the editorial mixed-case h2 + photograph pair.
- **Offer band:** a centered single-tile promotional card with the dark feature-card surface and a small Special Offers callout.

### Rhythm

The page alternates between **cinematic dark** and **white editorial**. The hero is dark cinematic, the section below ("For Those Who Do More Than Move") is white with uppercase tracked title, the next band ("A Mazda MX-5 Owner 25 Years In The Making") is white with a single mixed-case h2 and a wide photograph, the model-filter band is white with chip rail, the dark feature-card grid runs the cinematic treatment again, and the Special Offers band returns to white. The dark-to-light alternation is the page's primary structural device — every band-change is a content-context shift.

## Elevation

The system has essentially **no shadow tier**. The captured page records zero shadow occurrences. Depth comes from:

- **Surface-color inversion:** the cinematic dark hero band against the white below-fold canvas creates the primary depth illusion. Pure `{colors.ink}` (#101010) against pure `{colors.canvas}` (#ffffff) reads as the maximum possible value contrast.
- **Cinematic photography:** the dark feature-card tiles each carry their own photographic depth — wide-angle vehicle photographs lit with chromatic moonlight, deep blacks, and soft natural-light falloff.
- **Hairline borders:** `{colors.hairline}` (#d5d5d5) on filter chip strips; `{colors.hairline-soft}` (#e7e7e7) on subtle column dividers. The chrome borders are quiet enough to read as edge-only.

No drop-shadow is rendered anywhere on the captured page, including under modals, dropdowns, and the dark feature tiles.

## Shapes

The radius scale is **binary** — small-step or full pill, with nothing in between.

- `{rounded.none}` 0px — the hero band, photograph edges, dark feature-tile edges where they touch the band.
- `{rounded.xs}` 3px — frequency 14. The default rounding on every white feature-card, every dark cinematic feature tile, the secondary button, and the offer-band surface. The system's structural radius.
- `{rounded.full}` 999px — frequency 3. The filter-chip rail (active and inactive states), the chevron-circle slide control beside the hero, and the round vehicle-class filter pills.

There is no 6 / 8 / 12px middle tier. Either a card uses the 3px small-step or it goes to a full pill on a chip or icon-circle. The discipline keeps the layout reading as engineering-precise rather than friendly-soft, matching the typographic restraint of the all-uppercase tracking system.

## Components

**`button-primary`** — Near-black `{colors.ink}` fill, white text, `{rounded.xs}` 3px radius, 12x24 padding, 44px height, `{typography.button-md}` (Mazda Type 14px / 500 / 1.3px tracking) all-uppercase. Used for the resting-state CTA on white-canvas sections.

**`button-secondary`** — White fill, near-black text, 1px `{colors.ink}` border, otherwise identical to the primary. Used for "Find Inventory", "View Inventory" tertiary CTAs.

**`button-ghost-dark`** — Transparent fill, white text, 1px white border, used inside the dark hero band where the primary button's filled black background would disappear into the canvas.

**`top-nav`** — White surface, `{colors.ink}` links, `{typography.label-caps-xs}` (11px / 500 / 2px tracking) all-uppercase, 56px height, 24px horizontal padding. Mazda wordmark and emblem flush left, primary category links center (Build & Price, Find a Dealer, etc.), search and locator flush right.

**`nav-link`** — `{colors.ink}` text in `{typography.label-caps-xs}`, 12px horizontal padding, no border. The uppercase nav rail with 2px tracking — the system's smallest typographic moment that still reads as a label.

**`hero-band`** — `{colors.ink}` canvas, full-bleed, 0 padding. Holds the CX-5 photograph at full bleed and the hero display + secondary CTAs centered over the lower third.

**`hero-heading`** — White text on the dark canvas, Mazda Type 35px / 500 / 3.5px tracking, all-uppercase. "5 SIDES OF THE CX-5" — the system's loudest typographic moment.

**`hero-eyebrow`** — White text at `{typography.label-caps-xxs}` (9px / 700 / 2px tracking). The small label that sits above the hero display.

**`section-heading`** — `{colors.ink}` text, Mazda Type 18px / 500 / 1.8px tracking, all-uppercase. Used for section titles ("FOR THOSE WHO DO MORE THAN MOVE", "DISCOVER YOUR NEXT DRIVE", "GET STARTED WITH SAVINGS").

**`body-paragraph`** — `{colors.ink}` text at `{typography.body-md}` (16px / 400 / 0 tracking). The rare sentence-case tier — "We engineer vehicles with the power to transform every drive..."

**`body-paragraph-tracked`** — `{colors.ink}` text at `{typography.body-md-tracked}` (14px / 400 / 0 tracking). The hero sub-paragraph and feature-card body copy.

**`filter-chip`** — White fill, near-black text, 1px `{colors.ink}` border, `{rounded.full}` 999px pill, 8x20 padding, 32px height, `{typography.label-caps-sm}` (12px / 700 / 2.4px tracking) uppercase. The vehicle-class rail above the model grid.

**`filter-chip-active`** — `{colors.ink}` fill, white text, otherwise identical to the inactive. The single active-state device in the system — no Pleiades blue, no chromatic emphasis, just inverted ink-and-canvas.

**`feature-card`** — White surface, `{rounded.xs}` 3px radius, 20px padding, 1px `{colors.hairline-soft}` border. Holds a vehicle photograph at 16:9 and a category label below ("FOR THOSE WHO LIVE LIFE", "FOR THOSE WHO ALWAYS DRIVE WITH FAMILY").

**`feature-card-dark`** — `{colors.ink}` fill, white text, `{rounded.xs}` 3px radius, 20px padding. The cinematic vehicle tile used in the "Discover Your Next Drive" grid.

**`chevron-circle`** — Transparent fill, white icon, `{rounded.full}` 999px on 40px square base, 1px white border. The carousel previous/next control beside the hero band.

**`footer`** — White canvas, `{colors.ink}` text, 56x24 padding. Footer category labels render at `{typography.label-caps-xs}` (11px / 500 / 2px tracking) — the same nav-link tier that runs the top-nav rail.

## Do's and Don'ts

**Do** keep nav, chips, section titles, and CTAs in all-uppercase Mazda Type with tracking between 1.2px and 3.5px. The uppercase-everywhere discipline is the system's primary brand signature; introducing a sentence-case nav rail or a no-tracking chip label dilutes the typographic voice that distinguishes Mazda from Toyota and Honda.

**Do** reserve mixed-case typography for body paragraphs and the single editorial h2 tier (`{typography.section-title-mixed}`). The lone mixed-case section title at 18px / 500 / 0 tracking is the deliberate softening device for long-form story copy; multiplying it across multiple section titles loses the editorial-magazine framing.

**Do** carry every active-state device through ink-and-canvas inversion. The filter-chip active state, the active vehicle-class tab, the primary button — all use the same `{colors.ink}` fill on `{colors.canvas}` text move. Introducing a Pleiades-blue active highlight (the Subaru convention) destroys the monochrome chrome discipline.

**Do** trust the cinematic dark photography to carry every chromatic moment. The chrome layer ships zero brand voltage deliberately. If a category genuinely needs a chromatic chip, introduce it through the imagery (a specific Soul Red Mazda paint hero photograph), not through a token.

**Don't** introduce a chromatic brand accent at the chrome layer. The captured page ships zero non-grayscale tokens that render meaningfully. Adding a Soul Red CTA tint or a Machine Gray nav accent reads as a different brand and breaks the monochrome discipline.

**Don't** use `{colors.ink-deep}` (#000000) instead of `{colors.ink}` (#101010) for primary text or backgrounds. The 3-point lightness lift in #101010 is the system's primary chrome-layer warmth move; pure black reads as harder and breaks the visual rhythm between chrome and the cinematic photography.

**Don't** introduce a 6 / 8 / 12px middle radius tier. The system runs binary 3px small-step or 999px pill; adding a soft middle radius reads as borrowed from a SaaS or consumer-electronics system and breaks the engineering-precise shape language that mirrors the typographic restraint.

**Don't** apply uppercase tracking to body paragraphs. Body prose lives at `{typography.body-md}` (16px / 400 / 0 tracking) or `{typography.body-md-tracked}` (14px / 400 / 0 tracking); imposing 1.8-2px tracking on long-form copy destroys legibility at 14-16px and is the move the brand pointedly avoids.

## Known Gaps

- **Primary button capture:** the extractor did not find a primary button on the captured surface — the hero CTAs are visible in the screenshot but rendered as `<a>` anchors styled as buttons, which the extractor classified as nav links. The primary-button token in this spec is reverse-engineered from the visible chrome and may diverge slightly from the live render.
- **Hover and focus states:** the captured page exposes no hover or focus variants for chips, buttons, or links. The full state matrix lives inside the configurator and dealer-locator flows.
- **Form input states:** the extractor did not capture an input field at the chrome layer; input styling lives inside the Build & Price configurator, the Find a Dealer modal, and the financing-calculator flow.
- **Sub-brand surfaces:** Mazda's CX-90 PHEV, MX-5 Miata, and the CX-50 Meridian sub-brands each carry their own photographic direction and may introduce sub-brand chrome (paint-color names, trim badges) not exposed at the marketing chrome layer.
- **Motion:** the hero photograph cross-fades across the "5 Sides of the CX-5" sequence, and the chevron-circle controls slide the carousel forward; the spec captures end-state values only.
- **Soul Red and Machine Gray paint accents:** Mazda's signature paint colors (Soul Red Crystal, Machine Gray, Polymetal Gray) appear inside the vehicle photographs but never as chrome tokens. The spec does not represent them because the chrome layer is genuinely monochrome.
- **Mobile breakpoints:** the spec captures the 1440-viewport rendering. The filter-chip strip becomes horizontally-scrollable on mobile, the 4-column feature-card grid stacks to single-column, and the hero band shifts to a stacked treatment with the photograph above the headline.