Tesla

# Tesla Design System

## Overview
Extracted from Tesla error pages and typical Tesla brand guidelines. The design system emphasizes minimalism, high contrast, and clean typography.

## Tokens — Colors

| Token | Value | Usage |
|-------|-------|-------|
| `background` | `#FFFFFF` | Page background |
| `text-primary` | `#000000` | Primary text, headings |
| `text-secondary` | `#393c41` | Secondary text, body copy |
| `text-muted` | `#5c5e62` | Muted text, captions |
| `accent-red` | `#cc0000` | Tesla brand accent, CTAs |
| `accent-blue` | `#3457D5` | Links, interactive elements |
| `border` | `#e2e2e2` | Borders, dividers |
| `surface` | `#f4f4f4` | Card backgrounds, sections |

## Tokens — Typography

### Font Families
- **Primary**: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif`
- **Monospace**: `"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace`

### Type Scale

| Token | Size | Line Height | Weight | Usage |
|-------|------|-------------|--------|-------|
| `text-xs` | `12px` | `16px` | `400` | Captions, footnotes |
| `text-sm` | `14px` | `20px` | `400` | Small body text |
| `text-base` | `16px` | `24px` | `400` | Body text |
| `text-lg` | `18px` | `28px` | `400` | Large body |
| `text-xl` | `20px` | `28px` | `500` | Subheadings |
| `text-2xl` | `24px` | `32px` | `600` | Section titles |
| `text-3xl` | `30px` | `36px` | `700` | Page titles |
| `text-4xl` | `36px` | `40px` | `700` | Large headings |
| `text-5xl` | `48px` | `1` | `700` | Hero headings |

## Tokens — Spacing

| Token | Value |
|-------|-------|
| `spacing-1` | `4px` |
| `spacing-2` | `8px` |
| `spacing-3` | `12px` |
| `spacing-4` | `16px` |
| `spacing-5` | `20px` |
| `spacing-6` | `24px` |
| `spacing-8` | `32px` |
| `spacing-10` | `40px` |
| `spacing-12` | `48px` |
| `spacing-16` | `64px` |
| `spacing-20` | `80px` |
| `spacing-24` | `96px` |

## Tokens — Border Radius

| Token | Value |
|-------|-------|
| `radius-none` | `0px` |
| `radius-sm` | `2px` |
| `radius-base` | `4px` |
| `radius-md` | `6px` |
| `radius-lg` | `8px` |
| `radius-full` | `9999px` |

## Tokens — Shadows

| Token | Value |
|-------|-------|
| `shadow-sm` | `0 1px 2px 0 rgba(0, 0, 0, 0.05)` |
| `shadow-base` | `0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)` |
| `shadow-md` | `0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)` |
| `shadow-lg` | `0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)` |

## Tokens — Borders

| Token | Value |
|-------|-------|
| `border-width-base` | `1px` |
| `border-width-thick` | `2px` |
| `border-color` | `#e2e2e2` |

## Components

### Error Page
- Minimal layout with centered content
- Bold heading (h1) for error title
- Regular body text for error description
- Monospace font for reference numbers and URLs
- No interactive elements on error state

### Button (inferred from Tesla brand)
- Solid background (black or red)
- White text
- Border radius: 4px
- Padding: 12px 24px
- Font weight: 500
- Letter spacing: 0.5px
- Hover: opacity 0.85

### Link
- Blue color (#3457D5)
- Underline on hover
- Font weight: 500

## Layout Patterns

### Error Page Layout
- Full-page white background
- Content left-aligned
- 8px top margin for heading
- Standard line spacing between elements
- No navigation or branding on error pages

### Container (typical Tesla pattern)
- Max width: 1440px
- Center aligned
- Padding: 0 24px (mobile), 0 48px (tablet+)