designlang
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 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

StepSizeSample
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

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

CTA verbs

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

Chapter 12

Tokens

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

CSS variablesvariables.css
:root {
  --color-primary: #1ed760;
  --font-display: "SpotifyMixUI";
  --space-base: 4px;
  --radius-md: 6px;
}
Tailwind configtailwind.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.