---
title: "BRAND Spotify 2026 · Page: detail-view"
url: https://memocore.ai/memos/6ae42f8ecb977478f04eb82d
project: "Brand Styles"
tags: "brand-spotify"
updated_at: "2026-10-30T06:32:15.127Z"
---

# 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