Tesla Design System

Overview

Tesla's marketing site is the canonical example of radical subtraction in automotive web design. The base canvas is pure white ({colors.canvas} — #FFFFFF) with Carbon Dark ink ({colors.ink} — #171A20) for headings and a single voltage of Electric Blue ({colors.primary} — #3E6AE1) reserved exclusively for primary CTAs. There is no secondary accent color anywhere in the system — Tesla deliberately avoids color variety to maintain extreme visual discipline. The page opens with a full-viewport 100vh hero of cinematic vehicle photography and proceeds through one viewport-height section at a time, each carrying one model, one title, and at most two CTAs.

Type runs Universal Sans, a custom variable family that recently replaced Gotham to unify the website, mobile app, and in-car software into one typographic voice. The family splits into Universal Sans Display for hero titles (40px / 500) and Universal Sans Text for everything else — navigation, body copy, button labels, sub-links — almost all clustering at 14px. Only two weights appear in the entire system: 500 for headings and UI, 400 for body. No bold (700), no light (300), no italic, no uppercase transforms, no negative letter-spacing.

The shape language is precise. Every interactive surface uses a 4px radius ({rounded.xs}) — barely-rounded rectangles that mirror the engineered geometry of the vehicles themselves. Category cards use a slightly more generous 12px radius ({rounded.md}), and carousel dot indicators are perfect circles ({rounded.full}). There are no pill buttons anywhere. Most elements are sharp-edged (0px) by default.

Key Characteristics:

• Single accent color: {colors.primary} (#3E6AE1 — "Electric Blue") is the only chromatic color in the entire interface, used exclusively for primary CTAs ("Order Now") and promotional text ("0% APR Available"). Every other color is a neutral.
• Custom variable type: Universal Sans Display + Universal Sans Text, replacing Gotham across the entire Tesla digital ecosystem. Hero titles at 40px / 500; nearly everything else at 14px in either weight 500 or 400.
• Full-viewport hero sections: every major content band is 100vh, dominated by edge-to-edge cinematic photography. One message per screen — model name, optional subtitle, two CTAs at most.
• Zero shadows on UI elements: the system has no box-shadow tier. Depth comes from photography, z-index layering, and opacity-based transparency (the frosted glass nav at rgba(255, 255, 255, 0.75)).
• Zero gradients anywhere: surfaces are either pure white ({colors.canvas}) or full-bleed photography. The frosted glass nav uses opacity, not gradient.
• 4px border radius on all interactive elements: buttons (primary, secondary, nav) all use {rounded.xs}. Category cards step up to {rounded.md} (12px). No pills.
• Photography carries all emotional weight: studio-lit vehicle profiles, sprawling landscape shots, transparent-PNG renders on white. The UI dissolves into the imagery.
• Two type weights only: 500 (medium) for headings and UI, 400 (regular) for body. No bold, no light, no italic, no uppercase.
• 0.33s cubic-bezier transitions as the universal motion timing — applied to color, border-color, and box-shadow changes only. No transforms, no scales, no translates.
• Persistent "Ask a Question" chat bar anchored to the viewport bottom across all sections, carrying a chat icon, placeholder ("What's Dog Mode?"), and a secondary "Schedule a Drive Today" CTA.

Colors

Brand & Accent

• Electric Blue ({colors.primary} — #3E6AE1): The single brand color. A confident mid-saturation blue (rgb 62, 106, 225) used exclusively for primary CTA backgrounds ("Order Now") and promotional text ("0% APR Available") over hero imagery. The blue serves as both the action signal and the incentive cue — Tesla never uses it decoratively.
• On Primary ({colors.on-primary} — #FFFFFF): White text on Electric Blue CTAs and on all dark hero overlays.

Surface

• Canvas ({colors.canvas} — #FFFFFF): The dominant background for all surfaces, panels, navigation, and secondary button fills. Tesla treats white as the canvas that lets photography breathe.
• Surface Soft ({colors.surface-soft} — #F4F4F4): A barely perceptible alternate surface (rgb 244, 244, 244) used for section differentiation when two adjacent bands need separation without a visible border.
• Surface Dark ({colors.surface-dark} — #171A20): A warm near-black with a blue undertone (rgb 23, 26, 32) used for dark hero text overlays and potential dark-mode contexts.

Hairlines & Borders

• Hairline ({colors.hairline} — #EEEEEE): The default 1px border tone (rgb 238, 238, 238) for light dividers and section delineation. Used very sparingly — Tesla prefers spacing over lines.
• Border Strong ({colors.border-strong} — #D0D1D2): A heavier stroke (rgb 208, 209, 210) for subtle UI delineation where the lighter hairline would disappear.

Text

• Ink / Carbon Dark ({colors.ink} — #171A20): Primary heading and navigation text — the darkest text value (rgb 23, 26, 32). Used for model names, nav labels, and hero titles on light backgrounds. Never pure black.
• Body / Graphite ({colors.body} — #393C41): The default paragraph color (rgb 57, 60, 65), slightly warmer than pure gray. Also used for secondary button text.
• Muted / Pewter ({colors.muted} — #5C5E62): Tertiary text (rgb 92, 94, 98) for sub-links like "Learn", "Order", "Experience", "New", "Pre-Owned" in the dropdown panel.
• Placeholder / Silver Fog ({colors.placeholder} — #8E8E8E): Input field placeholder text and disabled state text (rgb 142, 142, 142).

Semantic

Tesla's marketing site deliberately avoids semantic color coding. There are no green/red/yellow status indicators. Error, success, and warning states follow standard browser defaults in form contexts. The single Electric Blue (#3E6AE1) serves as the sole interactive signal in the entire system.

Gradient System

No gradients are used anywhere in the interface. Depth is achieved entirely through photography, whitespace, and the binary contrast between full-bleed imagery and clean white surfaces. The navigation achieves layering through opacity (the frosted glass effect at rgba(255, 255, 255, 0.75)) rather than gradient or shadow.

Scrim

• Modal Scrim (rgba(128, 128, 128, 0.65)): The global modal backdrop — used on region popups, cookie banners, and full-screen overlays. A mid-gray rather than pure black, which keeps the dimmed background readable.

Typography

Font Family

The system runs Universal Sans — a custom family split into two variants:

• Universal Sans Display: hero titles and large model names. A geometric sans-serif with precisely engineered proportions, recently replacing Gotham to unify Tesla's digital ecosystem across web, mobile app, and vehicle interface.
• Universal Sans Text: navigation, body copy, buttons, and all UI text. Optimized for legibility at smaller sizes with slightly wider proportions than the Display variant.

Fallbacks walk -apple-system, Arial, sans-serif. There are no OpenType features detected and no italic variants on the marketing site — typography is completely unembellished.

Hierarchy

Principles

Normal letter-spacing everywhere. Unlike most modern tech brands that use negative tracking for headlines, Tesla uses default letter-spacing at every level. This reflects a philosophy that the typeface should speak for itself without manipulation.

Weight restraint. Only two weights appear — 500 (medium) for headings and UI and 400 (regular) for body. No bold (700), no light (300). The system avoids typographic drama.

Unified font sizing. Most UI text clusters at 14px with only hero titles (40px) and promo text (22px) breaking away. This extreme uniformity creates a sense of engineered consistency that matches the brand identity of precision technology.

Display vs Text split. The two-variant system creates subtle optical correction without visible stylistic difference — Universal Sans Display and Universal Sans Text appear as the same typeface at different sizes.

No text transforms. No uppercase text appears in the main navigation or CTAs. The lowercase approach reinforces Tesla's understated confidence.

Note on Font Substitutes

Universal Sans is a proprietary Tesla font not available for public licensing. The closest open-source substitute is Inter at weight 500/400 with letter-spacing set to 0. Tesla's previous family, Gotham, is commercially licensed if matching the older brand era is the goal. Either substitute should run at the same sizes (40 / 22 / 17 / 16 / 14) without further adjustment.

Layout

Spacing System

• Base unit: 8px.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 16px · {spacing.lg} 21.44px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 100vh.
• Button padding: 4px outer ({spacing.xs}) with content centered via flexbox; nav items use 4px 16px ({spacing.xs} / {spacing.md}).
• Section padding: Full-viewport 100vh per major section, with content vertically centered. Tesla treats each section as its own gallery wall.
• Card gap: approximately 16px ({spacing.md}) between category cards.

Grid & Container

• Max width: approximately 1383px — full viewport width is used for most content; only the nav panel content respects an inner max-width.
• Hero: Full-bleed, edge-to-edge, 100vh sections — no padding, no margin, no container constraint.
• Navigation panel: 3-column grid for vehicle cards with a right-aligned text sidebar (~70/30 split).
• Category cards: 2-up horizontal layout — a large left card plus a smaller right card.

Whitespace Philosophy

Tesla uses whitespace as a luxury signal. The generous vertical spacing between sections — each section is a full viewport height — means you can only see one "message" at a time. One car, one model name, one CTA pair. This creates a gallery-like browsing experience where each scroll is a deliberate transition, not a continuous feed. White space is not empty; it's the frame that elevates each vehicle to the status of an art piece.

Border Radius Scale

Elevation

The system has essentially zero shadow tiers. Tesla's approach to elevation is "none."

• Flat (Level 0): No shadow, no border. The default state for all elements — cards, panels, buttons at rest. 95%+ of surfaces.
• Frosted Glass (Level 1): rgba(255, 255, 255, 0.75) backdrop. Used on the navigation bar after scroll, achieved through opacity rather than shadow.
• Modal Overlay: rgba(128, 128, 128, 0.65). The global modal scrim for region and cookie popups.
• Subtle Hint (rare): rgba(0, 0, 0, 0.05). Minimal shadow hints on rare hover states — almost never visible.

Shadow Philosophy

Tesla avoids box-shadows entirely in its primary interface. Depth is communicated through three alternative strategies: z-index layering (the sticky navigation sits above hero content through positioning), opacity-based transparency (the frosted glass nav and modal overlays), and photography-as-depth (full-bleed images create their own visual depth through perspective, lighting, and composition). Adding UI shadows would compete with the imagery, so the system treats them as forbidden.

Decorative Depth

No gradients, glows, or atmospheric effects on UI elements. The hero imagery itself provides all visual richness — sunset skies, reflected light on car surfaces, ground shadows from studio lighting. The carousel arrow buttons use a semi-transparent white background to float above the hero imagery without disrupting it.

Components

Buttons

button-primary — Electric Blue (#3E6AE1) fill, white text, 4px radius, 4px outer padding with flexbox centering, 40px height, 200px width, weight 500. Border reserved as 3px solid transparent to hold space for focus-state animation. Box shadow rgba(0,0,0,0) 0px 0px 0px 2px inset is invisible at rest but animates to visible on focus. Transitions: border-color 0.33s, background-color 0.33s, color 0.33s, box-shadow 0.25s. Used for "Order Now" and other primary actions.

button-secondary — White fill with Graphite (#393C41) text. Identical 4px radius, 40px height, 200px width, and transition timing as the primary button. Used for "View Inventory" alongside the primary CTA.

nav-button — Transparent background, Carbon Dark (#171A20) text, 4px radius, 4px 16px padding, 32px height. Transitions: color 0.33s, background-color 0.33s. Active or expanded state shows a subtle background highlight. Used for "Vehicles", "Energy", "Charging", "Discover", "Shop".

text-link — Plain Pewter (#5C5E62) text, no background, no border. Hover applies underline decoration with box-shadow 0.33s cubic-bezier(0.5, 0, 0, 0.75) transition. Used for "Learn", "Order", "Experience", "New", "Pre-Owned" links inside the dropdown panel.

Navigation

top-nav — White surface centered horizontal nav with the TESLA wordmark (spaced uppercase letters) flush left, five category buttons centered, and three icon buttons (help, globe/language, account) flush right. No visible border, no shadow.

nav-frost — On scroll, the nav background transitions from transparent over dark hero imagery to rgba(255, 255, 255, 0.75) frosted glass, then to opaque white. The class toggle tds-site-header--white-background drives the swap. Sticky behavior uses sticky-without-slide — the nav stays at top without slide-in animation. No separator between nav and content; the nav blends with the hero.

Cards

vehicle-card — Transparent background, no border, no shadow. Content is a transparent PNG vehicle render + model name centered below + two text links underneath ("Learn" / "Order"). Layout is a 3-column grid inside the dropdown panel. No hover animation on the card itself — interaction happens through the text links beneath.

category-card — Full-bleed landscape photography clipped by 12px rounded corners ({rounded.md}) with overflow: hidden. White category label ("Sport Sedan", "Midsize SUV") positioned in the top-left corner in {typography.category-label}. No shadow, no border, no overlay gradient — the text relies on image darkness for contrast. Approximate 2:1 aspect ratio.

Hero Section

hero-section — Full-viewport (100vh) section dominated by cinematic photography. The dark surface token ({colors.surface-dark} — #171A20) is used as the text overlay color for hero titles in {typography.hero-title} (Universal Sans Display 40px / 500). The carousel auto-advances with three dot indicators and edge-positioned arrow navigation.

Carousel

carousel-dot — Perfect circle ({rounded.full}) in white. Three dots indicate carousel position; the active dot is fully opaque, inactive dots are semi-transparent.

carousel-arrow — Approximately 44px square buttons with a semi-transparent white background (rgba(255, 255, 255, 0.75)) and rounded-full clipping. Positioned at viewport edges. Floats above the hero imagery without disrupting it.

Forms

text-input — Transparent background, Carbon Dark (#171A20) text, Silver Fog (#8E8E8E) placeholder, minimal border inherited from browser defaults. Universal Sans Text 14px. The "Ask a Question" chatbot input bar at viewport bottom uses a clean white background with a subtle border.

Persistent Chat Bar

chat-bar — Anchored to the viewport bottom and visible across all sections. White background with a subtle border. Contains a chat icon, "Ask a Question" label, placeholder text ("What's Dog Mode?"), a send icon, and a "Schedule a Drive Today" secondary CTA. The Schedule CTA carries a small teal/blue icon accent.

Modal Overlay

modal-scrim — rgba(128, 128, 128, 0.65) background applied behind modals, region popups, and cookie consent dialogs. A mid-gray rather than pure black, which keeps dimmed content readable through the scrim.

Responsive Behavior

Touch Targets

• Primary CTA buttons: 200px × 40px minimum — well above the 44×44px WCAG requirement.
• Nav buttons: minimum 32px height with 4px 16px padding — adequate touch targets on tablet and mobile.
• Carousel arrows: ~44px square buttons with semi-transparent white backgrounds at viewport edges.
• Text links ("Learn", "Order"): 14px text with adequate line-height spacing for touch.

Collapsing Strategy

• Horizontal category buttons (Vehicles, Energy, Charging, Discover, Shop) collapse to a hamburger drawer on mobile.
• Hero CTA pair switches from side-by-side on desktop to vertically stacked on mobile.
• 2-up category card layout collapses to single-column full-width on mobile.
• 3-column vehicle grid in the desktop nav panel becomes 2-column on tablet, single-column on mobile.
• Section vertical padding stays at viewport height; horizontal padding reduces on narrower screens.

Image Behavior

• Hero images are fully responsive and fill the entire viewport at every breakpoint.
• Vehicle carousel images use object-fit: cover to maintain cinematic composition across widths.
• Transparent PNG vehicle images in the nav panel scale proportionally within their grid cells.
• Category card images maintain their landscape ratio and clip via overflow: hidden with the 12px border-radius.

Known Gaps

• Mobile hamburger menu interior: the collapsed-state menu structure is documented at a high level, but the exact animation curve and panel transition were not captured.
• Carousel auto-advance timing: the dot-indicator carousel auto-advances, but the precise interval and easing curve were not captured.
• Account dashboard: the Tesla account dashboard (gated behind auth) uses a slightly more form-heavy variant of this system that is not captured here.
• In-car software UI: the vehicle infotainment interface shares Universal Sans but uses its own component palette (touch-optimized, dark-mode-default) — handled by a separate spec.
• Powerwall / Solar product pages: these product surfaces use the same color and type system but a slightly different photography treatment (more landscape architecture, fewer studio vehicle shots) — not captured here.
• Configurator flows: the vehicle order configurator uses a denser, multi-step form pattern with its own button and toggle states — not captured in this marketing-focused spec.