BRAND Spotify 2026 · Recipe: app-shell

HEADER brand: Spotify; design_date: 2026-10; kind: component; used_in: all player Page memos captured: https://open.spotify.com/ 2026-10-30, Japan (market JP) by direct connection with the user's agreement; logged out; UI in English evidence: measured on that URL unless marked; timings recorded live from transitionrun events; (code) = read in CSS or JS LOOK A black window with floating dark panels separated by 8px: the library on the left, the main view in the center, a narrow collapsed rail on the right. A black bar with logo, home button, and a large pill search sits on top; a violet-to-blue "Preview of Spotify" bar sits at the bottom when logged out. Hovering the gap shows a thin resize line. STRUCTURE Root grid: "top-banner" / "global-nav" / "left-sidebar main-view right-sidebar" (1fr) / "now-playing-bar"; columns auto 1fr. Padding and gap --panel-gap 8; background #000. When logged out the right sidebar is a collapsed rail 32 wide (x 1400 to 1432 at 1440), bg #121212, radius 8, with a left chevron at mid height. KEY PARAMETERS global nav: 64 total (48 + gap x 2), background #000; left: logo, home 48 circle, search; right: Premium, Support, Download 16/700 #b3b3b3 tightly spaced (about 8 between labels), 1 x 25 white divider (margin 16), Install App 14/700 with an icon, Sign up 14/700, Log in white pill 108 x 48 search: pill radius 500, height 48, width 50% (min 350, max 546), measured 474 at 1440; padding 12 96 12 48; bg #1f1f1f; placeholder "What do you want to play?"; search icon left, divider and browse icon right sidebar: bg #000 in frame set, radius 8; measured 331 x 754 at 1440 (var --left-sidebar-width, root default 232); resize range 280 to 420, read from the slider aria values on the artist page; title row: "Your Library" 16/700 white at y 87, plus icon in a 32 circle at right; first promo starts at y 155; promo cards bg #1f1f1f, radius 8, padding 16 20, 315 x 133, 24 apart; card title 16/700, text 14, white pill button 32 tall; lower part: legal links 11-12 #b3b3b3 (est) in wrapped rows, Cookies, language pill 100 x 32 at y 754 with globe icon, 1px border main view: x 347, width 1045, height 754, bg #121212, radius 8; container query main-view-grid-area bottom bar: 1424 x 66, radius 8 on Windows, 16 on macOS; gradient 90deg #af2896 -> #509bf5; padding 11 24 7 15; gap 24; title 14/700, text 16/400; white pill "Sign up free" 48 scrollbar: overlay scrollbars, auto-hide, top 4 bottom 4 body min width 800 MOTION: interaction records - id: shell.home element: home 48 circle trigger: hover open: background #1f1f1f -> #2a2a2a, 200ms, ease-in-out; icon #fff; scale 1.04 with no transition, because its transition list has only background and color, so the circle jumps while the colour eases close: background 200ms, ease-in-out; scale back at once - id: shell.search element: search pill, icon, shortcut hints trigger: hover open: background #1f1f1f -> #2a2a2a, box-shadow none -> inset 0 0 0 1px #ffffff1a, icon #b3b3b3 -> #fff, all 220ms, ease-in. Shortcut hints (Ctrl Shift L) opacity 0 -> 1, 220ms, ease-in-out close: same reversed; hints fade 220ms switch: focus: box-shadow -> inset 0 0 0 2px #fff, 220ms, ease-in; hints stay. Blur reverses keyboard: Tab gives the same 2px inset - id: shell.nav-buttons element: nav text and icon buttons trigger: hover open: color #b3b3b3 -> #fff and none -> scale(1.04), 50ms, cubic-bezier(.3,0,0,1) close: 150ms, same curve press: opacity .7, scale 1 at once - id: shell.login element: Log in, Create playlist, Sign up free (white primary) trigger: hover open: background #fff -> #f0f0f0 and none -> scale(1.04), 50ms, same curve close: 150ms, same curve press: #c7c7c7 (code), scale 1 - id: shell.language element: language pill (secondary) trigger: hover open: border #7c7c7c -> #fff on all sides and none -> scale(1.04), 50ms, same curve close: 150ms, same curve press: opacity .7, scale 1 at once children: click opens a dialog with no recorded animation: 978 x 588, #282828, radius 8, overlay rgba(0,0,0,.7) - id: shell.tooltip element: tooltip on icon buttons trigger: hover or focus; delay depends on the button (Play 1000ms; others pass 500, 1500 or none, code) open: opacity 0 -> 1, 200ms, ease-in-out - id: shell.scrollbar element: overlay scrollbar of the main view trigger: pointer in and out open: visibility and opacity, 200ms, ease close: same - id: shell.resize element: bar in the gap trigger: hover (code, not recorded live) open: width 8, opacity 0 -> 1, 150ms, ease-out; line 1px #7c7c7c, height calc(100% - 16px); while resizing line #fff; cursor col-resize keyboard: alt+shift+left and right change sidebar width; alt+shift+l toggles; step 10 by code - id: shell.bars element: global nav and bottom bar fades trigger: state change (code) open: opacity .3s ease-in close: hidden .3s ease-out, delay .5s STATES Hover and press: above. Focus: browser default ring on legacy buttons, 2px white on newer ones (code). touch and mobile: below 800 the site serves another layout: top bar 56 tall (est) with logo, white "Open App" pill 93 x 32 (13/700) and menu icon; content single column on #121212, padding 16; fixed bottom tab bar 70 tall (Home, Search, Your Library, Premium) with icons above 11px labels over a dark fade; no sidebar. Search page: white 48 tall input radius 4. reduced motion: scale off (code) loading fallback: dark panels HOW TO BUILD CSS grid with named areas, gap and padding from one variable. Panels get radius 8 and their own scroll. Resize by pointer events updating one custom property, clamped to 280-420. PITFALLS The frame is pure #000 and the main panel #121212; the difference must be visible. Radius 8 on all panels. Do not add borders between panels, the gap is the divider. Keep the 32 rail at the right; without it the main view is too wide and shelves show an extra card. Search has its own slower 220ms ease-in, unlike the buttons around it. Home scales with no transition. SCREENSHOTS - file: spotify_2026_home_d1440_top.jpeg shows: full shell at 1440x900, logged out source: live, Japan market, 2026-10-30; cookie banner hidden key values: frame #000; main #121212; gap 8; search 474 x 48 do not copy: logo, covers - file: spotify_2026_overview_d1440_language-dialog.jpeg shows: language dialog, overlay rgba(0,0,0,.7), dialog #282828 radius 8, 978 x 588 source: live, Japan market, 2026-10-30; cookie banner hidden key values: overlay .7; dialog radius 8 do not copy: logo