# Spotify: brand book and build spec

A black stage for color: #121212 everywhere, one ultra-wide 128px headline seen through the Spotify icon, saturated rounded feature cards, and Spotify Green kept for the button that says try it.

From unfairly.ai/brand-guidelines/spotify, checked 2026-10-30. Unofficial study; not affiliated with Spotify.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Spotify keeps the page dark and lets green mean "press play". Color is loud but contained in cards; the logo itself becomes the hero window. Based on: The guide names Green the resting color within a more colorful language; the Premium page uses #121212 as the only ground, green only for actions, and cuts the hero video into the icon shape.

## Purpose

Mission: To deliver creativity to the world, one note, one voice, one idea at a time. (published; https://newsroom.spotify.com/company-info/)

Story: The partner guide states the shift: a more colorful brand language, with Spotify Green kept as the resting color for when the voice must be recognizable. (published)

## Fixed and flexible

Never changes:
- #121212 ground for every band, #000000 nav and footer
- Green #1ED760 only on action pills (and the Individual plan accent)
- White full logo in the nav, green logo only on black or white
- One ultra-wide hero headline; 64px centered section heads
- Pill buttons, 24px card corners

The one thing that varies: which saturated color each feature card takes

## Positioning

- **Statement**: Spotify is the world's most popular audio streaming subscription service, with music, podcasts and audiobooks. (published)
- **Category**: Audio and video streaming: music, podcasts, audiobooks, live events. (observed)
- **Audience**: Listeners deciding on Premium; the page also speaks to fans of live music and families. (observed)
- **Promise**: Spotify is where fans and artists come together. (observed)
- **Differentiators**: Lossless sound up to 24-bit/44.1 kHz in Premium; Compatible with over 2,000 devices; Social listening: Jam and Blend

## Messaging

Boilerplate (published): Launched in 2008; the world's most popular audio streaming subscription service, with 788 million users and 306 million subscribers in 184 markets (company-info page, read 2026-10-29).

Taglines:
- The ultimate home for music (Premium page H1 (cycling keyword))
- The world is listening here. (closing H2)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Listen your way | Premium features: ad-free, lossless, offline, any order |  | observed |
| Made for how you listen | DJ, video, daylist |  | observed |
| Listen together | Jam and Blend |  | observed |
| Everywhere | Car, home, wearables |  | observed |

They never claim:
- A price or free-trial offer without its eligibility fine print and "Terms apply" directly under the CTA
- Endorsement of, or co-branding with, another brand

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "The ultimate home for music" | homepage | https://www.spotify.com/us/premium/ |
| "As the world's music hub, Spotify is where fans and artists come together." | homepage | https://www.spotify.com/us/premium/ |
| "Introducing Reserved" | homepage | https://www.spotify.com/us/premium/ |
| "With music that never stops" | homepage | https://www.spotify.com/us/premium/ |
| "Made for how you listen" | homepage | https://www.spotify.com/us/premium/ |
| "The best place to listen with your crew" | homepage | https://www.spotify.com/us/premium/ |
| "Everything you love, right here" | homepage | https://www.spotify.com/us/premium/ |
| "Listen to Spotify anywhere" | homepage | https://www.spotify.com/us/premium/ |
| "Shaping the big moments in music" | homepage | https://www.spotify.com/us/premium/ |
| "The world is listening here." | homepage | https://www.spotify.com/us/premium/ |

## Voice

Tone words: warm, fan-centred, short, exact about offers.

Traits:
- Fan-first, but not Corporate (observed)
- Colorful, but not Monochrome (published)
- Recognizable, but not Anonymous (published)
- Exact about offers, but not Vague (observed)

- Homepage voice (observed 2026-10-29): sentence case, plain benefit lines, feature names used with verbs ("Soundtrack your mood with daylist"), numbers only where verifiable (2,000 devices, 24-bit/44.1 kHz).
- Never put the corporate mission or boilerplate into page copy; use the verbatim section copy in the page anatomy.

Rules a copy check enforces:
- Sentence case headlines
- Partner link labels: GET SPOTIFY FREE when the app is absent; OPEN SPOTIFY, PLAY ON SPOTIFY or LISTEN ON SPOTIFY when installed.
- Every price CTA is followed by its 12px eligibility line and "Terms apply".

Their words: Try 2 months for $0, View all plans, GET SPOTIFY FREE, LISTEN ON SPOTIFY, Premium.
Never: product names containing "Spotify" (published partner rule), title-case headlines.

Tone by reader state, 0 (no personality) to 5 (full) (our recipe): Partner guidelines 1, Premium marketing page 3. Two voices. The partner guide is precise and rule-bound; the Premium page is warm and fan-centred. Levels are our reading.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Spotify Green | #1ED760 | core | Published. The resting color; primary CTA pills on the site. |
| Black | #121212 | core | Published. Page ground of every band. |
| White | #FFFFFF | core | Published. Type and logo on dark. |
| Pure black | #000000 | surface | Nav and footer (observed). |
| Plan grey | #242424 | surface | Plan cards (observed). |
| Reserved periwinkle | #576DD6 | card | Feature card (observed). |
| DJ blue | #0D72EA | card | Feature card (observed). |
| Video orange | #D64000 | card | Feature card (observed). |
| Daylist violet | #7358FF | card | Feature card (observed). |
| Jam magenta | #CC2FAF | card | Feature card (observed). |
| Blend green | #088569 | card | Feature card (observed). |
| Content green | #035341 | card | Content cards (observed). |
| Student mint | #91EEDA | accent | Plan accent (observed). |
| Duo peach | #FFA178 | accent | Plan accent (observed). |
| Family lilac | #D8A3FF | accent | Plan accent (observed). |
| Muted grey | #B3B3B3 | text | Fine print (observed). |

Proportion (our reading; Not published. Our reading of the Premium page at 1440: near-black ground dominates, saturated card colors next, white type, green only on actions.): Black 70%, Card colors 18%, White type 9%, Green 3%.

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Spotify Mix Title | Proprietary (Spotify) | Unbounded | "Arial Black", system-ui, sans-serif |
| body | Spotify Mix | Proprietary (Spotify) | Hanken Grotesk | system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero headline (h1) | --text-hero-headline-h1-* | display | 118px | 37px | 1.297 | -1.18px | 900 |
| Hero keyword (h1 3rd line) | --text-hero-keyword-h1-3rd-line-* | display | 118px | 37px | 1.297 | -1.18px | 900 |
| Section headline (h2) | --text-section-headline-h2-* | heading | 66px | 50px | 1.167 | -1.32px | 800 |
| Section sub (h3) | --text-section-sub-h3-* | heading | 24px | 24px | 1.2 | -0.24px | 350 |
| Manifesto headline | --text-manifesto-headline-* | heading | 48px | 32px | 1.2 | -0.96px | 400 |
| Manifesto body | --text-manifesto-body-* | heading | 32px | 24px | 1.15 | -0.32px | 350 |
| Feature card title | --text-feature-card-title-* | body | 32px | 32px | 1.2 | -0.64px | 800 |
| Eyebrow "Premium" (with icon) | --text-eyebrow-premium-with-icon-* | body | 20px | 20px | 1.2 | 0px | 750 |
| Feature grid / card label | --text-feature-grid-card-label-* | body | 20px | 20px | 1.2 | 0px | 750 |
| Body | --text-body-* | body | 16px | 16px | 1.375 | 0px | 450 |
| Button label | --text-button-label-* | body | 16px | 16px | 1.375 | 0px | 750 |
| Plan name | --text-plan-name-* | body | 32px | 32px | 1.45 | 0px | 750 |
| Legal fine print | --text-legal-fine-print-* | body | 12px | 12px | 1.42 | 0px | 450 |
| Footer column head | --text-footer-column-head-* | body | 12px | 12px | 1.4 | 0.96px | 900 |
| Footer link | --text-footer-link-* | body | 16px | 16px | 1.5 | 0px | 450 |
| Nav link | --text-nav-link-* | body | 16px | 16px | 1.5 | 0px | 750 |
| Moments photo caption | --text-moments-photo-caption-* | heading | 16px | 13px | 1.2 | 0px | 300 |
| Offer timer label | --text-offer-timer-label-* | body | 14px | 14px | 1.43 | 0px | 450 |

## Layout

Measured on https://www.spotify.com/us/premium/: computed styles and bounding boxes at 1440 and 390 in headless Chromium after a slow scroll (scroll-revealed sections at rest), 2026-10-29; fonts calibrated by rendering on the live page; images downloaded from wwwmarketing.scdn.co; feature-card art is a Rive canvas captured at rest..

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 160px | 16px |
| Section padding | 256px | 96px |
| Container max width | 1120px | full |
| Grid columns | 12 | 1 |
| Gutter | 32px | 16px |
| Navigation height | 72px | 72px |

At every width (observed, 2026-10-29):
| What | 390px | 1440px |
|---|---|---|
| hero headline | 40px on the site (stand-in Unbounded 37px, -0.01em, scaleX 1.162), centered, 3 lines | 128px on the site (stand-in Unbounded 118px, -0.01em, scaleX 1.162), left, 3 lines |
| hero icon window | 312px centered above the text | 763px right, behind the text |
| section headline | 48px, 2-3 lines | 64px, 1 line |
| feature card | art on top, text below | art left, text right, 1120x509 |
| feature grid | 1 column | 4 columns |
| plans | 1 column | 3 + 1 centered |
| nav | icon + small CTA + hamburger, 54px | full logo + links + CTA, 72px |
| page width | exactly 390: off-edge rows clipped | exactly 1440: off-edge rows clipped |

Breakpoints weren't measured. tokens.css switches to the phone values at 600px; that number is our default, not Spotify's.

Homepage bands, top to bottom (observed):
1. Locale bar
   - Desktop: y 0-55, link left, close X right
   - Phone: same, 55px
   - Language suggestion, 12px white underlined link
2. Nav
   - Desktop: y 55-127: logo x 32, links right, green CTA ends x 1408
   - Phone: y 55-109: icon, small green pill, hamburger
   - Product links white, account links #D9DADC, 1x16 divider between
3. Hero
   - Desktop: y 127-1027: 128px headline over the icon-shaped video window
   - Phone: circle on top, centered headline below
   - See page.hero
4. Manifesto
   - Desktop: y 1027-1522 gradient spacer, y 1522-2051 solid rgba(0,0,0,0.75) band with the left-aligned 48px statement; hard edge at 2051
   - Phone: x 32, 32px statement
   - rgba(0,0,0,0.75) solid at the text; hard edge into Reserved, no fade back
5. Introducing Reserved
   - Desktop: Reserved has its OWN 256px top padding on #121212, added after the manifesto band's 256px: band edge y 2051, h2 at y 2307. h2 64 centered, h3 24/300 centered 40px below; card 1120x509 at x 160, y 2533 (80px after the sub). Card #576DD6 radius 24 is two columns: an art column 636px wide with 48px left and right padding, holding the 540x509 ticket art at card x 48-588 (page x 208-748), native size, never scaled or cropped; then a 484px text column (card x 636-1120) with 32px side padding, so text starts at card x 668 (page x 828): eyebrow, title 2 lines, body 3 lines (315px), and 12px legal pinned 24px above the card bottom.
   - Phone: Band padding-top 96px (h2 y 1943). h2 48 two lines, h3 24 three lines, 24px between. Card 358x530 at y 2250, radius 20: art area 358x288 with 24px top padding holding the art at 358x264, object-fit: contain (never cover: the tickets keep their periwinkle margin and the top ticket sits ~40px below the card top); text block below with 16px padding.
   - Eyebrow: 16px Spotify icon + "Premium" 20/700
   - Title "Concert tickets, saved for real fans" 32/700 in 2 lines
6. Premium Individual feature grid
   - Desktop: 256px top gap. Eyebrow (icon + "Premium Individual" 20/700) centered, h2 64 "With music that never stops" directly under it; 80px; 4 columns 256px wide at x 160/448/736/1024: 48px green icon, label 20/700, body 16/300 (2-3 lines). 128px below: centered green pill + outline pill (16px gap), 12px #B3B3B3 fine print 3 lines centered (520px). Then a 320x320 3D illustration (supplied PNG, transparent) centered ~280px below, then 256px gap.
   - Phone: Eyebrow and h2 centered (2 lines). Items stack in one column, left aligned at x 16: 24px icon, label, body; 40px between. CTAs stacked centered (190 wide), fine print, illustration 200px.
   - Icons: ad-free (megaphone with x), lossless (sound bars), offline (download arrow in circle), any order (shuffle) - supplied SVGs, fill #1ED760
7. Made for how you listen
   - Desktop: Header as Reserved (h2 + h3). Three 1120x509 cards stacked with 32px gaps: DJ (#0D72EA, eyebrow Premium, "DJ spins tracks just for you"), video (#D64000, "Watch where you listen with just one tap"), daylist (#7358FF, "Soundtrack your mood with daylist"). Art 636x509 flush left; text column x 860 (700px into the card), title only, vertically centered.
   - Phone: Cards full width, art top, title bottom-left 32/700, 16px padding.
   - Cards stack sticky while scrolling (animation only); resting = three cards one below another
   - No body text on these three cards
8. The best place to listen with your crew
   - Desktop: h2 64 one line "The best place to listen with your crew" (1120 wide), h3 24/300. Cards: Jam (#CC2FAF, eyebrow Premium, 3-line title) and Blend (#088569, 2-line title), same geometry as above.
   - Phone: h2 three lines; cards stack.
9. Everything you love, right here
   - Desktop: h2 64 + h3 24/300 centered; 80px; three 352x340 cards (#035341, radius 24, padding 24) at x 160/544/928; 256px bottom padding.
   - Phone: Cards stack full width (358x~320), 12px gaps, title 24/700.
   - Fitness: eyebrow Premium, dumbbell icon
   - Audiobooks: eyebrow Premium, open-book icon
   - Podcasts: no eyebrow, podcast-mic icon
   - Body at rgba(255,255,255,0.7), 16px, 2 lines
10. Listen to Spotify anywhere
   - Desktop: h2 64 + body 24/400 one line. Three photos edge to edge: 437x327 at x 0 (bleeds off the left), 445x334 at x 457 dropped 115px, 518x368 at x 922 (bleeds off the right) dropped 9px; 16px radius. Under each, 8px gap, title 24/700 and 16/400 body (2 lines).
   - Phone: h2 two lines; photos become a horizontal scroll row of 300px cards at x 16 / 340 / 664 (third clipped), caption 20/700 + 13px body.
   - Titles: On the road, At home, On the go (in that left-to-right order)
11. Shaping the big moments in music
   - Desktop: Header x 160: h2 64 one line, 24/300 sub. 80px below, a row of six uncropped photos of varying size (700x474, 607x405, 456x570, 340x600, 700x467, 320x400) with 32px gaps, top edges staggered within 150px, each with a 16px/300 white caption 8px below. Resting state: first photo starts at x -169 (clipped by the left edge) and the row runs off the right edge.
   - Phone: Header x 16 three lines; row of photos about 240px tall, clipped both sides.
   - Row scrolls continuously (animation only)
   - Square corners on these photos
12. The world is listening here (spotlight + plans)
   - Desktop: A 1440x900 still of a glowing 3D Spotify icon (supplied) on #121212; the h2 64 "The world is listening here." and 24/300 sub sit centered over its lower half (h2 at 544px into the image). Plans start 260px below the h2: 3 cards in a row (Individual, Student, Duo) at x 159/544/928, 353 wide; Family alone centered beneath, 32px gap. 230px below: Audiobooks Access centered (24/700 #C9E3DB title, 14px body 440 wide 3 lines, sage pill, 12px fine print), then 48px, "Or sign up to Spotify for free." 14px underlined.
   - Phone: Still crops to a 300px icon above the h2 (two lines). Plan cards stack full width (358), 24px apart. Audiobooks block 20/700 title, 13px body.
   - Plan bullets: 16px white, 22px pitch, disc markers
   - Prices verbatim: Individual $0 for 2 months then $12.99 / month after; Student $0 for 1 month then $6.99 / month after; Duo $18.99 / month; Family $21.99 / month
13. Footer
   - Desktop: y +80: logo, 4 columns, socials; legal row
   - Phone: stacked columns
   - Padding 80px top, 50px bottom; content x 163-1280
   - Logo white full 96x32 at x 179, top aligned with the column heads (y +80)
   - Columns at x 365 / 530 / 696 / 861: COMPANY: About, Jobs, For the Record; COMMUNITIES: For Artists, For Creators, For Authors, Developers, Advertising, Investors, Vendors; USEFUL LINKS: Support, Web Player, Free Mobile App, Import your music; SPOTIFY PLANS: Premium Individual, Premium Duo, Premium Family, Premium Student, Spotify Free, Audiobooks Access
   - Heads 12/900 uppercase #919496 0.96px tracking, links 16/400 white, 40px pitch (long labels wrap at 125px)
   - Socials: Instagram, X, Facebook in 54px #222326 circles at x 1068 / 1146 / 1224, top aligned with heads
   - Bottom row at +463: legal links 12px #919496 from x 163, 16-24px apart: Legal, Safety & Privacy Center, Privacy Policy, Cookies, About Ads, Accessibility, Notice at Collection, Cookies Settings (with a small blue toggle glyph)
   - Right: globe icon + "USA" 12px above "© 2026 Spotify AB" 12px #919496, right-aligned to x 1280

## Page anatomy

How Spotify's own landing pages are built, part by part (observed; https://www.spotify.com/us/premium/, 2026-10-29). A homepage pattern, not a brand law: follow it for landing pages.

**Announcement bar**
- summary: A 55px #1D75DE locale bar: "Estados Unidos (Español)" 12px white underlined at x 15, a 24px white close X at the right edge (x 1411). It is a language suggestion for US visitors and sits above the nav.
- ground: #1D75DE
- height: 55

**Navigation**
- summary: Black 72px bar, not sticky at rest: white full logo left, product links and account links right, green pill CTA at the far right.
- ground: #000000
- height: desktop 72; phone 54
- border: none
- logo: variant white full logo (icon + wordmark); px 118x32; position x 32, vertically centered
- links: count 5; labels Premium plans (opens a dropdown, chevron-less),Support,Download,| (1x16px white divider),Sign up,Log in,Try 2 months for $0 (green pill); size 16; weight 700; color #FFFFFF for Premium plans / Support / Download, #D9DADC for Sign up / Log in; alignment right group: Premium plans x 614, Support x 764, Download x 865, divider x 982, Sign up x 1022, Log in x 1118, CTA x 1202-1408
- actions: CTA pill "Try 2 months for $0" 206x38
- sticky: false
- phone: Icon only (white, 32px) at x 16; green CTA pill 156x28 (14px text) right of center ending at x 343; hamburger (3 white bars, 24px) at x 352.

**Hero**
- summary: The Spotify icon cut out of a #121212 layer reveals a full-bleed video; a 128px ultra-wide white headline overlaps it on the left, then an offer timer, two pill CTAs and fine print.
- desktop: Hero box y 127-1027 (900 tall, 100px padding). h1 lines at y 248 / 401 / 554 (153px pitch), x 100, 1240 max width: "The ultimate" / "home for" / italic keyword. Circle cut-out 763px, x 630-1393, y 96-859. Timer at y 715 (x 100, 161x28). CTAs at y 767: green 206x48 at x 100, outline 167x48 at x 322. Fine print y 839, 300px wide, 4 lines 12px #B3B3B3. Pause button 48px circle at x 1372, y 832.
- phone: Hero box y 109-953. The icon window is a 312px circle centered (x 39-351) at y 117-429, so it starts 8px below the nav; there is no video outside the circle on phone (solid #121212 around it). h1 centered, 3 lines at y 430 (48px pitch): the site sets 40px; the stand-in is Unbounded 37px, -0.01em, scaleX(1.162) from the center; timer centered y 582; CTAs stacked and centered: green 190x48 at y 630, outline 151x48 at y 690; fine print centered 300px at y 750 (3 lines); pause 32px at x 342 y 792. Phone fine print breaks exactly: "Premium Individual only. Free for 2 months, then $12.99 per" / "month after. Offer only available if you haven't tried Premium" / "before. Terms apply. Offer ends November 1, 2026." (3 lines; if Hanken wraps to 4, set letter-spacing -0.02em on this paragraph). Desktop (300px, 4 lines): "... then $12.99" / "per month after. Offer only available if you haven't tried" / "Premium before. Terms apply. Offer ends November 1," / "2026."
- at rest: Video paused on the supplied frame; keyword line reads "music" (it cycles music / artists / fans / live events / videos, animation only).
- media: hero-frame.jpg (object-fit: cover) in a media layer at x 0, y 55 (directly under the locale bar, NOT under the nav), 1440x845 at desktop / 390x789 at phone. On the live site this layer is position: fixed; build it position: absolute at page y 55 (its resting, top-of-page state). Over it, a #121212 div of the same box with the icon cut out (see signature logo-mask-hero). The 72px nav (z-index above) covers the circle's top 31px at 1440. Load the mask PNG as an inline data: URI (base64), never a file:// URL: a CSS mask from file:// is blocked as cross-origin and the hero renders as a flat #121212 box.
- type: h1 128/900 display face, white; keyword italic
- cta: Try 2 months for $0 + View all plans
- proof: none

**Manifesto**
- summary: Big left-aligned statement that fades in on scroll under the hero
- ground: Two parts. (1) Spacer 495px (422px phone) directly under the hero box: background linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.75)) over #121212. (2) The text band: solid rgba(0,0,0,0.75) over #121212 (renders near-black), padding 16px 16px 256px (16px 16px 160px phone). It ENDS WITH A HARD EDGE onto the #121212 Reserved band. Never fade back to #121212.
- desktop: Spacer y 1027-1522 (495px). Text band y 1522-2051: statement at x 88, y 1538, Bricolage 48/400 -0.02em, 2 lines in 822px; body 32/300 at y 1698, 3 lines, 709px. 256px bottom padding inside the band, then the hard edge at y 2051.
- phone: Spacer y 953-1375 (422px). Text band y 1375-1847: statement x 32, y 1391, Bricolage 32/400, 4 lines in 326px; body 24/300 at y 1591, 4 lines; 160px bottom padding, hard edge at y 1847.
- anatomy:
  - Resting state = fully visible (words animate up 80px and fade in; animation only)
  - Left aligned, not centered, unlike every later header
  - Copy, verbatim from the page: h2: As the world's music hub, Spotify is where fans and artists come together. | body: It's the place to discover the perfect song for the moment. The place that brings music to your whole life.
- components:
- copy:
  - h2: As the world's music hub, Spotify is where fans and artists come together.
  - body: It's the place to discover the perfect song for the moment. The place that brings music to your whole life.

**Introducing Reserved**
- summary: Centered section header + one periwinkle feature card
- ground: #121212
- desktop: Reserved has its OWN 256px top padding on #121212, added after the manifesto band's 256px: band edge y 2051, h2 at y 2307. h2 64 centered, h3 24/300 centered 40px below; card 1120x509 at x 160, y 2533 (80px after the sub). Card #576DD6 radius 24 is two columns: an art column 636px wide with 48px left and right padding, holding the 540x509 ticket art at card x 48-588 (page x 208-748), native size, never scaled or cropped; then a 484px text column (card x 636-1120) with 32px side padding, so text starts at card x 668 (page x 828): eyebrow, title 2 lines, body 3 lines (315px), and 12px legal pinned 24px above the card bottom.
- phone: Band padding-top 96px (h2 y 1943). h2 48 two lines, h3 24 three lines, 24px between. Card 358x530 at y 2250, radius 20: art area 358x288 with 24px top padding holding the art at 358x264, object-fit: contain (never cover: the tickets keep their periwinkle margin and the top ticket sits ~40px below the card top); text block below with 16px padding.
- anatomy:
  - Eyebrow: 16px Spotify icon + "Premium" 20/700
  - Title "Concert tickets, saved for real fans" 32/700 in 2 lines
  - Copy, verbatim from the page: h3: Get exclusive access to live shows near you, with the artists you love most. | card body: With Reserved, you can get exclusive access to select tours for your favorite artists. | card legal: Limited eligibility; tickets not guaranteed; select tours; purchase required. Terms apply.
- components:
  - feature_card
- copy:
  - h3: Get exclusive access to live shows near you, with the artists you love most.
  - card body: With Reserved, you can get exclusive access to select tours for your favorite artists.
  - card legal: Limited eligibility; tickets not guaranteed; select tours; purchase required. Terms apply.

**Premium Individual feature grid**
- summary: Eyebrow + h2, four icon columns, two CTAs, fine print, floating 3D illustration
- ground: #121212
- desktop: 256px top gap. Eyebrow (icon + "Premium Individual" 20/700) centered, h2 64 "With music that never stops" directly under it; 80px; 4 columns 256px wide at x 160/448/736/1024: 48px green icon, label 20/700, body 16/300 (2-3 lines). 128px below: centered green pill + outline pill (16px gap), 12px #B3B3B3 fine print 3 lines centered (520px). Then a 320x320 3D illustration (supplied PNG, transparent) centered ~280px below, then 256px gap.
- phone: Eyebrow and h2 centered (2 lines). Items stack in one column, left aligned at x 16: 24px icon, label, body; 40px between. CTAs stacked centered (190 wide), fine print, illustration 200px.
- anatomy:
  - Icons: ad-free (megaphone with x), lossless (sound bars), offline (download arrow in circle), any order (shuffle) - supplied SVGs, fill #1ED760
  - Copy, verbatim from the page: Ad-free music listening: All the music, without all the ads. Just nonstop beats. | Lossless music: Lose yourself in music with sound quality up to 24-bit/44.1 kHz. | Offline listening: Download thousands of songs, or let Offline Backup do it automatically. | Play songs in any order: Repeat songs, play albums in any order, and skip as many times as you want. | fine print (also under the hero CTAs and on the Individual card): Premium Individual only. Free for 2 months, then $12.99 per month after. Offer only available if you haven't tried Premium before. Terms apply. Offer ends November 1, 2026.
- components:
  - button_primary
  - button_outline
- copy:
  - Ad-free music listening: All the music, without all the ads. Just nonstop beats.
  - Lossless music: Lose yourself in music with sound quality up to 24-bit/44.1 kHz.
  - Offline listening: Download thousands of songs, or let Offline Backup do it automatically.
  - Play songs in any order: Repeat songs, play albums in any order, and skip as many times as you want.
  - fine print (also under the hero CTAs and on the Individual card): Premium Individual only. Free for 2 months, then $12.99 per month after. Offer only available if you haven't tried Premium before. Terms apply. Offer ends November 1, 2026.

**Made for how you listen**
- summary: Centered header + three stacked feature cards
- ground: #121212
- desktop: Header as Reserved (h2 + h3). Three 1120x509 cards stacked with 32px gaps: DJ (#0D72EA, eyebrow Premium, "DJ spins tracks just for you"), video (#D64000, "Watch where you listen with just one tap"), daylist (#7358FF, "Soundtrack your mood with daylist"). Art 636x509 flush left; text column x 860 (700px into the card), title only, vertically centered.
- phone: Cards full width, art top, title bottom-left 32/700, 16px padding.
- anatomy:
  - Cards stack sticky while scrolling (animation only); resting = three cards one below another
  - No body text on these three cards
  - Copy, verbatim from the page: h3: Where new music finds you first, and fandom goes deeper.
- components:
  - feature_card
- copy:
  - h3: Where new music finds you first, and fandom goes deeper.

**The best place to listen with your crew**
- summary: Centered header + two feature cards
- ground: #121212
- desktop: h2 64 one line "The best place to listen with your crew" (1120 wide), h3 24/300. Cards: Jam (#CC2FAF, eyebrow Premium, 3-line title) and Blend (#088569, 2-line title), same geometry as above.
- phone: h2 three lines; cards stack.
- anatomy:
  - Copy, verbatim from the page: h3: Your friends and family are already here. Collaborating, sharing, and listening together.
- components:
  - feature_card
- copy:
  - h3: Your friends and family are already here. Collaborating, sharing, and listening together.

**Everything you love, right here**
- summary: Centered header + three dark-green content cards
- ground: #121212
- desktop: h2 64 + h3 24/300 centered; 80px; three 352x340 cards (#035341, radius 24, padding 24) at x 160/544/928; 256px bottom padding.
- phone: Cards stack full width (358x~320), 12px gaps, title 24/700.
- anatomy:
  - Fitness: eyebrow Premium, dumbbell icon
  - Audiobooks: eyebrow Premium, open-book icon
  - Podcasts: no eyebrow, podcast-mic icon
  - Body at rgba(255,255,255,0.7), 16px, 2 lines
  - Copy, verbatim from the page: h3: Dive into audiobooks, podcasts, and workouts too, all in one place. | Fitness: Take your workouts further with 1.4k additional classes, powered by Peloton. | Audiobooks: Discover over 700,000 titles available in our audiobooks subscriber catalog. | Podcasts: Watch and listen to millions of shows across topics for every listener.
- components:
  - content_card
- copy:
  - h3: Dive into audiobooks, podcasts, and workouts too, all in one place.
  - Fitness: Take your workouts further with 1.4k additional classes, powered by Peloton.
  - Audiobooks: Discover over 700,000 titles available in our audiobooks subscriber catalog.
  - Podcasts: Watch and listen to millions of shows across topics for every listener.

**Listen to Spotify anywhere**
- summary: Centered header + three staggered rounded photos with captions
- ground: #121212
- desktop: h2 64 + body 24/400 one line. Three photos edge to edge: 437x327 at x 0 (bleeds off the left), 445x334 at x 457 dropped 115px, 518x368 at x 922 (bleeds off the right) dropped 9px; 16px radius. Under each, 8px gap, title 24/700 and 16/400 body (2 lines). Each caption block (title 24/700 Hanken, body 16/450) is inset 16px from its photo's left edge (padding-left 16px); 8px below the photo.
- phone: h2 two lines; photos become a horizontal scroll row of 300px cards at x 16 / 340 / 664 (third clipped), caption 20/700 + 13px body.
- anatomy:
  - Titles: On the road, At home, On the go (in that left-to-right order)
  - Copy, verbatim from the page: sub: Spotify is compatible with over 2,000 devices. So wherever you listen, your music is right there. | On the road: Connect Spotify to Apple CarPlay, Android Auto, or your car's built-in system and listen hands-free. | At home: Listen on smart speakers, your TV, game console, and more. Plus switch between devices without missing a beat. | On the go: Spotify runs on smartwatches and wearables, so your music comes with you without your phone having to.
- components:
- copy:
  - sub: Spotify is compatible with over 2,000 devices. So wherever you listen, your music is right there.
  - On the road: Connect Spotify to Apple CarPlay, Android Auto, or your car's built-in system and listen hands-free.
  - At home: Listen on smart speakers, your TV, game console, and more. Plus switch between devices without missing a beat.
  - On the go: Spotify runs on smartwatches and wearables, so your music comes with you without your phone having to.

**Shaping the big moments in music**
- summary: Left-aligned header + a horizontal marquee of event photos with captions
- ground: #121212
- desktop: Header x 160: h2 at y 10408, one line; sub one line at y 10525. 80px below, a row of six uncropped photos with 32px gaps, in this order with these sizes and top offsets (px below the row top): Miley Cyrus 700x474 at x -169 (+145), Shaboozey 607x405 at x 563 (+107), Selena & Benny 456x570 at x 1202 (+0), Clipse 340x600 at x 1690 (+0, off-screen), Marshmello 700x467 (+76), Addison Rae 320x400 (+0). Each has its caption 16px/300 white (heading face), 8px below, max the photo width. Square corners. The row runs off both edges; resting = this offset. The row spans y 10634-11288; the spotlight still starts 250px below it (y 11538).
- phone: Header x 16 three lines; row of photos about 240px tall, clipped both sides.
- anatomy:
  - Captions verbatim: Miley Cyrus celebrates her greatest hits at Billions Club Live in Paris. | Shaboozey electrifying the Spotify House stage during CMA Fest this year. | Selena Gomez and Benny Blanco discuss making their album on an episode of Spotify's Countdown To. | Marking the countdown to Clipse's new album with an exclusive video. | Marshmello pumping up the crowd at Spotify House in Nashville. | Celebrating Addison Rae's new album with her top listeners on Spotify.
  - Row scrolls continuously (animation only)
- components:
- copy:
  - h3: Spotify is where music breaks and culture moves. Be here when history hits play.

**The world is listening here (spotlight + plans)**
- summary: Full-width glowing-icon still, centered closing headline, the four plan cards, Audiobooks Access, sign-up link
- ground: #121212
- desktop: A 1440x900 still of a glowing 3D Spotify icon (supplied) on #121212; the h2 64 "The world is listening here." and 24/300 sub sit centered over its lower half (h2 at 544px into the image). Plans start 260px below the h2: 3 cards in a row (Individual, Student, Duo) at x 159/544/928, 353 wide; Family alone centered beneath, 40px gap. 230px below: Audiobooks Access centered (24/700 #C9E3DB title, 14px body 440 wide 3 lines, sage pill, 12px fine print), then 48px, "Or sign up to Spotify for free." 14px underlined.
- phone: Still crops to a 300px icon above the h2 (two lines). Plan cards stack full width (358), 24px apart. Audiobooks block 20/700 title, 13px body.
- anatomy:
  - Plan bullets: 16px white, 22px pitch, disc markers
  - Prices verbatim: Individual $0 for 2 months then $12.99 / month after; Student $0 for 1 month then $6.99 / month after; Duo $18.99 / month; Family $21.99 / month
  - Copy, verbatim from the page: h3: Join the party with Premium. | Individual card: badge "$0 for 2 months"; price "$0 for 2 months"; sub "$12.99 / month after"; bullets: 1 Premium account / 15 hours/month of listening time from our audiobooks subscriber catalog / Cancel anytime; button "Try 2 months for $0"; fine print as the hero (5 lines centered). | Student card: badge "$0 for 1 month"; price "$0 for 1 month"; sub "$6.99 / month after"; bullets: 1 verified Premium account / Discount for eligible students / Access to Hulu / Cancel anytime; button "Try 1 month for $0"; fine print: $0 for 1 month, then $6.99 per month after. Spotify Premium Student offer currently includes access to Hulu plan on us, subject to eligibility. Offer available only to students at an eligible accredited higher education institution and if you haven't tried Premium before. Terms apply. | Duo card (no badge; content starts 16px from the top): price "$18.99 / month"; bullets: 2 Premium accounts / 15 hours/month of listening time from our audiobooks subscriber catalog (plan manager only) / Cancel anytime; button "Get Premium Duo"; fine print: For couples who reside at the same address. Terms apply. | Family card (no badge): price "$21.99 / month"; bullets: Up to 6 Premium accounts / Parental controls over all plan members / 15 hours/month of listening time from our audiobooks subscriber catalog (plan manager only) / Plan members under 13 get Premium benefits / Cancel anytime; button "Get Premium Family"; fine print: For up to 6 family members residing at the same address. Terms apply. | Audiobooks Access: Get 15 hours/month of audiobook listening time from our audiobooks subscriber catalog. Your music listening experience will be on our free, ad-supported service. / button "Learn more" / Audiobooks Access plan only. Terms apply. / link "Or sign up to Spotify for free."
- components:
  - plan_card
  - plan_badge
  - button_plan
  - button_sage
- copy:
  - h3: Join the party with Premium.
  - Individual card: badge "$0 for 2 months"; price "$0 for 2 months"; sub "$12.99 / month after"; bullets: 1 Premium account / 15 hours/month of listening time from our audiobooks subscriber catalog / Cancel anytime; button "Try 2 months for $0"; fine print as the hero (5 lines centered).
  - Student card: badge "$0 for 1 month"; price "$0 for 1 month"; sub "$6.99 / month after"; bullets: 1 verified Premium account / Discount for eligible students / Access to Hulu / Cancel anytime; button "Try 1 month for $0"; fine print: $0 for 1 month, then $6.99 per month after. Spotify Premium Student offer currently includes access to Hulu plan on us, subject to eligibility. Offer available only to students at an eligible accredited higher education institution and if you haven't tried Premium before. Terms apply.
  - Duo card (no badge; content starts 16px from the top): price "$18.99 / month"; bullets: 2 Premium accounts / 15 hours/month of listening time from our audiobooks subscriber catalog (plan manager only) / Cancel anytime; button "Get Premium Duo"; fine print: For couples who reside at the same address. Terms apply.
  - Family card (no badge): price "$21.99 / month"; bullets: Up to 6 Premium accounts / Parental controls over all plan members / 15 hours/month of listening time from our audiobooks subscriber catalog (plan manager only) / Plan members under 13 get Premium benefits / Cancel anytime; button "Get Premium Family"; fine print: For up to 6 family members residing at the same address. Terms apply.
  - Audiobooks Access: Get 15 hours/month of audiobook listening time from our audiobooks subscriber catalog. Your music listening experience will be on our free, ad-supported service. / button "Learn more" / Audiobooks Access plan only. Terms apply. / link "Or sign up to Spotify for free."

**Footer**
- summary: Black footer: logo left, four link columns, three round socials right, legal row and copyright at the bottom.
- ground: #000000
- anatomy:
  - Padding 80px top, 50px bottom; content x 163-1280
  - Logo white full logo 96px wide (renders 96x26; the measured 32px box includes padding) at x 179, top aligned with the column heads (y +80)
  - Columns at x 365 / 530 / 696 / 861: COMPANY: About, Jobs, For the Record; COMMUNITIES: For Artists, For Creators, For Authors, Developers, Advertising, Investors, Vendors; USEFUL LINKS: Support, Web Player, Free Mobile App, Import your music; SPOTIFY PLANS: Premium Individual, Premium Duo, Premium Family, Premium Student, Spotify Free, Audiobooks Access
  - Heads 12/900 uppercase #919496 0.96px tracking, links 16/400 white, 40px pitch (long labels wrap at 125px)
  - Socials: Instagram, X, Facebook in 54px #222326 circles at x 1068 / 1146 / 1224, top aligned with heads
  - Bottom row at +463: legal links 12px #919496 from x 163, 16-24px apart: Legal, Safety & Privacy Center, Privacy Policy, Cookies, About Ads, Accessibility, Notice at Collection, Cookies Settings (with a small blue toggle glyph)
  - Right: globe icon + "USA" 12px above "© 2026 Spotify AB" 12px #919496, right-aligned to x 1280
- phone: Logo at x 20, columns stack (head then links, 32px between groups), socials row of three 40px circles, legal links wrap into 3 lines, copyright below.

**On dark grounds**
- secondary button: transparent pill, 1px #7F7F7F border, white 16/700 text
- link: white, underlined
- muted text: #B3B3B3
- hairline: rgba(255,255,255,0.1)
- logo variant: white full logo (the green logo is published for black or white grounds only; the site uses white)

## Components

- **button primary** (observed): fill #1ED760, text #000000, radius pill, height 48, padding x 32, font size 16, weight 700, use Every primary CTA ("Try 2 months for $0"). 206x48 at 1440. Hover: scale 1.04 and lighter green; transition background-color, transform 0.15s cubic-bezier(0.3,0,0,1).
  - hover (our reading): background #3BE477, transform scale(1.04)
- **button nav** (observed): fill #1ED760, text #000000, radius pill, height 38, padding x 32, font size 16, weight 700, use Nav CTA, 206x38 at 1440; 156x28 with 14px text and 16px padding at 390.
- **button outline** (observed): fill #121212, text #FFFFFF, border 1px solid #7F7F7F, radius pill, height 48, padding x 32, font size 16, weight 700, use "View all plans" beside the green pill, 16px gap., ring px 1, ring #7F7F7F
- **button plan** (observed): fill #1ED760, text #000000, radius pill, height 48, width 100% of card (321), font size 16, weight 700, padding x 16. fill is the plan color: #1ED760 Individual, #91EEDA Student, #FFA178 Duo, #D8A3FF Family
- **button sage** (observed): fill #C9E3DB, text #000000, radius pill, height 48, padding x 40, font size 16, weight 700, use Audiobooks Access "Learn more".
- **offer timer** (observed): fill rgba(255,255,255,0.1), text #FFFFFF, radius 4, height 28, padding 4px 8px, font size 14, weight 400, use Label verbatim "Offer ends in 4 days" (observed 2026-10-29; the count changes daily, so on another day use the true count to November 1, 2026). 160x28 badge at x 100, y 715 (1440): padding 4px 8px, 16px bell icon (blue outline), 4px gap, label 14px. 24px above the CTAs. Bell icon is a blue outline (exact hex not captured)., date 2026-10-30
- **play pause** (observed): fill rgba(255,255,255,0.1), text #FFFFFF, radius 999, size 48, size phone 32, use Pause glyph, bottom-right of the hero, 20px from the right edge and bottom of the viewport.
- **plan badge** (observed): fill plan color, text #000000, radius 6, height 30, padding 8px 16px, font size 16, weight 700, use Flush to the top-left corner of the plan card: "$0 for 2 months" (green), "$0 for 1 month" (mint). Corners: border-radius 6px 0 6px 0., corners 6px on the top-left and bottom-right corners only (border-radius: 6px 0 6px 0)
- **plan card** (observed): fill #242424, text #FFFFFF, radius 10, padding 0 16px, divider 1px rgba(255,255,255,0.1), use Built as four stacked blocks, all #242424, 353px wide (342px at x 24 on phone): HEAD (radius 10 10 0 0): badge flush top-left (Individual, Student) then 16px, eyebrow 24px icon + 4px + "Premium" 16/400, plan name 32/700 (46px line) in plan color, 4px, price 16/700, sub 14/400 #A7A7A7, 16px, 1px rgba(255,255,255,0.1) divider. No-badge cards (Duo, Family) start the eyebrow 16px from the top. BULLETS: 16/400 white, 22px line pitch, 16px marker column, padding 20px 16px (0 16px 20px when there is no badge). BUTTON: full-width 48px pill, then 16px. FINE PRINT (radius 0 0 10 10): 12/400 #A7A7A7 centered, 16px line, 12px top padding, 16px bottom padding. Element tops from the card top at 1440. Individual and Student: badge 0, eyebrow 56, name 85, price 135, sub 157, divider 193, first bullet 214, button 324, fine print text ~400, card bottom 512. Duo (no badge, no sub): eyebrow 16, name 45, price 95, divider 153, first bullet 194, button 324, bottom 512. Family (row two): eyebrow 16, name 45, price 96, divider 134, first bullet 155, button 351, fine print 415, bottom 475. Bullet text column 305px wide., heights At 1440 the three row-one cards share grid rows, so each block lines up across cards: head 194, bullets 130, button 64, fine print 124 (= 512 tall). The button sits directly under the bullets row: no margin-top: auto, no empty space between the last bullet and the button beyond the 20px padding. Family (row two, centered, 40px below): 154 / 196 / 64 / 60. Phone cards stack with 40px between., date 2026-10-30, offsets Element tops from the card top at 1440. Individual and Student: badge 0, eyebrow 56, name 85, price 135, sub 157, divider 193, first bullet 214, button 324, fine print text ~400, card bottom 512. Duo (no badge, no sub): eyebrow 16, name 45, price 95, divider 153, first bullet 194, button 324, bottom 512. Family (row two): eyebrow 16, name 45, price 96, divider 134, first bullet 155, button 351, fine print 415, bottom 475. Bullet text column 305px wide.
- **feature card** (observed): fill card color, text #FFFFFF, radius 24, height 509, use Card 1120x509, radius 24, overflow hidden. Art column 636px wide with the art at its native box size, never scaled up or cropped: Reserved art 540x509, all others 636x509 (the image already contains its own inset and the card color around the artwork). Text column: x 668 (Reserved) or 700 (others) inside the card, max-width 356px, right padding 64px, vertically centered as one block: eyebrow (16px icon + "Premium" 20/750, 0px gap to title), title 32/800 with the exact line breaks in title_breaks, 16px gap, body 16/450 (Reserved only, 315px wide, 3 lines). Reserved legal 12px pinned 24px above the card bottom at the same x. Reserved: the 540x509 art sits inside the 636px column with 48px padding each side (card x 48). Phone: radius 20, art on top with 24px top padding and object-fit: contain (never cover); Reserved 358x530, other cards about 358x500 with a 318px art area. Top of the text group from the card top at 1440 (do not vertically center by flex; use these): Reserved eyebrow +163, title +187; DJ eyebrow +188, title +212; video title +200 (no eyebrow); daylist title +200 (no eyebrow); Jam eyebrow +168, title +192; Blend title +200 (no eyebrow). Only Reserved, DJ and Jam carry the Premium eyebrow., title breaks Reserved: Concert tickets, / saved for real fans; DJ: DJ spins tracks / just for you; video: Watch where you / listen with just one tap; daylist: Soundtrack your / mood with daylist; Jam: Play any song / with friends in / real time with Jam; Blend: Discover your taste / match with Blend, text offsets Top of the text group from the card top at 1440 (do not vertically center by flex; use these): Reserved eyebrow +163, title +187; DJ eyebrow +188, title +212; video title +200 (no eyebrow); daylist title +200 (no eyebrow); Jam eyebrow +168, title +192; Blend title +200 (no eyebrow). Only Reserved, DJ and Jam carry the Premium eyebrow.
- **content card** (observed): fill #035341, text #FFFFFF, radius 24, padding 24, height 340, use Top-left eyebrow (icon + "Premium" 16/700, omitted on Podcasts), 88px #10B28E line icon centered, title 20/700, body 16/400 at 70% white. Phone 358x320, radius 20, 16px apart.
- **social button** (observed): fill #222326, text #FFFFFF, radius 999, size 54, gap 24, use Instagram, X, Facebook glyphs 24px, top-right of the footer.
- **text link** (observed): fill transparent, text #FFFFFF, underline true, font size 14, use "Or sign up to Spotify for free." and every "Terms apply".

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| button-press | cubic-bezier(0.3, 0, 0, 1) | 150ms | background-color and transform (scale up ~4%) on pill buttons | observed |
| keyword-cycle | ease-out | 1500ms | hero third line slides up through music / artists / fans / live events / videos; resting state "music" | our reading |
| word-rise | ease-out | 600ms | manifesto words rise 80px and fade in on scroll; resting state fully visible | our reading |
| card-stack | ease-out | 600ms | feature cards stick and stack; resting state = stacked list | our reading |

## Icon tokens

Grid not published, stroke Encore UI glyphs: 16px viewBox filled glyphs scaled to 48px (feature grid, #1ED760) and 88px line icons (content cards, #10B28E); 16px Spotify icon in eyebrows (observed).
| Name | Size | Use |
|---|---|---|
| s | 16px |  |
| m | 24px |  |
| l | 48px |  |
| xl | 88px |  |

## Signature moves

### The icon is the hero frame

Where: hero, top of the page.
Do: A #121212 layer with the Spotify icon cut out of it: the icon's circle shows the hero video (supplied still), the three sound waves stay solid #121212. The layer is the media box x 0, y 55, 1440x845 (390x789 phone), not the hero box. CSS on that #121212 div: mask-image: linear-gradient(#000,#000), url(data:image/png;base64,<logo-v1.png>); mask-composite: exclude (-webkit-mask-composite: xor); mask-repeat: no-repeat; desktop mask-size: 100% 100%, 763px; mask-position: 0 0, 630px 41px (page x 630-1393, y 96-859; the site writes it as size 53% at position 93.06% / 50%); phone mask-size 100% 100%, 312px; mask-position 0 0, 50% 62px (page y 117-429). The 72px nav sits above and hides the circle's top 31px at 1440. The mask PNG MUST be an inline data URI: a file:// mask silently fails. The 118px headline (see type) overlaps the circle's left third..
Don't: No rectangle or rounded photo in the hero, no gradient scrim, no green circle.

### One stretched black headline, then a plain grotesque

Where: hero vs everything else.
Do: Only the hero h1 uses the ultra-wide 900 face (128px, three lines, last line italic and cycling). Every other headline is the normal-width heading face at 64px/800, centered, tight..
Don't: Never use the wide hero face for section heads or cards.

### Saturated rounded cards on a black page

Where: Reserved, Made for how you listen, crew sections.
Do: 1120x509 cards, 24px radius, 32px apart, each its own flat saturated ground (#576DD6, #0D72EA, #D64000, #7358FF, #CC2FAF, #088569) with frosted product UI art on the left and white text on the right. The page itself never changes from #121212..
Don't: No gradients on the card grounds, no white or light sections anywhere.

### Green is the action

Where: nav, hero, feature grid, plans.
Do: #1ED760 appears as pill buttons with black 700 text, the Individual plan name/badge and the 4 feature-grid icons; nothing else is green..
Don't: No green text links, no green section grounds.

## Messaging: rules

The Premium page sells by listing what fans get, one band per idea: the ultimate home for music, a manifesto, Reserved, the Premium feature grid, personal features, social features, other content, devices, culture, then plans. Every offer line is followed by its fine print.

Why it works: Bands map to reasons to upgrade, so a reader can stop at any band and still meet the CTA.

|  |  |
|---|---|
| Landing page voice | homepage voice: 3-7 word headline, one sentence sub, one green action |
| Closing line | The world is listening here. |

- One idea per band, headline + one-line sub
- Name the feature in the headline (DJ, daylist, Jam, Blend)
- Every price CTA carries its fine print and "Terms apply"
- Don't No stacked claims or stats walls
- Don't No CTA without its eligibility line

Real examples, to look at on Spotify's own pages (not for reuse):
- Reserved feature card art at rest: https://www.spotify.com/us/premium/

Sources: https://www.spotify.com/us/premium/, https://newsroom.spotify.com/company-info/

## Voice: rules

Short, warm and fan-centred: "Made for how you listen", "The best place to listen with your crew". Feature lines use verbs ("Soundtrack your mood with daylist"). Partner rules fix the link labels.

Why it works: The page speaks like a friend recommending music, while offers stay exact.

|  |  |
|---|---|
| Headline case | sentence |
| Footer heads | UPPERCASE 12/900 |

- Sentence case everywhere except footer column heads
- Use the published link labels: GET SPOTIFY FREE, OPEN SPOTIFY, PLAY ON SPOTIFY, LISTEN ON SPOTIFY
- Numbers only when verifiable
- Don't No title case headlines
- Don't No invented stats

Do and don't:
- Do: "Made for how you listen". Sentence case, about the listener.
- Don't: "The Most Advanced Audio Platform". No title case, no superlative claims.

Sources: https://developer.spotify.com/documentation/design#linking-to-spotify, https://www.spotify.com/us/premium/

## Logo: rules

The full logo is the icon plus the wordmark; the icon alone is for tight spaces or when the brand is already established. Green logo only on black or white; monochrome on anything else. On spotify.com the nav and footer use the white full logo.

Why it works: A single colorway rule keeps the logo legible on the colorful brand palette.

|  |  |
|---|---|
| Exclusion zone | x = half the icon height |
| Min size digital | 70px logo / 21px icon |
| Min size print | 20mm logo / 6mm icon |
| Nav logo on site | 118x32 white |

- Exclusion zone = half the icon height
- Minimum 70px (logo) and 21px (icon) digital; 20mm and 6mm print
- Green logo only on black, white or non-duotoned photos
- Black logo on light grounds, white on dark
- Don't rotate, stretch or recolor
- Don't fill the waves
- Don't use the wordmark without the icon
- Don't use the logo in a sentence or as a letter
- Don't place it on busy or low-contrast areas

Do and don't:
- Do: "Spotify". White logo on dark grounds; green only on black or white.
- Don't: "Spotify". Never the green logo on a colored ground.

Sources: https://developer.spotify.com/documentation/design#using-our-logo, https://newsroom.spotify.com/media-kit/logo-and-brand-assets/

## Color: rules

Three published core colors: Spotify Green #1ED760, White #FFFFFF, Black #121212. The guide says the brand now speaks a much more colorful language, with Green as the resting color. On the page the ground never leaves #121212; color arrives as saturated flat card grounds and plan accents, and green is reserved for actions.

Why it works: A black stage makes the saturated cards and the green CTA the only things that glow.

|  |  |
|---|---|
| Green | #1ED760 · RGB 30/215/96 · CMYK 86/0/80/0 |
| White | #FFFFFF |
| Black | #121212 · RGB 18/18/18 |
| Player fallback | #191414 |

- Ground #121212 for every band; #000000 for nav and footer
- Green #1ED760 = primary action
- Get creative with surprising color combinations, with high contrast
- Each feature card owns one flat saturated color
- Don't introduce colors outside the brand palette
- Don't use over-saturated colors for CMYK print
- Don't make sections light

Do and don't:
- Do: "Try 2 months for $0". On #121212, the action is a green pill with black text.
- Don't: "Try 2 months for $0". Green is for actions, not for body text or links.

Real examples, to look at on Spotify's own pages (not for reuse):
- Daylist card art: violet ground with a grainy gradient cover: https://www.spotify.com/us/premium/

Sources: https://developer.spotify.com/documentation/design#using-our-colors, https://www.spotify.com/us/premium/

## Typography: rules

Spotify sets its marketing in its proprietary Spotify Mix family: an ultra-wide black cut (stretch 156%) only for the hero, Mix Title 800 for centered section heads, Mix UI for body and buttons. Partner integrations are told to use the platform sans.

Why it works: One shouting hero line, then a calm grotesque, gives the page its poster-then-product rhythm.

|  |  |
|---|---|
| Hero | 128 / 153 · 900 · stretch 156% (stand-in: Unbounded 118px, -0.01em, scaleX 1.162) |
| H2 | 64 · 800 (stand-in: Bricolage Grotesque 800 at 66px, -0.02em) |
| Sub | 24 · 300 (Bricolage 350) |
| Body | 16 · 400 (Hanken Grotesk 450) |
| Stand-ins | Unbounded (hero), Bricolage Grotesque (Mix Title roles), Hanken Grotesk (Mix UI roles) |

- Hero: 128px ultra-wide 900, three lines, italic last line
- Section heads 64px, tight, centered
- Body 16px, buttons 16/700
- Hero stand-in: Unbounded 900 at 118px desktop / 37px phone, letter-spacing -0.01em, transform: scaleX(1.162) on each line (origin left at 1440, center at 390), line pitch 153 / 48. That matches the real stretched cut's width and height; letters nearly touch
- Build recipe: three stand-in families. --font-display: Unbounded (hero only). --font-heading: 'Bricolage Grotesque' (tokens.css has no heading token; declare it): section h2 at 66px desktop / 50px phone, 800, -0.02em (line box 77 / 58); manifesto statement 48/32px, 400, -0.02em; manifesto body and every section sub 32/24px, 350, -0.01em; moments captions 16px 300. --font-body: 'Hanken Grotesk' for everything else, including card titles, plan cards, buttons, nav, footer and the 14px offer timer. Where band prose gives Spotify's own weights (700, 400), use the type table's stand-in weights (750, 450). Never Outfit
- Don't use the wide hero cut anywhere else
- Don't letter-space headlines open: the hero is -0.01em with letters nearly touching, h2 -0.02em

Do and don't:
- Do: "The ultimate home for music". The wide black cut for the one hero line.
- Don't: "With music that never stops". Section heads stay in the normal-width face.

Sources: https://developer.spotify.com/documentation/design#fonts, https://www.spotify.com/us/premium/

## Iconography: rules

Encore UI glyphs: filled 16px-grid glyphs scaled to 48px in green for Premium features, 88px line icons in #10B28E on dark green content cards, a 16px icon before every "Premium" eyebrow.

Why it works: The icons are the product's own UI set, so the marketing page and the app share one vocabulary.

|  |  |
|---|---|
| Sizes | 16 / 24 / 48 / 88 px |

- Green 48px glyphs in the feature grid
- Spotify icon 16px before "Premium" eyebrows
- Like is always the + icon (partner rule)
- Don't mix outline and filled styles in one row

Sources: https://www.spotify.com/us/premium/, https://developer.spotify.com/documentation/design#playing-views

## Illustration: rules

Two kinds: frosted, glowing product-UI vignettes on flat color (feature cards, Rive animations) and 3D sculptural figures (the "Wistful Sinking" piece above the feature-grid CTAs).

Why it works: UI vignettes explain features without screenshots; the 3D figure adds art between bands.

|  |  |
|---|---|
| Card art | left 636x509, bleeds to the card edges |

- Product UI is abstracted: blurred panels, glow, grain
- One 3D figure floats alone on the black ground
- Don't use literal app screenshots in feature cards

Real examples, to look at on Spotify's own pages (not for reuse):
- 3D illustration from the Premium page: https://www.spotify.com/us/premium/
- Jam card art at rest: https://www.spotify.com/us/premium/

Sources: https://www.spotify.com/us/premium/

## Photography: rules

Candid, warm, people-first photography: friends in a car, gaming on a sofa, a man on a seaside rock; and real artist moments (Miley Cyrus, Shaboozey, Selena Gomez) captioned with what happened. Artwork rules for partners: never crop, overlay or distort album art; round its corners 4px (small) or 8px (large).

Why it works: Real people and real shows prove the "where fans and artists come together" promise.

|  |  |
|---|---|
| Artwork corners | 4px small and medium devices, 8px large |

- Captions say who and where
- Lifestyle photos get 16px corners; event photos stay square
- Album art: original form, 4px or 8px corners
- Don't crop album artwork
- Don't overlay text or controls on artwork
- Don't place a logo on artwork

Real examples, to look at on Spotify's own pages (not for reuse):
- On the road (Premium page): https://www.spotify.com/us/premium/
- Shaboozey at Spotify House, CMA Fest: https://www.spotify.com/us/premium/

Sources: https://developer.spotify.com/documentation/design#using-our-content, https://www.spotify.com/us/premium/

## Motion: rules

Motion is in the media: the hero film behind the icon window, cycling hero keywords, words rising on scroll, sticky stacking cards, Rive card animations and a glowing 3D icon film. Controls only press (0.15s).

Why it works: Movement reads as music: things keep playing while the layout holds still.

|  |  |
|---|---|
| Button | 150ms cubic-bezier(0.3,0,0,1) |

- Provide a pause control on autoplay video
- Static resting state must read complete
- Don't animate album artwork (partner rule)

Sources: https://www.spotify.com/us/premium/, https://developer.spotify.com/documentation/design#using-our-content

## Interface and layout: rules

A #121212 page of centered bands in a 1120px column with 256px black gaps, a full-bleed hero, saturated 24px-radius cards, staggered edge-bleeding photo rows, and a black footer.

Why it works: Huge gaps and one card per idea keep a long page calm.

|  |  |
|---|---|
| Column | 1120 at x 160 |
| Band gap | 256px |
| Card radius | 24px |

- Center section headers; left-align only the manifesto and the moments row
- 1120 column, 32px gutters
- 256px between most bands (see the measured gap list)
- Two 256px gaps after the manifesto: 256px padding inside its dark band, a hard edge (y 2051 at 1440), then Reserved's own 256px on #121212 (h2 y 2307). At 390: 160px, edge y 1847, 96px, h2 y 1943
- Land every section within 24px of these page-y checkpoints (top-of-page resting state). 1440: hero h1 248, manifesto statement 1538, manifesto band ends (hard edge) 2051, Introducing Reserved h2 2307, Reserved card top 2533, Premium Individual eyebrow 3298, With music that never stops h2 3322, Made for how you listen h2 4707, The best place to listen with your crew h2 6780, Everything you love h2 8216, Listen to Spotify anywhere h2 9262, Shaping the big moments h2 10408, Moments photo row top 10634, Moments photo row bottom (tallest photo + caption) 11288, Spotlight still top (900 tall) 11538, The world is listening here h2 12082, plan names (Individual / Student) 12425, Family name 12937, Audiobooks Access title 13594, footer top 14104, page bottom 14651. 390: hero h1 430, spacer (gradient) starts 953, manifesto band starts 1375, manifesto statement 1391, manifesto band ends (hard edge) 1847, Introducing Reserved h2 1943, Reserved card top 2250, With music that never stops h2 2900, Made for how you listen h2 4206, The best place to listen with your crew h2 6128, Everything you love h2 7613, Listen to Spotify anywhere h2 8995, Shaping the big moments h2 9799, spotlight still (390x366) 10709, The world is listening here h2 10949, first plan card top 11163, Audiobooks Access title 13258, footer top 13767, page bottom 15094
- Rows that run off the edges (Anywhere photos, Moments photos) are clipped inside their own wrapper with overflow: hidden, and html, body get overflow-x: clip. A full-page screenshot must come out exactly 1440 (or 390) wide; in round 2 one off-edge row made it 3114 wide and shrank every slice.
- Plan cards share grid rows across a row (head 194, bullets 130, button 64, fine print 124 at 1440): the button follows the bullets directly; never push it down with margin-top: auto
- Section gaps at 1440 are not uniform: 256 after most sections, 160 after the crew cards, 512 before 'Listen to Spotify anywhere', 378 before 'Shaping', 250 from the moments row to the spotlight still
- Don't add light bands
- Don't crowd cards side by side at desktop (feature cards are full width)

Sources: https://www.spotify.com/us/premium/

## Rules: rules

Partner rules from the public guide: attribute Spotify content with the full logo; dedicate whole rows to Spotify content; at most 20 items per set; always link back to the Spotify app; never pair the Spotify brand with another brand.

Why it works: Licensing: content shown from Spotify must stay attributable and linked.

|  |  |
|---|---|
| Character budgets | playlist/album 25, artist 18, track 23 |

- Attribute with the full logo (icon only as an app icon)
- Max 20 items per content set, with a link to keep exploring in Spotify
- Truncate metadata only if the full text stays reachable
- Don't seat Spotify content next to similar services
- Don't co-brand
- Don't name an app with 'Spotify' in it

Sources: https://developer.spotify.com/documentation/design

## Campaigns

### Spotify Wrapped 2025 (2025)

The annual personalized year-in-review; Spotify published a 149-file media kit for it.

How the system shows: Green "2025 Wrapped" lettering on an off-white ground in the kit header image.
Why it works: Each listener's own data becomes shareable brand content.
Channels: app, social, press. Source: https://newsroom.spotify.com/media-kit/2025-wrapped-media-kit/

### Loud & Clear 2026 (2026)

Spotify's annual report on artist payouts, with its own media kit.

How the system shows: Data storytelling in the brand palette.
Why it works: Backs the "fans and artists" promise with published figures.
Channels: press, web. Source: https://newsroom.spotify.com/media-kit/loud-clear-2026/

## Applications

| Format | What | Source |
|---|---|---|
| website | spotify.com/us/premium: black page, icon-window hero, saturated feature cards, plan grid, black footer. | https://www.spotify.com/us/premium/ |
| partner integration | Attribution, artwork, linking and playing-view rules for third-party apps. | https://developer.spotify.com/documentation/design |
| press | Newsroom media kits with full logo and icon in green, black and white. | https://newsroom.spotify.com/media-kit/logo-and-brand-assets/ |

## By format

How our engine applies Spotify's system to each format. This is our recipe built from their rules, not something Spotify publishes. Level = how far toward the colorful campaign end from the functional partner end. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 3 | Locale bar optional; black 72px nav with white full logo, product links, one green pill; #121212 hero with a 128px ultra-wide white headline over an icon-shaped photo window; centered 64px section heads with 24/300 subs and 256px gaps; full-width 24px-radius feature cards in flat saturated colors; green pill CTAs with fine print; black footer with four uppercase-headed columns and round socials | which feature cards and which photos follow the hero |
| Deck | 3 | #121212 slides, white Mix-style heads, one saturated color per slide, green only for the ask | photo vs UI art |
| Social post | 4 | One saturated ground, white type, logo per colorway rule | color combination |
| Partner UI | 1 | Full logo attribution, unaltered artwork with 4px/8px corners, link labels per guide | layout |

## Checks before anything ships

- **Logo hidden**: Cover the logo. It should still read as Spotify: a #121212 page, a green pill, a wide black headline and saturated rounded cards.
- **Swap test**: Put another company's name on it. If nothing else changed, the icon-window hero, green-only actions and card colors are missing.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Spotify's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- A full Spotify brand book is not public; the public sources are the developer Design & Branding Guidelines and the newsroom logo kit
- Spotify Mix and Spotify Mix Title are proprietary; Unbounded, Bricolage Grotesque and Hanken Grotesk are calibrated stand-ins, not identical (Unbounded needs a horizontal scale to match the stretched hero cut)
- A color ratio is not published (the proportion shown is our estimate from the page)
- Feature-card colors, plan colors and greys are observed on the page, not published
- Feature-card art is a Rive animation; the images are captures of its resting state, not source files
- Exact responsive breakpoints were not measured (only 390 and 1440)
- Icon grid and stroke rules are not published
- Motion durations other than the 150ms button press are not published
- Voice and tone guidance for marketing copy is not published

Logos and reference images belong to Spotify. Look at them on Spotify's own pages; don't reuse them.