---
title: "BRAND Spotify 2026 · Page: product-marketing"
url: https://memocore.ai/memos/6ae42f8ecb977478f04eb82b
project: "Brand Styles"
tags: "brand-spotify"
updated_at: "2026-10-30T06:34:34.971Z"
---

# BRAND Spotify 2026 · Page: product-marketing

HEADER
brand: Spotify; design_date: 2026-10; page_type: product-marketing; variants: pricing section inside
region: US. Via Google Translate proxy; proof "country":"US", "market":"us", query market us, title "Spotify Premium (USA)", prices $12.99, $6.99, $18.99, $21.99. The market comes from the /us/ path; the proxy exit geolocates TW and third-party OneTrust saw TW.
example_urls: https://www.spotify.com/us/premium/; evidence: measured on that URL 2026-10-30 unless marked
purpose: sell Premium; start checkout
skeleton: container 1408 + padding 160, 11 sections, total height desktop 14605, mobile 15087; sidebar none
overrides: dark base set, background --background-base #121212; section-level colour via background container

SECTIONS
S0 chrome / announcement-bar + header
  background: #0d72ea then #000; height: about 56 (est) then 72
  layout: full width; header container full width
  elements: "United States (Spanish)" link 14, close; logo, Premium plans, Support, Download, divider, Sign up, Log in, green pill "Try 2 months for $0" 16/700 padding 8 32
  copy: as listed
  media: logo placeholder
  motion: see INTERACTIONS: header links, header CTA, dropdown
  responsive: under 992 hamburger and compact CTA
S1 hero / 3d-scene - sell in one line
  background: #121212 with video behind a logo-shaped hole; height: 100vh in a 150vh container
  layout: text left, padding 100 25; symbol right, 53% of width
  elements: H1 3 lines, countdown chip, 2 buttons, legal 12px grey, pause button at lower right
  copy: "The ultimate home for music | artists | fans | live events | videos", "Offer ends in 3 days", "Try 2 months for $0", "View all plans"
  media: [VIDEO full-bleed]
  motion: Recipe: scrolling-hero; buttons and pause control: see INTERACTIONS
  responsive: under 1024 symbol above centered H1 2.5rem, stacked full-width buttons
S2 content / manifesto over video
  background: fading video; padding: large, left aligned
  layout: text left, max width about 760 (est)
  elements: H2 "As the world's music hub, Spotify is where fans and artists come together." 40-48/400 (est), second paragraph 28/400 (est)
  copy: 2 paragraphs
  media: video continues
  motion: Recipe: scrolling-hero
  responsive: smaller, centered
S3 features / single feature card - Reserved
  background: #121212; padding: 256 / 0
  layout: centered header, then one card 1120 wide (est at 1440), height 640 base, radius 24
  elements: H2 64/700, subtitle 20/400, card #576dd6 with ticket graphic left and text right: badge "Premium", H3 32/700, text 16, legal 12
  copy: "Introducing Reserved", "Concert tickets, saved for real fans"
  media: Rive animation [PRODUCT GRAPHIC]
  motion: Recipe: scroll-sections
  responsive: card height 530, graphic on top
S4 features / feature-grid 4 cols - plan benefits
  background: #121212; padding: 256 / 0
  layout: logo badge, H2, 4 columns, then CTA row
  elements: icons 48 white-to-green, title 16/700, text 14 #b3b3b3; 2 buttons; legal 12 centered, max width 428
  copy: "With music that never stops", "Ad-free music listening", "Lossless music", "Offline listening", "Play songs in any order"
  media: icons only
  motion: none (est)
  responsive: 2 columns; icons 24
S5 features / feature card deck - how you listen
  background: #121212; padding: 256 / 128
  layout: centered header, cards stacked
  elements: H2, subtitle, cards blue #0d72ea, orange #d64000, violet-blue (est) with graphic left and text right
  copy: "Made for how you listen", "DJ spins tracks just for you", "Watch where you listen with just one tap"
  media: Rive scenes
  motion: Recipe: scroll-sections
  responsive: no pin; height 500
S6 features / feature card deck - listen together
  background: #121212; padding: 128 / 160
  layout: as S5
  elements: pink #cc2faf and teal #088569 cards
  copy: "The best place to listen with your crew", "Play any song with friends in real time with Jam", "Discover your taste match with Blend"
  media: Rive scenes
  motion: Recipe: scroll-sections
  responsive: as S5
S7 features / content cards 3 cols
  background: #121212
  layout: centered header, 3 cards, height 340 at 1200-1599, padding 24, radius 24
  elements: badge "Premium" 88 x 22, icon 88 #10b28e, title 20/700, text 16 rgba(255,255,255,.7)
  copy: "Everything you love, right here", Fitness, Audiobooks, Podcasts
  media: icons
  motion: none (est)
  responsive: stacked, height 320, title 24, text 14
S8 features / stacked gallery
  background: changes to #4100f4
  layout: 36% text, 64% image stack, images radius 24, aspect 4/3
  elements: H2 "Listen to Spotify anywhere", subtitle, 3 steps with title and text
  copy: "On the road", "On the go", "At home"
  media: [LIFESTYLE PHOTO 4:3]
  motion: Recipe: scroll-sections
  responsive: images and text stacked
S9 features / horizontal gallery - culture
  background: #4100f4; min-height 100vh; margin 100 auto
  layout: H2 centered, drifting row of mixed landscape and portrait photos at different vertical offsets
  elements: photos radius 8, captions 16
  copy: "Shaping the big moments in music"
  media: [EVENT PHOTO]
  motion: Recipe: scroll-sections
  responsive: heights 200 and 250
S10 conversion / pricing tiers + spotlight
  background: #121212 with a looping symbol video at the top; padding-top 34em
  layout: H2 centered, subtitle, CTA text; plan cards in 3 columns at 1440, Family wraps to a second row; card radius 24, bg #1f1f1f (est), padding 48 24 24
  elements: top-left colour tab "$0 for 2 months"; Premium badge; plan name 32/700 in plan colour; price 24/700; subtext 14; rule; bullets 16; full pill CTA in plan colour, 320.7 wide; legal 12
  plan colours (est): Individual #1ed760, Student #9bf0e1, Duo #ffb18f, Family #c5a7f5
  copy: "The world is listening here.", "Join the party with Premium.", "Try 2 months for $0", "Try 1 month for $0", "Get Premium Duo"
  media: [VIDEO] loop
  motion: plan CTA: see INTERACTIONS; hover on the plan card itself not recorded, est none
  responsive: single column, min-height 727 each at some widths
S11 conversion / small plan, then footer
  background: #121212; then #000
  elements: "Audiobooks Access" card, legal, "Or sign up to Spotify for free." underlined; footer as Overview
  copy: as listed
  motion: footer links: see INTERACTIONS
  responsive: footer stacks

PAGE COMPONENTS
Plan card, feature card, content card: above. Section header: H2 margin-bottom 40 desktop, 24 mobile; sizes 48 mobile, 64 at 1200, 96 at 1728.

INTERACTIONS
- id: mk.header-link
  element: Support (recorded); footer link About (recorded); other header and footer text links by the same component
  trigger: hover
  open: color -> #1ed760 with no transition
  close: no transition
- id: mk.header-cta
  element: green pill in the header
  trigger: hover
  open: inner span background #1ed760 -> #3be477 and none -> scale(1.04), 150ms, cubic-bezier(.3,0,0,1); slower than the player buttons
  close: 150ms, same curve
- id: mk.hero-secondary
  element: "View all plans"
  trigger: hover
  open: inner background transparent -> #000, 50ms; anchor scale 1.04, 50ms, same curve
  close: 150ms, same curve
- id: mk.plan-cta
  element: full width plan button
  trigger: hover
  open: outer stays scale(1); inner scale 1.04, 50ms, same curve; colour moves to the plan highlight, seen on Duo #ffa178
  close: 150ms, same curve
- id: mk.pause
  element: hero pause control 48
  trigger: hover
  open: background #ffffff1a -> #2a2a2a, scale 1.05, shadow 0 4px 12px #00000026, all 200ms, ease-in-out
  close: same, 200ms
  children: click pauses the hero video
- id: mk.dropdown
  element: Premium plans menu
  trigger: hover; click also toggles it
  open: no animation, class mh-open; box 350 x 470 at x 599 y 127; items 350 x 117.5
  children: item background-color .2s; hover text #1ed760
  close: no animation
Scroll scenes: Recipe: scrolling-hero; Recipe: scroll-sections.

STATES
Countdown text changes by date. Logged-in eligibility changes CTA text. Not captured. Press and keyboard focus on this page: not recorded, Overview state table applies by component.

SCREENSHOTS
- file: spotify_2026_product-marketing_d1440_s1-hero.jpeg
  shows: S0-S1, 1440x900, scroll 0
  source: live, US via proxy, 2026-10-30
  key values: H1 128px measured; CTA #1ed760
  do not copy: logo, video
- file: spotify_2026_product-marketing_d1440_s2-manifesto.jpeg
  shows: S2, scroll 1420
  source: live, US via proxy, 2026-10-30
  key values: white text on dimmed video
  do not copy: video, copy
- file: spotify_2026_product-marketing_d1440_s3-reserved.jpeg
  shows: S3, scroll 2230
  source: live, US via proxy, 2026-10-30
  key values: card #576dd6 radius 24
  do not copy: graphic, copy
- file: spotify_2026_product-marketing_d1440_s4-features.jpeg
  shows: S4, scroll 3240
  source: live, US via proxy, 2026-10-30
  key values: 4 columns; icons 48
  do not copy: copy
- file: spotify_2026_product-marketing_d1440_s7-content.jpeg
  shows: S7, scroll 8120
  source: live, US via proxy, 2026-10-30
  key values: cards #035341; icon #10b28e
  do not copy: copy
- file: spotify_2026_product-marketing_d1440_s10-plans.jpeg
  shows: S10 plan cards, scroll 12150
  source: live, US via proxy, 2026-10-30
  key values: prices $18.99, $21.99; radius 24
  do not copy: copy
- file: spotify_2026_product-marketing_d1440_s11-footer.jpeg
  shows: S11 and footer, end of page
  source: live, US via proxy, 2026-10-30
  key values: footer #000; headings #919496
  do not copy: logo
Note: the page is captured in viewport parts because pinned and fixed layers break a full-page capture.