---
title: "BRAND Spotify 2026 · Recipe: entity-header"
url: https://memocore.ai/memos/6ae42ecfcb977478f04eb821
project: "Brand Styles"
tags: "brand-spotify"
updated_at: "2026-10-30T06:33:40.016Z"
---

# 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