Tesla
Tesla's website is an exercise in radical subtraction — a digital showroom where the product is everything and the interface is almost nothing. Electric Blue (#3E6AE1) for primary CTAs, Universal Sans typography.
Homepage Example
Color Palette (9)
Typography (5)
Components (4)
Border Radius
Design Philosophy
Overview
Tesla's website is an exercise in radical subtraction — a digital showroom where the product is everything and the interface is almost nothing.
The color philosophy is almost ascetic: a single blue (#3E6AE1) for primary calls to action, three shades of dark gray for text hierarchy, and white for everything else.
Key Characteristics
- Full-viewport hero sections dominated by cinematic car photography
- Near-zero UI decoration: no shadows, no gradients, no borders
- Single accent color — Electric Blue (#3E6AE1)
- Universal Sans font family (Display + Text)
- Photography-first presentation
Do's and Don'ts
Let photography dominate every screen. Use Electric Blue (#3E6AE1) exclusively for primary CTAs. Maintain viewport-height sections. Keep typography at weight 400-500 only.
Design Insights
Accessibility Considerations
Tesla's color system, anchored by #3E6AE1, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.
Accessibility Considerations
Tesla's color system, anchored by #3E6AE1, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.
Accessibility Considerations
Tesla's color system, anchored by #3E6AE1, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.
Related Design Systems
Explore similar design languages from the same category:
Frequently Asked Questions
Q. What are Tesla's brand colors?
The Tesla palette uses 9 colors, led by electric-blue (#3E6AE1), pure-white (#ffffff), light-ash (#F4F4F4), carbon-dark (#171A20), graphite (#393C41). The primary brand color is electric-blue (#3E6AE1).
Q. What fonts does the Tesla design system use?
Display type is set in Universal Sans Display at 40px / weight 500, while body and UI text uses Universal Sans Text at 14px / weight 500.
Q. What kind of website is Tesla?
Tesla is a Automotive brand. Its design system documents 9 colors, 5 type styles and a 3-step border-radius scale.
Q. What border radius values does Tesla use?
The radius scale runs from 0 (0px) to 12 (12px): 0 (0px), 4 (4px), 12 (12px).
Q. Where can I see the Tesla design system?
This page shows Tesla's color palette, typography scale, components, border radii and design philosophy in English, Korean and Japanese.