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

# 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