Design teardown
Spotify
A near-black catalog home with white type, one green accent, and fully rounded actions. Square covers sit in horizontal shelves under short bold headings.
spotify.com
Design character
Black shelf, green pill
The public home is a dark catalog, not a marketing page. A black bar holds one white pill, then a charcoal promo panel, then repeating rows of square art with one-line labels. Copy is short and direct: two- or three-word section titles, clipped names, one bold offer line, a tiny legal line, and imperative button labels. Inactive chrome is gray; the only saturated brand color is green. Motion is limited to quick color and transform changes on controls.
Typography
Interface text uses SpotifyMixUI. Shelf and page titles use SpotifyMixUITitle. Only 400 and 700 appear. Tracking stays at the default. Titles are tight and bold; labels under art are regular and slightly looser.
Color system
The page is #121212, the top bar is black, and type is white or gray. Green is reserved for the main offer. Elevated panels are a step lighter than the canvas. Category tiles on search use their own saturated fills with white type.
Spacing and geometry
An 8px rhythm shows up in label gaps and heading padding. Shelves use 16px between covers and 16px from the screen edge. A shelf title sits about 20px above the art, and the label sits 8px below it.
Layout
Full-bleed and left aligned. A fixed black header, a scrolling stack of horizontal shelves, a four-column footer, and a fixed 70px bottom nav.
Motion
The page loads still. Controls animate background and transform over 150ms with cubic-bezier(0.3, 0, 0, 1). The top bar can fade its background over 400ms. Shelves move only when scrolled sideways.
UI fingerprint
- One green Green is the offer button and a small round mark. Everything else is black, white, or gray.
- Pills at 14px Actions are fully rounded, bold, and short, with 4px 16px padding.
- Square shelves 152px covers, 4px corners, 16px gaps, and a single clipped line of regular type.
- Short copy Headings are a few words. Buttons are imperative. Legal type drops to 12px gray.