# Tesla — Marketing site Design Spec

> Source: tesla.com (live DOM, computed styles), 2026-07-19. No CSS custom properties are published — every value is read from computed styles.
> Coverage: home / vehicle landing. Configurator and account surfaces not captured (needs login).
> Note: a region-confirmation modal was present and was **not dismissed** (selecting a region is a user choice), so some below-the-fold values are read from the DOM rather than from a clean viewport.

## 1. Visual Theme & Atmosphere

Tesla's home page is a stack of full-viewport vehicle photographs with the UI reduced to almost nothing: a transparent 56px nav, a centred headline, and a pair of small buttons floating over the image. The ink is `#171a20` — a blue-black, not a neutral grey — and the greys under it (`#393c41`, `#5c5e62`, `#8e8e8e`, `#d0d1d2`, `#f4f4f4`) all carry the same cool cast, which is what makes the interface feel machined rather than soft. Type is Universal Sans, split into Display and Text cuts and held at **weight 500 with normal tracking everywhere**. One blue `#3e6ae1` marks the primary action. The distinguishing detail is the button system: everything is a small **4px** rounded rectangle at 40px with `blur(16px)` glass variants for controls that sit on photography — Tesla solves on-image legibility with backdrop blur rather than scrims. Feels: machined, minimal, photographic, cool-toned.

## 2. Color Palette & Roles

### Core

| Token | Hex | Role / usage |
|---|---|---|
| `ink` | `#171a20` | Primary text, dark button fill (a blue-black) |
| `blue` | `#3e6ae1` | THE accent — the primary "Order Now" button |
| `white` | `#ffffff` | Canvas, light button fill |
| `text-2` | `#393c41` | Secondary text, outline-button label |
| `muted` | `#5c5e62` | Body / meta copy, segmented-control fill |
| `faint` | `#8e8e8e` | Tertiary meta |
| `border` | `#d0d1d2` | The 1px control border |
| `fill` | `#f4f4f4` | Light button fill, pale band |
| `on-dark` | `#eeeeee` | Label on the `#171a20` button |

### Overlays (how controls sit on photography)

| Token | Value | Role / usage |
|---|---|---|
| `glass-dark` | `rgba(0,0,0,0.05)` + `blur(16px)` | Glass button over imagery |
| `glass-light` | `rgba(255,255,255,0.75)` | Light glass surface |
| `glass-fill` | `rgba(244,244,244,0.85)` | Frosted panel |

### The one gradient

`linear-gradient(90deg, rgb(23, 26, 32), rgb(62, 106, 225), rgb(23, 26, 32))` — an ink→blue→ink sweep, the only gradient on the page.

**Rules.** Every neutral is cool/blue-cast; there is no warm grey and no pure black. Blue `#3e6ae1` is the primary action only — never a link colour, background or heading. There is no semantic (success/warning/error) palette on the marketing surface.

## 3. Typography Rules

- Display: `"Universal Sans Display", -apple-system, sans-serif`
- UI + body: `"Universal Sans Text", -apple-system, sans-serif`

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Section display | Universal Sans Display | 48/56 | 500 | normal |
| Page h1 | Universal Sans Display | 40/48 | 500 | normal |
| Card h3 | Universal Sans Text | 17/20 | 500 | normal |
| Nav link | Universal Sans Text | 14/20 | 500 | normal |
| Button label | Universal Sans Text | 13-14 | 500 (400 on glass) | normal |
| Utility / skip | Universal Sans Display | 12/16.97 | 500 | normal |
| Legal / footnote | Universal Sans Text | 12/18 | 400 | normal (`#5c5e62`) |

Patterns: the whole page sits at **weight 500** — there is no bold and no light, which is unusual and is the main reason the type reads as engineered rather than expressive. Tracking is `normal` at every size including the 48px display. The scale is also compressed: the largest routine role is 48px, and card titles run at just 17/20. Sentence/title case; no uppercase eyebrows (the wordmark itself is letterspaced caps, but that is a logo, not a type role).

## 4. Component Stylings

**Nav** — 56px, fully transparent over the hero photograph, no border and no blur. Letterspaced wordmark, five centred links at 14/20 500, then three circular icon buttons (help, globe, account).

**Buttons** — all **4px** radius, 40px tall, 500 weight — small, rectangular, and deliberately understated:

| Variant | Fill | Text | Border | Radius | Height | Padding | Type | Effect |
|---|---|---|---|---|---|---|---|---|
| Primary | `#3e6ae1` | `#ffffff` | none | 4px | 40px | 4px … | 14/500 | — |
| Dark | `#171a20` | `#eeeeee` | none | 4px | 40px | 4px … | 14/500 | — |
| Dark (wide) | `#171a20` | `#ffffff` | none | 4px | 40px | 4px 24px | 14/500 | — |
| Light | `#f4f4f4` | `#171a20` | none | 4px | 40px | 4px 24px | 14/500 | — |
| Glass | `rgba(0,0,0,0.05)` | `#393c41` | 1px `#d0d1d2` | 4px | 40px | 4px … | 14/400 | `backdrop-filter: blur(16px)` |
| Segmented (active) | `#5c5e62` | `#ffffff` | none | 4px | 32px | 4px 16px | 13/500 | — |
| Segmented (rest) | `#ffffff` | `#393c41` | none | 4px | 32px | 4px 16px | 13/500 | — |
| Chip | `rgba(0,0,0,0.05)` | `#171a20` | none | 4px | 32px | 4px 12px | 14/500 | `blur(16px)` |

**Signature glass control bar** — a floating bottom bar carrying an "Ask a Question" input chip and a "Schedule a Drive Today" button, both on `blur(16px)` glass so they stay legible over whatever vehicle photograph is behind them.

**Carousel arrows** — white rounded squares with the `rgb(57,60,65) 0px 2px 0px -1px` hairline shadow, pinned left and right at mid-height.

**Inputs** — the question chip reads as an input on `rgba(0,0,0,0.05)` glass with a 1px `#d0d1d2` border at 4px radius; full form-field states were **not captured**.

## 5. Layout Principles

Full-viewport photographic sections stacked vertically, each self-contained: centred headline near the top, a centred button pair below it, and the vehicle occupying the frame. Nothing is boxed and there is no page gutter or max-width container on the hero sections. Below, split panels pair a `#f4f4f4` copy half with a full-bleed media half. Radius scale is very small: `4px` (all controls), `8px`, `0 8px 8px 0` (segment cap), `16px`.

## 6. Depth & Elevation

Radius scale: `4px` (controls) / `8px` / `0 8px 8px 0` / `16px`.

Shadow recipes:

- `rgb(57, 60, 65) 0px 2px 0px -1px` — a hard 1px hairline drawn as a shadow
- `rgb(92, 94, 98) 0px 2px 0px -1px` — the lighter hairline variant
- `rgba(0, 0, 0, 0.16) 0px 8px 16px 0px` — the one real lift, for floating panels
- `rgba(0, 0, 0, 0) 0px 0px 0px 0px` — transparent placeholder

Backdrop-filter is the primary depth mechanism: `blur(16px)` for glass controls, `blur(4px)` and `blur(0px)` as animated states. Tesla layers UI over photography with blur rather than scrims or cards.

## 7. Motion

Notably slow and deliberate compared to most product sites:

- `background-color 0.5s, color 0.5s` — the slowest, on major surfaces
- `box-shadow 0.33s cubic-bezier(0.5, 0, 0, 0.75), color 0.33s`
- `background-color 0.33s, box-shadow 0.33s`
- `font 0.33s, color 0.33s, opacity 0.33s, padding 0.33s` — note `font` and `padding` are animated, so controls reflow smoothly

`0.33s` is the house duration and `cubic-bezier(0.5, 0, 0, 0.75)` the house curve.

## 8. Backgrounds, Effects & WebGL

Photography and video, with blur as the only effect layer. No WebGL and no canvas. `backdrop-filter: blur(16px)` carries the glass controls. The single CSS gradient is the ink→blue→ink sweep in §2. Media queries include `(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)` for retina asset swaps and a `prefers-*` block, so imagery is served at 2×.

## 9. Do's and Don'ts

### Do
- Use `#171a20` as the black — a blue-black, never neutral or pure.
- Keep every neutral cool-cast (`#393c41`, `#5c5e62`, `#8e8e8e`, `#d0d1d2`, `#f4f4f4`).
- Hold the entire page at weight 500 with normal tracking, even at 48px.
- Make controls small 4px rectangles at 40px — understated, never pills.
- Solve on-image legibility with `backdrop-filter: blur(16px)` glass, not scrims or cards.
- Reserve `#3e6ae1` for the single primary action.
- Let full-viewport vehicle photography carry each section with a centred headline and a button pair.

### Don't
- Don't use pure black or warm greys.
- Don't use bold or light weights — the system is 500 throughout.
- Don't make buttons pills or give them large radii.
- Don't use blue for links, headings or backgrounds.
- Don't add a semantic colour palette.
- Don't box hero sections into containers with gutters.

## 10. Responsive Behavior

Partially captured. Media queries present include `(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2)` for retina imagery and a `prefers-*` block. The width-based breakpoint set was not resolved from the accessible stylesheets.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Ink `#171a20` · Secondary `#393c41` · Muted `#5c5e62` · Border `#d0d1d2` · Fill `#f4f4f4` · Accent `#3e6ae1`
- Font: Universal Sans Display / Text, weight 500 throughout · Body: 14/20, legal 12/18 · Radius: 4px controls / 8-16px surfaces · Control height: 40px (32px segmented)
- Focus: not captured · Glass: `rgba(0,0,0,0.05)` + `backdrop-filter: blur(16px)` + 1px `#d0d1d2` · Motion `0.33s cubic-bezier(0.5, 0, 0, 0.75)`, up to `0.5s` on colour

<tesla_design_language>
A stack of full-viewport vehicle photographs with the interface reduced to almost nothing. The black is #171a20 — a blue-black, never neutral or pure — and every grey under it carries the same cool cast (#393c41, #5c5e62, #8e8e8e, #d0d1d2, #f4f4f4), which is what makes the surface read as machined rather than soft. Type is Universal Sans in Display and Text cuts, held at WEIGHT 500 THROUGHOUT with normal tracking at every size: 48/56 section displays, a 40/48 h1, 17/20 card titles, 14/20 nav and button labels, 12/18 legal in #5c5e62. There is no bold, no light, and no uppercase eyebrow. Controls are deliberately understated: small 4px rounded rectangles at 40px (32px segmented), in blue #3e6ae1 for the single primary action, #171a20 dark, #f4f4f4 light, or a glass variant on rgba(0,0,0,0.05) with a 1px #d0d1d2 border. The signature move is that on-image legibility is solved with backdrop-filter: blur(16px) glass rather than scrims or cards — a floating bottom bar with a question chip and a drive-booking button sits directly on the photograph. Layout is full-viewport, ungutter ed and uncontained: a centred headline near the top, a centred button pair below, and the vehicle filling the frame. Depth is minimal — radii of 4/8/16px, hairlines drawn as hard shadows (rgb(57,60,65) 0 2px 0 -1px), and one real lift at rgba(0,0,0,.16) 0 8px 16px. The only gradient is an ink-to-blue-to-ink 90deg sweep. Motion is unusually slow and deliberate: 0.33s on cubic-bezier(0.5, 0, 0, 0.75) as the house curve, up to 0.5s on background-color, and even font and padding are animated so controls reflow smoothly. Feels: machined, minimal, photographic, cool-toned. Avoid: pure black or warm greys, bold or light weights, pill-shaped or large-radius buttons, blue as a link or background colour, a semantic palette, and boxing hero sections into gutter ed containers.
</tesla_design_language>