Design System
Analysis of Tesla

A near-monochrome, photography-first system on pure white — two weights of a custom grotesque, 4px corners, and a single electric blue saved for the order.

01 — Foundations

Colour Palette

02 — Foundations

Typography

Universal Sans Text — Tesla's proprietary grotesque, shown here in Inter, its nearest Google substitute. The entire system uses just two weights, Regular 400 and Medium 500; hierarchy comes from size, never from bold or tracking.

03 — Components

Button Variants

button-primary
Solid Tesla blue (#3e6ae1), white label, 4px corners. Reserved for the single most important action.
button-dark
Near-black (#171a20) alternative CTA — pairs with blue as the primary/secondary action set.
button-secondary
Translucent overlay (rgba(0,0,0,0.05)) that rides on top of hero photography.
segmented · pill
Tesla's real control is a 4px segmented toggle (region selector); the active segment fills near-black.
04 — Components

Cards & Surfaces

Tesla rarely boxes content — surfaces are flat white, held by whitespace and 1px hairlines, lifting only on hover. (Sample model lineup.)

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

Built on a 4px base unit — the same 4 that sets the corner radius.

07 — Foundations

Border Radius

4px does almost all the work; 8px on larger containers. Anything rounder is essentially unused on tesla.com.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The default; the page is pressed flat and held by dividers.
Level 1 — 0 4px 4px rgba(0,0,0,.25). Dropdowns and hovered tiles.
Level 2 — 0 8px 16px rgba(0,0,0,.16). The location modal and menus.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxFull-bleed media kept; floating buttons go full-width and stack; nav collapses to a hamburger.
Tablet768–1023pxTwo-up grids; panels stay edge-to-edge; nav still collapsed.
Laptop1024–1279pxHorizontal nav returns; multi-column model grids.
Desktop≥ 1280pxMax content width with generous side gutters; full panel stack.

Constant across breakpoints: white space, near-black type in two weights, 4px corners, and blue saved for the order.

Pricing Tiers

Tesla has no SaaS tiers — shown here as Model 3 trims to demonstrate the card pattern. (Sample content.)

Rear-Wheel Drive
$349/mo*
The essential Model 3.
  • 272 mi EPA range
  • 0–60 in 5.8s
  • Standard Autopilot
  • 15" center touchscreen
Long Range AWD● Most popular
$399/mo*
The most chosen configuration.
  • 363 mi EPA range
  • 0–60 in 4.2s
  • Dual Motor all-wheel drive
  • Standard Autopilot
Performance
$472/mo*
Track-ready power and handling.
  • 303 mi EPA range
  • 0–60 in 3.1s
  • Performance brakes
  • Lowered suspension

Data Table

Sample order-tracking table demonstrating the data pattern. (Sample content.)

OrderModelConfigurationStatusWhen
RN-118402Model YLong Range AWDIn Production2 days ago
RN-118377Model 3PerformanceAwaiting Config5 days ago
RN-118351Model SPlaidVIN Assigned1 week ago
RN-118298Model XLong RangeIn Transit1 week ago
RN-118245CybertruckAll-Wheel DriveReserved2 weeks ago
1–5 of 412
123

Auth Forms

Sample sign-in pattern using Tesla's input and button styles. (Sample content.)

Sign in

Sign in to your Tesla Account

OR
Create account

Create a Tesla Account

OR