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

# 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