Tesla Design System

Tesla's marketing site is an exercise in radical subtraction. The page opens with a full-viewport hero — three vehicles arranged on polished concrete against a hazy cityscape sky, with a single model name floating above in translucent white type — and from there, every screen is one car, one model name, one CTA pair, set against an unbroken white canvas. There are no decorative borders, no gradients, no patterns, no shadows. The color philosophy is almost ascetic: a single Electric Blue at #3E6AE1 for primary CTAs, three shades of dark gray for text hierarchy, and white for everything else. The entire emotional weight is carried by cinematic vehicle photography that stretches edge-to-edge across each 100vh section.

This DESIGN.md captures the full Tesla system in machine-readable form: 11 color tokens spanning a single accent plus six text/surface neutrals, 8 typography tokens running on Universal Sans Display and Universal Sans Text (the custom family that recently replaced Gotham across the website, mobile app, and in-car software), 9 spacing values on an 8px base unit, a 4-step border radius scale from 0 to 50%, and 14 component definitions for buttons, cards, navigation, and the persistent "Ask a Question" chat bar. The file follows the Google Labs DESIGN.md specification, which standardizes these tokens so AI coding tools can read them.

Hand this file to Claude, Cursor, or GitHub Copilot and the agent reproduces Tesla's restraint rather than a generic automotive theme — 4px button radii instead of pill shapes, transparent-PNG vehicle imagery on white instead of gradient hero panels, two type weights instead of six, no shadows anywhere. You can also paste the tokens directly into Tailwind config or CSS variables. The system is worth studying because it commits harder than almost any other consumer brand to the principle that the product, not the UI, should carry the page.