Design system

Audio players

The ways a project page can play its music. Each project chooses one with its “Audio player” setting; Automatic uses the Console for albums and the Cue sheet for everything else. This is Nomad, playing from Dave’s SoundCloud.

All of them share one player underneath: start a track in one and the others follow. Scroll away while something plays and the dock (AUD-D1) appears at the foot of the screen. Nothing loads from SoundCloud until you press play. Click an ID to copy it for feedback.

Console

The album’s artwork with its record sliding out and turning while it plays, a large waveform you can scrub, and the track list with a small waveform for every track.

  • Computer: artwork and waveform side by side; the artwork glows softly behind.
  • Phone: artwork first, then the waveform full width and big controls for your thumb.
Nomad artwork

Nomad · Track 1 of 12

Sea Days

0:00 2:04
Listen on Spotify

Cue sheet

Every track as its own waveform lane, like a composer’s cue sheet. Click anywhere on any track to hear it from that point; the playing lane grows and lights up.

  • Computer: hover along a lane to see the time under the pointer before you jump.
  • Phone: each lane runs full width under its title, so there’s room to tap exactly.
Listen on Spotify

  1. Sea Days

    2:04

  2. Blue Horizon

    4:15

  3. Clouded

    3:58

  4. Evening Sun

    4:13

  5. Forest Floor

    4:43

  6. Prologue

    2:27

  7. Melting Ice

    2:01

  8. Mountain Air

    5:12

  9. Dry Land

    2:41

  10. Sand Storm

    3:56

  11. Night Sky

    4:15

  12. White Out

    4:24

Turntable

The album as a record on a deck, its artwork as the label. The tonearm swings in and crosses the record as the track plays; drag it to jump. The tracks read like liner notes, Side A and Side B.

  • Computer: the deck beside the liner notes; tap the record to play or pause.
  • Phone: the deck fills the width; a slim waveform under it for precise jumps.

0:00 / 2:04

Side A · Track 1 of 12

Sea Days

Side A

Side B

Listen on Spotify

Dock

A slim player that rises at the foot of the screen while something plays and its player has scrolled out of view, on every page, including the homepage. Play, previous, next, the time, the SoundCloud credit, and a line to click along. Play a track above, then scroll.

· 0:00