← Gallery

extracted · 29 artefacts

spotify.com

Live extraction of https://spotify.com — tokens, emitters, anatomy, icons, voice, motion, MCP server, AGENTS.md, prompt pack and a 13-chapter brand book. Generated with one command.

Open brand book ↗Browse tokensAll 29 files
18colors
Aaf0
vs design-extractor.com

They surface 4 sections per brand (DESIGN.md · Tailwind · CSS · Tokens). designlang ships 29 artefacts for spotify.com and renders 12+ sections below.

See full comparison ↗
4,099 charsbrand book ↗
---
site: "Spotify - Web Player: Music for everyone"
url: "https://spotify.com"
generated_at: "2026-05-14T22:15:59.586Z"
generator: "designlang@12.11.0"
intent: landing
material: material-you
tokens:
  colors:
    primary: "#1ed760"
    secondary: "#346e4a"
    accent: "#1db954"
    background: "#121212"
    foreground: "#000000"
  typography:
    sans: SpotifyMixUI
    base: 16
  spacing:
    scale: "[1, 15, 20, 23, 28, 35, 40, 48, 64, 96]"
  radii:
    xs: 2
    md: 10
    lg: 16
    xl: 20
    full: 32
  shadows:
    sm: "rgba(0, 0, 0, 0.5) 0px 2px 4px 0px"
    xs: "rgb(18, 18, 18) 0px 1px 0px 0px, rgb(124, 124, 124) 0px 0px 0px 1px inset"
---

# Overview

A **landing** page (heuristic confidence 0.29), dressed in **material-you** material (0.45).

> "Your Library"

The author writes in a **neutral** voice; headings tend to be **Sentence case** case and **tight**.

Reading order detected on the source: `content → content → content → content → content → nav → nav → testimonials → testimonials → hero → content → content → content → hero → cta → content → feature-grid → nav`.

Source: <https://spotify.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#1ed760` | 54 |
| secondary | `#346e4a` | 6 |
| accent | `#1db954` | 2 |
| background | `#121212` | — |
| foreground | `#000000` | — |

**Neutrals:** `#ffffff` · `#b3b3b3` · `#000000` · `#696969` · `#555555`

**Total unique colors detected:** 52.

# Typography

**Families**
- `SpotifyMixUI` · 2834 uses
- `Times` · 115 uses
- `SpotifyMixUITitle` · 16 uses

**Body size:** `16px` / line-height `normal`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `24px` | `700` | `normal` |
| h2 | `16px` | `400` | `normal` |
| h3 | `14px` | `700` | `normal` |

# Layout

**Scale:** `1px` · `15px` · `20px` · `23px` · `28px` · `35px` · `40px` · `48px` · `64px` · `96px`

**Layout primitives:** 17 grid containers · 768 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `rgb(124, 124, 124) 0px 0px 0px 1px inset`
- `xs` — `rgb(18, 18, 18) 0px 1px 0px 0px, rgb(124, 124, 124) 0px 0px 0px 1px inset`
- `sm` — `rgb(128, 128, 128) 0px 0px 5px 0px`
- `sm` — `rgba(0, 0, 0, 0.5) 0px 2px 4px 0px`
- `md` — `rgb(199, 197, 199) -3px -3px 5px -2px`
- `md` — `rgb(153, 153, 153) 0px 2px 10px -3px`

**Z-index layers:** 14 · ⚠ 1 issue(s)

# Shapes

**Radius scale**
- `xs` — `2px`
- `md` — `6px`
- `md` — `10px`
- `lg` — `16px`
- `xl` — `20px`
- `full` — `32px`

# Components

**Detected patterns:** `buttons` · `cards` · `inputs` · `links` · `navigation` · `footer` · `modals` · `badges` · `accordions` · `switches`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | tertiary, primary, secondary | medium, small | 170 |
| card | — | medium | 129 |

# Do's and Don'ts

**Do's**
- Use `sign`, `log`, `create` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **tight** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **material-you** material — match shadow and radius habits.

**Don'ts**
- Don't ship copy on the colors flagged in accessibility — 1 contrast pair(s) fail WCAG AA on the source itself.
- Don't 1 wcag contrast failures.
- Don't 175 !important rules — prefer specificity over overrides.
- Don't 71% of css is unused — consider purging.
- Don't 12418 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v12.11.0 from <https://spotify.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._

Typography

SpotifyMixUI
The quick brown fox jumps
display · 56px / 600
The quick brown fox jumps
headline · 36px / 500
The quick brown fox jumps
subhead · 22px / 400
The quick brown fox jumps
body · 16px / 400
The quick brown fox jumps
caption · 12px / 500 · uppercase

Voice

Tone, CTA verbs, headlines and pronoun stance — pulled from the live page.

tone · neutral · you-only

top CTA verbs

sign×3log×2create×2browse×2premium×1support×1download×1install×1

Motion

Durations and easing curves captured from real CSS transitions.

durations

xs100ms
sm200ms
md300ms
lg500ms
xl1s

easings

  • custom-901cubic-bezier(0.3, 0, 0.4, 1)
  • ease-in-outease
  • custom-803cubic-bezier(0.3, 0, 0, 1)

Component anatomy

Typed React stubs — variants, slots and props detected from clustered DOM patterns.

821 chars · TypeScript
// Auto-generated by designlang — component anatomy v2.
// Scaffolds. Wire into your token system; not a runtime library.

import * as React from 'react';

export interface ButtonProps {
  variant?: 'tertiary' | 'primary' | 'secondary';
  size?: 'medium' | 'small';
  disabled?: boolean;
  leadingIcon?: React.ReactNode;
  children?: React.ReactNode;
}

export function Button({ variant = 'tertiary', size = 'md', ...rest }: ButtonProps) {
  return React.createElement('button', { 'data-variant': variant, 'data-size': size, ...rest });
}

export interface CardProps {
  variant?: 'default';
  size?: 'medium';
  children?: React.ReactNode;
}

export function Card({ variant = 'default', size = 'md', ...rest }: CardProps) {
  return React.createElement('div', { 'data-variant': variant, 'data-size': size, ...rest });
}

Icon system

SVG icon census — count, style mix, grid and stroke profile.

81
total icons
0
stroke-only
80
fill-only
0.00
avg stroke
heroicons-solid
library

MCP / Agent rules

The same payload the stdio MCP server hands to Claude Code, Cursor and Windsurf. Wire it into your editor and the agent answers brand-system questions with the actual extraction — not a guess.

How to wire MCP →npx designlang mcp --url https://spotify.com
{
  "colors": {
    "all": [
      {
        "hex": "#ffffff",
        "rgb": {
          "r": 255,
          "g": 255,
          "b": 255,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 100
        },
        "count": 2847,
        "contexts": [
          "background",
          "text",
          "border"
        ]
      },
      {
        "hex": "#b3b3b3",
        "rgb": {
          "r": 179,
          "g": 179,
          "b": 179,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 70
        },
        "count": 2172,
        "contexts": [
          "text",
          "border",
          "background"
        ]
      },
      {
        "hex": "#000000",
        "rgb": {
          "r": 0,
          "g": 0,
          "b": 0,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 0
        },
        "count": 722,
        "contexts": [
          "text",
          "border",
          "background"
        ]
      },
      {
        "hex": "#696969",
        "rgb": {
          "r": 105,
          "g": 105,
          "b": 105,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 41
        },
        "count": 128,
        "contexts": [
          "text",
          "border"
        ]
      },
      {
        "hex": "#1ed760",
        "rgb": {
          "r": 30,
          "g": 215,
          "b": 96,
          "a": 1
        },
        "hsl": {
          "h": 141,
          "s": 76,
          "l": 48
        },
        "count": 54,
        "contexts": [
          "background"
        ]
      },
      {
        "hex": "#555555",
        "rgb": {
          "r": 85,
          "g": 85,
          "b": 85,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 33
        },
        "count": 44,
        "contexts": [
          "background",
          "text",
          "border"
        ]
      },
      {
        "hex": "#121212",
        "rgb": {
          "r": 18,
          "g": 18,
          "b": 18,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 7
        },
        "count": 32,
        "contexts": [
          "background",
          "text",
          "border"
        ]
      },
      {
        "hex": "#7c7c7c

Prompt pack

Paste-ready prompts pre-loaded with the spotify.com system, for v0, Lovable, Cursor and Claude Artifacts.

v0982 chars
Build a landing page with this exact visual language.
COLORS:
  #ffffff
  #b3b3b3
  #000000
  #696969
  #1ed760
  #555555
  #121212
  #7c7c7c
  #1f1f1f
  #333333
  #468254
  #3860be
  #346e4a
  #292929
FONTS: [object Object], [object Object], [object Object]
SPACING: 1, 15, 20, 23, 28, 35, 40, 48
RADIUS: 2, 6, 10, 16, 20, 32
SHADOWS: rgb(124, 124, 124) 0px 0px 0px 1px inset | rgb(18, 18, 18) 0px 1px 0px 0px, rgb(124, 124, 124) 0px 0px 0px 1px inset | rgb(128, 128, 128) 0px 0px 5px 0px
MATERIAL LANGUAGE: material-you
VOICE: Tone: neutral · Headings: Sentence case · CTA verbs: [object Object], […
Lovable818 chars
Clone the design language of this landing page and build a fresh equivalent.
Visual feel: material-you. Tone: neutral · Headings: Sentence case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object]
Primary palette: #ffffff, #b3b3b3, #000000, #696969, #1ed760.
Typography: [object Object], [object Object], [object Object].
Corner radius vocabulary: 2, 6, 10, 16, 20, 32.
Shadow vocabulary: rgb(124, 124, 124) 0px 0px 0px 1px inset | rgb(18, 18, 18) 0px 1px 0px 0px, rgb(124, 124, 124) 0px 0px 0px 1px inset | rgb(128, 128, 128) 0px 0px 5px …
Cursor945 chars
# Design brief
Page type: **landing**.
Material language: **material-you**.
Voice: Tone: neutral · Headings: Sentence case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object].
## Tokens
```ts
export const tokens = {
  colors: ['#ffffff', '#b3b3b3', '#000000', '#696969', '#1ed760', '#555555', '#121212', '#7c7c7c', '#1f1f1f', '#333333', '#468254', '#3860be', '#346e4a', '#292929'],
  fonts: ['[object Object]', '[object Object]', '[object Object]'],
  radii: ['2', '6', '10', '16', '20', '32'],
  shadows: ['rgb(124, 124, 124) 0px 0px 0px…
Claude Artifacts901 chars
Create a React artifact that reproduces this brand's design language.
Page intent: landing.
Material language: material-you.
Voice: Tone: neutral · Headings: Sentence case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object].
Colors to use: #ffffff, #b3b3b3, #000000, #696969, #1ed760, #555555, #121212, #7c7c7c, #1f1f1f, #333333, #468254, #3860be, #346e4a, #292929.
Fonts: [object Object], [object Object], [object Object].
Radius vocabulary: 2, 6, 10, 16, 20, 32.
Sections:
- cta
- testimonials — heading: "Home"
- testimonials — heading…

All artefacts

Every file designlang produced for spotify.com — 29 in total. Download anything.

Brand book1 file
Spec3 files
Tokens & emitters7 files
Anatomy1 file
Voice1 file
Motion1 file
Icons1 file
Form states1 file
MCP / Agent rules1 file
Page intel5 files
Prompt pack7 files

Run designlang on your own URL.

Same 29-artefact depth as the spotify.com extraction above. No signup, no API key.

npx designlang yoursite.comTry it live