Brand guidelines `#0000ee`

May 15, 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
  B 83/100
Tokens
  5 colours · 3 sizes
Generated
  designlang

Chapter 01

## About

Page intent
  landing 29% confidence
Material language
  flat
Imagery style
  flat-illustration
Component library
  unknown
Stack
  next
Voice tone
  friendly

Chapter 02

## Logo

spotify.com

Source
  inferred
Dimensions
  —
Aspect
  —
Format
  unknown

Chapter 03

## Colour

1 primary · 4 neutrals · 5 total

Primary #0000EE

RGB
  `0, 0, 238`
HSL
  `240°, 100%, 47%`

### Neutrals

`#000000`
`#FFFFFF`
`#767676`
`#EFEFEF`

### Full palette

`#000000`
`#0000EE`
`#FFFFFF`
`#767676`
`#EFEFEF`

WCAG 100% · 0 passing pairs · 0 failing. Full breakdown in §11.

Chapter 04

## Typography

1 families · 3 sizes · 2 weights

Display
  Times
Body
  Times
Weights
  400, 700

### Specimen

Welcome back
Welcome back

### Scale

Step | Size | Sample
--- | --- | ---
`t00` | `48px` | Welcome back
`t01` | `16px` | Welcome back
`t02` | `13.3333px` | Welcome back

Chapter 05

## Spacing

Base 1px · 2 steps captured

### Rhythm

`1px`
`32px`
Chapter 06

## Shape

0 radii · 0 elevation tiers

### Border radii

Chapter 07

## Iconography

unknown · 3 captured

Library
  unknown
Confidence
  0%
Stroke style
  —

`icon`
`icon`
`icon`
Chapter 08

## Motion

Feel: mixed · 0 durations · 0 easings

Chapter 09

## Components

unknown · 1 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
  primary, secondary, tertiary
Sizes
  medium

Chapter 10

## Voice

friendly · — · —

### Headlines from the site

- Welcome back
- Welcome back

### CTA verbs

- ``×6
- ``×1

Chapter 11

## Accessibility

100% WCAG 2.1 contrast
0 passing · 0 failing

No failing contrast pairs detected.

Chapter 12

## Tokens

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

CSS variables variables.css

    :root {
      --color-primary: #0000ee;
      --font-display: "Times";
      --space-base: 4px;
      --radius-md: 8px;
    }

Tailwind config tailwind.config.js

    // tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          colors: { brand: '#0000ee' },
          fontFamily: { display: ['Times', 'serif'] },
          spacing: { base: '4px' },
          borderRadius: { md: '8px' },
        },
      },
    };

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.