--- version: alpha name: "Toyota" website: "https://www.toyota.com" description: >- A Japanese automaker whose marketing site treats its signature red as a hairline-and-text accent rather than a paint-the-page voltage — toyota.com runs an almost-entirely black-on-white chrome with the Toyota oval and CTA underlines in saturated red, sitting on a 48px Helvetica Neue Medium hero headline ("2026 Sienna") rendered in ink white over a photographed vehicle. Body type is Helvetica Neue Light at 14-16px / weight 400; there is no proprietary display family. The radius scale is binary — 8px on cards, 50px pill on every CTA — and the palette dumps a full status set (pending blue, ready green, gold, active dark-red) into the CSS without using them on the homepage. The whole system is a dealership-tool chassis with the brand's iconic red as the only chromatic moment. seo: title: "Toyota Design System for React — signature red, Helvetica Neue, 16 components" metaDescription: "Toyota's marketing system as a DESIGN.md file. Signature red as scarce text accent, Helvetica Neue Light/Medium across every tier, binary 8px-or-pill radius scale, 14 colors, 16 components. For React, Next.js, and AI coding tools." highlights: - "Red as accent, not canvas — the 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 Neue — tcomLight at 400 for body, tcomMed at 400 for emphasis, tcomSans at 400 for buttons; no 700+ moment anywhere on the page" - "Binary radius scale — 8px on every card (119 occurrences) and 50px pill on every CTA (104 occurrences), with nothing in between" - "Status palette declared, not rendered — pending blue, ready green, gold, active dark-red live in CSS variables but never paint the homepage" - "Dealership-tool density — 9x24 button padding, 12px caption type, -8px negative margins; the chrome is a transactional tool surface, not editorial marketing" tags: - "Automotive" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. 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.toyota.com" title: "Toyota — official site" description: "Toyota'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 Toyota's primary brand color?" answer: "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." - id: "typography" title: "What typefaces does Toyota use, and what should I use as substitutes?" answer: "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." - id: "radius-scale" title: "Why does Toyota only use two radius values?" answer: "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." - id: "status-colors" title: "Why does Toyota's CSS declare so many colors it never uses on the homepage?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own 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 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." mockups: - "marketing-hero" - "media-grid" colors: primary: "#e10a1d" primary-hover: "#b00716" primary-active: "#890713" canvas: "#ffffff" off-white: "#f6f6f6" ink: "#000000" gray-dark: "#606060" gray: "#919191" gray-disabled-dark: "#767676" gray-disabled-light: "#bababa" hairline: "#d8d8d8" tag-bg: "#eef3ff" pending: "#145fff" ready: "#009b0d" gold: "#b6a171" typography: display-xl: fontFamily: "tcomMed, \"Helvetica Neue Medium\", Arial, sans-serif" fontSize: 48px fontWeight: 400 lineHeight: 56px letterSpacing: "-0.5px" display-md: fontFamily: "tcomMed, \"Helvetica Neue Medium\", Arial, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 32px letterSpacing: "-0.5px" heading-md: fontFamily: "tcomMed, \"Helvetica Neue Medium\", Arial, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 28px letterSpacing: "-0.05px" body-lg: fontFamily: "tcomLight, \"Helvetica Neue Light\", Arial, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 32px letterSpacing: 0 body-md: fontFamily: "tcomSans, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 28px letterSpacing: 0 body-sm: fontFamily: "tcomLight, \"Helvetica Neue Light\", Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 22px letterSpacing: "-0.1px" label-md: fontFamily: "tcomMed, \"Helvetica Neue Medium\", Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 14px letterSpacing: 0 caption: fontFamily: "tcomLight, \"Helvetica Neue Light\", Arial, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 18px letterSpacing: 0 button-md: fontFamily: "tcomSans, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 28px letterSpacing: 0 nav-link: fontFamily: "tcomSans, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 24px letterSpacing: "1px" micro-uppercase: fontFamily: "tcomSans, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 24px letterSpacing: "1px" rounded: none: "0px" sm: "4px" md: "8px" lg: "20px" xl: "28px" pill: "50px" full: "9999px" spacing: xxs: "5px" xs: "6px" sm: "8px" md: "10px" base: "16px" lg: "20px" xl: "24px" 2xl: "32px" components: button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "9px 24px" height: "44px" border: "0" button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "9px 24px" height: "44px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "9px 24px" height: "44px" borderColor: "{colors.ink}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "12px 32px" height: "60px" borderColor: "{colors.hairline}" nav-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "8px 12px" brand-mark: backgroundColor: transparent textColor: "{colors.primary}" rounded: "{rounded.none}" padding: "0" hero-heading: backgroundColor: transparent textColor: "{colors.canvas}" typography: "{typography.display-xl}" padding: "0" section-heading: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.display-md}" body-paragraph: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" body-paragraph-muted: backgroundColor: transparent textColor: "{colors.gray-dark}" typography: "{typography.body-sm}" vehicle-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: "16px" borderColor: "{colors.hairline}" filter-chip: backgroundColor: "{colors.tag-bg}" textColor: "{colors.ink}" typography: "{typography.label-md}" rounded: "{rounded.pill}" padding: "8px 14px" height: "32px" active-indicator: backgroundColor: "{colors.primary}" textColor: "{colors.primary}" rounded: "{rounded.full}" padding: "0" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "12px 32px" height: "44px" borderColor: "{colors.hairline}" footer: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.caption}" padding: "32px 24px" --- ## Overview Toyota's marketing site inverts the automotive convention. **Red as outline, not paint.** Where Ferrari fills the page with crimson photography and Porsche reserves Guards Red for a single CTA on a white canvas, Toyota's signature red (`{colors.primary}` — #e10a1d) appears 662 times on the captured page and never once as a background fill. The breakdown is exact and intentional: 331 occurrences as text, 331 as 1px borders. The Toyota oval in the top-left nav, the underline beneath active section links, the hairline ring around an active filter chip, the heart on the favorites button — every chromatic moment in the system is hairline-thin or text-thin. The chrome itself stays black-on-white. The system's typographic discipline reinforces the move. Three weights of Helvetica Neue (tcomLight, tcomMed, tcomSans) carry every tier from the 48px hero h2 down to the 10px footer caption, all wired at CSS weight 400 — the visual heft comes from the loaded font file, not from font-weight. There is no 700+ moment anywhere on the page. The hero h2 "2026 Sienna" at 48px / 56px / weight 400 in white over a vehicle photograph is the loudest typographic event in the system, and it still reads quieter than the 56px / 700 hero on a typical SaaS marketing page. The radius scale is **binary**: 8px on every card surface (119 occurrences) and 50px on every CTA pill (104 occurrences). 4px appears 82 times but only on micro-chrome like checkbox corners and tabular-cell outlines — it is not a card option. There is no 12px or 16px middle tier. This binary makes the CTA pills read as the warmest, most-tappable elements on the page; introducing a middle radius would soften the contrast between content surfaces and action surfaces. Compared to Honda's softer 4px-everywhere chrome and Ferrari's near-zero-radius luxury treatment, Toyota's split between soft cards and fully-rounded pills is the most-considered radius decision in the mainstream-automotive directory. **Key Characteristics:** - Signature red (`{colors.primary}` — #e10a1d) used 662 times but zero times as a background fill — exclusively text and 1px borders. - Three-weight Helvetica Neue stack (tcomLight / tcomMed / tcomSans) at uniform CSS weight 400; visual weight comes from the loaded font file. - 48px hero h2 (`{typography.display-xl}` at weight 400, -0.5px tracking) is the loudest typographic moment — no display-700 anywhere on the page. - Binary radius scale: 8px on every card, 50px pill on every CTA, no middle tier. - Status palette declared in CSS but absent from the marketing surface — `{colors.pending}` (#145fff), `{colors.ready}` (#009b0d), `{colors.gold}` (#b6a171) live in `--dg_*` vars but never render on the homepage. - Black `{colors.ink}` (#000000) carries the dominant text load (1372 occurrences), with `{colors.gray-dark}` (#606060) the only secondary running-text tone. - 9px x 24px button padding and 12px caption type — the chrome reads as a transactional dealership tool, not editorial marketing copy. - Hairline `{colors.hairline}` (#d8d8d8) carries dropdown rules, vehicle-card outlines, and the top-nav bottom border; there is no second border tone. ## Colors ### Brand - **Toyota Red** (`{colors.primary}` — #e10a1d): frequency 662. Used as text (331), border (331), background (0). Wired in CSS as `--dg_primary` and `--dg_primaryLight`. The signature voltage — paints the Toyota oval, underlines active CTAs, marks the active filter chip with a 6px dot, tints the heart on the favorites button. The zero background fill count is the system's most-disciplined choice. - **Toyota Red Hover** (`{colors.primary-hover}` — #b00716): declared as `--dg_hover`. Reserved for the hover state on primary actions; appears in the captured page only on a single CTA-on-hover snapshot. - **Toyota Red Active** (`{colors.primary-active}` — #890713): declared as `--dg_active`. The press / active state — slightly deeper. Not rendered in the captured marketing surface but available for component-state styling. ### Surface - **Canvas** (`{colors.canvas}` — #ffffff): frequency 427. The page floor. Wired as `--dg_white`. Every section above the dark footer sits on pure white. - **Off White** (`{colors.off-white}` — #f6f6f6): declared as `--dg_offWhite`. The single secondary surface tone — used inside disabled-state controls and certain subtle panel fills. ### Text - **Ink** (`{colors.ink}` — #000000): frequency 2731 (1372 as text, 1313 as border). Wired as `--dg_black`. The dominant text and outline color across the entire page — section headings, body, vehicle-card titles, footer captions. Pure black, not a softened near-black. - **Gray Dark** (`{colors.gray-dark}` — #606060): frequency 40. Wired as `--dg_darkGray` and `--dg_gray`. The single secondary running-text tone — used for sub-labels under vehicle-card prices and inside the shopping-tools strip captions. - **Gray** (`{colors.gray}` — #919191): frequency 26. Used on placeholder text inside dealership-tool search fields and on inactive-tab labels. - **Gray Disabled Dark** (`{colors.gray-disabled-dark}` — #767676): wired as `--dg_disabledDarkGray`. Disabled-button text state. - **Gray Disabled Light** (`{colors.gray-disabled-light}` — #bababa): wired as `--dg_disabledLightGray`. Disabled-control border state. ### Hairline - **Hairline** (`{colors.hairline}` — #d8d8d8): frequency 56. Wired as `--dg_lightGray`. The dominant hairline tone — vehicle-card outlines, dropdown bottom rules, top-nav bottom border, search-field outlines. Lighter than the ink-on-white contrast would suggest, so it reads as a quiet division rather than a hard rule. ### Tag - **Tag Background** (`{colors.tag-bg}` — #eef3ff): frequency 84. Wired as `--dg_tagGray`. A barely-tinted lilac-white used as the fill on inactive filter chips and category pills — soft enough to read as "off" but distinct from the page canvas. ### Status (declared, mostly absent from homepage) - **Pending** (`{colors.pending}` — #145fff): frequency 42 as text. Wired as `--dg_pending`. A saturated blue used inside dealership-tools status badges for in-progress lease applications and vehicle-availability flags. - **Ready** (`{colors.ready}` — #009b0d): wired as `--dg_ready`. The vehicle-available / lease-approved status tone. Declared but not rendered on the captured marketing surface. - **Gold** (`{colors.gold}` — #b6a171): wired as `--dg_gold`. The certified-pre-owned accent tone. Declared but absent from the homepage. ## Typography ### Font Family The system runs **three weights of Helvetica Neue** wired into Toyota-specific font names: `tcomLight` (Helvetica Neue Light), `tcomMed` (Helvetica Neue Medium), and `tcomSans` (regular Helvetica Neue / Helvetica). All three sit at CSS `font-weight: 400` — the visual weight comes from the loaded font file. Fallbacks walk to `Arial, sans-serif`. There is no proprietary display family and no monospace tier; the page is sans-serif top to bottom. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 48px | 400 (tcomMed) | 56px | -0.5px | Hero h2 ("2026 Sienna") | | `{typography.display-md}` | 24px | 400 (tcomMed) | 32px | -0.5px | Section headings ("Explore All Vehicles", "Shopping Tools") | | `{typography.heading-md}` | 20px | 400 (tcomMed) | 28px | -0.05px | Vehicle-card titles, sub-section labels | | `{typography.body-lg}` | 24px | 400 (tcomLight) | 32px | 0 | Generous body paragraphs, marketing-copy leads | | `{typography.body-md}` | 16px | 400 (tcomSans) | 28px | 0 | Default running text, button labels | | `{typography.body-sm}` | 14px | 400 (tcomLight) | 22px | -0.1px | Vehicle-card body, link captions | | `{typography.label-md}` | 14px | 400 (tcomMed) | 14px | 0 | Filter-chip labels, tab labels | | `{typography.caption}` | 10px | 400 (tcomLight) | 18px | 0 | Legal footer, fine-print disclaimers | | `{typography.button-md}` | 16px | 400 (tcomSans) | 28px | 0 | CTA pill labels | | `{typography.nav-link}` | 14px | 400 (tcomSans) | 24px | 1px | Top-nav uppercase link labels | | `{typography.micro-uppercase}` | 14px | 400 (tcomSans) | 24px | 1px | Eyebrow labels above section headings | ### Principles Every tier sits at CSS weight 400. The visual hierarchy is built entirely from font-size, line-height, and which Helvetica Neue variant the `font-family` resolves to — `tcomLight` for the airy body paragraphs, `tcomMed` for the firmer hero and section heads, `tcomSans` for utility surfaces like buttons and tabular text. The 48px hero at -0.5px tracking reads as confident-warm rather than aggressive; the same h2 token rendered at weight 700 would tip the brand voice into shouting-fintech territory and undercut the reliability positioning. The system has no italic, no small-caps, and no monospace. Uppercase labels appear only at 14px / 1px tracking inside the top-nav and as eyebrow rows above section headings — the single typographic flourish in an otherwise austere stack. ### Note on Font Substitutes Toyota's `tcomLight` / `tcomMed` / `tcomSans` are licensed Helvetica Neue cuts. The closest open-source substitute is **Inter** at weights 300, 500, and 400 respectively — the proportions transfer cleanly at the 14-16px body sizes and Inter's slightly looser counters read close to Helvetica Neue at the 48px hero tier. **Helvetica Now** ships with the same proportions if licensing budget allows. Avoid Roboto — its taller x-height shifts the line-height math and the body copy reads too dense. ## Layout ### Spacing System - **Base unit:** 8px (with 4px and 6px as the half/quarter steps). - **Tokens:** `{spacing.xxs}` 5px · `{spacing.xs}` 6px · `{spacing.sm}` 8px · `{spacing.md}` 10px · `{spacing.base}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 24px · `{spacing.2xl}` 32px. - **Button padding:** `9px 24px` is the dominant value (98 occurrences) — a noticeably tight vertical for a 16px button label, which keeps the pill height compact at 44px. - **Card padding:** `{spacing.xl}` (24px) on vehicle cards and the shopping-tools strip; the 24px appears 82 times in the captured page. - **Top-nav padding:** `12px 32px` (30 occurrences). The 32px horizontal is the most-generous gap in the system. ### Grid & Container - **Max content width:** ~1280px on the vehicle grid and the shopping-tools strip; the hero photograph runs full-bleed. - **Hero:** edge-to-edge vehicle photograph with the model-name h2 and a single pill CTA overlaid in the lower-left third. - **Vehicle grid:** 4-column horizontal-scroll strip on desktop showing model cards (Corolla Hybrid, Ridgeline, Odyssey, Passport, etc. — the captured page renders the Camry / Corolla / RAV4 / Sienna tier). - **Shopping tools strip:** 4-column equal grid for "Build & Price / Search Inventory / Special Offers / Find a Dealer." ### Rhythm The page alternates between **full-bleed product photography** and **constrained dealership-tool chrome** in a strict ABAB rhythm. The hero is photographic. Section 2 (Explore All Vehicles) is dense card grid. Section 3 (Shopping Tools) is sparse white. Section 4 (lineup photograph) is photographic. Section 5 (People Are The Destination) is photographic. Section 6 (Schedule Toyota Service) is the dark-footer transactional band. The rhythm carries the visitor from aspirational image to transactional action and back, never sitting on either tempo for more than one band. ## Elevation The system has essentially **no shadow tier**. The captured page has 1 shadow occurrence — a 2px soft drop under the active filter-chip ring. Every other surface depends on hairline `{colors.hairline}` borders for division and on photograph-vs-white contrast for figure-ground. The dealership-tool chrome below the fold uses zero shadow at all; the dropdown menus rely on a 1px ink-on-white border and a 4px corner radius. - **Flat (no shadow):** hero, vehicle cards, shopping-tools strip, footer — 99.9% of surfaces. - **Hairline elevation:** `{colors.hairline}` (#d8d8d8) carries 51 of the 56 hairline occurrences as border lines on cards, dropdowns, search fields, and the top-nav bottom edge. - **Active-state ring:** the `{colors.primary}` red 1px ring around an active filter chip is the only chromatic outline in the system; it does double duty as elevation and as state indicator. ## Shapes The radius scale is **binary**: cards round at 8px, CTAs round at 50px, with nothing in between. - `{rounded.none}` 0px — section dividers, the hero photograph edge. - `{rounded.sm}` 4px (82 occurrences) — micro-chrome only (checkbox corners, tabular-cell outlines, search-field inner edges). Not used on any content surface. - `{rounded.md}` 8px (119 occurrences) — every card. Vehicle tiles, dropdown menus, dealership-tool panels, modal corners. - `{rounded.lg}` 20px (7 occurrences) — the slightly-larger model-card promo tiles in the shopping-tools strip. - `{rounded.xl}` 28px (12 occurrences) — the search-input pill on the global header. - `{rounded.pill}` 50px (104 occurrences) — every CTA. Primary action pills, secondary outline pills, filter chips, the favorites toggle. - `{rounded.full}` 9999px (4 occurrences) — the brand-mark hit area and the active-filter dot. There is no 12px or 16px option. A vehicle card cannot become a slightly-rounded pill; a chip cannot become a slightly-square card. The system enforces the binary by omission — adding a middle radius would weaken the pill-equals-action signal. ## Components **`button-primary`** — The signature CTA. Ink `{colors.ink}` fill, white text, `{rounded.pill}` 50px radius, 9x24px padding, 44px height. The dominant call-to-action shape across the page ("Shop New Vehicles", "Build & Price", "Schedule Service") sits at this token. No border, no shadow. **`button-primary-hover`** — Background flips to `{colors.primary-hover}` (#b00716). The brand red appears as a fill only in this single hover-state moment. **`button-secondary`** — White `{colors.canvas}` fill, ink text, 1px ink border, `{rounded.pill}` 50px radius. Used for "Learn More" and "View Details" secondary actions on vehicle cards. **`top-nav`** — White `{colors.canvas}` surface, 60px height, 1px `{colors.hairline}` bottom border, 12x32px padding. Houses the Toyota oval flush-left (`{component.brand-mark}`), the section links centered ("Shop", "Owners", "Service", "Build"), and the Sign In / Locate Dealer cluster flush-right. **`nav-link`** — Transparent background, ink text in `{typography.nav-link}` (14px / weight 400 / 1px tracking, uppercase). 8x12px padding. No hover background. **`brand-mark`** — Toyota oval rendered in `{colors.primary}` red — the most prominent appearance of the signature voltage on the page. Single occurrence at the top-left, scaled to fit the 60px nav band. **`hero-heading`** — White text on the transparent hero photograph, `{typography.display-xl}` (48px / weight 400 tcomMed / -0.5px tracking). Sits in the lower-left third of the photograph above the primary CTA pill. **`section-heading`** — Ink text on white, `{typography.display-md}` (24px / weight 400 tcomMed / -0.5px tracking). Used for "Explore All Vehicles", "Shopping Tools", and the lineup-photograph caption. **`body-paragraph`** — Default ink running-text at `{typography.body-md}` (16px / tcomSans / 28px line-height). **`body-paragraph-muted`** — `{colors.gray-dark}` (#606060) variant at `{typography.body-sm}` for secondary captions under vehicle-card prices and shopping-tools labels. **`vehicle-card`** — White surface, 1px `{colors.hairline}` border, `{rounded.md}` 8px radius, 16px internal padding. Holds a vehicle photograph at the top, a `{typography.heading-md}` model name, a `{typography.body-sm}` price-from caption, and a secondary CTA pill. No shadow. **`filter-chip`** — Lilac-white `{colors.tag-bg}` (#eef3ff) fill, ink text, `{rounded.pill}` 50px radius, 8x14px padding, 32px height. The inactive state. Filter chips read as soft "off" affordances against the white canvas. **`active-indicator`** — Pure red `{colors.primary}` dot or 1px ring. The single chromatic affordance for "this filter is on" — sits inside or beside the filter-chip text label. **`text-input`** — White surface, ink text, 1px `{colors.hairline}` border, `{rounded.sm}` 4px radius, 12x32px padding, 44px height. The dealership-tools search field uses this token; the global header search uses the larger `{rounded.xl}` 28px pill variant. **`footer`** — Ink `{colors.ink}` canvas inversion — the only above-fold black surface besides the hero photograph. White text in `{typography.caption}` (10px), 32x24px padding. Houses the Schedule Service CTA, the legal disclaimers, and the dealer-locator strip. ## Do's and Don'ts **Do** keep `{colors.primary}` (#e10a1d) as a text-and-border-only token. The system's most-disciplined choice is that 331 + 331 split between text and border with zero background fills. Filling a card or button with the brand red dilutes the signal — the Toyota oval and the active-filter dot stop reading as Toyota-specific the moment the red becomes ambient. **Do** use the binary radius scale exactly as declared. Every content surface gets `{rounded.md}` 8px; every CTA gets `{rounded.pill}` 50px. The two values do the entire system's work. **Do** sit display headings at weight 400. The visual weight comes from the loaded `tcomMed` font file, not from `font-weight: 700`. Bumping to 700 turns the reliability-focused brand voice into a generic SaaS shout and undercuts the trust positioning. **Do** render the Toyota oval in `{colors.primary}` at the top-left. It is the single most-prominent appearance of the brand voltage on the page and the only chromatic brand-mark anchor. **Don't** introduce a 12px or 16px middle radius. The system is binary by design — adding a middle tier softens the contrast between content cards (`{rounded.md}` 8px) and action pills (`{rounded.pill}` 50px). Honda's softer 4px-everywhere chrome reads less-tappable as a direct result. **Don't** use the status colors (`{colors.pending}` #145fff, `{colors.ready}` #009b0d, `{colors.gold}` #b6a171) on the marketing surface. They are dealership-tool state tokens declared in `--dg_pending`, `--dg_ready`, `--dg_gold` for inventory and lease flows; introducing them above the fold makes the marketing chrome read as a fragmented admin panel. **Don't** swap the off-white tag fill `{colors.tag-bg}` (#eef3ff) for pure `{colors.canvas}` (#ffffff). The barely-tinted lilac is what lets inactive filter chips read as "off" against the white canvas; a pure-white chip disappears into the surface and the active-red dot loses its anchor. **Don't** fill the hero with `{colors.primary}` red. The hero is a vehicle photograph with white display text overlaid — turning the canvas red would make the system look like a Cloudflare-style voltage-as-canvas brand, which it is structurally not. ## Known Gaps - **Dark mode:** the captured marketing surface is light-only. Dealership-tool surfaces may carry a dark variant but it is not represented here. - **Hover and focus states:** documented for `{component.button-primary-hover}` only; the full state matrix (focus rings, active press, disabled tints) is partially exposed via `{colors.gray-disabled-dark}` and `{colors.gray-disabled-light}` but not rendered on the homepage. - **Status palette:** `{colors.pending}` (#145fff), `{colors.ready}` (#009b0d), `{colors.gold}` (#b6a171) and the active/hover red variants are declared in CSS but absent from the captured marketing chrome — they belong to the dealership-tools layer and are not part of the marketing-surface spec. - **Motion:** the hero vehicle-photograph swap animates between models on a slow cross-fade, but the spec captures end-state values only. Easing curves and crossfade duration live in the live page JavaScript. - **Product surfaces:** this DESIGN.md captures toyota.com only. The dealership-tools surfaces (Build & Price configurator, Find a Dealer, Special Offers detail pages, the My Toyota authenticated portal) carry richer component sets — state-laden form controls, multi-step wizard chrome, vehicle-availability grids — that are not represented here. - **Sub-brand chrome:** Toyota's Lexus, GR Performance, and Toyota Connected sub-brands sit on separate marketing surfaces with distinct color and typographic systems; only the parent toyota.com chrome is captured here.