Design system
01 — Audio
Interface sound
Short earcons that confirm what a hand just did and where it went: a press, a page, an outcome. This section is the whole system as it runs on the site: every sound playable through the real engine, heard in the components that use it, with its specs, its rules, and how to propose a better one.
Quiet by default
Interface sounds sit 21 to 33 dB under streamed media and under Spotify’s quiet mode. A sound heard a hundred times a day has to be quieter than feels necessary.
One press, one sound
A gesture gets at most one contact sound and one outcome. When the markup and a component both ask for the same sound, it plays once.
Never in the way
Nothing before the first gesture, nothing on scroll, nothing over audible media or the guide’s voice, nothing in a hidden tab, and nothing queued to play late.
Meaning over decoration
Tokens name what happened (ui.open, nav.dive), not how it sounds. Hover is the one decorative sound, and the quietest.
03 — Color
Brand blue and neutrals
The site is black, white and grey, with one colour: brand blue, the light blue of the home hero. It is used as an accent in motion, in small amounts. This section is the token, the animated accent as it runs on the site, and the neutrals the components share.