SoundCloud Design System

SoundCloud's marketing page is a two-canvas system rather than a single dark or single light theme. The top band is a `#121212` near-black theater holding a black-and-white creator photo, the 60px "Discover.Get Discovered." h2 in white, and an orange-banded Artist Pro promo strip — the only place the historic SoundCloud Orange (`#ff5500`) reads at any scale. Scroll past the hero and the canvas flips to `#ffffff` ivory: a search bar, a six-card trending-tracks grid with album art at `16px` rounding, a "Never stop listening" device callout with the App Store and Google Play badges, and a "Calling all creators" panel that returns briefly to the dark band. The CTAs ("Sign in", "Create account", "Upload your own", "Find out more", "Explore trending playlists") all sit in `#121212` on `#ffffff` with a `4px` radius — black-on-white, never orange.

This DESIGN.md packages the full marketing surface into a single machine-readable file built on the Google Labs spec. Inside: 19 color tokens grouped into the canvas, surface, ink, hairline, voltage, and semantic roles; 10 typography styles all running Söhne from a 60px hero display down to a 12px capitalized micro-caption; 6 radius tokens spanning a `4px` chip to a `100px` legacy tag pill, plus a `50%` circle for play and avatar controls; 9 spacing tokens anchored on the `--spacing-1x` 8px base unit found in the extracted CSS variables; and 19 component recipes covering the dark hero, the trending-track card, the search field, the activated checkbox, the device-store badge row, and the dim sign-in link beside the primary `Create account` pill.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces the two-canvas inversion — dark hero on top, ivory product body below, micro-orange checkbox state — rather than defaulting to a saturated-orange-on-dark theme. Reference the tokens directly to seed a Tailwind config or CSS variable layer; the component block maps each surface (button-primary-dark, button-primary-light, card-track, hero-band, input-search, checkbox-activated) to its token references, so reconstructing the hero is a token lookup. The system is worth studying because it refuses the obvious move: SoundCloud Orange is the brand color the audience expects to see on the CTA, and the company instead reserves it for a 12-by-12-pixel checkbox fill, letting black-on-white carry every primary action.