{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Spotify",
  "meta": {
    "name": "Spotify",
    "description": "Spotify's web interface is a dark, immersive music player that wraps listeners in a near-black cocoon (`#121212`, `#181818`, `#1f1f1f`) where album art and content become the primary source of color. The design philosophy is \"content-first darkness\" — the UI recedes into shadow so that music, podcasts, and playlists can glow. Every surface is a shade of charcoal, creating a theater-like environment where the only true color comes from the iconic Spotify Green (`#1ed760`) and the album artwork itself.",
    "theme": "light"
  },
  "color": {
    "color-1": {
      "$value": "#121212",
      "$type": "color",
      "$description": "Use for the color 1 role."
    },
    "color-2": {
      "$value": "#181818",
      "$type": "color",
      "$description": "Use for the color 2 role."
    },
    "color-3": {
      "$value": "#1f1f1f",
      "$type": "color",
      "$description": "Use for the color 3 role."
    },
    "color-4": {
      "$value": "#1ed760",
      "$type": "color",
      "$description": "Use for the color 4 role."
    },
    "white": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the white role."
    },
    "silver": {
      "$value": "#b3b3b3",
      "$type": "color",
      "$description": "Use for the silver role."
    },
    "near-white": {
      "$value": "#cbcbcb",
      "$type": "color",
      "$description": "Use for the near white role."
    },
    "light": {
      "$value": "#fdfdfd",
      "$type": "color",
      "$description": "Use for the light role."
    },
    "negative-red": {
      "$value": "#f3727f",
      "$type": "color",
      "$description": "Use for the negative red role."
    },
    "warning-orange": {
      "$value": "#ffa42b",
      "$type": "color",
      "$description": "Use for the warning orange role."
    },
    "announcement-blue": {
      "$value": "#539df5",
      "$type": "color",
      "$description": "Use for the announcement blue role."
    },
    "dark-card": {
      "$value": "#252525",
      "$type": "color",
      "$description": "Use for the dark card role."
    },
    "mid-card": {
      "$value": "#272727",
      "$type": "color",
      "$description": "Use for the mid card role."
    },
    "border-gray": {
      "$value": "#4d4d4d",
      "$type": "color",
      "$description": "Use for the border gray role."
    },
    "light-border": {
      "$value": "#7c7c7c",
      "$type": "color",
      "$description": "Use for the light border role."
    },
    "light-surface": {
      "$value": "#eeeeee",
      "$type": "color",
      "$description": "Use for the light surface role."
    },
    "spotify-green-border": {
      "$value": "#1db954",
      "$type": "color",
      "$description": "Use for the spotify green border role."
    },
    "color-18": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the color 18 role."
    }
  },
  "typography": {
    "button": {
      "$value": {
        "fontFamily": "SpotifyMixUI",
        "fontSize": "0.14px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for button."
    }
  },
  "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."
    },
    "24": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Spacing step 24."
    },
    "48": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "Spacing step 48."
    },
    "96": {
      "$value": "96px",
      "$type": "dimension",
      "$description": "Spacing step 96."
    }
  },
  "radius": {
    "sm": {
      "$value": "0px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "9px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "lg": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Border radius lg."
    },
    "xl": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Border radius xl."
    },
    "pill": {
      "$value": "2px",
      "$type": "dimension",
      "$description": "Border radius pill."
    },
    "r6": {
      "$value": "1px",
      "$type": "dimension",
      "$description": "Border radius r6."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://www.spotify.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}