# Spotify — Design System
> Global audio streaming and media services provider.
- **Canonical:** https://uiuxskills.com/library/spotify
- **Source:** https://www.spotify.com
- **Category:** Media & Consumer Tech
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:10:59.466Z

---

---
version: alpha
name: Spotify
description: Global audio streaming and media services provider.
tone: Accessible, discovery-oriented, and dynamic.
color-scheme: dark
colors:
  primary: "#1DB954"
  surface: "#121212"
  surface-container: "#181818"
  surface-bright: "#282828"
  on-surface: "#FFFFFF"
  on-surface-dim: "#B3B3B3"
  error: "#E91429"
  outline: "#333333"
  focus-ring: "#FFFFFF"
  accent-card: "#86727C"
typography:
  display-lg:
    fontFamily: Circular, sans-serif
    fontSize: 3rem
  headline-lg:
    fontFamily: Circular, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Circular, sans-serif
    fontSize: 1.5rem
  body-md:
    fontFamily: Circular, sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: Circular, sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: Circular, sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: Circular, sans-serif
    fontSize: 0.75rem
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: "#000000"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#1ED760"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
  card-elevated:
    backgroundColor: "{colors.surface-bright}"
  input-field:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.on-surface-dim}"
  link-hover:
    textColor: "{colors.on-surface}"
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "#000000"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-surface}"
  card-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-accent-card:
    backgroundColor: "{colors.accent-card}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 3px rgba(0,0,0,0.12)
  md: 0 4px 6px rgba(0,0,0,0.10)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Spotify features an immersive, dark-themed interface engineered for seamless content discovery and media consumption. The visual language relies on high-contrast surfaces and a modular grid system that keeps the focus squarely on vibrant album artwork and artist imagery.

## Colors

The color strategy centers on a deep, dark palette that reduces eye strain and allows content imagery to pop. High-contrast accents are used sparingly to guide user attention and define interactive states.

*   Primary (#1DB954): The signature green used for primary CTAs and active states.
*   Surface (#121212): The base background color for the application shell.
*   Surface-container (#181818): Used for cards and sidebar containers.
*   Surface-bright (#282828): Used for hover states and elevated components.
*   On-surface (#FFFFFF): Primary text color on dark backgrounds.
*   On-surface-dim (#B3B3B3): Secondary text color for metadata and descriptions.
*   Error (#E91429): Used for error states and explicit content warnings.
*   Outline (#333333): Used for borders and dividers.
*   Focus-ring (inferred) (#FFFFFF): High-contrast ring for keyboard navigation.
*   Accent-card (#86727C): Dominant accent color extracted from UI elements.

## Typography

The typography system utilizes the Circular font family to maintain a clean, friendly, and highly legible aesthetic across all screen sizes.

*   Display-lg (inferred): Used for main page headers.
*   Headline-lg (inferred): Used for section titles.
*   Headline-md (inferred): Used for card titles.
*   Body-md (inferred): Standard body text.
*   Body-sm (inferred): Used for metadata and secondary info.
*   Label-md (inferred): Used for button labels.
*   Label-sm (inferred): Used for small badges or captions.

## Layout

The layout is built on a flexible grid system with a fixed sidebar and a scrollable main content area. It follows a mobile-first approach where the sidebar collapses into a bottom navigation bar on smaller viewports. Spacing is governed by a 4px base unit, with a 16px gutter commonly used between grid items. The page structure follows this sequence: nav, hero, trending-songs, popular-artists, popular-albums, popular-radio, and footer.

## Elevation & Depth

Elevation is used sparingly to differentiate cards from the background surface, relying on subtle, single-layer shadows. The values are inferred based on the brand's flat, modern aesthetic.

*   Elevation.sm: Subtle card lift.
*   Elevation.md: Standard card or dropdown lift.
*   Elevation.lg: Modal or drawer overlay.

## Shapes

The design language favors rounded corners to create a friendly, approachable feel. Cards and inputs use a consistent radius scale, with the `rounded.lg` token applied to content cards, while buttons and search inputs utilize `rounded.full` to achieve a distinct pill shape.

## 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 buttons use `{colors.primary}` for the background and `{typography.label-md}` for the text. Use these for main actions to ensure high visibility and brand alignment.

### Card
The standard container for media, using `{colors.surface-container}` and `{rounded.lg}`. Use these to group related content like albums or playlists.

### Input Field
Designed with `{rounded.full}` and a `{colors.surface-bright}` background. Use these for search or filter inputs to maintain the signature pill-shaped aesthetic.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary CTAs | Use `{colors.primary}` for text on `{colors.surface}` |
| Apply `{rounded.lg}` to all content cards | Use sharp corners on `{components.card}` |
| Use `{typography.headline-lg}` for headers | Mix font families; stick to sans-serif |
| Maintain `{spacing.md}` between grid items | Use low-contrast text on `{colors.surface-bright}` |
| Use `{colors.on-surface-dim}` for metadata | Use `{colors.error}` for non-critical UI |
| Apply `{colors.surface-container}` for cards | Use excessive shadows; keep elevation minimal |
| Use `{input-field-focus}` for active inputs | Ignore focus states on interactive elements |
| Use `{components.divider}` for section breaks | Use heavy borders or outlines |

## Content Style

CTA labels are direct, imperative, and concise, focusing on the immediate action (e.g., "Play," "Follow").

Headings are direct and descriptive, designed to clearly label content sections without unnecessary flair.

Copy density is minimalist, prioritizing titles and metadata to keep the interface clean and focused on media discovery.

## Imagery & Icons

The imagery style is mixed, relying on high-quality, full-bleed album artwork with rounded corners to provide visual interest. Icons are clean, filled, and rounded, maintaining a consistent weight that complements the minimalist UI.