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