Brand guidelines `#1ed760`

May 18, 2026

# spotify.com

A reading of the visual language at https://spotify.com. Every token, every rule, every component — captured from the live site.

Page intent
  landing
System grade
  C 75/100
Tokens
  52 colours · 11 sizes
Generated
  designlang

Chapter 01

## About

Page intent
  landing 29% confidence
Material language
  material-you
Imagery style
  mixed
Component library
  unknown
Stack
  unknown
Voice tone
  friendly

Chapter 02

## Logo

spotify.com

Source
  inferred
Dimensions
  —
Aspect
  —
Format
  unknown

Chapter 03

## Colour

1 primary · 1 secondary · 1 accent · 21 neutrals · 52 total

Primary #1ED760

RGB
  `30, 215, 96`
HSL
  `141°, 76%, 48%`

Secondary #346E4A

RGB
  `52, 110, 74`
HSL
  `143°, 36%, 32%`

Accent #1DB954

RGB
  `29, 185, 84`
HSL
  `141°, 73%, 42%`

### Neutrals

`#FFFFFF`
`#B3B3B3`
`#000000`
`#696969`
`#555555`
`#7C7C7C`
`#121212`
`#1F1F1F`
`#333333`
`#292929`
`#C1C1C1`
`#402830`

### Full palette

`#FFFFFF`
`#B3B3B3`
`#000000`
`#696969`
`#1ED760`
`#555555`
`#7C7C7C`
`#121212`
`#1F1F1F`
`#333333`
`#468254`
`#3860BE`
`#346E4A`
`#292929`
`#0000EE`
`#C1C1C1`
`#402830`
`#667A7A`
`#6E7598`
`#7A7A11`
`#404040`
`#401800`
`#002038`
`#517AA3`
`#A16387`
`#C0574A`
`#006050`
`#EEEEEE`

WCAG 88% · 7 passing pairs · 1 failing. Full breakdown in §11.

Chapter 04

## Typography

3 families · 11 sizes · 4 weights

Display
  SpotifyMixUI
Body
  Times
Weights
  400, 700, 600, 500

### Specimen

Your Library
Your Library

### Scale

Step | Size | Sample
--- | --- | ---
`t00` | `24px` | Your Library
`t01` | `16px` | Your Library
`t02` | `14.4px` | Your Library
`t03` | `14px` | Your Library
`t04` | `13.6px` | Your Library
`t05` | `13.3333px` | Your Library
`t06` | `13.008px` | Your Library
`t07` | `12.992px` | Your Library
`t08` | `12.8px` | Your Library
`t09` | `12px` | Your Library

Chapter 05

## Spacing

Base 1px · 12 steps captured

### Rhythm

`1px`
`15px`
`20px`
`23px`
`28px`
`35px`
`40px`
`48px`
`64px`
`96px`
Chapter 06

## Shape

9 radii · 6 elevation tiers

### Border radii

`2px`
`6px`
`10px`
`16px`
`20px`
`32px`

### Elevation

`xs`
`sm`
`md`
`lg`
`xl`
`2xl`
Chapter 07

## Iconography

heroicons-solid · 24 captured

Library
  heroicons-solid
Confidence
  55%
Stroke style
  fillDominant

`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
Chapter 08

## Motion

Feel: mixed · 5 durations · 3 easings

### Duration scale

`100ms`
`200ms`
`300ms`
`500ms`
`1000ms`

### Easings

- `custom`
- `ease-in-out`
- `custom`

Chapter 09

## Components

unknown · 2 component patterns captured

### Mocks

Card

#### Built from these tokens

Radius, primary, surface, text — all sampled from the live site.

Read more →

### Detected patterns

#### button

Slots
  label, icon, badge
Variants
  tertiary, primary, secondary
Sizes
  medium, small

#### card

Slots
  heading, description, media, footer
Variants
  —
Sizes
  medium

Chapter 10

## Voice

friendly · — · —

### Headlines from the site

- Your Library
- Your Library
- Home
- Trending songs

### CTA verbs

- ``×3
- ``×2
- ``×2
- ``×2
- ``×1
- ``×1
- ``×1
- ``×1

Chapter 11

## Accessibility

88% WCAG 2.1 contrast
7 passing · 1 failing

### Failing pairs

Aa 2.59:1

Foreground
  `#ffffff`
Background
  `#1db954`
Rule
  AA-normal

### Suggested replacements

- `#ffffff` → `` (2.59:1)

Chapter 12

## Tokens

Drop-in code for the most common stacks. All values from the live extraction.

CSS variables variables.css

    :root {
      --color-primary: #1ed760;
      --font-display: "SpotifyMixUI";
      --space-base: 4px;
      --radius-md: 6px;
    }

Tailwind config tailwind.config.js

    // tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          colors: { brand: '#1ed760' },
          fontFamily: { display: ['SpotifyMixUI', 'serif'] },
          spacing: { base: '4px' },
          borderRadius: { md: '6px' },
        },
      },
    };

Run `npx designlang pack spotify.com` for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

Chapter 13

## Usage

1. ### Lead with the primary.

   It belongs on calls-to-action and one accent moment per screen. Not on body copy.

2. ### Two type families, three weights.

   Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

3. ### Snap to the spacing scale.

   Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

4. ### Treat accessibility as a hard constraint.

   When a colour pair fails WCAG, fix the colour — not the contrast check.