BRAND Spotify 2026 · Page: detail-view

HEADER brand: Spotify; design_date: 2026-10; page_type: detail-view; variants: album, show (podcast) region: JAPANESE MARKET. Direct connection from Japan, market JP, UI language English, agreed with the user. The sampled playlist and album are global (Today's Top Hits, Random Access Memories). example_urls: https://open.spotify.com/playlist/37i9dQZF1DXcBWIGoYBM5M, https://open.spotify.com/album/4m2880jivSbbyEGAKfITCa; evidence: measured on these 2026-10-30 unless marked purpose: show one collection and start playback skeleton: app shell + header + action row + table + related shelves; total height in main view playlist est 3700; sidebar left overrides: cover colour set on header band (--background-base per page) SECTIONS S1 hero / entity header - name the collection background: image full-bleed (playlist with image), or cover colour; height: playlist 360, album 276 layout: bottom aligned; album has cover 232 left and text; padding --content-spacing 24 elements: overline 14, title 96 or 48 weight 800, description 14, meta row with 24 avatar, name, saves, counts copy: "Public Playlist", "Today's Top Hits", "33,651,456 saves · 50 songs, about 2 hr 45 min" media: [COVER 1:1] 232 radius 4 shadow 0 4px 60px #00000080 motion: Recipe: entity-header responsive: mobile cover centered, title 24/700 left, text stacked S2 action row background: gradient band of cover colour 173 tall layout: padding 24, gap 24 elements: green play 56; shuffle; add; more; right "List" with icon copy: "List" motion: play: Recipe: play-button. Icons: color #b3b3b3 -> #fff and scale 1.04 in 50ms, back in 150ms, press opacity .7 and scale 1 at once. More opens a context menu with no animation responsive: mobile heart, share, more left; green play 48 right S3 content / track table background: --background-base #121212 below gradient layout: padding-inline 16 in row; playlist columns [index] 16px [first] minmax(180px,4fr) [var1] minmax(120px,2fr) [var2] minmax(120px,2fr) [last] minmax(120px,1fr); album [index] 16px [first] 4fr [last] 1fr; gap 16; row height 56 (measured 995.7 x 56; cells 16, 381, 191, 191, 120); header row 37 tall with a 1px rule under it, sticky under the top bar elements: index 16, thumb 40 radius 4, title 16 white, artist 14 #b3b3b3 with optional E badge, album 14, date 14, duration 14 copy: real track list samples; "#", "Title", "Album", "Date added" media: [COVER 1:1] 40 motion: see INTERACTIONS, track row responsive: mobile rows without index and columns, thumb 48, more icon at right S4 features / shelves background: #121212 elements: album: "More by Daft Punk" shelf; copyright text 11-12px; playlist: "Find something to play" none when logged out motion: Recipe: card-shelf responsive: as home PAGE COMPONENTS Track row, explicit badge: small E 16 square radius 2, bg #ffffff33 (est). Column header sticks with its colour. INTERACTIONS - id: row.hover element: track row trigger: pointer enter open: no transition, everything in one frame: row background -> rgba(255,255,255,.1), radius 4; index -> play icon 16 white; text -> white; add and more buttons appear with opacity 1; title link underlined when the pointer is on it close: row returns in one frame; more and add carry a colour transition of 150ms cubic-bezier(.3,0,0,1) switch: moving between rows swaps the highlight in one frame keyboard: focus-within 1px solid #fff (code); arrow navigation, Enter plays (inf, needs account) touch and mobile: no hover; more icon always visible reduced motion: same - id: row.playing (code, needs account, not seen) element: index cell open: equaliser image 14px replaces the index, equaliser-animated-green.gif or white; title #1ed760 (inf) - id: row.menu element: context menu from row more trigger: click open: appears with no animation; Esc closes, no animation Sticky bar and action row: Recipe: entity-header. Clicking play logged out opens the signup dialog: Recipe: play-button. STATES empty and logged-in edit: not captured. Error: dialog on a bad URL. SCREENSHOTS - file: spotify_2026_track-row_d1440_hover.jpeg shows: track row hovered, index replaced by play icon, add and more visible source: live, Japan market, direct, 2026-10-30; cookie banner hidden key values: bg rgba(255,255,255,.1); row 56; no transition do not copy: covers, names - file: spotify_2026_detail-view_d1440_playlist.jpeg shows: playlist first screen, 1440x900 source: live, Japan market, direct, 2026-10-30; cookie banner hidden key values: header 360; title 96/800; row 56 do not copy: photo, cover, names - file: spotify_2026_entity-header_d1440_scrolled.jpeg shows: scrolled table with sticky bar and header row source: live, Japan market, direct, 2026-10-30 key values: table columns as above do not copy: covers, names - file: spotify_2026_detail-view_d1440_album.jpeg shows: album variant source: live, Japan market, direct, 2026-10-30 key values: cover 232; title 48/800 do not copy: cover - file: spotify_2026_detail-view_m390_playlist.jpeg shows: mobile playlist, 390x844 source: live, Japan market, direct, 2026-10-30 key values: play 48; thumb 48 do not copy: cover, names