Color Palette
Background Colors
Mid Gray 3
rgba(128,128,128,.65)
Typography
Text Font · Universal Sans Text
Universal Sans Text
Accelerating the world's transition to sustainable energy through electric vehicles and clean energy.
Regular · 400
Medium · 500
Display Font · Universal Sans Display
Universal Sans Display
Model S · Model 3 · Model X · Model Y · Cybertruck
Regular · 400
Medium · 500
Model Y
Display Hero · 40px · Display Medium · line-height: 48px
A New Kind of Electric Car
Heading 3XL · 28px · Display Medium · line-height: 36px
Autopilot · Full Self-Driving
Heading 2XL · 20px · Display Medium · line-height: 24px
Every new Tesla comes equipped with advanced hardware capable of providing Autopilot features today and full self-driving capability in the future.
Body XL · 17px · Regular · line-height: 24px
Your Tesla will continue to receive over-the-air software updates to improve performance and add new features over time.
Body LG · 14px · Regular · line-height: 24px
Est. delivery: May–June 2026 · Starting at ₹62,00,000 after potential savings
Body Base · 12px · Regular · line-height: 20px
RANGE · PERFORMANCE · SAFETY · AUTOPILOT
Caption / Label · 10px · Medium · line-height: 14px · letter-spacing: 0.8px
Letter Spacing
No letter-spacing tokens detected in the Tesla design system. Letter spacing is expressed inline within component styles rather than as standalone tokens.
Spacing
Spacing Scale
17 tokens — 4px → 253px
Borders
Border Widths
Three border widths. The 3px Base width is the most used — primarily for selection indicators, active states, and progress bars throughout the vehicle UI and marketing site. --border-width-base: 3px · --tds-animation-bezier-base: cubic-bezier(0.5,0,0,0.75)
Shadows / Elevation
Shadow Tokens
6 tokens — from transparent inset to white highlight
Inset Ring
×37
Transparent 2px inset — focus rings, selection states
Flat
×18
Fully transparent — no visible shadow, relies on border
Subtle Drop
×8
rgba(0,0,0,0.3) 0px 1px 4px -1px — map controls, cards
White Underline
×5
White 0px 2px 0px -1px — active nav indicators
Card Shadow
×3
rgba(0,0,0,0.16) 0px 8px 16px — floating panels, cards
White Bottom
×2
White 0px -2px 0px — reverse underline effects
Z-Index
| Layer | Value | Usage |
|---|
| Behind | -1 | Elements placed behind base content |
| Base | 1 | Default content layer |
| Raised | 3 | Slightly elevated content |
| Above | 4 | Content above raised elements |
| Navigation | 10 | Sticky site header, nav |
| Overlay 100 | 100 | First overlay tier — dropdowns |
| Overlay 101–107 | 101–107 | Layered overlay system |
| Panel | 490 | Side panels, drawers |
| Toast | 995 | Toast notifications |
| Modal Back | 999 | Modal backdrop |
| Modal | 1000 | Modal dialogs |
| Critical | 100001 | Critical system overlays |
| Top | 999999 | Highest priority elements |
| Absolute 1 | 1000001 | Absolute top layers |
| Absolute 2 | 1000002 | Above absolute top |
Opacity
Opacity Tokens
7 tokens — 0.2 → 0.9
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
| Text Token | Background Token | Ratio | WCAG Rating |
|---|
| Dark Gray | Black | 1.9:1 | Fail |
| Dark Gray | Dark Gray 2 | 1.57:1 | Fail |
| Dark Gray | White | 11.07:1 | AAA |
| Dark Gray | Blue | 2.3:1 | Fail |
| Dark Gray | Light Gray 2 | 7.24:1 | AAA |
| Light Gray | Black | 18.1:1 | AAA |
| Light Gray | Dark Gray 2 | 15.02:1 | AAA |
| Light Gray | White | 1.16:1 | Fail |
| Light Gray | Blue | 4.16:1 | AA Large |
| Light Gray | Light Gray 2 | 1.32:1 | Fail |
| Dark Gray 3 | Black | 3.23:1 | AA Large |
| Dark Gray 3 | Dark Gray 2 | 2.68:1 | Fail |
| Dark Gray 3 | White | 6.5:1 | AA |
| Dark Gray 3 | Blue | 1.35:1 | Fail |
| Dark Gray 3 | Light Gray 2 | 4.25:1 | AA Large |
| Mid Gray | Black | 6.41:1 | AA |
| Mid Gray | Dark Gray 2 | 5.32:1 | AA |
| Mid Gray | White | 3.28:1 | AA Large |
| Mid Gray | Blue | 1.47:1 | Fail |
| Mid Gray | Light Gray 2 | 2.14:1 | Fail |
CSS Variables Reference
Black--color-black#000000
Dark Gray 2--color-dark-gray-2#171A20
White--color-white#FFFFFF
Light Gray 2--color-light-gray-2#D0D1D2
Light Gray 3--color-light-gray-3#E8EAED
White 2--color-white-2#F4F4F4
White 3--color-white-3#F5F5F5
Mid Gray 3--color-mid-gray-3rgba(128,128,128,.65)
Light Gray 4--color-light-gray-4#E5E3DF
Dark Gray--color-dark-gray#393C41
Light Gray--color-light-gray#EEEEEE
Dark Gray 3--color-dark-gray-3#5C5E62
Mid Gray--color-mid-gray#8E8E8E
Blue 2 (border)--color-blue-2#1A73E8
Orange--color-orange#FBB01B
Green--color-green#12BB00
Mid Gray 2--color-mid-gray-2#A2A3A5
Dark Gray 4--color-dark-gray-4#161616
Text Font--font-family-baseUniversal Sans Text
Display Font--font-family-2Universal Sans Display
Mono Font--font-family-monoFira Code
Regular--font-weight-regular400
Medium--font-weight-medium500
2XS Caption--font-size-2xs7px
XS Label--font-size-xs10px
SM--font-size-sm11px
Base--font-size-base12px
LG Body--font-size-lg14px
XL Body--font-size-xl17px
2XL Heading--font-size-2xl20px
3XL Heading--font-size-3xl28px
4XL Display--font-size-4xl40px
No letter-spacing tokens—None detected
Hairline--border-width-hairline1px
Thin--border-width-thin2px
Base--border-width-base3px
Instant--duration-instant200ms
Fast--duration-fast250ms
Normal--duration-normal300ms
Slow--duration-slow330ms
Slower--duration-slower500ms
800ms--duration-duration-6800ms
1s--duration-duration-71000ms
Ease In-Out--easing-ease-in-outease-in-out
Linear--easing-linearlinear
Ease Out--easing-ease-outease-out
Brand Bezier--tds-beziercubic-bezier(0.5,0,0,0.75)
Behind--z-1-1
Base--z-21
Raised--z-33
Navigation--z-510
Overlay--z-6100
Panel--z-14490
Modal--z-171000
Critical--z-18100001
Top--z-19999999
Absolute--z-201000001
Design System Preview · Tesla (Dark) · Generated 13/04/2026 · 20 color tokens · 9 font-size · 4 font-family · 2 font-weight · 10 line-height · 0 letter-spacing · 17 spacing · 5 radius · 3 border-width · 6 shadow · 7 duration · 3 easing · 21 z-index · 25 breakpoint · 7 opacity