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.