# Design System Inspired by Tesla

Photography-first. Interface-invisible.

A visual catalog generated from DESIGN.md — every token, every value, every design decision.

Order Now View Inventory

## Color Palette

Tesla's palette is almost ascetic — one blue, three grays, and white. Every surface is monochrome to let photography dominate.

Primary
Electric Blue
#3E6AE1
Primary CTA buttons — the only chromatic color
Pure White
#FFFFFF
Background, surfaces, secondary buttons
Surface & Background
Light Ash
#F4F4F4
Alternate surface, hover states
Carbon Dark
#171A20
Dark surface, hero overlays
Frosted Glass
rgba(255,255,255,0.75)
Nav backdrop-filter on scroll
Neutrals & Text
Carbon Dark
#171A20
Headings, navigation text
Graphite
#393C41
Body text, secondary content
Pewter
#5C5E62
Tertiary text, sub-links
Silver Fog
#8E8E8E
Placeholders, disabled states
Cloud Gray
#EEEEEE
Borders, divider lines
Pale Silver
#D0D1D2
UI borders, delineation

## Typography Scale

Universal Sans Display for heroes, Universal Sans Text for everything else. Only weights 400 and 500. Shown with Inter as the closest available Google Font substitute.

Model Y
Hero Title — 40px / 500 / 48px line-height / Universal Sans Display
0% APR Available
Promo Text — 22px / 400 / Universal Sans Text / white on dark
Model 3
Product Name — 17px / 500 / 20px line-height / Universal Sans Text
Vehicles Energy Charging Discover Shop
Nav Item — 14px / 500 / 16.8px line-height / Universal Sans Text
Tesla's website is an exercise in radical subtraction — a digital showroom where the product is everything and the interface is almost nothing.
Body Text — 14px / 400 / 20px line-height / Universal Sans Text
Learn Order Experience
Sub-link — 14px / 400 / 20px line-height / Pewter (#5C5E62)

## Button Variants

Barely-rounded rectangles (4px radius). One blue for primary, white for secondary, transparent for nav. No pill shapes, no outlines.

Order Now Primary — bg #3E6AE1, 4px radius, 40px height, 200px width
View Inventory Secondary — bg #FFFFFF, 4px radius, 40px height, 160px width
Nav — transparent bg, 4px radius, 32px height
Learn Order Experience Text Link — no bg, Pewter #5C5E62, underline on hover

## Card Examples

Vehicle cards with no borders or shadows. Category cards with full-bleed photography and 12px radius.

Vehicle Cards (Navigation Panel)
S
Model S
Learn Order
3
Model 3
Learn Order
Y
Model Y
Learn Order
Category Cards (Homepage)
Sport Sedan
Midsize SUV

## Form Elements

Minimal input styling with 4px radius and Pale Silver borders. Focus state triggers Electric Blue border.

Default Input
Focus Input
Error Input
Textarea

## Spacing Scale

8px base unit. Extremely restrained spacing tokens — precision over variety.

4px
Button inner padding
8px
Base unit, nav item gap
16px
Nav item horizontal padding, card gap
24px
Button horizontal padding, category card inner padding
40px
Section horizontal padding, nav horizontal padding
80px
Section vertical padding
100vh
Hero section height — one message per screen

## Border Radius Scale

Sharp and precise. Only 4px for buttons and 12px for category cards.

0px
Default (most elements)
4px
Buttons, inputs
12px
Category cards
50%
Carousel dots

## Elevation & Depth

Tesla avoids shadows entirely. Depth comes from opacity-based layering and photography-as-depth.

Level 0 — Flat
No shadow, no border. Default for all elements.
Level 1 — Frost
Frosted glass. Navigation on scroll.
Level 2 — Overlay
Modal overlays, popups.
Level 3 — Subtle
Minimal shadow hints on rare hover states.