Tesla Design System

---
name: Tesla
url: https://tesla.com
version: 1.6.0
tokens:
  colors:
    primary: "#cc0000"
    background: "#ffffff"
    surface: "#f4f4f4"
    text-primary: "#171a20"
    text-secondary: "#5c5e62"
  typography:
    font-sans: "Gotham, Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    scale:
      - { name: display, size: "40px", weight: 500, lineHeight: 1.2 }
      - { name: body, size: "14px", weight: 400, lineHeight: 1.6 }
  spacing:
    base: "8px"
    scale:
      space-2: "8px"
      space-4: "16px"
      space-8: "32px"
  radius:
    sm: "4px"
    md: "8px"
    full: "9999px"
  breakpoints:
    sm: "640px"
    md: "768px"
    lg: "1024px"
---

# Tesla — Design System Specification

## 1. Overview
Ultra-minimal automotive luxury aesthetic with sharp typography, pure white space, and electric red (`#cc0000`) accents.

## 2. Color System
- Tesla Red: `#cc0000`
- Canvas White: `#ffffff`
- Surface: `#f4f4f4`

## 3. Typography Scale
- Display: 40px / Weight 500 / Gotham
- Body: 14px / Weight 400 / Gotham

## 4. Button Variants
- Order Button: `background: #393c41`, `color: #ffffff`, `border-radius: 4px`

## 5. Card Examples
- Spec Card: `background: #f4f4f4`, `border-radius: 8px`

## 6. Form Elements
- Configurator Input: `border-radius: 4px`

## 7. Spacing Scale
- 8px, 16px, 24px, 32px, 48px, 80px

## 8. Border Radius Scale
- `sm: 4px`, `md: 8px`, `full: 9999px`

## 9. Responsive Behavior
- `sm: 640px`, `md: 768px`, `lg: 1024px`