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

# BRAND Spotify 2026 · Page: artist

HEADER
brand: Spotify; design_date: 2026-10; page_type: artist (App family; fallback detail-view); variants: none
region: JAPANESE MARKET. Direct connection from Japan, market JP, UI language English, agreed with the user. Sampled artist is global (Daft Punk).
example_urls: https://open.spotify.com/artist/4tZwfgrHOc3mvqYlEYSvVi; evidence: measured on that URL 2026-10-30 unless marked
purpose: show an artist and start playback
skeleton: app shell + 360 header + action row + sections; main view height est 3700; sidebar left
overrides: none

SECTIONS
S1 hero / full-bleed-image - artist
  background: artist image cover, gradient overlay to rgba(0,0,0,.7) at bottom on a second layer; height: 40vh = 360 at 900
  layout: bottom-left, padding 24
  elements: optional Verified line, name 96/800 white, monthly listeners 16 white
  copy: "Daft Punk", "27.4M monthly listeners"
  media: [ARTIST PHOTO wide]
  motion: Recipe: entity-header
  responsive: mobile round photo centered, name 24/700, listeners 14
S2 action row
  background: gradient of the image colour to #121212
  elements: play 56, shuffle, Follow secondary 32 tall (14/700, 77 wide), more
  copy: "Follow"
  motion: play: Recipe: play-button. Follow: border #7c7c7c -> #fff and scale 1.04 in 50ms, back in 150ms, press opacity .7 and scale 1 at once
  responsive: mobile Follow, share, more left; play 48 right
S3 content / Popular
  background: #121212
  layout: h2 24/700; 5 rows 56; columns index, title with thumb 40, plays 14 #b3b3b3, duration; "See more" 14/700
  copy: "One More Time", "994,959,886"
  motion: track row as Page: detail-view, no transition
  responsive: rows with thumb, title, plays, more
S4 content / Artist pick
  layout: h2, 80-square thumb (est), chip with avatar and short note, title 16/700, type 14
  copy: "Listen to more Daft Punk!", "Daft Punk Essentials", "Playlist"
S5 features / Discography
  layout: h2, "Show all", chips row (Popular releases selected, Albums, Singles and EPs, Compilations), shelf of cards
  motion: Recipe: card-shelf; chips: see INTERACTIONS
S6 features / shelves
  elements: Featuring, Music videos (16:9 cards), Fans also like (circle), Discovered on, Artist Playlists, Appears On
  motion: Recipe: card-shelf
S7 content / About
  layout: card with image and text overlay, radius 8; hover scale of the image not measured
  copy: "About", monthly listeners, bio text
  responsive: full width

PAGE COMPONENTS
Selected chip: white with black text. Music video card: 16:9.

INTERACTIONS
- id: chip.hover
  element: filter chip, 32 tall, 14/400
  trigger: pointer enter
  open: unselected background #ffffff1a -> #ffffff24, 50ms, cubic-bezier(.3,0,0,1); selected #fff -> #f0f0f0, 50ms, same curve; no scale
  close: back in 150ms, same curve
- id: chip.switch
  element: two chips and the shelf
  trigger: click
  open: new chip background #ffffff24 -> #f0f0f0 and text #fff -> #000, 50ms; old chip background #fff -> #ffffff1a and text #000 -> #fff, 150ms, same curve
  children: shelf content changes without page load, new covers fade opacity 0 -> 1, 250ms, ease-out
  close: on leave the new chip goes #f0f0f0 -> #fff in 150ms
Sticky title bar with play: Recipe: entity-header.

STATES
Followed: "Following"; needs account, not captured.

SCREENSHOTS
- file: spotify_2026_artist_d1440_top.jpeg
  shows: first screen, 1440x900
  source: live, Japan market, direct, 2026-10-30; cookie banner hidden
  key values: header 360; name 96/800; Follow 77 x 32
  do not copy: photo
- file: spotify_2026_artist_d1440_scrolled.jpeg
  shows: scrolled 520, sticky bar, Artist pick, Discography chips
  source: live, Japan market, direct, 2026-10-30
  key values: chip 32 tall; sticky bar colour from image
  do not copy: covers
- file: spotify_2026_artist_m390_top.jpeg
  shows: mobile artist, 390x844
  source: live, Japan market, direct, 2026-10-30
  key values: round photo; play 48
  do not copy: photo