Tesla Design Tokens

Name: Dembrandt
Author: Dembrandt

Electric vehicle and clean energy company

Full-bleed hero videos

Stripe Linear Notion OpenAI Tesla Airbnb Figma Slack Uber Apple Raycast Krea AI Family Oura Nike Duolingo Arc Perplexity AI Anthropic Vercel Cursor

Observed with Dembrandt. Semantic roles, gradients, and breakpoints come from live extractions where available; contrast is computed from the real palette. Try the CLI for the complete W3C token export.

Design tokens observed from publicly visible CSS. Dembrandt does not host, copy, or redistribute any brand assets.

Colors

#000000

#171a20

#393c41

#5c5e62

#3e6ae1

#ffffff

Typography

Gotham, Helvetica, sans-serif

hero:56px / 500

body:14px / 400

button:14px / 500

weights:400, 500

leading:1, 1.1, 1.4, 1.6

tracking:-0.02em, 0, 0.04em

Shadows

Spacing

8px12px16px24px32px64px

Border Radius

4px

8px

Gradients

linear-gradient(135deg, #000000 0%, #ffffff 100%)

linear-gradient(90deg, #000000, #171a20, #393c41)

radial-gradient(circle at 30% 20%, #000000 0%, #171a20 70%)

Opacity

0.04

0.08

0.16

0.4

0.64

0.92

Breakpoints

480px640px768px1024px1280px1536px

Motion

Duration120ms180ms280ms420ms

Easingcubic-bezier(0.4, 0, 0.2, 1)cubic-bezier(0.16, 1, 0.3, 1)linear

Contrast · WCAG 2.2

Button label

4.82:1

Body text

21.00:1

AAA

Button States

React

Default

#3e6ae1

Hover

#5580f0

Active

#2d58cc

Focus

focus

Disabled

disabled

radius: 4pxpadding: 10px 24px

output.json

{
  "$schema": "https://design-tokens.org/schema.json",
  "color": {
    "palette-1": {
      "$type": "color",
      "$value": "#000000"
    },
    "palette-2": {
      "$type": "color",
      "$value": "#171a20"
    },
    "palette-3": {
      "$type": "color",
      "$value": "#393c41"
    },
    "palette-4": {
      "$type": "color",
      "$value": "#5c5e62"
    },
    "palette-5": {
      "$type": "color",
      "$value": "#3e6ae1"
    },
    "palette-6": {
      "$type": "color",
      "$value": "#ffffff"
    }
  },
  "gradient": {
    "gradient-1": {
      "$type": "gradient",
      "$value": "linear-gradient(135deg, #000000 0%, #ffffff 100%)"
    },
    "gradient-2": {
      "$type": "gradient",
      "$value": "linear-gradient(90deg, #000000, #171a20, #393c41)"
    },
    "gradient-3": {
      "$type": "gradient",
      "$value": "radial-gradient(circle at 30% 20%, #000000 0%, #171a20 70%)"
    }
  },
  "fontFamily": {
    "base": {
      "$type": "fontFamily",
      "$value": "Gotham, Helvetica, sans-serif"
    }
  },
  "fontWeight": {
    "weight-400": {
      "$type": "fontWeight",
      "$value": 400
    },
    "weight-500": {
      "$type": "fontWeight",
      "$value": 500
    }
  },
  "dimension": {
    "space-1": {
      "$type": "dimension",
      "$value": "8px"
    },
    "space-2": {
      "$type": "dimension",
      "$value": "12px"
    },
    "space-3": {
      "$type": "dimension",
      "$value": "16px"
    },
    "space-4": {
      "$type": "dimension",
      "$value": "24px"
    },
    "space-5": {
      "$type": "dimension",
      "$value": "32px"
    },
    "space-6": {
      "$type": "dimension",
      "$value": "64px"
    },
    "radius-1": {
      "$type": "dimension",
      "$value": "0"
    },
    "radius-2": {
      "$type": "dimension",
      "$value": "4px"
    },
    "radius-3": {
      "$type": "dimension",
      "$value": "8px"
    }
  },
  "shadow": {
    "shadow-1": {
      "$type": "shadow",
      "$value": "0 2px 8px rgba(0,0,0,0.12)"
    },
    "shadow-2": {
      "$type": "shadow",
      "$value": "0 8px 24px rgba(0,0,0,0.2)"
    },
    "shadow-3": {
      "$type": "shadow",
      "$value": "0 20px 40px rgba(0,0,0,0.3)"
    }
  },
  "opacity": {
    "opacity-0": {
      "$type": "number",
      "$value": 0
    },
    "opacity-1": {
      "$type": "number",
      "$value": 0.04
    },
    "opacity-2": {
      "$type": "number",
      "$value": 0.08
    },
    "opacity-3": {
      "$type": "number",
      "$value": 0.16
    },
    "opacity-4": {
      "$type": "number",
      "$value": 0.4
    },
    "opacity-5": {
      "$type": "number",
      "$value": 0.64
    },
    "opacity-6": {
      "$type": "number",
      "$value": 0.92
    },
    "opacity-7": {
      "$type": "number",
      "$value": 1
    }
  },
  "duration": {
    "duration-1": {
      "$type": "duration",
      "$value": "120ms"
    },
    "duration-2": {
      "$type": "duration",
      "$value": "180ms"
    },
    "duration-3": {
      "$type": "duration",
      "$value": "280ms"
    },
    "duration-4": {
      "$type": "duration",
      "$value": "420ms"
    }
  },
  "cubicBezier": {
    "ease-1": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.4, 0, 0.2, 1)"
    },
    "ease-2": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.16, 1, 0.3, 1)"
    },
    "ease-3": {
      "$type": "cubicBezier",
      "$value": "linear"
    }
  },
  "breakpoint": {
    "bp-1": {
      "$type": "dimension",
      "$value": "480px"
    },
    "bp-2": {
      "$type": "dimension",
      "$value": "640px"
    },
    "bp-3": {
      "$type": "dimension",
      "$value": "768px"
    },
    "bp-4": {
      "$type": "dimension",
      "$value": "1024px"
    },
    "bp-5": {
      "$type": "dimension",
      "$value": "1280px"
    },
    "bp-6": {
      "$type": "dimension",
      "$value": "1536px"
    }
  },
  "contrast": {
    "button-label": {
      "ratio": 4.82,
      "grade": "AA"
    },
    "body-text": {
      "ratio": 21,
      "grade": "AAA"
    }
  }
}
// ...and more

Other token exports

--dtcgW3C token JSON, checked by the DTCG Validator

--design-mdDESIGN.md for agents and docs

--brand-guideBrand guide PDF

--wcagPalette-wide contrast report

All flags in the CLI quickstart. Same tokens in your editor via the MCP server.

$npx dembrandt tesla.com