SoundCloud Design System Deep Dive

1. Brand Overview

SoundCloud’s visual language is exactly what you’d expect from a platform that lives at the intersection of music culture and individual expression — stripped back in the right places, but with enough functional styling to feel like a real tool. This is not a “dribbble-ware” site. It’s engineered for heavy daily use by creators, listeners, and curators.

What’s striking is how neutral a lot of the base UI is. The brand’s signature orange? Nowhere to be seen in the extracted primary UI colors. The interface relies heavily on white, black, and grayscale with occasional accent colors pulled in for functional states. That’s deliberate — the content (album artwork, waveform colors) is the visual hero. The UI steps back.

Typography is utilitarian: the Söhne family dominates, with Interstate still lurking in some contexts, probably for legacy reasons. Sizes are clear, weights are decisive — no half measures. Headings are big and bold, body copy is compact and readable, buttons are high-contrast and unambiguous.

Spacing is mostly on an 8px-derived scale, but with a lot of fractional values (6.5px, 9.8px) that hint at pixel-perfect tweaks to fit legacy components. Rounded corners? Mostly subtle — 2px and 4px for buttons and inputs — except when they go fully circular for playback controls.

The design philosophy here is: UI as backstage crew. It’s there to support, not to perform. Black and white base, minimal shadows, clear states, responsive breakpoints from tiny phones (330px) to widescreen desktops (1280px+). This is a system built for a global audience on every device, with accessibility and speed in mind.

If you’re designing inside this system, the rules are clear: stick to the palette, keep corners consistent, don’t overload with effects, and always make sure the content is the loudest thing in the room.

2. Color System

2.1 Primary Colors

Primary in the extracted data is #ffffff (white). That’s unusual — most brands designate their main brand color as primary. Here, “primary” clearly means primary surface/background rather than primary brand accent. White dominates backgrounds, text in dark mode gets flipped, and black (#000000) is the other half of the equation.

The absence of the brand’s famous orange in the system palette is telling. It’s probably injected in specific marketing or waveform contexts, but not baked into global UI tokens. This keeps the product’s chrome neutral so any album art or theme can stand out without clashing.

Compared to streaming competitors like Spotify (deep green) or Apple Music (pink gradients), SoundCloud’s core UI is color-agnostic. That’s a smart move when user-generated content is so visually varied.

2.2 Complete Palette

CSS variable colors also include functional accents:

• --checkbox-checked-background-color: #f50 (SoundCloud orange, used for form controls)
• --artist-color: #5a45fd (purple accent for artist badges)
• --support-bg-color: #558b2f (green for support messages)
• --success-color: #008850
• --font-error-color: #d61348
• Social platform colors: --twitter-color #1da1f2, --facebook-color #003bb3, --pinterest-color #e60023, etc.

2.3 Color Relationships

The system leans on high contrast: #ffffff on #121212 or #000000 on #ffffff. That’s WCAG AAA territory for body text. Secondary text (#999999) on white still meets AA for large text but can be light for small text — they mitigate this by using it sparingly.

Dark mode is inverted but not fully “OLED black” — #121212 keeps it softer. Functional colors (blue for links, purple for artist tags) sit on top of neutral backgrounds, so they pop without needing a gradient or shadow.

2.4 Usage Guide

• Do: Pair #ffffff text on #121212 for maximum clarity.
• Do: Use #3370dd for interactive text; change to #005fcc on hover.
• Avoid: Putting #999999 on #e4e1e1 — too low contrast.
• Avoid: Using brand orange outside its intended elements (checkbox states, waveform UI).

3. Typography

3.1 Font Families

Two main families:

1. Söhne — Modern grotesk, system-neutral. Fallbacks: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Lucida Grande, Apple Color Emoji, Segoe UI Emoji.
2. Interstate — More condensed, utilitarian. Fallbacks: Lucida Grande, Lucida Sans Unicode, Lucida Sans, Garuda, Verdana, Tahoma.

No Google or Adobe font imports — likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

H1 at 60px is huge — this is for hero titles, landing pages. The 36px variants (thin and regular) give flexibility for secondary headlines. Body/UI text sits in the 14–17px range — very readable without wasting space. Captions at 13px keep metadata subtle.

4. Spacing & Layout

4.1 Spacing Scale

Base is 8px-derived but not pure. Common values:

4.2 Layout

Breakpoints span:

330, 400, 425, 530, 600, 768, 890, 1024, 1080, 1280px.

This suggests a fluid responsive approach with specific cutoffs for mobile portrait, phablet, small tablet, standard tablet, small desktop, and large desktop. No max content width is specified here, but 1280px is likely the top-end layout width.

5. Visual Elements

Border Radius: Mostly subtle (1px, 2px, 3px, 4px). 8px for larger buttons, 16px for labels, 20px for pills. Specific cases: 50% for circular controls, 100% for full-bleed rounded containers.

Shadows: Minimal. Present values are soft and sparse — e.g., rgba(0,0,0,0.2) 0 4px 8px 0. Many components are flat with borders instead.

Borders: 1px solid in light grays for separators, 2px solid white for high-contrast elements. Border colors match palette exactly, no off-tone shades.

6. Components

6.1 Buttons

Variant 1 — Dark Primary

• Default: bg #121212, text #ffffff, padding 6px 12px, radius 4px, no border.
• Hover: text #ffffff, bg rgba(var(--white-rgb),.25).
• Focus: outline rgba(102, 102, 102, 0.75) 2px, box-shadow same.
• Font: 600 weight, 14px.

Variant 2 — Light Secondary

• Default: bg #ffffff, text #121212, same padding/radius.
• Hover: same as primary hover (translucent overlay).
• Focus: same as primary.

Variant 3 — CTA Large

• Default: bg #f3f3f3, text #121212, padding 6px 12px, radius 4px.
• Font: 17px, 600 weight.

Variant 4 — Circular Icon

• Default: bg #303030, radius 50%, padding 6px.
• Font: 12px, 400 weight.

Variant 5 — Large Inverse

• Default: bg #000000, text #ffffff, padding 12px 30px, radius 8px, border 2px solid #f3f3f3.

6.2 Links

Five styles, from gray (#999999) secondary links to white bold (#ffffff) primary nav items. Hover states unify to #3860be (rgb(56,96,190)), no underlines.

6.3 Forms

Search input:

• Default: bg #303030, text #ffffff, radius 3px, padding 8px 40px 8px 16px.
• Focus: outline rgba(102,102,102,0.75) 2px, bg #1eaedb.

No checkbox/radio styles extracted except for --checkbox-checked-background-color (#f50).

6.4 Cards

No explicit “card” class, but containers use off-white or dark backgrounds, subtle borders, minimal or no shadow.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-999: #999999;
  --color-gray-121: #121212;
  --color-gray-555: #555555;
  --color-gray-e4e1e1: #e4e1e1;
  --color-gray-ddd5d5: #ddd5d5;
  --color-gray-303030: #303030;
  --color-gray-f3f3f3: #f3f3f3;
  --color-blue-3370dd: #3370dd;
  --color-blue-005fcc: #005fcc;
  --color-orange-f50: #ff5500;
  --color-purple-artist: #5a45fd;
  --color-green-support: #558b2f;
  --color-green-success: #008850;
  --color-red-error: #d61348;
  --color-twitter: #1da1f2;
  --color-facebook: #003bb3;
  --color-pinterest: #e60023;

  /* Typography */
  --font-soehne: "Söhne", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Lucida Grande, Apple Color Emoji, Segoe UI Emoji;
  --font-interstate: "Interstate", Lucida Grande, Lucida Sans Unicode, Lucida Sans, Garuda, Verdana, Tahoma;

  /* Spacing */
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-6-5: 6.5px;
  --space-8: 8px;
  --space-9-8: 9.8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-64: 64px;
  --space-96: 96px;

  /* Radius */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-50pct: 50%;
  --radius-100pct: 100%;

  /* Shadows */
  --shadow-1: rgba(0,0,0,0.2) 0px 4px 8px 0px;
  --shadow-2: rgb(153,153,153) 0px 2px 10px -3px;
}

8. AI Coding Assistant Prompt

# SoundCloud Design System Specification

You are a SoundCloud design expert. Build UIs matching their visual language exactly.

## Brand Context
SoundCloud’s UI is neutral, functional, and content-first. Chrome elements are monochrome with occasional functional color accents. Typography is utilitarian and clear. Spacing follows an 8px-derived scale with subtle custom tweaks.

## Color Palette
- White: #ffffff — Primary background, text in dark mode
- Black: #000000 — Primary text, dark backgrounds
- Gray 999: #999999 — Secondary text
- Gray 121: #121212 — Dark surfaces (dark mode, header)
- Gray 555: #555555 — Icons, secondary UI
- Gray e4e1e1: #e4e1e1 — Light divider
- Gray ddd5d5: #ddd5d5 — Light divider
- Charcoal 303030: #303030 — Player controls background
- Off White f3f3f3: #f3f3f3 — Buttons, secondary surfaces
- Blue 3370dd: #3370dd — Link text
- Blue 005fcc: #005fcc — Link hover
- Orange f50: #ff5500 — Checkbox checked state
- Purple artist: #5a45fd — Artist badge
- Green support: #558b2f — Support messages
- Green success: #008850 — Success states
- Red error: #d61348 — Error text
- Twitter: #1da1f2 — Social link
- Facebook: #003bb3 — Social link
- Pinterest: #e60023 — Social link

## Typography
- Headings, body: "Söhne", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Lucida Grande, Apple Color Emoji, Segoe UI Emoji
- Legacy: "Interstate", Lucida Grande, Lucida Sans Unicode, Lucida Sans, Garuda, Verdana, Tahoma

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 60px | 700 | 1.00 | Hero titles |
| H1 alt | 36px | 100 | 0.56 | Intro headings |
| H1 alt | 36px | 400 | 0.56 | Intro headings |
| H2 | 28px | 600 | 1.29 | Section headings |
| H3 | 22px | 600 | 1.27 | Subsection headings |
| Body LG | 18px | 600 | 1.33 | Buttons, links |
| Body | 17px | 600 | 1.41 | Body text |
| Caption | 14px | 400/600/700 | 1.29–1.43 | Metadata |

## Spacing & Grid
Base: 8px-derived. Tokens: 2px, 3px, 4px, 5px, 6px, 6.5px, 8px, 9.8px, 10px, 12px, 13px, 14px, 15px, 16px, 20px, 24px, 32px, 64px, 96px.

## Border Radius
- sm: 2px — buttons, inputs
- md: 4px — buttons, inputs
- lg: 8px — large buttons
- xl: 16px — labels
- pill: 20px — tags
- full: 50% — circular controls

## Shadows & Depth
Minimal shadows: rgba(0,0,0,0.2) 0 4px 8px 0; rgb(153,153,153) 0 2px 10px -3px.

## Components

### Primary Button
Default: bg #121212; color #ffffff; padding 6px 12px; radius 4px; no border; font 14px/600.  
Hover: bg rgba(255,255,255,0.25); color #ffffff.  
Focus: outline rgba(102,102,102,0.75) 2px; box-shadow same.

### Secondary Button
Default: bg #ffffff; color #121212; padding 6px 12px; radius 4px.  
Hover/Focus: same overlay as primary.

### CTA Large
Default: bg #f3f3f3; color #121212; font 17px/600.

### Circular Icon Button
Default: bg #303030; radius 50%; padding 6px.

### Links
Default: color #999999 (secondary) or #ffffff (primary nav).  
Hover: color #3860be; no underline.

### Input Field (Search)
Default: bg #303030; color #ffffff; radius 3px; padding 8px 40px 8px 16px.  
Focus: outline rgba(102,102,102,0.75) 2px; bg #1eaedb.

## Layout & Responsive Rules
Breakpoints: 330, 400, 425, 530, 600, 768, 890, 1024, 1080, 1280px.  
Fluid scaling between breakpoints.

## Interaction Rules
- State changes: ~150ms ease
- Focus indicators: 2px solid rgba(102,102,102,0.75)
- Hover overlays: rgba(255,255,255,0.25) on dark surfaces

## DO List
- Use only defined palette
- Keep spacing multiples of 8px or defined tokens
- Use Söhne for all new UI text
- Maintain consistent border radius per component type
- Prioritize high-contrast text

## DON'T List
- Introduce new colors
- Mix sharp and rounded corners
- Add heavy shadows
- Reduce text contrast below AA standards

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #121212;
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background-color: rgba(255,255,255,0.25);
}
.btn-primary:focus {
  outline: 2px solid rgba(102,102,102,0.75);
}
```

Search Input:
```css
.input-search {
  background: #303030;
  color: #ffffff;
  border-radius: 3px;
  padding: 8px 40px 8px 16px;
  border: 1px solid transparent;
}
.input-search:focus {
  outline: 2px solid rgba(102,102,102,0.75);
  background: #1eaedb;
}
```

9. Summary

TL;DR — SoundCloud’s design system is neutral, functional, and content-led. It uses a monochrome base with sparse functional colors, clear typography, subtle radii, and minimal shadows. The UI gets out of the way so the music and artwork can shine.

Brand Keywords:

• content-first
• neutral-functional
• monochrome-base
• subtle-radius
• minimal-effects