# Tesla — Design System
> Global leader in electric vehicles, renewable energy, and sustainable infrastructure.
- **Canonical:** https://uiuxskills.com/library/tesla
- **Source:** https://www.tesla.com
- **Category:** Automotive
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:17:23.249Z

---

---
version: alpha
name: Tesla
description: Global leader in electric vehicles, renewable energy, and sustainable infrastructure.
tone: Direct, authoritative, minimalist, and tech-forward.
color-scheme: light
colors:
  primary: "#171A20"
  surface: "#FFFFFF"
  surface-dim: "#F4F4F4"
  on-surface: "#171A20"
  on-primary: "#FFFFFF"
  outline: "#D0D1D2"
  error: "#D93025"
  success: "#188038"
  focus-ring: "#0073CF"
  surface-container: "#E8E8E8"
typography:
  display-lg:
    fontFamily: Roboto, Arial, sans-serif
    fontSize: 3rem
    fontWeight: 500
  display-md:
    fontFamily: Roboto, Arial, sans-serif
    fontSize: 2.25rem
    fontWeight: 500
  headline-lg:
    fontFamily: Roboto, Arial, sans-serif
    fontSize: 1.875rem
    fontWeight: 500
  headline-md:
    fontFamily: Roboto, Arial, sans-serif
    fontSize: 1.5rem
    fontWeight: 500
  body-md:
    fontFamily: Roboto, Arial, sans-serif
    fontSize: 1rem
    fontWeight: 400
  label-md:
    fontFamily: Roboto, Arial, sans-serif
    fontSize: 0.875rem
    fontWeight: 500
  label-sm:
    fontFamily: Roboto, Arial, sans-serif
    fontSize: 0.75rem
    fontWeight: 400
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: 200px
  button-primary-hover:
    backgroundColor: "#333333"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
  input-field:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#000000"
  badge:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.full}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-medium: 500ms
  easing-standard: cubic-bezier(.75,0,0,1)
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Tesla’s visual identity is defined by extreme minimalism, high-contrast monochrome palettes, and a focus on large-scale, immersive product imagery. The brand prioritizes clarity and directness, using a clean, sans-serif typography system to convey technological sophistication and forward-thinking innovation.

## Colors

The color strategy relies on a strict monochrome foundation to ensure that product imagery remains the focal point of the interface.

*   Primary (#171A20): The core brand color used for primary CTAs and high-contrast text.
*   Surface (#FFFFFF): The primary background color for a clean, uncluttered canvas.
*   Surface-dim (#F4F4F4): Used to differentiate secondary content blocks and section backgrounds.
*   On-surface (#171A20): Standard text color for high readability against light backgrounds.
*   On-primary (#FFFFFF): Text color for high-contrast primary buttons.
*   Outline (inferred) (#D0D1D2): Subtle borders and dividers used sparingly.
*   Error (inferred) (#D93025): Semantic color reserved strictly for critical error states.
*   Success (inferred) (#188038): Semantic color for success indicators.
*   Focus-ring (inferred) (#0073CF): High-visibility blue for accessibility and focus states.
*   Surface-container (inferred) (#E8E8E8): Neutral background for card components.

## Typography

The brand utilizes a single, clean sans-serif font stack (Roboto, Arial) to maintain a consistent, authoritative voice across all digital touchpoints.

*   Display-lg (inferred): Reserved exclusively for hero headlines.
*   Display-md (inferred): Used for major section titles.
*   Headline-lg (inferred): Used for sub-headlines.
*   Headline-md (inferred): Used for card titles.
*   Body-md: Standard paragraph text.
*   Label-md: Primary UI controls and button labels.
*   Label-sm (inferred): Footer links and secondary metadata.

## Layout

Tesla employs a 12-column grid system with a maximum container width of 1905px, prioritizing a mobile-first approach where navigation collapses into a drawer menu. The layout is characterized by generous whitespace, with a consistent vertical padding of 48px between sections to allow imagery to breathe. The page structure typically follows a sequence of nav, hero, features, pricing, and footer, with the hero pattern featuring a full-bleed image and centered, dual-action buttons.

## Elevation & Depth

Depth is used sparingly, relying on high-contrast color shifts rather than heavy shadows to separate content.

*   elevation.sm: Subtle lift for minor UI elements.
*   elevation.md: Standard depth for interactive cards.
*   elevation.lg: Used for modal or drawer overlays.

## Shapes

The design system balances industrial precision with user-friendly interaction through a defined radius scale. Structural elements like cards and input fields utilize sharp, clean edges (small radius), while primary call-to-action buttons use `{rounded.full}` to create a distinct, pill-shaped interaction point.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
These are the main action triggers, featuring a `{colors.primary}` background and `{rounded.full}` shape. Use these for high-intent actions like "Order Now."

### Card
Used for grouping related content, these rely on a `{colors.surface}` background and `{colors.outline}` border. Avoid applying elevation to these to maintain the flat, minimalist aesthetic.

### Input Field
Clean, border-defined fields using `{colors.outline}`. Apply `{input-field-focus}` to the border when the user interacts with the field to ensure accessibility.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Do not use drop shadows on `{card}` components. |
| Maintain a minimum of `{spacing.xl}` between sections. | Avoid using decorative borders; keep `{divider}` minimal. |
| Use `{typography.display-lg}` for hero headlines only. | Do not mix font families; stick to the Roboto/Arial stack. |
| Apply `{rounded.full}` to all primary buttons. | Avoid using `{colors.error}` for non-critical elements. |
| Ensure text meets high contrast against `{colors.surface}`. | Do not use `{rounded.sm}` for primary buttons. |
| Use `{colors.surface-dim}` for section differentiation. | Avoid excessive copy density; prioritize imagery. |
| Use `{input-field-focus}` for active input states. | Do not use low-contrast colors for primary text. |
| Use `{badge-success}` for status indicators. | Avoid cluttering the hero with excessive text. |

## Content Style

CTA labels are imperative, short, and action-oriented (e.g., "Order Now", "Learn"). They should be direct and avoid unnecessary fluff.

Headings are benefit-focused and concise, designed to be read at a glance. They should be declarative and maintain the authoritative tone of the brand.

Copy density is very low. The design relies on visual storytelling through high-fidelity imagery, using text only to provide essential context or clear navigation.

## Imagery & Icons

The imagery style is strictly photographic, featuring high-fidelity, studio-lit product shots with clean, neutral backgrounds. Images are typically full-bleed or large-scale to emphasize vehicle design and technical sophistication. Icons should be minimal and match the stroke weight of the typography to maintain visual harmony.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Tesla, a direct, authoritative, minimalist tech brand. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.full}` — never hardcode hex values, font sizes, or pixel radii.
2. Use only the components defined under `components:`. Do not invent variants (e.g., no outlined or ghost button unless the spec lists one).
3. Follow the Layout section for grid, max-width (1905px), section vertical padding (`{spacing.2xl}`), and mobile-first breakpoint behavior.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., adding drop shadows to cards), surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) exists, those values override the spec.

## Output contract

**Must:**
- Use token names for every color, type style, spacing value, and radius.
- Render primary buttons with `{rounded.full}` and `{colors.primary}` background; include hover state using `{button-primary-hover}` and disabled state with reduced opacity.
- Apply `{input-field-focus}` border and a `{colors.focus-ring}` focus ring on all interactive inputs and controls.
- Use `{elevation.sm}` / `{elevation.md}` / `{elevation.lg}` only as specified — never on flat card components.
- Keep `{motion.duration-medium}` and `{motion.easing-standard}` on transitions for interactive states.
- Space sections with a minimum of `{spacing.xl}` per the Do's table.

**Must NOT:**
- Invent colors, font families, or radii outside the spec.
- Use generic system defaults when a brand token exists.
- Apply drop shadows to `{card}` components.
- Use `{colors.error}` for non-critical or decorative purposes.
- Add emoji, filler copy, or unsolicited marketing language.
- Rewrite button labels, headings, or navigation items — copy belongs to the product team.
- Alter page structure or information architecture as a side effect of token application.

## When in doubt
- If a required value is absent from the spec, ask before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; for section differentiation, use `{colors.surface-dim}`.
- For unspecified breakpoints, default mobile-first with one breakpoint at 768px.
- Reserve `{typography.display-lg}` strictly for hero headlines; use `{typography.display-md}` for major section titles.