Full-viewport vehicle photography with the interface reduced to almost nothing: the black is a blue-black and every grey under it carries the same cool cast, type is held at weight 500 throughout with normal tracking even at 48px, controls are deliberately understated 4px rectangles rather than pills, and on-image legibility is solved with backdrop-blur glass instead of scrims — all moving on an unusually slow house curve that even animates font and padding.
Browse Tesla in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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 |
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.
"Universal Sans Display", -apple-system, sans-serif"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).
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.