BRAND Spotify 2026 · Recipe: entity-header

HEADER brand: Spotify; design_date: 2026-10; kind: component; used_in: Page: detail-view, Page: artist captured: https://open.spotify.com/playlist/37i9dQZF1DXcBWIGoYBM5M 2026-10-30, Japan (market JP) by direct connection with the user's agreement; UI in English evidence: measured on that URL unless marked; timings recorded live from transitionrun events; (code) = read in CSS or JS LOOK The top of a playlist, album or artist page takes the colour of its cover. The title is enormous and shrinks to fit. Below it a darkened copy of that colour fades into the page behind the action row with the big green play button. When you scroll past, a compact bar pins at the top with the same colour, and a small play button and the title fade in slowly. STRUCTURE entity header (image background or colour) -> content row (cover optional, text stack) -> gradient band (absolute, behind action bar) -> action bar -> tracklist or sections -> sticky top bar over the scroll area. KEY PARAMETERS main-view width 1045 at 1440 header height: playlist with image and artist 40vh = 360 at 900; album min(30vh, fluid) with fluid clamp(186px, 186px + (w - 600px) / 424 * 150, 336px), min-fluid clamp(186, ..., 276); measured album 276; variant with image max 395 padding: bottom --content-spacing; horizontal --content-spacing (24 at >=1024, 16 at <=600) cover: 232 x 232, radius 4, shadow 0 4px 60px #00000080 overline: body-small 14, white, "Public Playlist" or "Album" title: encore-text-headline-large, SpotifyMixUITitle 800, sizes set inline by a fit script: 96px when it fits (Today's Top Hits, Daft Punk), 48px for the long album title; line-height normal, clamp 3 lines, margin -2, padding 2 meta row: body-small, margin-top 8, white subdued, dots between items gradient band: height 173, linear-gradient(in oklch to bottom, background-base at 70%, transparent), opacity .3s ease-in-out .1s per-page colour override on the band: --background-base #650000, highlight #4c0000, press #320000 (from the cover) action bar: padding --content-spacing vertically, gap --content-spacing; play 56 x 56 green, shuffle and add icons, "..." tertiary, right side "List" control sticky bar: 48 tall content, cover colour with a dark overlay (est), play button 48 green, title 24/700 track table header: 37 tall, sticky under the bar, text 14 #b3b3b3 (est size) MOTION: interaction records - id: header.sticky-bar element: play wrapper and title span inside the top bar trigger: scroll, once the action bar has left the view open: visibility and opacity 0 -> 1, 500ms, delay 0, ease, on both elements together close: on scroll back; timing not recorded separately keyboard: follows scroll touch and mobile: no sticky bar seen in the mobile web player reduced motion: not recorded - id: header.gradient element: gradient band trigger: page colour set open: opacity, 300ms, delay 100ms, ease-in-out (code) reduced motion: gradient transition off (code) - id: header.action-play element: play 56 full record: Recipe: play-button summary: scale 1.04 and #1ed760 -> #3be477 in 50ms, back in 150ms, press scale 1 at once, tooltip after 1000ms - id: header.action-icons element: shuffle, add, more trigger: hover open: color #b3b3b3 -> #fff and none -> scale(1.04), 50ms, cubic-bezier(.3,0,0,1); tooltip fades in 200ms ease-in-out close: both 150ms, same curve press: opacity .7, scale 1 at once; on release scale(1) -> scale(1.04), 50ms disabled: opacity .3 (seen on shuffle in the player bar) - id: header.more-menu element: context menu from "..." trigger: click open: appears with no animation; 250 x 249, #282828, radius 4, shadow 0 16px 24px #0000004d, 0 6px 8px #00000033; items 242 x 40, radius 2, text rgba(255,255,255,.9) close: no animation; Esc closes children: items seen logged out: Add to Your Library, Report (dimmed, external icon), Exclude from your taste profile, Add to folder (arrow), Share (arrow), Open in Desktop app STATES Hover and focus: above and Overview state table. Focus on these legacy buttons: browser default ring. touch and mobile: mobile web player has its own header: cover centered 216-ish (est), title 24/700, gradient from the cover colour to #121212, play 48 at the right of the action row, no sticky bar seen loading fallback: --background-base default #121212 HOW TO BUILD Set a colour from the image, apply it to the header and gradient as local CSS variables. Fit the title by measuring and stepping font size between 96 and 32. Show the compact bar with an intersection observer on the action row; fade its play button and title with opacity 500ms ease, keep visibility in the same transition. PITFALLS Gradient goes under the action row, not the header. Title is not fixed at 96px; long titles shrink. The action row sits on the gradient, so the play button is not on a plain surface. The sticky content is slow on purpose: 500ms, ten times the button hover. The menu has no animation, do not add a scale-in. SCREENSHOTS - file: spotify_2026_detail-view_d1440_playlist.jpeg shows: playlist top with image header, 96px title, red gradient, 1440x900 source: live, Japan market, 2026-10-30; cookie banner hidden key values: header 360; title 96/800; band #650000 do not copy: cover art, copy - file: spotify_2026_entity-header_d1440_scrolled.jpeg shows: scrolled 440, sticky bar with play button and title over the table source: live, Japan market, 2026-10-30; cookie banner hidden key values: bar 48 content height do not copy: covers - file: spotify_2026_detail-view_d1440_album.jpeg shows: album header with 232 cover and 48px title source: live, Japan market, 2026-10-30; cookie banner hidden key values: header 276; cover shadow 0 4px 60px #00000080 do not copy: cover art