{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Tesla",
  "meta": {
    "name": "Tesla",
    "description": "Tesla's website is an exercise in radical subtraction — a digital showroom where the product is everything and the interface is almost nothing. The page opens with a full-viewport hero that fills the entire screen with cinematic car photography: three vehicles arranged on polished concrete against a hazy cityscape sky, with a single model name floating above in translucent white type. There are no decorative borders, no gradients, no patterns, no shadows. The UI exists only to provide just enough navigational structure to get out of the way. Every pixel that isn't product imagery is white space, and that restraint is the design system's most powerful statement.",
    "theme": "light"
  },
  "color": {
    "color-1": {
      "$value": "#3E6AE1",
      "$type": "color",
      "$description": "Use for the color 1 role."
    },
    "pure-white": {
      "$value": "#FFFFFF",
      "$type": "color",
      "$description": "Use for the pure white role."
    },
    "light-ash": {
      "$value": "#F4F4F4",
      "$type": "color",
      "$description": "Use for the light ash role."
    },
    "carbon-dark": {
      "$value": "#171A20",
      "$type": "color",
      "$description": "Use for the carbon dark role."
    },
    "frosted-glass": {
      "$value": "rgba(255, 255, 255, 0.75)",
      "$type": "color",
      "$description": "Use for the frosted glass role."
    },
    "graphite": {
      "$value": "#393C41",
      "$type": "color",
      "$description": "Use for the graphite role."
    },
    "pewter": {
      "$value": "#5C5E62",
      "$type": "color",
      "$description": "Use for the pewter role."
    },
    "silver-fog": {
      "$value": "#8E8E8E",
      "$type": "color",
      "$description": "Use for the silver fog role."
    },
    "cloud-gray": {
      "$value": "#EEEEEE",
      "$type": "color",
      "$description": "Use for the cloud gray role."
    },
    "pale-silver": {
      "$value": "#D0D1D2",
      "$type": "color",
      "$description": "Use for the pale silver role."
    },
    "color-11": {
      "$value": "rgba(255,255,255,0.75)",
      "$type": "color",
      "$description": "Use for the color 11 role."
    },
    "color-12": {
      "$value": "rgba(128,128,128,0.65)",
      "$type": "color",
      "$description": "Use for the color 12 role."
    },
    "color-13": {
      "$value": "rgba(0,0,0,0.05)",
      "$type": "color",
      "$description": "Use for the color 13 role."
    }
  },
  "typography": {
    "0px": {
      "$value": {
        "fontFamily": "Most elements — sharp edges are the default",
        "fontSize": "0px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for 0px."
    },
    "4px": {
      "$value": {
        "fontFamily": "Buttons (primary, secondary, nav items) — barely perceptible rounding",
        "fontSize": "4px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for 4px."
    }
  },
  "spacing": {
    "4": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step 4."
    },
    "8": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing step 8."
    },
    "12": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Spacing step 12."
    },
    "16": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Spacing step 16."
    },
    "20": {
      "$value": "20px",
      "$type": "dimension",
      "$description": "Spacing step 20."
    },
    "32": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Spacing step 32."
    },
    "40": {
      "$value": "40px",
      "$type": "dimension",
      "$description": "Spacing step 40."
    },
    "48": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "Spacing step 48."
    }
  },
  "radius": {
    "sm": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "0px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "lg": {
      "$value": "2px",
      "$type": "dimension",
      "$description": "Border radius lg."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://www.tesla.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}