# Tesla

> `tesla@1.0.0`

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** · `tesla@1.0.0` · 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** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | 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: `tesla@1.0.0` from the encyclopedia.*