---
title: "BRAND Spotify 2026 · Overview"
url: https://memocore.ai/memos/6ae42f2acb977478f04eb827
project: "Brand Styles"
tags: "brand-spotify"
updated_at: "2026-10-30T06:32:14.176Z"
---

# BRAND Spotify 2026 · Overview

HEADER
brand: Spotify; domain: spotify.com, open.spotify.com, accounts.spotify.com; industry: music streaming; design_date: 2026-10
captured: 2026-10-30
region by page:
- US (via Google Translate proxy, proof "country":"US", "market":"us", USD prices; signup also "geoCountry":"US", "countryCode":"US"): product-marketing, landing-campaign (Free), download, signup variant of login. The market comes from the /us/ URL path; the proxy exit itself geolocates TW.
- JAPANESE CONTENT (direct connection from Japan, market JP, UI in English, agreed with the user; through the proxy the config says market US but shelves are the same Japanese content, because the API is called from the browser): home, detail-view, artist, search-results. Mobile promo there shows yen prices; the US proxy version showed "Try 2 months for $0", "Only $12.99/month".
- NO COUNTRY MARKER (accounts.spotify.com via proxy, not proven): login form.
evidence: measured on those URLs on 2026-10-30 unless marked. Tokens come from the CSS files; computed values were read in the browser for hashed client-rendered classes. Motion in the MOTION section was recorded live from transitionrun and animationstart events unless marked (code).
style_tags: dark-first, editorial (Premium), card-ui (player)
viewports: desktop 1440, mobile 390; breakpoints: Encore 768; marketing 768, 992, 1024, 1200, 1310, 1728; player container queries 600 and 1024 of main view; player body min width 800 (below it the mobile web layout)
pages: Page: home, Page: product-marketing, Page: detail-view, Page: artist, Page: search-results, Page: login, Page: landing-campaign, Page: download
recipes: Recipe: play-button, Recipe: app-shell, Recipe: card-shelf, Recipe: entity-header, Recipe: scrolling-hero, Recipe: scroll-sections
not captured: logged-in states (library content, now-playing bar, queue, lyrics, playing state); no login was used
rebuild check: passed 2026-10-30 (player first screen and Premium hero with Reserved section, 1440 and 390, built only from these memos; remaining differences are substituted fonts and images, sidebar legal links and small mobile spacing)

RECOGNITION KEYS
1 Near-black surfaces: #121212 panels on a #000 frame, with one saturated green #1ed760 reserved for the main action.
2 Every button is a full pill; hover scales it to 1.04 in 50ms, leaving relaxes in 150ms, press returns to 1 at once.
3 Round green play button, 48 or 56, black triangle icon; it rises into cover corners on hover.
4 Text is white and #b3b3b3 only on dark; titles are bold (700-800) in a tight rounded grotesk.
5 Player layout: floating panels with radius 8 and an 8px black gap.
6 Page colour follows content: headers take the cover colour, marketing sections switch to saturated solid colours.
7 Premium headline is extra wide, weight 900, with one italic word that changes.
8 Square covers radius 4-6 with a heavy soft shadow; artists are perfect circles on desktop.

GUARDRAILS
no sharp button corners; no outlined primary action; no green text blocks or green backgrounds in the player (green is for actions and active states); no thin or light headlines; no pure white page in the player; no borders between panels; no gradients on buttons; no equal enter and leave durations on buttons; the 2010s Circular wordmark era and the 2015 duotone hero are not part of this design (inf); no icons with colour fills in the player except the green accent.

TOKENS
/* color: dark base set (player, Premium) */
--background-base: #121212; --background-highlight: #1f1f1f; --background-press: #000000;
--background-elevated-base: #1f1f1f; --background-elevated-highlight: #2a2a2a; --background-elevated-press: #191919;
--background-tinted-base: #ffffff1a; --background-tinted-highlight: #ffffff24; --background-tinted-press: #ffffff36;
--text-base: #ffffff; --text-subdued: #b3b3b3; --text-bright-accent: #1ed760; --text-negative: #f3727f; --text-warning: #ffa42b; --text-positive: #1ed760; --text-announcement: #539df5;
--essential-base: #ffffff; --essential-subdued: #7c7c7c; --essential-bright-accent: #1ed760; --essential-negative: #ed2c3f; --essential-warning: #ffa42b; --essential-announcement: #1278f2;
--decorative-base: #ffffff; --decorative-subdued: #292929;
/* color: sets */
--set-accent-bg: #1ed760; --set-accent-highlight: #3be477; --set-accent-press: #1abc54; --set-accent-text: #000000;
--set-inverted-light-bg: #ffffff; --set-inverted-light-highlight: #f0f0f0; --set-inverted-light-press: #c7c7c7; --set-inverted-light-text: #000000; --set-inverted-light-subdued: #5a5a5a;
--set-frame-bg: #000000; --set-frame-highlight: #141414; --set-frame-press: #2b2b2b; --set-frame-subdued: #a9a9a9;
--set-over-media-bg: #0000008a; --set-over-media-highlight: #00000094; --set-over-media-press: #000000ad;
--set-announcement-bg: #0d72ea; --set-announcement-highlight: #0c69d8; --set-announcement-press: #0951a6;
--set-negative-bg: #e91429; --set-warning-bg: #ffa42b;
/* color: light base set (Free, Download bands) */
--light-background-base: #ffffff; --light-background-highlight: #f5f5f5; --light-background-press: #e2e2e2; --light-text-base: #000000; --light-text-subdued: #656565; --light-text-accent: #107434; --light-essential-subdued: #818181; --light-decorative-subdued: #dedede;
/* color: marketing */
--section-violet: #4100f4; --card-blue: #0d72ea; --card-orange: #d64000; --card-periwinkle: #576dd6; --card-pink: #cc2faf; --card-teal: #088569; --card-forest: #035341; --footer-muted: #919496;
--signup-gradient: linear-gradient(90deg, #af2896, #509bf5);
/* font */
--font-display: SpotifyMixUITitle, sans-serif; --font-display-wide: SpotifyMixUITitleVariable, sans-serif; --font-text: SpotifyMixUI, sans-serif; --font-mono: SpotifyMixMono, monospace;
/* type scale: size; mobile <=767 in comments */
--type-headline-large: 96px/normal/800; /* 48px */
--type-headline-medium: 64px/normal/700; /* 40px */
--type-title-large: 48px/normal/700; /* 32px */
--type-title-medium: 32px/normal/700; /* 24px */
--type-title-small: 24px/normal/700; /* 20px */
--type-title-extra-small: 20px/normal/700; /* 18px */
--type-body: 16px/normal/400; --type-body-bold: 16px/normal/700;
--type-small: 14px/normal/400; /* 13px */ --type-small-bold: 14px/normal/700;
--type-marginal: 12px/normal/400; /* 11px */ --type-marginal-small: 10px/normal/400; /* 9px */
/* space and layout */
--space: 2 4 6 8 12 16 24 32 48 64 96 128; /* mobile: 2 4 6 8 12 16 20 24 32 40 48 64 */
--container-marketing: 1408px; --container-padding: 160px; /* tablet 690 + 72, mobile 358 + 16 */
--container-legacy: 1170px; /* 970 at >=992, 750 at >=768 */
--panel-gap: 8px; --content-spacing: clamp(16px, 16px + (100cqw - 600px) / 424 * 8, 24px); --content-max: 1955px;
--layout-margin: 24 32 64; /* mobile 16 16 24 */
/* shape */
--radius-button: 9999px; --radius-input: 4px; --radius-card: 8px; --radius-cover: 6px; --radius-cover-small: 4px; --radius-panel: 8px; --radius-marketing-card: 24px; --radius-modal: 8px; --radius-pill: 9999px;
--border: 1px solid #7c7c7c;
/* size */
--control-small: 32px; --control-medium: 48px; --control-large: 56px; --icon: 12 16 24 32 40 48 64 88;
/* depth */
--shadow-overlay: 0 4px 12px 0 #0000004d; --shadow-cover: 0 8px 24px #00000080; --shadow-cover-large: 0 4px 60px #00000080; --shadow-play: 0 8px 8px #0000004d; --shadow-menu: 0 16px 24px #0000004d, 0 6px 8px #00000033;
/* motion */
--ease-standard: cubic-bezier(.3,0,0,1); --ease-enter: cubic-bezier(0,0,.2,1); --ease-exit: cubic-bezier(.8,0,1,1);
--dur-1: 50ms; --dur-2: 100ms; --dur-3: 150ms; --dur-4: 200ms; --dur-5: 250ms; --dur-6: 300ms;
--opacity-disabled: .3; --opacity-active: .7;
/* focus */
--focus-ring: 2px solid #ffffff, offset -2px (primary -4px); /* newer Encore .button only, code; the legacy buttons seen live show the browser default ring */
dark_mode: dark is the default in the player and on Premium; light set on Free and Download bands; no toggle

FONTS
display: Spotify Mix UI Title, proprietary, weights 700 and 800, self-hosted from encore.scdn.co. Alternative (inf): Figtree 800, tracking -0.02em.
wide display: SpotifyMixUITitleVariable, weight axis 100-1000, font-stretch 50%-150%, used at weight 900 and stretch about 156% computed on the Premium headline. Alternative (inf, checked in the rebuild): Archivo at wdth 125, weight 900, size about 6% larger (136px for 128px) and line-height 1.1, because it is narrower.
text: Spotify Mix UI, proprietary, weights 400 and 700. Alternative (inf): Figtree 400/700.
mono: Spotify Mix Mono, proprietary, 400, rarely used. Alternative: JetBrains Mono.
non-Latin fallbacks: CircularSp-Arab, -Hebr, -Cyrl, -Grek, -Deva. Footers and legacy templates also use SpotifyMixUI at weight 900.

TYPOGRAPHY RULES
Page and shelf titles: 24/700 Title font. Entity titles fit to width between 96 and 48 (or smaller) in weight 800. Body and card titles 16/400, card and meta text 14/400 #b3b3b3. Marketing section headers: 64px at >=1200 (3rem below), 96px at >=1728, weight 700-900, centered. No uppercase except footer column headings (12/900, tracking .08em) and small badges. Sentence case for everything else. Text links underline on hover.

COLOR RULES
Player: about 95% near-black, white text, green only for the play action, "active" states and the positive state. Marketing: dark default with a sequence of saturated solid sections; violet #4100f4 for gallery chapters; cards each with their own colour. Free and Download switch to white bands with one green band #1ed760 with black text. Header and footer stay #000 on all pages. Announcement bar #0d72ea.

LAYOUT
player: see Recipe: app-shell. Content inside the main view: padding-inline 40 at 1440 (24 content spacing + 16 shelf), shelves separated by 24, grids with auto-fill and min column width.
Premium: container 1408 with padding 160 at >=1200; section vertical padding 256 desktop, 128 tablet, 96 mobile; centered headers.
legacy templates (Free, Download): container 1170, section padding 75 desktop, 35 mobile.
density: comfortable in the player, airy on Premium. alignment: left in the player, centered in marketing. Typical composition: horizontal shelves; centered stack; split card 800/1408 graphic with text.

SHAPE AND DEPTH
Buttons and chips pill. Covers radius 4-6. Panels and promo cards 8. Marketing cards 24. Inputs 4 on forms, pill for the search. Shadows only on covers, floating play button and overlays. No hairlines except track table and accordion dividers (#292929 on dark, #ffffff24 tinted). No textures.

COMPONENTS
Timings for every state: MOTION, state table.
button-primary: pill, inner bg --background-base of its set; green set #1ed760 with black text 16/700, or white set with black text; small height 32 padding-x 16, medium height 48 padding-x 32, large height 56 padding-x 48
  hover: bg highlight (#3be477 or #f0f0f0), scale 1.04
  focus-visible: browser default ring on legacy buttons (live); 2px white outline, offset -4 on the newer .button (code)
  active: bg press (#1abc54 or #c7c7c7), scale 1
  disabled: opacity .3, no scale
button-secondary: transparent, 1px solid currentcolor with #7c7c7c border, text white 16/700; hover border #ffffff, scale 1.04; active opacity .7, scale 1; disabled opacity .3
button-tertiary: transparent, text #b3b3b3 14-16/700; hover text #ffffff, scale 1.04; active opacity .7, scale 1
icon button: 32, 48, 56 circle, same states
play button: Recipe: play-button
text link: inherit colour, underline on hover, instant in the player; standalone #b3b3b3, hover underline
chip: pill, min-height 32, padding 4 12, 14/400; bg #ffffff1a, selected white with black text; hover #ffffff24, selected hover #f0f0f0; no scale; gap 8
card: Recipe: card-shelf
promo card: bg #1f1f1f, radius 8, padding 16 20, title 16/700, text 14, white small pill button
track row: see Page: detail-view
input: 324 x 48, bg #121212, inset 0 0 0 1px #7c7c7c, radius 4, padding 12, 16px; hover inset #ffffff; focus 3px white inset (focus width token 3 on field chrome, code); error #f3727f text; label above 14/700
search input: Recipe: app-shell
accordion: Free: native details, row 18/900 padding 26 28, border-bottom 1px, chevron 24 rotates 180, instant; Encore version: open and close 300ms productive, content opacity 0 -> 1 (code)
dialog: bg #282828, radius 8, overlay #000000b3, title 24/700, close icon round
context menu: 250 x 249 on the "..." button, bg #282828, radius 4, --shadow-menu; items 242 x 40, radius 2, text rgba(255,255,255,.9)
tooltip: 14px white, bg #282828 (tooltip var), shadow --shadow-overlay, radius 4 (est)
toast and skeleton: not seen; est skeleton bg #1f1f1f
countdown chip: bg #ffffff1a, radius 4, 14px white, bell icon

GLOBAL CHROME
marketing header: #000, min-height 54; nav height 52, 64 at >=992, 72 at >=1200; relative (not sticky); logo white left; right: Premium plans, Support, Download 16/700 white, 1px divider, Sign up, Log in (white), optional green pill "Try 2 months for $0" 206 x 38 (padding 8 32, shorter than the medium button); hover text #1ed760, instant; Premium plans opens a dropdown.
marketing dropdown: opens on hover with no animation, a click also toggles it; box 350 x 470, items 350 x 117.5, item background-color .2s, hover text #1ed760.
marketing mobile menu: under 992, hamburger with compact green CTA next to it; right panel 447 wide max 100vw, full height, #000, padding 32, overlay rgba(0,0,0,.75); big bold links; plan rows on #1f1f1f cards; thin rule, then Sign up, Log in; logo at the bottom.
marketing footer: #000, padding 80 0 50 at >=992, 32 0 20 below; five columns (logo, Company, Communities, Useful links, Spotify Plans); headings 12/900 #919496 tracking .08em; links 16/400 white, hover #1ed760 instant; social icons 40 circles #222326 at the right; bottom row 12px #919496 legal links, country "USA" and © 2026 Spotify AB; mobile stacked.
announcement bar: #0d72ea, link "United States (Spanish)" 12 underlined, close icon at right; full width, about 56 tall (est).
player chrome: Recipe: app-shell.
cookie banner: third party (OneTrust), white strip at bottom; hidden in captures.

IMAGERY AND ICONS
hero media: full-bleed video of artists and fans in a logo mask; photos full-bleed with text over them on Free and Download. Photography: candid people, close crops, warm or saturated light, headphones, phones. Illustrations: bold 3D-ish graphic objects, cherries with sunglasses, colourful faces. Product visuals: animated Rive UI scenes on colour cards. Covers: square, heavy shadow. Icons: Encore filled and stroke set, 16 and 24, white on dark; 48 in the feature grid on Premium; 142 green circles with white glyphs on Free. Terms: Media, Assets & Legal.

MOTION
intensity: expressive on Premium, functional in the player
core rule: a control answers in 50ms and relaxes in 150ms, cubic-bezier(.3,0,0,1). Press drops the scale to 1 at once. Links, track rows and menus have no transition at all. Plates and surfaces are slower than the controls on them (200-300ms).
scroll reveal: none in the player; Premium uses scrubbed scenes, text rise 80px .6s power2.inOut in the stacked gallery
signature motion: play button (Recipe: play-button); card plate and rise (Recipe: card-shelf); keyword slot and logo mask (Recipe: scrolling-hero); colour chapters and card deck (Recipe: scroll-sections)
page transitions and loading: SPA in the player, images fade 250ms ease-out; hard load in marketing
reduced motion: button scale off, card rise and smooth scroll off (code), GSAP scenes skipped, gallery becomes native scroll

STATE TABLE (element: hover in / hover out / press / focus). Curve is cubic-bezier(.3,0,0,1) unless named. Press values with "CSS" are rule values, the rest were recorded live.
play and green primary: scale 1.04 + #1ed760 -> #3be477 in 50ms / back in 150ms / scale 1 at once, #1abc54 CSS / browser ring, tooltip. Detail: Recipe: play-button
white primary (Log in, Create playlist, Sign up free): scale 1.04 + #fff -> #f0f0f0 in 50ms / back in 150ms / scale 1, #c7c7c7 CSS
secondary (language, Follow, social login): scale 1.04 + border #7c7c7c -> #fff in 50ms / back in 150ms / opacity .7, scale 1 at once
tertiary and icon (shuffle, add, more, nav): scale 1.04 + #b3b3b3 -> #fff in 50ms / back in 150ms / opacity .7, scale 1 at once; on release scale 1 -> 1.04 in 50ms
home button: #1f1f1f -> #2a2a2a in 200ms ease-in-out; scale 1.04 with no transition, because its transition list has only background and color / same 200ms
search pill: 220ms ease-in: #1f1f1f -> #2a2a2a, inset 1px #ffffff1a, icon -> #fff; hints fade 220ms ease-in-out / same reversed / - / inset 2px #fff in 220ms ease-in
chip: unselected #ffffff1a -> #ffffff24 in 50ms; selected #fff -> #f0f0f0 in 50ms; no scale / back in 150ms. Click: new chip -> #f0f0f0 and black text in 50ms, old chip -> #ffffff1a and white text in 150ms
card plate: inset 12 -> 0, transparent -> #1f1f1f in 200ms / same 200ms / inset -4, #000 CSS. Detail: Recipe: card-shelf
top result card: #181818 -> #282828 in 300ms ease / same
carousel chevrons: container opacity 0 -> 1 in 150ms ease-out / same; button #1f1f1f -> #2a2a2a, 150ms ease-out (code)
track row: bg #ffffff1a, index -> play icon, white text, add and more appear, no transition / no transition on the row; more and add colour 150ms
text links (title, subtitle): underline, no transition
browse tile: no motion except title underline
tooltip: fade in 200ms ease-in-out after showDelay (Play 1000ms); no exit recorded
context menu: opens and closes with no animation; Esc closes
language dialog: no animation recorded; overlay rgba(0,0,0,.7)
logged-out play dialog: overlay fade 200ms ease; panel rise 20px 400ms delay 150ms ease-in-out; colour 500ms ease; no exit animation
sticky bar content: visibility and opacity 0 -> 1 in 500ms ease
overlay scrollbar: visibility and opacity 200ms ease on pointer in and out
marketing header link and footer link: #1ed760 with no transition
marketing header CTA: scale 1.04 + #1ed760 -> #3be477 in 150ms both ways, not 50
marketing hero secondary: inner bg transparent -> #000 in 50ms, scale 1.04 in 50ms / back in 150ms
marketing plan CTA: inner scale 1.04 in 50ms, Duo colour hover #ffa178 / back in 150ms
marketing hero pause control: 200ms ease-in-out both ways: bg #ffffff1a -> #2a2a2a, scale 1.05, shadow 0 4px 12px #00000026
login input: inset #7c7c7c -> #fff in 50ms

RESPONSIVE
Encore switches sizes at 768 (see TOKENS). Player: below 800 another layout: top bar with Open App, bottom tab bar, single column, cards 152. Premium: 1024 hero switches from left text and right logo to centered logo above the text; cards unpin; 1200 and 1728 raise headers. Marketing header switches to hamburger at 992. Footer stacks under 768.

CONTENT AND VOICE
headline style: short benefit sentence ("Made for how you listen", "Play millions of songs and podcasts for free"). Body: one or two plain sentences. Tone: confident, friendly. CTA samples: "Try 2 months for $0", "View all plans", "Sign up free", "Log in". Sentence case, no exclamation marks in main copy.

SUBSTITUTIONS
fonts: Figtree and Archivo at wdth 125; logo: [LOGO] placeholder or own mark; covers: colored squares [COVER 1:1]; videos: [VIDEO]; photos: [PHOTO]; hero mask: an own round shape.

TECH
Marketing and signup: Next.js, CSS modules, styled-components on older templates, GSAP with ScrollTrigger, Rive. Masthead and footer: Svelte widget. Player: React with webpack, hashed CSS modules, Encore library, OverlayScrollbars, scroll-driven animations. Consent: OneTrust.

SCREENSHOTS
- file: spotify_2026_overview_d1440_states.jpeg
  shows: state sheet of the player: card, white primary, secondary, search, chips, at rest, hover, focus and active
  source: live, Japan market, direct, 2026-10-30; active frames are the CSS rule values applied by script because :active cannot be held in a capture
  key values: plate #1f1f1f; #f0f0f0; #c7c7c7; inset 2px #fff; #ffffff24
  do not copy: covers
- file: spotify_2026_overview_d1440_header-dropdown.jpeg
  shows: Premium plans dropdown open on the marketing header
  source: live, US via proxy, 2026-10-30
  key values: box 350 x 470; item 117.5 tall
  do not copy: logo
- file: spotify_2026_context-menu_d1440_open.jpeg
  shows: context menu on the "..." button
  source: live, Japan market, direct, 2026-10-30; cookie banner hidden
  key values: 250 x 249; #282828; radius 4
  do not copy: covers, names
- file: spotify_2026_home_d1440_top.jpeg
  shows: player first screen, 1440x900, scroll 0, default
  source: live, Japan market, direct, 2026-10-30; cookie banner hidden
  key values: frame #000; main #121212; gap 8; Log in pill 108 x 48
  do not copy: logo, covers, names
- file: spotify_2026_home_m390_top.jpeg
  shows: mobile player first screen, 390x844
  source: live, Japan market, direct, 2026-10-30; yen promo; cookie banner hidden
  key values: Open App 93 x 32; tab bar 70
  do not copy: logo, covers
- file: spotify_2026_product-marketing_d1440_s1-hero.jpeg
  shows: Premium first screen, 1440x900
  source: live, US via proxy, 2026-10-30
  key values: announcement #0d72ea; header #000; green CTA #1ed760
  do not copy: logo, video
- file: spotify_2026_card-shelf_d1440_hover.jpeg
  shows: card hover frame with plate and play button
  source: live, Japan market, direct, 2026-10-30
  key values: plate #1f1f1f; play #3be477
  do not copy: covers
- file: spotify_2026_overview_m390_menu-marketing.jpeg
  shows: marketing mobile menu open, 390x844
  source: live, US via proxy, 2026-10-30
  key values: panel #000; plan rows #1f1f1f; big bold links
  do not copy: logo
- file: spotify_2026_overview_d1440_language-dialog.jpeg
  shows: dialog on the player, 1440x900
  source: live, Japan market, direct, 2026-10-30
  key values: dialog #282828 radius 8; overlay #000000b3
  do not copy: logo