Studio
Studio
The Tesla design system uses a light-themed visual language. The primary brand color is Tesla Blue (#3e6ae1); text is Charcoal (#393c41) on a Pure White (#ffffff) background. Typography is set in Universal Sans Display, Universal Sans Text and Roboto. This DESIGN.md contains 10 color tokens and a 6-step type scale; give it to AI tools like Claude, Cursor or v0 to generate consistent interfaces in the style of Tesla.
Independent Style Review
Automotive Showroom on Screen. High-fidelity product visuals dominate, framed by a minimal, functional interface that gets out of the way.
The design operates like a premium automotive showroom translated to the screen. Every section is a full-bleed, cinematic product photograph, with UI elements acting as minimal, functional plaques. The palette is starkly achromatic, save for a single, electric Tesla Blue (#3e6ae1) reserved exclusively for primary calls-to-action, functioning like an ignition button. Typography is neutral and technical, serving information without asserting its own personality. This systematic subordination of UI to imagery ensures the product—the car, the solar panel—is always the undisrupted hero.
| Color | HEX | CSS token | Usage |
|---|---|---|---|
| Tesla Blue | #3e6ae1 | --color-tesla-blue | Primary CTAs ('Order Now') — a single, focused point of saturated color in an otherwise grayscale environment, creating an unmissable action prompt. |
| Pure White | #ffffff | --color-pure-white | Primary page backgrounds, card surfaces, text on dark/blue buttons. |
| Off-White | #eeeeee | --color-off-white | Secondary content cards, subtle dividers between white sections. |
| Parchment | #e5e3df | --color-parchment | Rare alternative background color for specific sections. |
| Light Border | #cccccc | --color-light-border | Inactive UI element borders, subtle dividers. |
| Subtle Gray | #8e8e8 | --color-subtle-gray | Placeholder text, tertiary UI details. |
| Steel | #5c5e62 | --color-steel | Secondary text, footer links, icon fills. |
| Charcoal | #393c41 | --color-charcoal | Primary body text, text on light buttons, header navigation. |
| Onyx | #171a20 | --color-onyx | Primary heading text, dark button backgrounds. |
| Carbon | #000000 | --color-carbon | SVG icon fills, text overlays on light images. |
| Font | Weights | Fallback |
|---|---|---|
| Universal Sans Display | 400, 500 | Inter, Manrope |
| Universal Sans Text | 400, 500 | Inter, SF Pro Text |
| Roboto | 400, 500 | Roboto, system-ui |
| Role | Size | Line height | Token |
|---|---|---|---|
| caption | 11px | 1.2 | --text-caption |
| body | 14px | 1.43 | --text-body |
| heading-sm | 20px | 1.4 | --text-heading-sm |
| heading | 28px | 1.29 | --text-heading |
| heading-lg | 40px | 1.2 | --text-heading-lg |
| display | 48px | 1.17 | --text-display |
