What is Mazda's primary brand color?

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.

What typeface does Mazda use, and what should I use as a substitute?

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.

Why does Mazda use uppercase typography almost everywhere?

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.

What does Mazda's hero look like?

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.

Can I use this DESIGN.md to build my own premium automotive site?

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.

Mazda USA Design System

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

About Mazda USA DESIGN.md

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

Automotive

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.

What makes it distinct

Uppercase-everywhere typographyMazda Type runs nav, chips, section titles, and labels in all caps at 9-18px with 1.2-3.5px tracking
Monochrome chromeno brand voltage at the chrome layer; 101010 ink, white canvas, and 999 muted gray are the only chromatic tokens
Cinematic dark herofull-bleed black film carries the CX-5 hero photograph with white display headline at 35px capitalized and 3.5px tracking
3px small-step roundingfrequency 14 across cards and surfaces; only the filter-chip strip uses the 999px pill alternate
Tracking as hierarchyletter-spacing carries the typographic hierarchy where most brands use weight; the 18px section title at 1.8px tracking reads as the loudest typographic move

Live at mazdausa.com

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

mazdausa.com

Explore Mazda USA

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.

Mazda USA design system FAQ

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

Mazda — official site

Mazda USA's public 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.