primary
#3e6ae1
High-intent order and progress actions.
01 / Colors
Action blue inside a white showroom.
The palette stays sparse. Most visual identity comes from ink, white space, and dark-photo contrast; blue appears where commitment happens.
accent-hover
#3457b1
Darker action state for hover depth.
accent-pressed
#2e4994
Pressed state with sober, mechanical feedback.
ink
#171a20
Headlines, outlines, dark surfaces and footer bands.
body
#393c41
Primary operational reading tone.
muted
#5c5e62
Spec labels, helper copy, subdued metadata.
canvas
#ffffff
Main field for gallery-like product presentation.
surface-alt
#f4f4f4
Tertiary controls and utility contrast.
border
#d0d1d2
Hairline division on cards and configurator inputs.
success
#02b028
Operational good-state indicator.
warning
#fbb01b
Medium occupancy or caution marker.
error
#b74134
Muted functional error, never theatrical.
02 / Typography
Display restraint with utility text discipline.
Headlines feel firm and cinematic, while the operational layer stays compact and exact. Weight, not decoration, carries confidence.
Model Y
Current Offers
Redesigned Exterior
Technology, Entertainment and Connectivity
Stealth Grey
Model 3
New model pages combine showroom imagery with exact product language and sparse supporting copy.
Vehicle Price
Username
Terms and conditions apply.
03 / Buttons
Compact controls, not oversized persuasion.
Buttons stay low-radius, 40px tall, and precise. The system reads like purchase instrumentation rather than promotional UI chrome.
button-primary
button-primary-alt
button-secondary
button-tertiary
button-dark
button-icon
text-link-underline
04 / Cards & Surfaces
Mostly flat, occasionally docked, always disciplined.
Tesla’s surfaces do not seek warmth. They separate content through white fields, hairlines, dark inversion, and occasional restrained lift.
Model Overview
A white field with exact specs, a short explainer, and one decisive CTA.
Ownership Tools
Tertiary gray surfaces appear when the interface needs gentle separation without decorative depth.
Charging Map
The rare raised module uses a small shadow and simple edge treatment.
Powerwall
Dark surfaces work best when paired with bold product narratives and highly controlled copy density.
All Black Interior
Option cards read like engineering selections, not lifestyle tiles.
Vehicle Price
Persistent commercial context anchors long configuration flows without visual clutter.
05 / Brand-Specific Product Patterns
The product language is half configurator, half instrument panel.
These mockups translate the stable UI patterns that make the brand legible even without logos: purchase summary docks, paint selectors, range stats, charging logic, and support-density modules.
Sticky purchase dock
$39,990Vehicle Price
Due Today$250
Est. Payment$399 /mo
Stealth GreyIncluded
All Black InteriorIncluded
Exterior color chips
Stealth Grey
Pearl White
Solid Black
Ultra Red
Range and charger metric strip
Range (EPA est.)321 mi
Superchargers32,189
Destination Chargers5,842
Engineering detail row
18” Aperture WheelsIncluded
All-Season TiresStd.
Tow Hitch$1,000
Acceleration4.8s 0-60
Search and account entry
Editorial learn module
Premium InteriorImproved comfort
ConnectivityRear display
ExteriorImproved aerodynamics
06 / Forms
Utility patterns with low ceremony.
Form styling stays restrained: light borders, dark text, one clear focus treatment, and a softer pill variant only where support-account flows require it.
07 / Spacing
A strict 4px rhythm supports the calm.
Spacing does much of the brand work. The interface feels premium because it is measured, not because it is ornamented.
4px
8px
16px
24px
32px
72px
08 / Radius
Almost everything stays tight-edged.
Tesla’s visual language becomes generic quickly when corners get too soft. The low-radius stance is part of the brand signal.
4px
buttons, nav, cards
8px
minor media shells
9px
summary panel top edge
20px
support account fields
pill
rare chip or progress bar use
09 / Elevation
Mostly flat; depth arrives only when utility needs docking.
This brand does not build hierarchy through thick layered shadows. Where elevation appears, it is subtle, often in support controls or persistent summary modules.
Flat surface
Standard sections are flat. Separation comes from white space and hairlines.
box-shadow: none
Small elevation
Used in map controls and the occasional lightweight utility card.
0 4px 8px 0 #00000014
Reverse dock
The summary footer rises upward instead of floating downward.
0 -2px 8px 0 #0000001a
10 / Extracted Component Tokens
Core CSS variables.
The preview is fully tokenized with custom properties so the system stays editable without losing Tesla’s edge, spacing, or tonal logic.
:root {
--brand-primary: #3e6ae1;
--brand-accent-hover: #3457b1;
--brand-accent-pressed: #2e4994;
--brand-ink: #171a20;
--brand-body: #393c41;
--brand-muted: #5c5e62;
--brand-canvas: #ffffff;
--brand-surface-alt: #f4f4f4;
--brand-border: #d0d1d2;
--brand-success: #02b028;
--brand-warning: #fbb01b;
--brand-error: #b74134;
--radius-4: 4px;
--radius-9: 9px;
--radius-20: 20px;
--space-16: 16px;
--space-24: 24px;
--space-72: 72px;
--shadow-small: 0 4px 8px 0 #00000014;
--shadow-reverse: 0 -2px 8px 0 #0000001a;
}