{
  "id": "spotify",
  "version": "1.0.0",
  "name": "Spotify",
  "description": "Spotify AB is the global audio-streaming service for music, podcasts, and audiobooks, headquartered in Stockholm. The brand is dark-first and high-energy: a solid black canvas with the saturated Spotify Green used as the principal accent on the wordmark, the play affordance, and primary CTAs. The voice is warm, expressive, and editorial — pairing the disciplined black- and-green corporate identity with vivid duotone photography and bold typographic moments in marketing.\n",
  "provenance": {
    "source": "https://developer.spotify.com/documentation/design",
    "license": "Proprietary — All Rights Reserved",
    "attribution": "Spotify AB — Spotify, the Spotify wordmark, and the three-arc \"soundwave\" mark are registered trademarks of Spotify AB. Spotify Circular is licensed from Lineto. This atom captures brand-atoms' read of Spotify's publicly available developer design documentation and brand assets; it is not an official Spotify brand-guidelines document.\n",
    "importedDate": "2026-05-17",
    "notes": "Spotify's brand identity is anchored on the green-on-black pairing. The 2015 brand refresh introduced the brighter #1ED760 as the primary green while retaining #1DB954 for legacy surfaces. Both coexist; the brighter green dominates current product.\n"
  },
  "tags": [
    "streaming",
    "audio",
    "music",
    "podcasts",
    "spotify",
    "dark-first",
    "consumer-tech"
  ],
  "palette": {
    "ref": "spotify@1.0.0",
    "swatches": [
      {
        "id": "spotify-green",
        "name": "Spotify Green",
        "value": "#1ED760",
        "description": "Current primary brand green — used on the wordmark, the play affordance, and primary CTAs.",
        "aliases": []
      },
      {
        "id": "spotify-green-legacy",
        "name": "Spotify Green (Legacy)",
        "value": "#1DB954",
        "description": "The legacy Spotify Green established with the brand. Still appears across press assets and older surfaces.",
        "aliases": []
      },
      {
        "id": "spotify-green-pressed",
        "name": "Spotify Green Pressed",
        "value": "#169C46",
        "description": "Darker green for pressed/active states on the primary action.",
        "aliases": []
      },
      {
        "id": "spotify-black",
        "name": "Spotify Black",
        "value": "#000000",
        "description": "Canonical canvas — the Spotify consumer surface is solid black.",
        "aliases": []
      },
      {
        "id": "spotify-dark",
        "name": "Spotify Dark",
        "value": "#121212",
        "description": "Elevated surface of the Spotify consumer app — the player chrome and main panel sit on this near-black.",
        "aliases": []
      },
      {
        "id": "spotify-elevated",
        "name": "Spotify Elevated",
        "value": "#181818",
        "description": "Cards, hovered rows, and elevated tiles use this slightly lifted near-black.",
        "aliases": []
      },
      {
        "id": "spotify-gray",
        "name": "Spotify Gray",
        "value": "#535353",
        "description": "Secondary text and divider color on the dark canvas.",
        "aliases": []
      },
      {
        "id": "spotify-gray-light",
        "name": "Spotify Gray Light",
        "value": "#B3B3B3",
        "description": "Tertiary text, captions, metadata in the player UI.",
        "aliases": []
      },
      {
        "id": "spotify-white",
        "name": "Spotify White",
        "value": "#FFFFFF",
        "description": "Primary text on the dark canvas; reversed wordmark fill on light marketing.",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "spotify-white",
          "surface": "spotify-white",
          "surface-elevated": "spotify-white",
          "text-primary": "spotify-black",
          "text-secondary": "spotify-gray",
          "text-tertiary": "spotify-gray-light",
          "primary": "spotify-green",
          "primary-hover": "spotify-green-pressed",
          "accent": "spotify-green",
          "accent-hover": "spotify-green-pressed",
          "warning": "spotify-green-legacy",
          "warning-hover": "spotify-green-pressed",
          "error": "spotify-gray",
          "success": "spotify-green"
        }
      },
      "dark": {
        "roles": {
          "background": "spotify-black",
          "surface": "spotify-dark",
          "surface-elevated": "spotify-elevated",
          "text-primary": "spotify-white",
          "text-secondary": "spotify-gray-light",
          "text-tertiary": "spotify-gray",
          "primary": "spotify-green",
          "primary-hover": "spotify-green-pressed",
          "accent": "spotify-green",
          "accent-hover": "spotify-green-pressed",
          "warning": "spotify-green-legacy",
          "warning-hover": "spotify-green-pressed",
          "error": "spotify-gray-light",
          "success": "spotify-green"
        }
      }
    }
  },
  "fonts": [
    {
      "role": "heading",
      "ref": "spotify-circular@1.0.0",
      "family": "Spotify Circular",
      "classification": "sans-serif",
      "source": {
        "kind": "external",
        "family": "Spotify Circular",
        "notes": "Proprietary font, no public CDN. Distributed by Spotify to authorized vendors. Any @font-face declaration must reference internally hosted files under Spotify's licensing.\n"
      },
      "fallbackStack": [
        "Helvetica Neue",
        "Helvetica",
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "normal"
        }
      ]
    },
    {
      "role": "body",
      "ref": "spotify-circular@1.0.0",
      "family": "Spotify Circular",
      "classification": "sans-serif",
      "source": {
        "kind": "external",
        "family": "Spotify Circular",
        "notes": "Proprietary font, no public CDN. Distributed by Spotify to authorized vendors. Any @font-face declaration must reference internally hosted files under Spotify's licensing.\n"
      },
      "fallbackStack": [
        "Helvetica Neue",
        "Helvetica",
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "normal"
        }
      ]
    },
    {
      "role": "mono",
      "ref": "jetbrainsmono-nerdfont@1.0.0",
      "family": "JetBrainsMono Nerd Font",
      "classification": "monospace",
      "source": {
        "kind": "external",
        "family": "JetBrainsMono Nerd Font",
        "notes": "Nerd-Font-patched build of JetBrains Mono. Not available via Google Fonts. Download woff2/ttf files from the Nerd Fonts GitHub release and self-host, or install system-wide for terminal/IDE use.\n"
      },
      "fallbackStack": [
        "JetBrains Mono",
        "Fira Code",
        "Menlo",
        "Monaco",
        "Consolas",
        "Liberation Mono",
        "monospace"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        }
      ]
    }
  ],
  "roles": {
    "colors": {
      "identity": "spotify-black",
      "on-identity": "spotify-green",
      "background": "spotify-black",
      "surface": "spotify-dark",
      "surface-elevated": "spotify-elevated",
      "text-primary": "spotify-white",
      "text-secondary": "spotify-gray-light",
      "text-tertiary": "spotify-gray",
      "primary": "spotify-green",
      "primary-hover": "spotify-green-pressed",
      "accent": "spotify-green",
      "accent-hover": "spotify-green-pressed",
      "mark": "spotify-green",
      "text-emphasis": "spotify-white",
      "text-muted": "spotify-gray-light"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "wordmark": "heading",
      "code": "mono"
    }
  },
  "assets": [],
  "rules": [
    {
      "type": "colorChoice",
      "target": "logo.wordmark.fill",
      "severity": "error",
      "rationale": "The Spotify wordmark renders only in Spotify Green, white, or black per the public brand assets. The legacy green is preserved for historical surfaces; the pressed green is an interactive-state value, not a wordmark fill.\n",
      "allowed": [
        "spotify-green",
        "spotify-white",
        "spotify-black"
      ],
      "forbidden": [
        "spotify-green-legacy",
        "spotify-green-pressed",
        "spotify-gray",
        "spotify-gray-light"
      ]
    },
    {
      "type": "forbiddenTreatment",
      "target": "logo",
      "severity": "error",
      "rationale": "The Spotify wordmark and three-arc mark have strict clearspace and color rules in the Spotify brand system. Never render the green wordmark on a background where it falls below WCAG-AA-large contrast; use the white or black variant on those surfaces.\n",
      "treatments": [
        "stretched",
        "rotated",
        "recolored",
        "drop-shadow",
        "on-busy-photo",
        "inverted-without-variant",
        "green-on-low-contrast-background"
      ]
    },
    {
      "type": "contrastRatio",
      "target": "text-primary",
      "severity": "error",
      "rationale": "Spotify White on Spotify Black gives ~21:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on Spotify surfaces.\n",
      "against": "background",
      "minRatio": 4.5,
      "standard": "WCAG-AA"
    },
    {
      "type": "contrastRatio",
      "target": "roles.colors.primary",
      "severity": "error",
      "rationale": "Spotify Green on Spotify Black must remain perceptible at interactive sizes. Falling below 3:1 (AA-large) breaks the affordance of the play-action and primary CTAs the brand depends on.\n",
      "against": "background",
      "minRatio": 3,
      "standard": "WCAG-AA-large"
    },
    {
      "type": "contextRestriction",
      "target": "roles.colors.primary",
      "severity": "error",
      "rationale": "Spotify Green is reserved for the brand mark, the play affordance, and primary action. Using it for body text or for error/failure states conflicts with its established positive-action meaning.\n",
      "forbiddenContexts": [
        "body-text",
        "secondary-link",
        "validation-failure"
      ]
    },
    {
      "type": "enumMembership",
      "target": "typography.heading.fontWeight",
      "severity": "warning",
      "rationale": "Spotify's editorial headlines use Spotify Circular Bold (700) or Black (900) for hero typography. Lighter cuts read as body or UI weight and compromise the editorial voice.\n",
      "allowed": [
        "700",
        "900"
      ]
    },
    {
      "type": "accessibilityRequirement",
      "target": "*",
      "severity": "error",
      "rationale": "WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The dark-first canvas makes contrast verification the default check on any new role pairing.\n",
      "standard": "WCAG-AA",
      "criterion": "1.4.3"
    },
    {
      "type": "compositionConstraint",
      "target": "roles.colors.primary",
      "severity": "recommendation",
      "rationale": "The signature green pairs cleanly with black canvas and white text. Combining the current green with the legacy green on the same surface creates a muddy two-green composition that reads as inconsistency.\n",
      "pairsWith": [
        "roles.colors.background",
        "roles.colors.text-primary"
      ],
      "doesNotPairWith": [
        "spotify-green-legacy"
      ]
    },
    {
      "type": "fontPairing",
      "target": "typography.heading",
      "severity": "warning",
      "rationale": "Spotify's hero and section headers run materially larger than the player UI's body text. A 1.5× floor preserves the display-to-prose hierarchy the editorial voice depends on.\n",
      "requires": "body",
      "minSizeRatio": 1.5
    }
  ]
}