---
version: alpha
name: SoundCloud
description: The orange that owns audio. SoundCloud pairs its unmistakable hot-orange (#ff5500) with a near-black #121212 stage and a heavy condensed Söhne display (800 weight, uppercase, negative leading) so the waveform-era brand reads loud, confident, and unmistakably itself.
colors:
  # Surface / canvas — the dark stage
  background: "#121212"          # the near-black app canvas
  surface: "#1e1e1e"             # raised panels, cards, track rows
  surface-elevated: "#303030"    # controls, search field, banner chrome
  surface-light: "#f3f3f3"       # the rare light marketing band

  # Ink / text
  ink: "#ffffff"                 # primary white text on dark
  ink-secondary: "#cccccc"       # secondary copy, hover targets
  ink-muted: "#999999"           # metadata, captions, placeholders
  on-orange: "#ffffff"           # text on the orange CTA
  on-light: "#121212"            # near-black text on light bands

  # Brand accent — the singular SoundCloud orange
  primary: "#ff5500"             # the brand orange — links, active waveform, accents
  primary-hover: "#e64d00"       # darker pressed orange
  primary-soft: "#ff8533"        # lighter orange tint

  # Secondary accents
  link-blue: "#699fff"           # informational links
  artist-purple: "#5a45fd"       # artist / pro contexts
  success: "#008850"             # positive confirmation

  # Borders
  border: "#333333"              # hairline dividers on dark
  border-strong: "#666666"       # input outlines, stronger separators

  # Shadow tint (opaque approximation for the elevation table)
  shadow-ambient: "#000000"      # was rgba(0,0,0,0.2) — Google format requires hex

typography:
  display:
    fontFamily: "Söhne, Sohne, Interstate, Helvetica Neue, Arial, sans-serif"
    fontSize: 65px
    fontWeight: 800
    lineHeight: 0.85
    letterSpacing: -1.3px
  heading:
    fontFamily: "Söhne, Sohne, Interstate, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.29
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Söhne, Sohne, Interstate, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.27
    letterSpacing: 0px
  body-large:
    fontFamily: "Söhne, Sohne, Interstate, Helvetica Neue, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.19px
  body:
    fontFamily: "Söhne, Sohne, Interstate, Helvetica Neue, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.41
    letterSpacing: 0px
  body-ui:
    fontFamily: "Interstate, Söhne, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label:
    fontFamily: "Söhne, Sohne, Interstate, Helvetica Neue, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 600
    lineHeight: 1.41
    letterSpacing: 0.2px
  caption:
    fontFamily: "Interstate, Söhne, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  overline:
    fontFamily: "Interstate, Söhne, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.5px

spacing:
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  2xl: 24px
  3xl: 32px
  4xl: 48px
  5xl: 64px
  6xl: 120px

rounded:
  sm: 1px
  md: 2px
  lg: 3px
  xl: 4px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-orange}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 8px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-orange}"

  button-light:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-light}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 8px 18px
  button-light-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.on-light}"

  button-secondary:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 8px 18px
  button-secondary-hover:
    backgroundColor: "{colors.border-strong}"
    textColor: "{colors.ink}"

  button-ghost:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.xl}"
    padding: 6px 12px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 16px
  card-elevated:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 16px

  input:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 8px 16px
  input-focus:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 8px 16px

  link:
    textColor: "{colors.ink-muted}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.ink}"
    typography: "{typography.body}"

  tag:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.md}"
    padding: 2px 8px

  badge-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-orange}"
    typography: "{typography.overline}"
    rounded: "{rounded.md}"
    padding: 2px 8px
---

# SoundCloud Design System

## Overview

SoundCloud's design begins and ends with one color: a hot, saturated orange (`{colors.primary}`) that is as bound to the brand as the waveform itself. Everything else exists to make that orange detonate. The stage is a near-black `{colors.background}` — not pure black, a hair of warmth at #121212 — and against it the orange reads like a play head burning across a track. It tints the active portion of a waveform, the brand wordmark, the primary call-to-action, and almost nothing else. The discipline is total: the entire UI is grayscale-on-black except for this single signal, which is exactly why the orange never loses its charge.

The typographic signature is loud. Display headlines are set in **Söhne** at its heaviest weight (`{typography.display}`, 800), uppercased, with negative leading (line-height 0.85) so the lines stack into dense, shouting blocks — the visual equivalent of a track title slammed across a hero. Below that, the system relaxes into Söhne at 17–19px for body and labels and a workhorse **Interstate** for the dense functional UI: track rows, metadata, play counts, timestamps. The brand voice lives in that contrast between the heavy uppercased display and the quiet, even functional type that has to carry a feed of thousands of tracks.

Geometry is deliberately minimal and a little old-school. Radii are tiny — 1–4px on cards, rows, and tags (`{rounded.sm}`–`{rounded.xl}`) — a holdover from SoundCloud's long-running flat, near-square card aesthetic. The one exception is the pill (`{rounded.pill}`): primary buttons and the marketing "Sign in / Create account" actions are fully rounded capsules, a sharp contrast to the square track grid that makes the buttons feel like distinct, tappable controls. Elevation is almost absent — track rows and cards separate with flat fills and hairline borders (`{colors.border}`) on the dark canvas, with only the occasional soft ambient shadow under a floating player or menu. The result is a system that feels like a piece of pro audio software: dark, dense, functional, and branded by exactly one unforgettable orange.

**Key Characteristics:**
- One signature accent: SoundCloud orange (`{colors.primary}`) on the active waveform, the wordmark, and the primary CTA — the brand's whole color identity
- Near-black stage: a warm #121212 (`{colors.background}`) canvas with raised `{colors.surface}` / `{colors.surface-elevated}` panels
- Heavy uppercased **Söhne** display at weight 800 with negative leading (line-height 0.85) — the loud hero voice
- **Interstate** as the dense functional UI face — track rows, counts, metadata, timestamps
- Tiny radii on the track grid (1–4px), but fully **pill** primary buttons — a deliberate square-grid / capsule-button contrast
- Grayscale-on-black everywhere except the orange — total accent discipline keeps it charged
- Nearly flat: cards and rows separate with fills and hairline borders, not shadows
- Secondary `{colors.link-blue}` and `{colors.artist-purple}` exist for links and pro/artist contexts, never competing with the orange
- A rare light marketing band (`{colors.surface-light}`) inverts to near-black text — the only escape from the dark stage

## Colors

### Surface & Canvas
- **Stage Black** (`{colors.background}`): The warm near-black canvas the whole app sits on.
- **Panel** (`{colors.surface}`): Raised cards, track rows, and content panels.
- **Control Gray** (`{colors.surface-elevated}`): Controls, the search field, and banner chrome.
- **Marketing Light** (`{colors.surface-light}`): The rare inverted light band on marketing pages.

### Ink / Text
- **White** (`{colors.ink}`): Primary text on the dark stage.
- **Light Gray** (`{colors.ink-secondary}`): Secondary copy and hover targets.
- **Muted Gray** (`{colors.ink-muted}`): Metadata, play counts, captions, and placeholders.

### Brand Accent
- **SoundCloud Orange** (`{colors.primary}`): The brand. Active waveform, wordmark, primary CTA, key accents.
- **Orange Pressed** (`{colors.primary-hover}`): The button hover / pressed state.
- **Soft Orange** (`{colors.primary-soft}`): Light orange tints and subtle accents.

### Secondary & Status
- **Link Blue** (`{colors.link-blue}`): Informational links — keeps orange reserved.
- **Artist Purple** (`{colors.artist-purple}`): Artist and pro-account contexts.
- **Success Green** (`{colors.success}`): Positive confirmation states.

### Borders & Shadow Tint
- **Hairline** (`{colors.border}`) / **Strong Border** (`{colors.border-strong}`): Dividers and input outlines on dark.
- **Ambient** (`{colors.shadow-ambient}`): Opaque stand-in for the floating-player shadow (originals were rgba — flattened for the Google spec).

## Typography

### Font Family
- **Display / Brand**: `Söhne` — set heavy (800), uppercased, with tight negative leading for the shouting hero blocks. Fallbacks `Interstate, Helvetica Neue, Arial`.
- **Functional UI**: `Interstate` — the dense workhorse for track rows, counts, metadata, and timestamps.
- **Tracking**: negative on display (-1.3px at 65px); slight positive (0.2–0.5px) on labels and overlines.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display` | 65px / 800 / uppercase / lh 0.85 — Söhne hero block |
| `heading` | 28px / 600 — section titles |
| `heading-sub` | 22px / 600 — sub-section headings |
| `body-large` | 19px / 600 — emphasized lead copy, track titles |
| `body` | 17px / 400 — standard Söhne body |
| `body-ui` | 16px / 400 — Interstate functional body |
| `label` | 17px / 600 / 0.2px — button text, UI labels |
| `caption` | 14px / 400 — metadata, timestamps, play counts |
| `overline` | 12px / 700 / uppercase / 0.5px — tags and section markers |

### Principles
- **Söhne shouts, Interstate works**: heavy uppercased Söhne for brand moments; Interstate for the functional density.
- **Negative leading on display**: hero blocks stack tight (lh 0.85) to read as one loud mass.
- **Even functional type**: track feeds are dense — keep UI type quiet and consistent so the orange stays the loudest thing.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px with a 6px sub-step. Track rows and feed items pack tightly (`{spacing.sm}`–`{spacing.lg}`); marketing heroes open up wide (`{spacing.5xl}`–`{spacing.6xl}`).

### Grid & Container
- A dense vertical feed of track rows (artwork + waveform + metadata) is the core pattern
- A persistent bottom player bar anchors the app
- Square-ish artwork tiles arrange in responsive grids for browse/discovery
- Marketing pages center large Söhne hero blocks over near-full-width sections

### Whitespace Philosophy
- **Dense by design**: an audio feed packs many rows per screen; whitespace is the gutter, not luxury padding
- **The waveform is the hero**: each track's orange-tinted waveform gets visual priority within its row
- **Grayscale restraint**: near-black + grays everywhere so one orange carries the whole brand

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; flat fill or hairline `{colors.border}` | Track rows, cards, most app chrome |
| Inset ring (Level 1) | `inset 0 0 0 1px` at ~10% ink | Subtle input and panel containment |
| Subtle (Level 2) | `0 4px 8px` at ~20% black (`{colors.shadow-ambient}`) | Dropdowns, hover states |
| Floating (Level 3) | `0 4px 8px` ambient on the player / overlays | The persistent bottom player, modals |

**Shadow Philosophy**: SoundCloud is nearly flat. On the dark stage, cards and track rows separate with fills and hairline borders rather than shadows — depth on black reads through contrast, not drop-shadows. The only consistently elevated surface is the floating bottom player bar and the occasional overlay, which lift with a single soft ambient shadow. Nothing in the resting feed casts a shadow.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 1px | Hairline chrome, thin dividers |
| `md` | 2px | Track rows, tags, most cards |
| `lg` | 3px | Search field, inputs |
| `xl` | 4px | Larger cards, ghost buttons |
| `pill` | 9999px | Primary buttons, avatars, capsule controls |

The system is a deliberate contrast: a near-square track grid (1–4px radii) against fully **pill** primary buttons. The squareness is heritage SoundCloud; the capsules make the key actions pop out of the grid.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Orange (`{colors.primary}`) fill, white text, **pill** radius. The brand CTA. Hover darkens to `{colors.primary-hover}`.
- **`button-light`** — White fill, near-black text, pill radius. The inverted "Create account" action on dark.
- **`button-secondary`** — Control-gray (`{colors.surface-elevated}`) fill, white text, pill radius. Lower-emphasis actions.
- **`button-ghost`** — Panel (`{colors.surface}`) fill, small `{rounded.xl}` radius — square utility buttons in the track UI.

### Cards
- **`card`** / **`card-elevated`** — Panel / control-gray surface, tiny `{rounded.xl}` radius. Track tiles and content panels.

### Inputs
- **`input`** — Control-gray fill, white text, 3px radius. **`input-focus`** brightens the field; the global search sits in this style.

### Navigation
- **`nav-bar`** — Stage-black (`{colors.background}`), white Söhne labels — the top bar and the anchored bottom player share the dark chrome.

### Accent & Status
- **`link`** — Muted-gray (`{colors.ink-muted}`) text; hover brightens to white (`{colors.ink}`).
- **`tag`** — Control-gray fill, light-gray text, 2px radius — genre and metadata chips.
- **`badge-accent`** — Orange fill, white uppercase overline — the rare orange status pill.

## Do's and Don'ts

### Do
- Build on the warm near-black stage (`{colors.background}`) with grays for everything but the accent
- Reserve SoundCloud orange (`{colors.primary}`) for the active waveform, wordmark, and primary CTA
- Set hero display in heavy uppercased **Söhne** (800) with negative leading (lh 0.85)
- Use **Interstate** for the dense functional layer — track rows, counts, metadata
- Keep the track grid near-square (1–4px radii) and make primary buttons full **pills**
- Separate cards and rows with flat fills and hairline borders (`{colors.border}`), not shadows
- Let each track's orange waveform be the visual hero of its row
- Use `{colors.link-blue}` / `{colors.artist-purple}` for links and pro contexts so orange stays the brand

### Don't
- Don't introduce a second saturated brand color — the orange is the identity
- Don't put the orange on large fills or backgrounds — it's a signal, not a wash
- Don't round the track grid into soft consumer cards — squareness is heritage SoundCloud
- Don't make primary buttons square — they're pills, deliberately distinct from the grid
- Don't shadow the resting feed; depth on black comes from contrast and hairlines
- Don't set body copy in heavy uppercased Söhne — that weight is for hero blocks only
- Don't lighten the stage to mid-gray — the near-black is what makes the orange burn

---

## Responsive Behavior

### Breakpoints
*(SoundCloud exposes many internal breakpoints; the values below are the practical stops the layout behaves to.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single-column track feed; nav collapses to a hamburger; hero display scales 65px → ~36px; bottom player compresses to essentials |
| Tablet | 640–1023px | 2-column browse grid; persistent bottom player; condensed top nav |
| Desktop | 1024–1279px | Full layout: top nav + content feed + anchored bottom player |
| Large | ≥1280px | Wider browse grids and hero blocks; max content width with generous gutters |

### Touch Targets
- Pill buttons run ~36–40px tall with `8px 18–24px` padding
- Track rows expose a full-width tap target; play controls keep comfortable hit areas

### Collapsing Strategy
- **Nav**: full horizontal links → hamburger; the orange CTA persists longest
- **Player**: full transport + waveform → compact play/pause + scrubber on mobile
- **Feed**: multi-column browse grid → single-column track list
- **Type**: hero display scales down while functional UI holds at 16–17px

### Image Behavior
- Square-ish track artwork dominates and reflows as grid children
- Avatars stay circular (`{rounded.pill}`); waveforms are full-width within their row

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Stage Black (`{colors.background}`)
- Text: White (`{colors.ink}`)
- Brand accent / primary CTA: **SoundCloud Orange** (`{colors.primary}`)
- Secondary text: Muted Gray (`{colors.ink-muted}`)
- Panels: Panel (`{colors.surface}`) / Control Gray (`{colors.surface-elevated}`)
- Border: Hairline (`{colors.border}`)

### Example Component Prompts

- "Create a primary button: SoundCloud orange (`{colors.primary}`) fill, white Söhne 17px/600 label, full **pill** radius (`{rounded.pill}`), `8px 24px` padding; hover darkens to `{colors.primary-hover}`"
- "Build a track row on the dark stage (`{colors.background}`): square artwork at `{rounded.md}` (2px), track title in Söhne 19px/600, artist + play count in Interstate 14px muted (`{colors.ink-muted}`), and a full-width waveform with the played portion tinted orange (`{colors.primary}`)"
- "Set a marketing hero: heavy uppercased Söhne at 65px/800, line-height 0.85, letter-spacing -1.3px, white on stage black, with an orange pill CTA below"
- "Make a genre tag: control-gray (`{colors.surface-elevated}`) fill, light-gray (`{colors.ink-secondary}`) Interstate 14px text, `{rounded.md}` (2px) radius, `2px 8px` padding"
- "Lay out the anchored bottom player bar: stage-black chrome, a single soft ambient shadow (`{colors.shadow-ambient}`), orange (`{colors.primary}`) scrubber progress, white transport controls"

### Iteration Guide

1. Is the canvas a warm near-black (`{colors.background}`), and is orange the only saturated color? If a second brand color crept in, remove it.
2. Is the orange used as a signal (waveform, CTA, wordmark) and not a large fill? If it's washing a background, pull it back.
3. Is the hero in heavy uppercased Söhne (800, lh 0.85)? Functional copy should be Interstate, not heavy Söhne.
4. Are track tiles near-square (1–4px) and primary buttons full pills? That contrast is the signature.
5. Are cards separating with fills + hairlines rather than shadows? On black, use contrast for depth.
6. Did the orange lose its charge? That usually means too much of it — restrict it harder.
7. Keep the feed dense — quiet, even functional type so the orange waveforms stay the loudest thing.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by SoundCloud. Brand names and trademarks belong to their respective owners.