---
version: alpha
name: Tesla
website: "https://www.tesla.com"
description: A radically subtractive automotive marketing system anchored on pure white (#ffffff) and Electric Blue (#3E6AE1) — the only chromatic color in the entire interface. Type runs Universal Sans Display + Universal Sans Text (a custom variable family that recently replaced Gotham), with hero titles at just 40px / 500 and nearly all UI text clustering at 14px. Every interactive surface is barely-rounded (4px), there are zero shadows, zero gradients, zero borders on cards, and one accent color used exclusively for primary CTAs. Photography carries 100% of the emotional weight — full-viewport 100vh hero sections of cinematic vehicle imagery do what shadows and gradients do on lesser sites.

seo:
  title: "Tesla Design System for React — Electric Blue (#3E6AE1), Universal Sans, 14 components"
  metaDescription: "Tesla's design system as a DESIGN.md file. Electric Blue #3E6AE1, Universal Sans, 11 colors, 14 components. For React, Next.js, and AI tools."
  tags:
    - "Automotive"
  highlights:
    - "Single accent voltage — Electric Blue (#3E6AE1) is the only chromatic color in the entire interface, reserved for primary CTAs"
    - "Zero shadows, zero gradients, zero borders on cards — depth comes entirely from full-viewport photography and white space"
    - "Universal Sans replaces Gotham — a custom variable family unifying the website, mobile app, and in-car software"
    - "Only two type weights — 500 for headings and UI, 400 for body; no bold, no light, no extremes"
    - "4px radius on every interactive surface — barely-rounded rectangles that mirror the engineered precision of the vehicles"
  lastUpdated: "2026-05-12"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "/blocks"
      title: "React blocks for shadcn/ui"
      description: "Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives."
  questions:
    - id: "primary-color"
      title: "What is Tesla's primary brand color?"
      answer: "Tesla uses Electric Blue at #3E6AE1 (rgb 62, 106, 225) as the single chromatic color across the entire marketing site. It appears exclusively on primary CTA buttons like 'Order Now' and on promotional text such as '0% APR Available' over hero imagery. Every other color in the system is a neutral — pure white, Carbon Dark #171A20, Graphite #393C41, Pewter #5C5E62, Silver Fog #8E8E8E — so the blue carries the entire interactive signal alone."
    - id: "typography"
      title: "What typeface does Tesla use, and what changed recently?"
      answer: "Tesla recently transitioned from Gotham to Universal Sans, a custom family split into Universal Sans Display for hero titles and Universal Sans Text for body and UI. The split unifies the website, mobile app, and in-car software into one typographic voice. Hero titles render at 40px / 500, while almost every other UI element — navigation, body copy, buttons — clusters at 14px in either weight 500 or 400. Only two weights are used; no bold, no light."
    - id: "no-shadows"
      title: "Why are there no shadows or gradients on Tesla's site?"
      answer: "Tesla's elevation model is essentially 'none.' The system avoids box-shadows entirely in its primary interface and uses zero gradients anywhere. Depth is communicated through z-index layering, opacity-based transparency (the frosted glass navigation at rgba(255, 255, 255, 0.75) on scroll), and the full-bleed photography itself — sunset skies, reflected light on car surfaces, ground shadows from studio lighting. Adding UI shadows would compete with the imagery, so the system treats them as forbidden."
    - id: "border-radius"
      title: "What is Tesla's border radius scale?"
      answer: "Tesla runs a four-step scale: 0px for most elements (sharp edges are the default), 4px for buttons and nav items (barely perceptible rounding), ~12px for category cards (noticeable but restrained), and 50% for carousel dot indicators (perfect circles). There are no pill buttons, no large radii, no aggressively rounded surfaces. The 4px button radius is deliberate — it mirrors the engineered precision of the vehicles themselves."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React automotive site?"
      answer: "Yes — the file is designed to feed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent reproduces Tesla's restraint (single accent, zero shadows, modest type weights, 4px radii, full-viewport photography) rather than a generic dashboard theme. You can also reference the tokens directly: every color, type style, radius, and spacing value is a quoted value you can paste into Tailwind config, CSS variables, or your own component library."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "A handful of items documented in the Known Gaps section: detailed mobile breakpoint specifics for the hamburger menu, the exact carousel transition timing curve, the Tesla account dashboard interior styling (gated behind auth), the in-car UI tokens (handled by a separate spec for vehicle software), and the Powerwall / Solar product page surfaces, which use a slightly different photography treatment. The spec captures roughly 90% of the public tesla.com marketing surfaces."

colors:
  primary: "#3E6AE1"
  canvas: "#FFFFFF"
  surface-soft: "#F4F4F4"
  surface-dark: "#171A20"
  ink: "#171A20"
  body: "#393C41"
  muted: "#5C5E62"
  placeholder: "#8E8E8E"
  hairline: "#EEEEEE"
  border-strong: "#D0D1D2"
  on-primary: "#FFFFFF"

typography:
  hero-title:
    fontFamily: "'Universal Sans Display', -apple-system, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: normal
  product-name:
    fontFamily: "'Universal Sans Text', -apple-system, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 500
    lineHeight: 1.18
    letterSpacing: normal
  nav-item:
    fontFamily: "'Universal Sans Text', -apple-system, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: normal
  body-text:
    fontFamily: "'Universal Sans Text', -apple-system, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: normal
  button-label:
    fontFamily: "'Universal Sans Text', -apple-system, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: normal
  sub-link:
    fontFamily: "'Universal Sans Text', -apple-system, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: normal
  promo-text:
    fontFamily: "'Universal Sans Display', -apple-system, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 0.91
    letterSpacing: normal
  category-label:
    fontFamily: "'Universal Sans Text', -apple-system, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: normal

rounded:
  none: 0px
  xs: 4px
  md: 12px
  full: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 21.44px
  xl: 32px
  xxl: 48px
  section: 100vh

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-label}"
    rounded: "{rounded.xs}"
    padding: 4px
    height: 40px
    width: 200px
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.body}"
    typography: "{typography.button-label}"
    rounded: "{rounded.xs}"
    padding: 4px
    height: 40px
    width: 200px
  nav-button:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.nav-item}"
    rounded: "{rounded.xs}"
    padding: 4px 16px
    height: 32px
  text-link:
    backgroundColor: transparent
    textColor: "{colors.muted}"
    typography: "{typography.sub-link}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-item}"
  nav-frost:
    backgroundColor: "rgba(255, 255, 255, 0.75)"
    textColor: "{colors.ink}"
  vehicle-card:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.product-name}"
  category-card:
    backgroundColor: transparent
    textColor: "{colors.on-primary}"
    typography: "{typography.category-label}"
    rounded: "{rounded.md}"
  hero-section:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.hero-title}"
  carousel-dot:
    backgroundColor: "{colors.canvas}"
    rounded: "{rounded.full}"
  carousel-arrow:
    backgroundColor: "rgba(255, 255, 255, 0.75)"
    textColor: "{colors.ink}"
    rounded: "{rounded.full}"
  text-input:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body-text}"
  chat-bar:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-text}"
  modal-scrim:
    backgroundColor: "rgba(128, 128, 128, 0.65)"
---

## 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

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.hero-title}` | 40px | 500 | 1.20 | normal | Hero titles (Universal Sans Display) — white on dark hero imagery |
| `{typography.promo-text}` | 22px | 400 | 0.91 | normal | White promotional text on hero ("0% APR Available") |
| `{typography.product-name}` | 17px | 500 | 1.18 | normal | Model names in nav panel and vehicle cards |
| `{typography.category-label}` | 16px | 500 | 1.25 | normal | White text labels on category cards ("Sport Sedan", "Midsize SUV") |
| `{typography.nav-item}` | 14px | 500 | 1.20 | normal | Primary navigation labels (Vehicles, Energy, Charging, Discover, Shop) |
| `{typography.button-label}` | 14px | 500 | 1.20 | normal | CTA button text |
| `{typography.body-text}` | 14px | 400 | 1.43 | normal | Paragraph and descriptive content |
| `{typography.sub-link}` | 14px | 400 | 1.43 | normal | Tertiary links (Learn, Order, Experience, New, Pre-Owned) |

### 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

| Token | Value | Context |
|---|---|---|
| `{rounded.none}` | 0px | Most elements — sharp edges are the default |
| `{rounded.xs}` | 4px | Buttons (primary, secondary, nav items) — barely perceptible rounding |
| `{rounded.md}` | 12px | Category cards — noticeable but restrained rounding on larger surfaces |
| `{rounded.full}` | 9999px | Carousel dot indicators and arrow buttons — perfect circles |

## 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

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Hamburger nav replaces horizontal labels, hero text scales to ~28px, CTA buttons stack vertically, category cards become full-width. |
| Tablet | 768–1024px | 2-column nav panel, hero maintains full-viewport height, CTAs remain side-by-side, reduced horizontal padding. |
| Desktop | 1024–1440px | Full horizontal nav, 3-column vehicle grid in dropdown, hero at 40px, side-by-side CTAs at 200px / 160px width. |
| Large Desktop | > 1440px | Content remains centered, hero photography scales to fill wider viewports, max-width container for nav panel content only. |

### 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.