Design System

Model S

Obsidian minimalism, bold contrast. A design system built on radical simplicity and premium restraint.

14 color tokens 11 type steps 4px grid 6 surface levels
Download Spec theme.css tokens.json variables.css
Scroll
Foundation

Color Tokens

Pure black and white with a single assertive red accent. 14 tokens across surfaces, text, interaction, and overlays.

Obsidian
#000000
Dark background, hero sections
Carbon
#171a20
Elevated dark surfaces
Slate
#1c1e21
Secondary dark sections
Graphite
#393c41
Borders, dividers
Smoke
#5c5e62
Secondary text, placeholders
Silver
#babfc3
Captions, subtle labels
Pearl
#f4f4f4
Light background sections
Ivory
#fbfbfb
Elevated light surfaces
Canvas White
#ffffff
Primary white canvas
Ember Red
#e82127
Primary CTA, brand accent
Ember Hover
#cc1c21
Button hover state
Signal Red
#e31837
Alerts, critical emphasis
Typography

Type Scale

Inter as substitute for Tesla Gothic. Ultra-light display weights with tight negative tracking for that premium, spacious feel.

Display-lg Model S 72px / 1.0 / −0.04em
Display Plaid 56px / 1.05 / −0.04em
Display-sm Beyond Ludicrous 40px / 1.1 / −0.025em
Heading-lg Interior 32px / 1.2 / −0.025em
Heading Section heading 24px / 1.25 / −0.015em
Body-md Default body text for readable content 16px / 1.5 / 0.02em
Body Standard body text for descriptions and UI 14px / 1.6 / 0.02em
Body-sm Dense data, comparison rows 13px / 1.5 / 0.02em
Caption Meta info · Labels 12px / 1.5 / 0.08em

Fonts

Primary Inter 300–700 · 12–72px · Substitute for Tesla Gothic
Mono SF Mono / JetBrains Mono 400 · Spec values only
Layout

Spacing & Shapes

Base unit 4px. Spacious density with generous breathing room. 16-step spacing scale, pill buttons throughout.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
6464px
9696px

Border Radius

default 4px
input 4px
cards 8px
pill 9999px
Elevation

Surface System

Six distinct surface levels spanning dark and light themes. Flat surfaces with color contrast for elevation — no shadows.

Obsidian #000000
Carbon #171a20
Slate #1c1e21
Pearl #f4f4f4
Ivory #fbfbfb
Canvas White #ffffff
Data Display

Spec Rows

The signature Tesla data display pattern — clean label/value pairs in a structured grid with minimal dividers.

Range (EPA est.)405 mi
0–60 mph1.99 s
Top Speed200 mph
Peak Power1,020 hp
Drag Coefficient0.208 Cd
DriveTri Motor AWD
Components

Button Variants

All buttons use pill shape (9999px radius). Primary CTA in Ember Red, secondary options in outlined or ghost styles.

Primary CTA Button (Pill)
Main call to action — ordering, configuring
.btn-primary
Ember Red (#e82127) background, Canvas White text, 9999px radius, 12px/48px padding. Highest visual weight.
Secondary Pill Button (Outlined)
Learn more, explore, compare
.btn-dark
Transparent background, Onyx text, 1px Onyx border, 9999px radius. Hover fills with Onyx.
Red Outline Button
Secondary action on dark backgrounds
.btn-red-outline
Transparent background, Ember Red text and border, 9999px radius. Hover fills with Ember Red.
Secondary Outlined (Light)
Secondary actions on light backgrounds
.btn-secondary
Transparent background, Canvas White text, 1px Canvas White border, 9999px radius.
Ghost Navigation Link
Header navigation items
.nav-link
Model S Model 3 Model X Model Y
Onyx text, transparent background, 14px, weight 400, letter-spacing 0.02. Hover lightens.
Input Field
User text input
input
Transparent background, Onyx text, 4px radius. Focus state uses solid Onyx border.
Guidelines

Do's & Don'ts

Do — Embrace
  • Pure black (#000000) and white (#ffffff) as primary canvases
  • Ember Red (#e82127) exclusively for primary CTAs
  • Pill-shaped buttons (9999px radius) everywhere
  • Generous spacing — sections breathe with large padding
  • Tight letter-spacing on headings for premium feel
  • Full-bleed hero imagery at viewport scale
  • Subtle Graphite borders for minimal separation
  • Stark weight/size hierarchy over color variety
Don't — Avoid
  • Additional accent colors beyond red variants
  • Rounded corners >8px on non-button elements
  • Cramped, dense layouts without breathing room
  • Decoratory shadows — use flat color contrast
  • Playful or casual typography choices
  • Gradient backgrounds on primary surfaces
  • Bright saturated colors for secondary elements
  • Heavy dividers or visual noise