A confident dark-mode system where near-black canvases let one electric green carry every call to action, white-and-grey geometric type builds the hierarchy, and shapes split cleanly between fully-round pill buttons and small media tiles.
Set in Spotify Mix / Spotify Circular — a proprietary geometric sans, shown here in its nearest free substitute, Montserrat. Hierarchy is built from size and weight alone: a hard jump from regular 400 body to heavy 700 headings, with letter-spacing left at normal.
Media tiles are transparent at rest and lift to a #1f1f1f surface with a deep level-2 shadow on hover; a green play button slides up over the 1:1 artwork.
An 8px base unit with a 4px half-step: 4 / 8 / 12 / 16 / 24 / 32 / 48. Controls pad at 8–12px, content gutters at 24–32px.
A bimodal shape language — controls are fully round (buttons, search field, avatars) while media containers stay gently squared (6–8px).
| Name | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Tile shelves collapse to 2 columns; the left library hides behind a button; top and player bars persist. |
| Tablet | 768–1023px | 3–4 tiles per shelf; the sidebar narrows toward icons. |
| Laptop | 1024–1279px | 5–6 tiles per shelf; the full "Your Library" sidebar returns. |
| Desktop | ≥ 1280px | 6–7+ tiles per shelf at max content width with comfortable 24–32px gutters. |
Persistent app shell: a fixed top bar, fixed left sidebar, and fixed now-playing bar bracket a single scrolling column of horizontal media shelves. Album artwork holds a 1:1 aspect ratio at every breakpoint.
Sample plan cards demonstrating the pricing pattern — the featured tier inverts to pure black with a green outline, green "most popular" marker, and green bullet ticks. (Illustrative pricing.)
A dense list pattern — the kind behind a playlist or "Recently played." Status chips reuse the surface-alt fill with a green or grey label.
| # | Title | Artist | Status | Added |
|---|---|---|---|---|
| 1 | Flowers | Miley Cyrus | Playing | 2 days ago |
| 2 | Anti-Hero | Taylor Swift | Saved | 1 week ago |
| 3 | As It Was | Harry Styles | Saved | 2 weeks ago |
| 4 | Calm Down | Rema, Selena Gomez | Saved | 3 weeks ago |
| 5 | Unholy | Sam Smith, Kim Petras | Saved | 1 month ago |
Login pattern on elevated surface cards — dark inputs with a thin hairline ring, green primary action, and a fully-round outlined SSO button.