---
title: "BRAND Spotify 2026 · Page: landing-campaign"
url: https://memocore.ai/memos/6ae42fd9cb977478f04eb835
project: "Brand Styles"
tags: "brand-spotify"
updated_at: "2026-10-30T06:30:50.219Z"
---

# 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.