What is Toyota's primary brand color?

Toyota's signature red is wired into the CSS as --dg_primary and --dg_primaryLight, with the exact value rendered as a saturated warm red. Across the captured marketing page it appears 662 times — 331 as text, 331 as border, zero as background fill. That breakdown is the entire story of how Toyota uses the color: it draws the Toyota oval in the top-left nav, it underlines primary CTAs on hover, it marks the active filter chip with a small dot, it tints the heart icon on the favorites button. Every other surface on the homepage — buttons, cards, dropdowns, dealership-tools sidebar — stays black-on-white. The red is a signal, not a paint.

What typefaces does Toyota use, and what should I use as substitutes?

Toyota runs three weights of Helvetica Neue wired into custom font names: tcomLight (Helvetica Neue Light) for body and long-form copy, tcomMed (Helvetica Neue Medium) for emphasis and the hero h2, and tcomSans (Helvetica Neue regular) for buttons and tabular text. All three sit at weight 400 in CSS — the visual weight comes from the loaded font file, not from font-weight. Display tops out at 48px / 56px line-height on the hero; body sits at 14px / 22px; captions at 10px / 18px. The closest open-source substitute is Inter at weights 300, 500, and 400 respectively; Helvetica Now ships with similar proportions if licensing budget allows.

Why does Toyota only use two radius values?

The radius scale is genuinely binary: 8px on every card (119 occurrences across vehicle tiles, dropdown menus, modals, sidebar panels) and 50px on every CTA pill (104 occurrences across primary, secondary, ghost, and filter chips). 4px appears 82 times but only on tiny utility chrome — checkboxes, the borders of dealership-tools input fields. There is no 12px or 16px middle tier. Every interactive surface is either a soft-cornered card or a fully-rounded pill. This binary makes the CTA pills read as the warmest, most-tappable elements on the page; with a middle radius the contrast would muddy.

Why does Toyota's CSS declare so many colors it never uses on the homepage?

The captured palette includes status colors that render zero times on the marketing surface: pending blue, ready green, gold, an active dark-red, and a hover deep-red. These live in the CSS as --dg_pending, --dg_ready, --dg_gold, --dg_active, and --dg_hover, with sensible hex values, but the homepage chrome never paints any of them. They belong to the dealership-tools layer — vehicle-availability flags, lease-calculator status badges, finance-portal state indicators — that takes over once a user picks a model and starts configuring. The marketing site shares the same CSS file, so the unused tokens leak into the extraction even though they never appear above the fold.

Can I use this DESIGN.md to build my own 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 Toyota's specific moves: signature-red as text-and-border accent rather than fill, three-weight Helvetica Neue at modest 400 weight, binary 8px-or-pill radius, dealership-tool spacing density (9x24 button padding, 12px captions, -8px negative margins to tuck chips against their parents). The tokens resolve cleanly. The one caveat: this is mainstream-automotive chrome optimized for transactional clarity, not luxury or aspirational positioning — if you need editorial photography and a magazine feel, anchor on Ferrari or Aston Martin instead.

Toyota Design System

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

About Toyota DESIGN.md

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

Automotive

Toyota's marketing site does the opposite of what every luxury automotive brand does. Where Porsche, Aston Martin, and Ferrari paint the page with photography and let the brand color recede to almost nothing, Toyota keeps the brand red front-and-center but never fills a single surface with it. The signature red shows up 662 times in the captured page — every count of it is either text or a 1px border. The Toyota oval in the top-left, the underline beneath "Shop New Vehicles," the heart icon on the favorites button, the dot beside an active filter chip: all signature red, all hairline-thin. The hero, the cards, the body, every interactive surface stays black-on-white.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 14 color tokens dominated by black (2731 occurrences) and the signature red (662), with a long tail of status colors (pending blue, ready green, gold, active dark-red, hover deep-red) that live in the CSS as `--dg_pending`, `--dg_ready`, `--dg_gold`, `--dg_active`, `--dg_hover` but never paint the homepage. Typography is a three-weight Helvetica Neue stack — tcomLight, tcomMed, tcomSans — at modest 400 weight across every tier including the 48px hero h2. The radius scale is binary: 8px on every card (119 occurrences) and 50px pill on every CTA (104 occurrences). 16 components cover the pill CTA, the hairline filter chip, the vehicle-card grid, the dealership-tool search bar, and the dark footer.

Feed this file to Claude or Cursor and it reproduces Toyota's specific moves: signature-red as scarce accent rather than canvas voltage, Helvetica Neue Light at 14px body, 8px card / 50px pill binary radius, dealership-tool density (9x24 buttons, 12px captions). The one move worth borrowing only if you sell a high-trust transactional product: red used exclusively as a text-and-border signal, never a fill, keeps the brand legible without ever shouting. Most marketing teams reach for an orange or a softer accent and end up with a brand voice that feels apologetic; Toyota keeps the red sharp by holding it to outline duty.

What makes it distinct

Red as accent, not canvasthe signature red appears 662 times but never as a background fill, only as text and 1px borders against a black-on-white chrome
Three-weight Helvetica NeuetcomLight at 400 for body, tcomMed at 400 for emphasis, tcomSans at 400 for buttons; no 700+ moment anywhere on the page
Binary radius scale8px on every card (119 occurrences) and 50px pill on every CTA (104 occurrences), with nothing in between
Status palette declared, not renderedpending blue, ready green, gold, active dark-red live in CSS variables but never paint the homepage
Dealership-tool density9x24 button padding, 12px caption type, -8px negative margins; the chrome is a transactional tool surface, not editorial marketing

Live at toyota.com

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

toyota.com

Explore Toyota

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.

Toyota design system FAQ

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

Toyota — official site

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