Spotify Mobile — design system & UI screens
This is a music and podcast streaming application for discovering and playing audio content. The screen shows a tabbed navigation system (All, Music, Podcasts, Audiobooks) with a 2-column grid layout below displaying content cards—each card contains artwork and title for shows like "Discover Weekly," "golden hour," "The Bill Simmons Pod," and "daylist." A "Jump back in" section at the bottom shows recently played content with larger cover art cards.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/spotify-mobile.
Decoded design system
Spotify Mobile's decoded design system: background #121212, text #FFFFFF, accent #08FF01, link #08FF01, primary #08FF01; type scale h1 34px / h2 22px / body 17px; 4px spacing base; 12px base radius. The single interactive/action color is #08FF01 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #121212 |
| surface | #202020 |
| border | #353535 |
| text | #FFFFFF |
| text_muted | #A4A4A4 |
| primary | #08FF01 |
| accent | #08FF01 |
| link | #08FF01 |
| button_bg | #08FF01 |
| button_text | #121212 |
Using these colors
- Action color
#08FF01— the single interactive color; only on things you click or must notice, never large fills. primary,accent,link,button_bgare all#08FF01— one role, not several (the action color).- accent
#08FF01— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
Typography
- h1: 34px
- h2: 22px
- body: 17px
Spacing
- base unit: 4px
- scale: 2px, 4px, 5px, 6px, 8px, 12px, 16px, 20px, 24px, 28px
Radii
- base: 12px
- button: 12px
Shadows (elevation)
- card:
rgba(0, 0, 0, 0.3) 0px 8px 8px 0px - overlay:
rgba(0, 0, 0, 0.5) 0px 8px 24px 0px
Motion
Micro-interactions run at 150ms (dominant) with ease-out.
- durations: 150ms · 200ms · 250ms
- easings:
ease-out·cubic-bezier(0.3, 0, 0, 1) - animated properties: transform, background-color, opacity, color
Native design tokens
| Token | Value |
|---|---|
--essential-announcement | #1278f2 |
--background-base | #121212 |
--background-elevated-press | #191919 |
--background-elevated-highlight | #2a2a2a |
--start-gradient-color | #000000 |
--home-chips-start-mask | #000000 |
--essential-positive | #1ed760 |
--text-warning | #ffa42b |
--decorative-base | #fff |
--text-positive | #1ed760 |
…and 101 more measured on the page.
Button states (measured)
- primary focus: outline
1px solid rgb(0, 0, 0)
Layout (measured)
- nav: 754px
- common grid: 2 columns
Motion choreography (measured)
Load order: div.otFlat → circle.qeO5DKKK4gB916pl×3 → div.os-scrollbar-handle → button.e-10451-legacy-button → div.os-scrollbar-handle → p.e-10451-text×8
Scroll reveal: 3 elements rest at opacity 0, animate in over 0.15s ease-out.
Overlay recipe (measured)
dialog panel: rgba(0, 0, 0, 0) · radius 0px
Input (measured)
height 48px · radius 500px · focus ring 1px auto rgb(16, 16, 16)
Responsive (measured)
- breakpoints: 425px · 550px · 600px · 768px · 896px · 1024px
- mobile (390px): hero 16px · nav inline
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →