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