What is Honda's primary brand color, and why isn't red on the homepage?

The famous Honda red — the color you see on every model badge, dealership sign, and TV spot — is genuinely absent from the captured marketing surface. The load-bearing chrome color is a deep navy that appears 898 times on the page (449 as text, 449 as border), used for vehicle-card text, footer link rows, hairline outlines, and the brand mark. A sky blue appears 36 times (11 text, 14 background, 11 border) and is the only chromatic brand-layer color in the extraction; it does social-icon and pagination duty rather than CTA duty. Honda's marketing chrome treats the iconic red as a product-side anchor — reserved for the model badge and the dealership signage — rather than as a chrome voltage. The chrome stays calm so the photograph and the eventual vehicle badge carry the brand.

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

Honda runs Avenir Next at four weights wired into custom font names: AvenirNextRegular, AvenirNextMedium, AvenirNextDemi, AvenirNextBold. All four sit at CSS font-weight 400 — the visual weight comes from the loaded font file, not from font-weight. The hero h2 sits at 27px / 31px / Medium with 0.1px tracking; section heads at 20-26px / Medium; body at 12-14px / Regular; uppercase labels at 14px / Demi with 0.5px tracking. The closest open-source substitute is Inter at weights 400, 500, 600, 700 respectively; Mona Sans ships with similar proportions if licensing budget allows. Honda's choice of Avenir over a system font reads warmer and rounder than the Helvetica Neue stack on Toyota.

Why does Honda only use two main radius values?

The radius scale is binary by intent: 4px on every card (60 occurrences across vehicle tiles, dropdown menus, the cookie notice, and the financing tools) and 33px on every CTA pill (10 occurrences across primary, secondary, and pagination chrome). 14px appears 3 times on slightly-larger feature cards but is the exception, not a tier. There is no 8px or 12px middle option. The split is softer than Toyota's 8px-card / 50px-pill binary — Honda's 4px cards read almost-rectangular and the 33px pills read as warm but not fully-rounded — but the principle is the same: cards and CTAs occupy distinct shape categories.

Why does Honda use deep navy instead of pure black?

The dominant chrome color is a deep navy rather than pure black. The choice softens the high-contrast feel of the page — navy-on-white reads warmer than black-on-white at the same luminance contrast, and the navy ties visually to the hero photograph's dark sky tones rather than competing with them. Pure black appears 121 times on the page but almost entirely as gradient ink (92 occurrences) used to fade photographs to readable text — not as text or border. The actual text and border load is carried by the navy. The secondary navy is one step darker and shows up 108 times as link text and active-state outlines.

Can I use this DESIGN.md to build my own family-automotive marketing 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 Honda's specific moves: navy as load-bearing chrome instead of brand-color voltage, four-weight Avenir Next at uniform CSS weight 400, binary 4px-card / 33px-pill radius, sky blue scoped to social and pagination chrome. The tokens resolve cleanly. One caveat: the deliberate absence of the iconic brand color is the system's strongest move and the hardest to reproduce — most marketing teams reach for the brand red on at least one CTA. Honda holds it back entirely, which only works if your product itself carries the brand color so visibly that the chrome can stay quiet.

Honda Design System

Honda's marketing system as a DESIGN.md file.

About Honda DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source automobiles.honda.com

Automotive

Honda's marketing site does something almost no other family-automotive brand attempts: it leaves the iconic brand color out of the chrome entirely. The Honda red that you find on every dealership sign, every TV ad, and every model badge is absent from the captured marketing surface. The load-bearing chrome color is a deep navy — the color appears 898 times across the page as the text-and-border tone, the model-name lockup, the vehicle-card body, the footer link rows. The single chromatic accent on the homepage is a quiet sky blue that does social-icon and pagination duty about 36 times. The hero band itself is a black photographic strip with a 27px white h2 overlaid; the only colored CTA pill in the captured frame is light-gray with navy text.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 10 color tokens dominated by deep navy (898 occurrences) and white (661), with hairline gray (210), pure black (121), and a darker navy for body links (108) doing the rest of the structural work. Typography is a four-weight Avenir Next stack — Regular, Medium, Demi, Bold — all sitting at CSS weight 400, with visual hierarchy built from font-family swap rather than from font-weight. Display tops out at 27px on the hero h2; section heads sit at 20-26px; body at 12-14px. The radius scale is binary: 4px on every card and 33px pill on every CTA. 15 components cover the hairline filter chip, the vehicle-card grid, the pagination dot, the dark hero band, and the search-input pill.

Feed this file to Claude or Cursor and it reproduces Honda's specific moves: navy-as-chrome rather than brand-color-as-chrome, four-weight Avenir Next at uniform CSS weight 400, binary 4px-or-pill radius, and the deliberate absence of red. The token references resolve cleanly. The one move worth borrowing only if you sell a high-volume family product: holding the iconic brand color back from the chrome entirely — keeping it reserved for the model badge, the dealership signage, and the TV ad. The marketing site becomes a calm browser instead of a sales pitch, and the brand color reads louder when the user finally encounters it on a vehicle.

What makes it distinct

Navy carries the system, not reddeep navy carries 898 occurrences while the famous Honda red is absent from the captured marketing chrome
Four-weight Avenir NextRegular, Medium, Demi, Bold all at CSS weight 400; visual hierarchy comes from font-family swap, not from font-weight
Binary radius scale4px on every card (60 occurrences) and 33px pill on every CTA (10 occurrences), with no middle tier
Sky blue as the single chromatic accentwired as social-icon and pagination color, used 36 times total
27px hero h2 in white on photographthe loudest typographic moment in the system runs at weight 400, not 700

Live at automobiles.honda.com

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

automobiles.honda.com

Explore Honda

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.

Honda design system FAQ

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

Honda Automobiles — official site

Honda'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.