BRAND Spotify 2026 · Page: search-results

HEADER brand: Spotify; design_date: 2026-10; page_type: search-results; variants: browse (empty query) region: JAPANESE MARKET. Direct connection from Japan, market JP, UI language English, agreed with the user. Tile set is localized: "J-Tracks", Japanese covers appear. example_urls: https://open.spotify.com/search, https://open.spotify.com/search/daft%20punk; evidence: measured on these 2026-10-30 unless marked purpose: find something to play skeleton: app shell + chips + grid; sidebar left overrides: search icon in the nav is active (browse icon white) SECTIONS S1 features / browse tile grid (browse variant) background: #121212; padding: 24 per contentSpacing, top 48 (est) layout: h2 "Browse all" 24/700; grid auto-fill minmax(254px, 1fr), measured 4 columns of 255 at 1440; each item padding 12 elements: tile 231 x 130 (padding-bottom 56.25%), radius 8, solid colour (for example rgb(220,20,140)); title absolute top-left, padding 16, 24/700 Title font white, right padding 30% of width; cover 45% width (138) at bottom right, rotated 25deg, translate 18% and small offset, radius 4, shadow 0 2px 4px #0003 copy: Music, Podcasts, Made For You, New Releases, Pop, Charts, Mood, In the car media: [COVER 1:1] tilted motion: the tile has no motion: no scale, no transition, the cover stays still at rotate(25deg). Only the title underlines on hover, instantly. Image fade 250ms responsive: mobile 2 columns, tile about 170 x 96, title 16/700; search input white 48 tall radius 4 above "Browse all", page title "Search" 24/700 S2 chips (results) background: sticky over #121212 layout: 80 from top of window; gap 8 elements: All selected, Artists, Songs, Albums, Playlists, Podcasts & Shows, Profiles, Genres & Moods; 32 tall, padding 4 12, 14/400 copy: as listed motion: unselected #ffffff1a -> #ffffff24 in 50ms, back in 150ms, no scale; records in Page: artist S3 features / Top result + Songs (results) layout: 2 columns: top result grid-column span 2 (392 wide), songs 592 elements: h2 24/700 each; top result card bg #181818, radius 8, padding 20, 392 x 225; round image 92, name 32/700, "Artist" 14; songs 4 rows 56 copy: "Top result", "Songs", "Daft Punk", "Artist" motion: top result: background #181818 -> #282828, 300ms, ease; play wrapper translateY(12px) -> 0 and opacity 0 -> 1, 300ms, ease; reversed on leave (card.top-result in Recipe: card-shelf). Name link underlines instantly. Song rows as Page: detail-view responsive: not captured for results S4 features / shelves (results) elements: Featuring, Artists, Albums, Playlists, Podcasts, Episodes, Profiles, Genres & Moods motion: Recipe: card-shelf PAGE COMPONENTS Browse tile, top result card: above. INTERACTIONS Typing in the search pill updates the URL and results (not done in capture; the page was opened by URL). Search pill hover and focus: Recipe: app-shell. Chips filter by type. Play on the top result: Recipe: play-button. STATES No results: not captured. Recent searches need account. SCREENSHOTS - file: spotify_2026_search-results_d1440_browse.jpeg shows: browse grid, 1440x900 source: live, Japan market, direct, 2026-10-30; cookie banner hidden key values: tile 231 x 130 radius 8; cover rotate 25deg do not copy: covers - file: spotify_2026_search-results_d1440_results.jpeg shows: results for an artist, 1440x900 source: live, Japan market, direct, 2026-10-30 key values: top result 392 x 225 #181818; chip 32 do not copy: photos, covers - file: spotify_2026_search-results_m390_browse.jpeg shows: mobile browse, 390x844 source: live, Japan market, direct, 2026-10-30 key values: white input; 2 columns do not copy: covers