W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Tesla
Tesla, Inc. is the U.S.-anchored electric-vehicle and energy company founded in 2003. The brand identity is restrained, engineered, and dark-first: the saturated Tesla Red (#E82127) wordmark and "T" mark against a near-black canvas, with white type and a small neutral ramp. The in-car UI is dark by design; the marketing site's hero treatments lead with dark surfaces. This atom declares dark as the brand's identity canvas explicitly. The voice is technical, minimal, and product- forward — the chrome stays out of the way of the vehicles.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/tesla/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/tesla/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.
Tesla
Tesla, Inc. is the U.S.-anchored electric-vehicle and energy company founded in 2003. The brand identity is restrained, engineered, and dark-first: the saturated Tesla Red (#E82127) wordmark and "T" mark against a near-black canvas, with white type and a small neutral ramp. The in-car UI is dark by design; the marketing site's hero treatments lead with dark surfaces. This atom declares dark as the brand's identity canvas explicitly. The voice is technical, minimal, and product- forward — the chrome stays out of the way of the vehicles.
Tags: tesla, automotive, ev, energy, brand, red, dark-first
Atoms
Palette
Tesla · [email protected] · Proprietary — All Rights Reserved
Tesla's brand palette is built on Tesla Red (#E82127) and a dark-first canvas. The brand identity is restrained and technical: the saturated red wordmark and "T" mark against a deep, near-black canvas, with white type and a small neutral ramp. Tesla is a dark-first surface in its consumer product (the in-car UI is dark by design) and in its marketing site's hero treatments; the brand atom declares dark as identity.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
tesla-red |
Tesla Red | #E82127 |
tesla-red-deep |
Tesla Red Deep | #B91A1F |
tesla-black |
Tesla Black | #000000 |
tesla-near-black |
Tesla Near-Black | #0F0F10 |
tesla-charcoal |
Tesla Charcoal | #1C1C1F |
tesla-graphite |
Tesla Graphite | #3A3A3D |
tesla-silver |
Tesla Silver | #86868B |
tesla-pearl |
Tesla Pearl | #D6D6D9 |
tesla-white |
Tesla White | #FFFFFF |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
tesla-white |
#FFFFFF |
surface |
tesla-pearl |
#D6D6D9 |
surface-elevated |
tesla-white |
#FFFFFF |
text-primary |
tesla-black |
#000000 |
text-secondary |
tesla-charcoal |
#1C1C1F |
text-tertiary |
tesla-silver |
#86868B |
primary |
tesla-red |
#E82127 |
primary-hover |
tesla-red-deep |
#B91A1F |
accent |
tesla-red |
#E82127 |
accent-hover |
tesla-red-deep |
#B91A1F |
success |
tesla-silver |
#86868B |
warning |
tesla-red |
#E82127 |
error |
tesla-red-deep |
#B91A1F |
border |
tesla-pearl |
#D6D6D9 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
tesla-black |
#000000 |
surface |
tesla-near-black |
#0F0F10 |
surface-elevated |
tesla-charcoal |
#1C1C1F |
text-primary |
tesla-white |
#FFFFFF |
text-secondary |
tesla-pearl |
#D6D6D9 |
text-tertiary |
tesla-silver |
#86868B |
primary |
tesla-red |
#E82127 |
primary-hover |
tesla-red-deep |
#B91A1F |
accent |
tesla-red |
#E82127 |
accent-hover |
tesla-red-deep |
#B91A1F |
success |
tesla-white |
#FFFFFF |
warning |
tesla-red |
#E82127 |
error |
tesla-red-deep |
#B91A1F |
border |
tesla-graphite |
#3A3A3D |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
tesla-black |
#000000 |
on-identity |
tesla-red |
#E82127 |
background |
tesla-black |
#000000 |
surface |
tesla-near-black |
#0F0F10 |
surface-elevated |
tesla-charcoal |
#1C1C1F |
text-primary |
tesla-white |
#FFFFFF |
text-secondary |
tesla-pearl |
#D6D6D9 |
text-tertiary |
tesla-silver |
#86868B |
primary |
tesla-red |
#E82127 |
primary-hover |
tesla-red-deep |
#B91A1F |
accent |
tesla-red |
#E82127 |
accent-hover |
tesla-red-deep |
#B91A1F |
mark |
tesla-red |
#E82127 |
success |
tesla-white |
#FFFFFF |
warning |
tesla-red |
#E82127 |
error |
tesla-red-deep |
#B91A1F |
background-light |
tesla-white |
#FFFFFF |
background-dark |
tesla-black |
#000000 |
surface-light |
tesla-pearl |
#D6D6D9 |
surface-dark |
tesla-near-black |
#0F0F10 |
text-primary-light |
tesla-black |
#000000 |
text-primary-dark |
tesla-white |
#FFFFFF |
text-secondary-light |
tesla-charcoal |
#1C1C1F |
text-tertiary-light |
tesla-silver |
#86868B |
border-light |
tesla-pearl |
#D6D6D9 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
wordmark |
heading |
code |
mono |
Rules
🛑 error (6)
colorChoice → logo.wordmark.fill
- allowed: tesla-red, tesla-white, tesla-black
- forbidden: tesla-red-deep, tesla-silver, tesla-graphite, tesla-pearl
The Tesla wordmark and "T" mark render in Tesla Red, Tesla White, or Tesla Black depending on the surface. The pressed-red variant is an interactive-state value, not a wordmark fill. The neutral grays are surface and text colors, not brand-mark fills.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, placed-without-clearspace, inverted-without-variant
The Tesla wordmark and "T" mark are rendered flat with generous clearspace. Gradients, shadows, recolorings, and busy-background placements compromise the engineered, restrained identity Tesla's brand depends on across automotive, energy, and storefront contexts.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Tesla White (#FFFFFF) on Tesla Black (#000000) gives 21:1 — the maximum contrast achievable. The dark-first canvas makes contrast checks the default verification on any new role pairing; AA is the floor.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
Tesla Red on Tesla Black must clear 3:1 at large-text and UI-component sizes (WCAG AA-large) so the primary mark and CTA remain perceptible against the dark canvas.
contextRestriction → roles.colors.primary
- forbiddenContexts: body-text, secondary-link, subtle-divider
Tesla Red is reserved for the brand mark, the wordmark, and the primary action / high-priority highlight. Using it inside body copy or for secondary links dilutes the signature accent and weakens the visual hierarchy the brand's restrained voice depends on.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The dark-first canvas and the safety-critical contexts Tesla surfaces appear in (in-car UI, energy-product monitoring) make contrast checks the non-negotiable floor.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 700
Tesla's marketing and product headlines on tesla.com sit most commonly in the Regular (400) through Bold (700) band. Lighter and heavier extremes compromise the engineered, technical voice and are not part of the standard chrome.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: tesla-black, tesla-near-black, tesla-white
- doesNotPairWith: tesla-red-deep, tesla-silver
Tesla Red reads cleanest against the near-black dark canvas or pure white. Placing it adjacent to the pressed-red variant or the silver neutral creates a near-tone collision that weakens the saturated brand red's optical impact.
Provenance
- Source: https://raw.githubusercontent.com/simple-icons/simple-icons/13.0.0/_data/simple-icons.json
- License:
Proprietary — All Rights Reserved - Attribution: Tesla, Inc. — Tesla, the Tesla wordmark, and the Tesla "T" mark are trademarks of Tesla, Inc. The signature red (#E82127) is verified via the simple-icons brand database (v13.0.0). Tesla does not maintain a publicly visible brand-guidelines or design-system page; tesla.com is the primary reference for product chrome.
- Imported:
2026-05-19 - Notes: Tesla uses a proprietary custom typeface (Tesla's "Gotham"- family corporate face) that is not publicly distributed. This atom references Inter@1 as the open-source rendering substitute for the sans roles. The supporting neutral ramp in the referenced palette is authored faithfully to tesla.com's chrome rather than lifted from a single Tesla-published token table; see the palette atom notes. Dark is declared as identity per the brand's actual deployment surface.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Tesla
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.
Tesla
A clear hierarchy in Tesla'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
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
→ tesla-red #E82127 accent-hover
→ tesla-red-deep #B91A1F background
→ tesla-black #000000 background-dark
→ tesla-black #000000 background-light
→ tesla-white #FFFFFF border-light
→ tesla-pearl #D6D6D9 error
→ tesla-red-deep #B91A1F identity
→ tesla-black #000000 mark
→ tesla-red #E82127 on-identity
→ tesla-red #E82127 primary
→ tesla-red #E82127 primary-hover
→ tesla-red-deep #B91A1F success
→ tesla-white #FFFFFF surface
→ tesla-near-black #0F0F10 surface-dark
→ tesla-near-black #0F0F10 surface-elevated
→ tesla-charcoal #1C1C1F surface-light
→ tesla-pearl #D6D6D9 text-primary
→ tesla-white #FFFFFF text-primary-dark
→ tesla-white #FFFFFF text-primary-light
→ tesla-black #000000 text-secondary
→ tesla-pearl #D6D6D9 text-secondary-light
→ tesla-charcoal #1C1C1F text-tertiary
→ tesla-silver #86868B text-tertiary-light
→ tesla-silver #86868B warning
→ tesla-red #E82127 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter wordmark
→ heading Inter Palette mode mappings (from tesla)
Light mode (14 roles)
accent
→ tesla-red accent-hover
→ tesla-red-deep background
→ tesla-white border
→ tesla-pearl error
→ tesla-red-deep primary
→ tesla-red primary-hover
→ tesla-red-deep success
→ tesla-silver surface
→ tesla-pearl surface-elevated
→ tesla-white text-primary
→ tesla-black text-secondary
→ tesla-charcoal text-tertiary
→ tesla-silver warning
→ tesla-red Dark mode (14 roles)
accent
→ tesla-red accent-hover
→ tesla-red-deep background
→ tesla-black border
→ tesla-graphite error
→ tesla-red-deep primary
→ tesla-red primary-hover
→ tesla-red-deep success
→ tesla-white surface
→ tesla-near-black surface-elevated
→ tesla-charcoal text-primary
→ tesla-white text-secondary
→ tesla-pearl text-tertiary
→ tesla-silver warning
→ tesla-red Rules (8 typed constraints)
error · 6 rules
colorChoice logo.wordmark.fill allowed tesla-red, tesla-white, tesla-black forbidden tesla-red-deep, tesla-silver, tesla-graphite, tesla-pearl The Tesla wordmark and "T" mark render in Tesla Red, Tesla White, or Tesla Black depending on the surface. The pressed-red variant is an interactive-state value, not a wordmark fill. The neutral grays are surface and text colors, not brand-mark fills.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, placed-without-clearspace, inverted-without-variant The Tesla wordmark and "T" mark are rendered flat with generous clearspace. Gradients, shadows, recolorings, and busy-background placements compromise the engineered, restrained identity Tesla's brand depends on across automotive, energy, and storefront contexts.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Tesla White (#FFFFFF) on Tesla Black (#000000) gives 21:1 — the maximum contrast achievable. The dark-first canvas makes contrast checks the default verification on any new role pairing; AA is the floor.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large Tesla Red on Tesla Black must clear 3:1 at large-text and UI-component sizes (WCAG AA-large) so the primary mark and CTA remain perceptible against the dark canvas.
contextRestriction roles.colors.primary forbiddenContexts body-text, secondary-link, subtle-divider Tesla Red is reserved for the brand mark, the wordmark, and the primary action / high-priority highlight. Using it inside body copy or for secondary links dilutes the signature accent and weakens the visual hierarchy the brand's restrained voice depends on.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The dark-first canvas and the safety-critical contexts Tesla surfaces appear in (in-car UI, energy-product monitoring) make contrast checks the non-negotiable floor.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 400, 500, 700 Tesla's marketing and product headlines on tesla.com sit most commonly in the Regular (400) through Bold (700) band. Lighter and heavier extremes compromise the engineered, technical voice and are not part of the standard chrome.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith tesla-black, tesla-near-black, tesla-white doesNotPairWith tesla-red-deep, tesla-silver Tesla Red reads cleanest against the near-black dark canvas or pure white. Placing it adjacent to the pressed-red variant or the silver neutral creates a near-tone collision that weakens the saturated brand red's optical impact.
Provenance
- Source
- https://raw.githubusercontent.com/simple-icons/simple-icons/13.0.0/_data/simple-icons.json
- License
Proprietary — All Rights Reserved- Attribution
- Tesla, Inc. — Tesla, the Tesla wordmark, and the Tesla "T" mark are trademarks of Tesla, Inc. The signature red (#E82127) is verified via the simple-icons brand database (v13.0.0). Tesla does not maintain a publicly visible brand-guidelines or design-system page; tesla.com is the primary reference for product chrome.
- Imported
2026-05-19- Notes
- Tesla uses a proprietary custom typeface (Tesla's "Gotham"- family corporate face) that is not publicly distributed. This atom references Inter@1 as the open-source rendering substitute for the sans roles. The supporting neutral ramp in the referenced palette is authored faithfully to tesla.com's chrome rather than lifted from a single Tesla-published token table; see the palette atom notes. Dark is declared as identity per the brand's actual deployment surface.