W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Toyota
Toyota Motor Sales, U.S.A. — the American sales and marketing arm of Toyota Motor Corporation. The Toyota mark is one of the most recognized automotive brands globally, anchored on a single signature color (Toyota Red, #EB0A1E / Pantone 186C) and the proprietary Toyota Type corporate face. Voice: confident, direct, human-centered ("Let's Go Places"). Visually, Toyota is light- first: white field, near-black wordmark and headline copy, and red as the brand-action color used sparingly and decisively.
1 palette 3 fonts 0 assets 7 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/toyota/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/toyota/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Toyota
Toyota Motor Sales, U.S.A. — the American sales and marketing arm of Toyota Motor Corporation. The Toyota mark is one of the most recognized automotive brands globally, anchored on a single signature color (Toyota Red, #EB0A1E / Pantone 186C) and the proprietary Toyota Type corporate face. Voice: confident, direct, human-centered ("Let's Go Places"). Visually, Toyota is light- first: white field, near-black wordmark and headline copy, and red as the brand-action color used sparingly and decisively.
Tags: automotive, oem, toyota, parent-brand, red, light-first
Atoms
Palette
Toyota · [email protected] · Proprietary — All Rights Reserved
Toyota Motor Sales corporate palette built around Toyota Red (#EB0A1E) — the canonical primary mark color used across vehicle marketing, the corporate logo, and dealer co-branding worldwide.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Toyota Type ([email protected]) |
Proprietary — Toyota Motor Corporation, internal use only | sans-serif |
body |
Toyota Type ([email protected]) |
Proprietary — Toyota Motor Corporation, internal use only | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
toyota-red |
Toyota Red | #EB0A1E |
toyota-black |
Toyota Black | #000000 |
toyota-graphite |
Toyota Graphite | #252525 |
toyota-white |
Toyota White | #FFFFFF |
toyota-platinum |
Toyota Platinum | #F5F5F5 |
toyota-silver |
Toyota Silver | #86939E |
toyota-ash |
Toyota Ash | #58595B |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
toyota-white |
#FFFFFF |
surface |
toyota-platinum |
#F5F5F5 |
surface-elevated |
toyota-white |
#FFFFFF |
text-primary |
toyota-graphite |
#252525 |
text-secondary |
toyota-ash |
#58595B |
text-tertiary |
toyota-silver |
#86939E |
primary |
toyota-red |
#EB0A1E |
primary-hover |
toyota-red |
#EB0A1E |
accent |
toyota-red |
#EB0A1E |
success |
toyota-silver |
#86939E |
warning |
toyota-red |
#EB0A1E |
error |
toyota-red |
#EB0A1E |
info |
toyota-ash |
#58595B |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
toyota-black |
#000000 |
surface |
toyota-graphite |
#252525 |
surface-elevated |
toyota-ash |
#58595B |
text-primary |
toyota-white |
#FFFFFF |
text-secondary |
toyota-platinum |
#F5F5F5 |
text-tertiary |
toyota-silver |
#86939E |
primary |
toyota-red |
#EB0A1E |
primary-hover |
toyota-red |
#EB0A1E |
accent |
toyota-red |
#EB0A1E |
success |
toyota-platinum |
#F5F5F5 |
warning |
toyota-red |
#EB0A1E |
error |
toyota-red |
#EB0A1E |
info |
toyota-silver |
#86939E |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
toyota-white |
#FFFFFF |
on-identity |
toyota-graphite |
#252525 |
primary |
toyota-red |
#EB0A1E |
primary-hover |
toyota-red |
#EB0A1E |
accent |
toyota-red |
#EB0A1E |
mark |
toyota-black |
#000000 |
text-primary-light |
toyota-graphite |
#252525 |
text-primary-dark |
toyota-white |
#FFFFFF |
background-light |
toyota-white |
#FFFFFF |
background-dark |
toyota-black |
#000000 |
surface-light |
toyota-platinum |
#F5F5F5 |
surface-dark |
toyota-graphite |
#252525 |
border-light |
toyota-silver |
#86939E |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Toyota Graphite (#252525) on Toyota White (#FFFFFF) measures ~16:1, and Toyota White on Toyota Black is ~21:1 — both decisively past the AA floor. Toyota's marketing and dealer properties operate at AA as the published baseline; consumer-facing safety and financing copy must remain legible across devices, lighting, and printed media.
colorChoice → roles.colors.primary
- allowed: toyota-red
- forbidden: toyota-black, toyota-graphite, toyota-white, toyota-platinum, toyota-silver, toyota-ash
Toyota Red (#EB0A1E / Pantone 186C) is the single signature color in the Toyota brand system. Every other swatch in the palette is a neutral surface or text role; substituting any of them for the primary collapses the brand's visual recognition.
colorChoice → roles.colors.mark
- allowed: toyota-black, toyota-white, toyota-red
- forbidden: toyota-graphite, toyota-platinum, toyota-silver, toyota-ash
The Toyota wordmark renders in solid black on light surfaces and solid white on dark surfaces; the "T-ellipses" emblem may be rendered in Toyota Red as a featured mark. Mid-gray tints (graphite, platinum, silver, ash) are not authorized mark fills — they collapse the wordmark's silhouette against light surfaces.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill, inverted-without-variant, outlined-only
The Toyota mark is one of the most-protected commercial marks in the world. Only Toyota-approved variants, clearspace ratios, and color treatments are permitted; Toyota Motor Corporation enforces the dealer and partner identity standards globally and exposes the approved treatments through licensed brand portals.
contextRestriction → roles.colors.primary
- forbiddenContexts: body-text, large-surface-fill, background-fill
- allowedContexts: cta-primary, brand-feature, mark-emphasis
Toyota Red is a signature color, not a surface color. Using it as a body-text fill or as a large-surface background breaks the discipline that gives the red its impact — it is reserved for the mark, primary CTAs, and brand-feature emphasis where Toyota's brand voice peaks.
compositionConstraint → roles.colors.primary
- pairsWith: toyota-white, toyota-platinum, toyota-black, toyota-graphite
- doesNotPairWith: jmfe-teal, jma-teal, wo-teal, lexus-chrome
Toyota Red pairs with the Toyota neutral scale only. Placing it adjacent to a JMFE-family teal or Lexus chrome breaks the Toyota corporate-identity standalone posture — Toyota presents on its own palette, not adjacent to its partner / distributor identities.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 400, 600
Toyota Type is distributed in Book (400) and Semibold (600) — the two weights authorized in licensed Toyota brand packages, including the SETF Brand Portal's documented type pair. Other weights are not part of the licensed kit.
Provenance
- Source: https://www.toyota.com/
- License:
Proprietary — All Rights Reserved - Attribution: Toyota Motor Sales, U.S.A., Inc. and Toyota Motor Corporation — all trademarks belong to Toyota Motor Corporation. Identity values verified from the official corporate horizontal-logo SVG (VIS_toyota_logo_horiz_black_RGB_2023.svg) served from delivery.tcom.assetscs.toyota.com and cross-referenced against the SETF Brand Portal (setfbranding.com/colors.html) which publishes Toyota Red as Pantone 186C / CMYK 0/100/90/0 / RGB 235/10/30 / HEX #EB0A1E.
- Imported:
2026-05-19 - Notes: 1.0.0 audit upgrade of [email protected] — preserves the canonical Toyota Red + neutral palette and Toyota Type primary face, adds identity / on-identity roles for the white Toyota canvas, and expands the rules block from 3 to 7 typed entries grounded in Toyota corporate identity (toyota.com), Toyota Motor Corporation global brand-guide references, and the SETF Brand Portal Pantone documentation. The 0.1.0 spec remains historical.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Toyota
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Toyota
A clear hierarchy in Toyota's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Toyota
[email protected]font · heading
Toyota Type
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Toyota Type
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ toyota-red #EB0A1E background-dark
→ toyota-black #000000 background-light
→ toyota-white #FFFFFF border-light
→ toyota-silver #86939E identity
→ toyota-white #FFFFFF mark
→ toyota-black #000000 on-identity
→ toyota-graphite #252525 primary
→ toyota-red #EB0A1E primary-hover
→ toyota-red #EB0A1E surface-dark
→ toyota-graphite #252525 surface-light
→ toyota-platinum #F5F5F5 text-primary-dark
→ toyota-white #FFFFFF text-primary-light
→ toyota-graphite #252525 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Toyota Type prose
→ body Toyota Type Palette mode mappings (from toyota)
Light mode (13 roles)
accent
→ toyota-red background
→ toyota-white error
→ toyota-red info
→ toyota-ash primary
→ toyota-red primary-hover
→ toyota-red success
→ toyota-silver surface
→ toyota-platinum surface-elevated
→ toyota-white text-primary
→ toyota-graphite text-secondary
→ toyota-ash text-tertiary
→ toyota-silver warning
→ toyota-red Dark mode (13 roles)
accent
→ toyota-red background
→ toyota-black error
→ toyota-red info
→ toyota-silver primary
→ toyota-red primary-hover
→ toyota-red success
→ toyota-platinum surface
→ toyota-graphite surface-elevated
→ toyota-ash text-primary
→ toyota-white text-secondary
→ toyota-platinum text-tertiary
→ toyota-silver warning
→ toyota-red Rules (7 typed constraints)
error · 6 rules
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Toyota Graphite (#252525) on Toyota White (#FFFFFF) measures ~16:1, and Toyota White on Toyota Black is ~21:1 — both decisively past the AA floor. Toyota's marketing and dealer properties operate at AA as the published baseline; consumer-facing safety and financing copy must remain legible across devices, lighting, and printed media.
colorChoice roles.colors.primary allowed toyota-red forbidden toyota-black, toyota-graphite, toyota-white, toyota-platinum, toyota-silver, toyota-ash Toyota Red (#EB0A1E / Pantone 186C) is the single signature color in the Toyota brand system. Every other swatch in the palette is a neutral surface or text role; substituting any of them for the primary collapses the brand's visual recognition.
colorChoice roles.colors.mark allowed toyota-black, toyota-white, toyota-red forbidden toyota-graphite, toyota-platinum, toyota-silver, toyota-ash The Toyota wordmark renders in solid black on light surfaces and solid white on dark surfaces; the "T-ellipses" emblem may be rendered in Toyota Red as a featured mark. Mid-gray tints (graphite, platinum, silver, ash) are not authorized mark fills — they collapse the wordmark's silhouette against light surfaces.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill, inverted-without-variant, outlined-only The Toyota mark is one of the most-protected commercial marks in the world. Only Toyota-approved variants, clearspace ratios, and color treatments are permitted; Toyota Motor Corporation enforces the dealer and partner identity standards globally and exposes the approved treatments through licensed brand portals.
contextRestriction roles.colors.primary forbiddenContexts body-text, large-surface-fill, background-fill allowedContexts cta-primary, brand-feature, mark-emphasis Toyota Red is a signature color, not a surface color. Using it as a body-text fill or as a large-surface background breaks the discipline that gives the red its impact — it is reserved for the mark, primary CTAs, and brand-feature emphasis where Toyota's brand voice peaks.
compositionConstraint roles.colors.primary pairsWith toyota-white, toyota-platinum, toyota-black, toyota-graphite doesNotPairWith jmfe-teal, jma-teal, wo-teal, lexus-chrome Toyota Red pairs with the Toyota neutral scale only. Placing it adjacent to a JMFE-family teal or Lexus chrome breaks the Toyota corporate-identity standalone posture — Toyota presents on its own palette, not adjacent to its partner / distributor identities.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 400, 600 Toyota Type is distributed in Book (400) and Semibold (600) — the two weights authorized in licensed Toyota brand packages, including the SETF Brand Portal's documented type pair. Other weights are not part of the licensed kit.
Provenance
- Source
- https://www.toyota.com/
- License
Proprietary — All Rights Reserved- Attribution
- Toyota Motor Sales, U.S.A., Inc. and Toyota Motor Corporation — all trademarks belong to Toyota Motor Corporation. Identity values verified from the official corporate horizontal-logo SVG (VIS_toyota_logo_horiz_black_RGB_2023.svg) served from delivery.tcom.assetscs.toyota.com and cross-referenced against the SETF Brand Portal (setfbranding.com/colors.html) which publishes Toyota Red as Pantone 186C / CMYK 0/100/90/0 / RGB 235/10/30 / HEX #EB0A1E.
- Imported
2026-05-19- Notes
- 1.0.0 audit upgrade of [email protected] — preserves the canonical Toyota Red + neutral palette and Toyota Type primary face, adds identity / on-identity roles for the white Toyota canvas, and expands the rules block from 3 to 7 typed entries grounded in Toyota corporate identity (toyota.com), Toyota Motor Corporation global brand-guide references, and the SETF Brand Portal Pantone documentation. The 0.1.0 spec remains historical.