← Showcase
consumer-serviceproduct-ui

Music Player

Recognize what is playing and control playback without interrupting listening.

Signature decision

Media identity supplies the color; transport controls remain immediate and stable.

Brand
Motion
Now Playing
Midnight City
M83 · Hurry Up, We’re Dreaming
1:324:03
Up next
Midnight City
M83
4:03
Redbone
Childish Gambino
5:27
Nightcall
Kavinsky
4:18
Instant Crush
Daft Punk
5:37
Craft decisions
  • • Rule 1 (Color Philosophy) — album art carries the color, UI stays neutral
  • • Rule 14 (Hierarchy) — album art dominates, controls below
  • • Rule 8 (Touch target ≥44px) for transport controls
Reasoning evidence
  • • Ch.1 Progressive Disclosure — now-playing first, queue on demand
  • • Ch.7 Color Discipline — borderless, art-driven accent
  • • Ch.8 Motion Vibe — Silk for smooth, continuous scrubbing
Motion
  • • Silk entrance for the now-playing card; Silk layout for queue reorder.