BRAND Spotify 2026 · Page: landing-campaign

HEADER brand: Spotify; design_date: 2026-10; page_type: landing-campaign; variants: other plan pages (/us/family, /us/duo, /us/student) share the same template family with pastel bands, not described here region: US. Via Google Translate proxy; proof "country":"US" in page state, title "... - Spotify (US)". Market comes from the /us/ path. example_urls: https://www.spotify.com/us/free/; evidence: measured on that URL 2026-10-30 unless marked purpose: get a free signup skeleton: container 1170, 5 sections, total height desktop 3206, mobile 3837; sidebar none overrides: encore-light-theme on content; header and footer stay #000 SECTIONS S0 chrome: announcement bar, header (Sign up, Log in, no green CTA): as Overview S1 hero / full-bleed-image - offer background: photo cover, center 40%; height: min 528 desktop, 450 mobile layout: centered column, content at the middle lower part; text white elements: H1 2 lines, white pill 48 "Sign up free" copy: "Play millions of songs and podcasts for free" about 8 words; H1 about 48/900 (est), mobile 32 (est) media: [LIFESTYLE PHOTO full-bleed], dark at both sides motion: white pill scale 1.04, see INTERACTIONS; no entrance responsive: min height 450, text at bottom S2 features / feature-grid 4 cols background: #ffffff; padding: 75 / 75, mobile 35 / 35 layout: 4 columns 270 wide, space-between, centered text; mobile icon left 142 and text right elements: H2 "Why Spotify?" 40/46/900, tracking -.6px, mobile 28/32, margin-bottom 72; icon 142 x 142 green circle with white glyph, margin-bottom 40; title 21/1.3 bold; text 16/1.5 width 85% copy: "Play your favorites", "Playlists made easy", "Make it yours", "Save mobile data" media: icon images motion: none responsive: under 768 list layout S3 conversion / solid band background: #1ed760; padding: 75 top; text black layout: centered headline, illustration bottom-aligned, width about 420 elements: headline 40/900 "It's free. No credit card required."; illustration of colourful faces copy: 2 short sentences media: [ILLUSTRATION colourful] motion: none responsive: smaller headline, 2 lines S4 content / faq accordion background: #ffffff layout: H2 centered 40/46/900; list width 970 (est) elements: 3 rows, 78.5 tall closed; row 18/900, padding 26 28, border-bottom 1px, chevron 24; answer padding 15 32 32; open height 302 in the sample copy: "How do I create a playlist?", "Got questions?" motion: see INTERACTIONS, faq responsive: text wraps S5 conversion / cta-band image-bg background: photo cover, center 35%; height: min 450 at >=992, 432 at >=768 layout: centered elements: H2 white 40/900 (est), white pill "Sign up free" copy: "Ready? Let's play." media: [LIFESTYLE PHOTO] motion: white pill scale 1.04 in 50ms responsive: mobile image variant PAGE COMPONENTS Green icon circle, solid band. Footer: Overview. INTERACTIONS - id: faq.toggle element: native details row trigger: click open: no transition: content appears in one frame, chevron flips in one frame (rotate(180) closed, none open) close: same, one frame children: summary hover background -> #f5f5f5, instant keyboard: native details reduced motion: same - id: free.cta element: white pill trigger: hover open: scale 1.04, 50ms, cubic-bezier(.3,0,0,1); recorded on the closing CTA, with no colour change recorded close: 150ms by the shared button rule (code) STATES none. SCREENSHOTS - file: spotify_2026_plan-free_d1440_part1.jpeg shows: S0-S2 start, 1440x900, scroll 0 source: live, US via proxy, 2026-10-30 key values: hero 528; white pill do not copy: photo - file: spotify_2026_plan-free_d1440_part2.jpeg shows: S2-S3, scroll 780 source: live, US via proxy, 2026-10-30 key values: circles 142 #1ed760; band #1ed760 do not copy: illustration - file: spotify_2026_plan-free_d1440_part3.jpeg shows: S4-S5, scroll 1600 source: live, US via proxy, 2026-10-30 key values: row 18/900; H2 40/46/900 do not copy: photo - file: spotify_2026_plan-free_m390_full.jpeg shows: full page at 390 source: live, US via proxy, 2026-10-30 key values: list layout; footer stacked do not copy: photo, illustration Note: a desktop full-page capture came out white below the first screen, so the page is split into viewport parts.