Theme · Product · Intermediate
Spotify-style Music Player
Spotify-style player = a black playlist sidebar, a Good-afternoon tile grid, and a bottom player bar with a green seek bar.
Tips
The cover art carries the brand. Keep controls large and obvious — this is a player, not a poster.
See also
Build a Spotify-style music player called "Resonance".
STYLE
- #121212 canvas with a #000 sidebar and a #181818 player bar
- Spotify green (#1db954) for the active playlist, seek bar, and tile gradient accents
- White type, grey #b3b3b3 meta
LAYOUT
- Left sidebar (black): wordmark "Resonance"; nav Home / Search / Your Library (on); a PLAYLISTS list pinned to the bottom - Daily Mix 1 (on, green), Liked Songs, Deep Focus; tall adds Release Radar
- Main: "Good afternoon" greeting over a green-tinted gradient; 2x2 playlist tiles (tall: 3x2) - Daily Mix 1, Liked Songs, Neon Arcade, Deep Focus; tall adds Chill Hits, Release Radar; each tile is a gradient cover + name
- Bottom player bar (#181818): album art, "Neon Arcade" by Kite Season, transport controls with a white round play button, a green seek bar at 42%, time "1:48 / 4:03"
COMPONENTS
- Sidebar: wordmark, nav, PLAYLISTS pinned to the bottom
- Main: greeting over a green-tinted gradient, playlist tile grid
- Player bar: album art, track meta, transport controls, seek bar with time
INTERACTION
- Tiles lighten on hover; the active playlist is green; the play button is a white circle with a dark triangle.
TECHNICAL
- React, Tailwind CSS, no component library, bespoke player markup