BRAND Spotify 2026 · Page: home

HEADER brand: Spotify; design_date: 2026-10; page_type: home; variants: none region: JAPANESE CONTENT. Direct connection from Japan, market JP in appServerConfig, UI language English. Agreed with the user. spotify.com and spotify.com/us/ both redirect here, so this is the real home. example_urls: https://open.spotify.com/; evidence: measured on that URL 2026-10-30 unless marked purpose: let a logged-out visitor browse and push them to sign up skeleton: app shell, main view 1045 wide at 1440, stacked shelves, total scroll height not measured, est 2600 in main view; sidebar left overrides: none SECTIONS S1 chrome / app-shell - frame, global nav, library, bottom bar background: frame #000; padding: 8 and gap 8 layout: Recipe: app-shell elements: logo, home 48, search pill 474 x 48, Premium, Support, Download, divider, Install App, Sign up, Log in; left panel with title "Your Library", plus icon, 2 promo cards, legal links 11-12px (est), Cookies, language pill; right rail 32 with chevron; bottom gradient bar copy: "Create your first playlist" / "It's easy, we'll help you" / "Create playlist"; "Let's find some podcasts to follow" / "We'll keep you updated on new episodes" / "Browse podcasts"; "Preview of Spotify" / "Sign up to get unlimited songs and podcasts with occasional ads. No credit card needed." / "Sign up free" media: none motion: Recipe: app-shell. Buttons 50ms in, 150ms out; search 220ms ease-in; home 200ms ease-in-out responsive: replaced under 800, see S4 S2 features / card shelf - songs and albums background: #121212, slight lighter top gradient not present when logged out (est) height: 328 per shelf, 24 between shelves padding: section padding-inline 40 at 1440 (shelf x 387, panel x 347); first h2 at y 87 with the main view top at y 64 layout: header row 48 tall, then 5 full cards plus a cut sixth at 1440, card 196 wide elements: h2 24/700 "Trending songs", "Show all" 14/700, cards with cover 172, title, subtitle copy: title 2-4 words; subtitle artist media: [COVER 1:1] radius 6, heavy shadow motion: Recipe: card-shelf. Plate 200ms productive, play rise 12px 200ms ease-out, chevrons 150ms ease-out; card play button Recipe: play-button responsive: under 800 cards 152 wide, swipe S3 features / card shelf - artists, albums, radio, charts background: #121212 layout: same; artist cards circle, subtitle "Artist" elements: "Popular artists", "Popular albums and singles", "Popular radio", "Featured Charts" copy: names, "Artist" media: [ARTIST PHOTO 1:1] circle on desktop motion: Recipe: card-shelf responsive: as S2; on mobile artist images are square radius 4, not circles S4 mobile layout (under 800) background: #121212; top bar #000 56 tall (est); content padding 16 elements: logo wordmark left, white "Open App" pill 93 x 32 (13/700), menu icon; promo card with radius 8, bg #2a2a2a (est), green Premium label, title 20/700 "Listen without limits...", text 14 #b3b3b3, green "Try..." pill, "View all plans" text button, legal text 12, close icon; shelves h2 20/700 at 24 below the promo, 20 above covers; covers 152 radius 4, gap 12; title 16 white, no subtitle on song cards; next shelf about 48 below; bottom tab bar 70 tall, 4 tabs (Home, Search, Your Library, Premium) with icons and 10-11px labels over a dark fade copy: on this JP capture the promo reads "Try 1 month for ¥0", "Only ¥1,080/month after"; the US proxy capture showed "Try 2 months for $0", "Only $12.99/month" media: [COVER 1:1] motion: swipe only; no plate responsive: this is the mobile state PAGE COMPONENTS Shelf header: h2 and "Show all", min-height 48, margin-bottom 8. Promo card: Overview. INTERACTIONS Cards and chevrons: Recipe: card-shelf. Play on a card logged out opens the signup dialog: Recipe: play-button. Sidebar resize, nav, search: Recipe: app-shell. Language dialog from the pill: 978 x 588, #282828, radius 8, overlay #000000b3, 4-column list, no recorded animation. Every state with timing: Overview, state table. STATES loading: cards with --card-color; error: dialog "Something went wrong" / "Try reloading the page." with green "Reload page" pill (seen once on a bad album URL). Logged-in home with chips and greeting: not captured. SCREENSHOTS - file: spotify_2026_home_d1440_top.jpeg shows: first screen, 1440x900, scroll 0 source: live, Japan market, direct, 2026-10-30; cookie banner hidden key values: card 196 x 252; h2 24/700; bar gradient #af2896 to #509bf5 do not copy: logo, covers, names - file: spotify_2026_home_m390_top.jpeg shows: mobile first screen, 390x844, yen promo source: live, Japan market, direct, 2026-10-30; cookie banner hidden key values: promo title 20/700; cover 152 do not copy: logo, covers, prices