# SoundCloud

> `soundcloud@1.0.0`

SoundCloud is a global audio-streaming platform built around user-uploaded music, podcasts, mixes, and DJ sets, headquartered in Berlin. The brand voice is community-first, creator-forward, and unpolished by design — it is the platform where independent artists, bedroom producers, and unsigned acts publish first. Visually, the identity is the signature SoundCloud Orange — a saturated near-vermillion that fills the cloud-and-waveform mark, the play affordance, and the primary action — paired with a spare neutral scale on a light canvas. The brand is light-first in product chrome, with the orange providing the only chromatic punch in an otherwise reserved palette.


**Tags:** `soundcloud`, `music`, `streaming`, `audio`, `podcasts`, `creator-platform`, `light-first`

## Atoms

### Palette

**SoundCloud** · `soundcloud@1.0.0` · Proprietary — All Rights Reserved

> SoundCloud's brand palette built around the signature SoundCloud Orange — the saturated, near-vermillion accent that fills the waveform mark, the play button, and the primary CTA across the player and marketing surfaces. The brand is light-first historically (white-canvas player chrome) but renders comfortably on dark surfaces; the palette is trimmed: a single-color brand accent, deep near-black ink, and a small neutral scale for body text, dividers, and the waveform's quiet ranges. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `soundcloud-orange` | SoundCloud Orange | `#FF8800` |
| `soundcloud-red-orange` | SoundCloud Red Orange | `#FF3300` |
| `soundcloud-orange-pressed` | SoundCloud Orange Pressed | `#E67300` |
| `soundcloud-pantone` | SoundCloud Pantone 158 | `#F37422` |
| `soundcloud-black` | SoundCloud Black | `#111111` |
| `soundcloud-charcoal` | SoundCloud Charcoal | `#333333` |
| `soundcloud-gray` | SoundCloud Gray | `#999999` |
| `soundcloud-gray-light` | SoundCloud Gray Light | `#CCCCCC` |
| `soundcloud-surface` | SoundCloud Surface | `#F2F2F2` |
| `soundcloud-white` | SoundCloud White | `#FFFFFF` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `soundcloud-white` | `#FFFFFF` |
| `surface` | `soundcloud-surface` | `#F2F2F2` |
| `surface-elevated` | `soundcloud-white` | `#FFFFFF` |
| `text-primary` | `soundcloud-black` | `#111111` |
| `text-secondary` | `soundcloud-charcoal` | `#333333` |
| `text-tertiary` | `soundcloud-gray` | `#999999` |
| `primary` | `soundcloud-orange` | `#FF8800` |
| `primary-hover` | `soundcloud-orange-pressed` | `#E67300` |
| `accent` | `soundcloud-orange` | `#FF8800` |
| `accent-hover` | `soundcloud-red-orange` | `#FF3300` |
| `warning` | `soundcloud-orange` | `#FF8800` |
| `warning-hover` | `soundcloud-orange-pressed` | `#E67300` |
| `error` | `soundcloud-red-orange` | `#FF3300` |
| `success` | `soundcloud-orange` | `#FF8800` |
| `border` | `soundcloud-gray-light` | `#CCCCCC` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `soundcloud-black` | `#111111` |
| `surface` | `soundcloud-charcoal` | `#333333` |
| `surface-elevated` | `soundcloud-gray` | `#999999` |
| `text-primary` | `soundcloud-white` | `#FFFFFF` |
| `text-secondary` | `soundcloud-gray-light` | `#CCCCCC` |
| `text-tertiary` | `soundcloud-gray` | `#999999` |
| `primary` | `soundcloud-orange` | `#FF8800` |
| `primary-hover` | `soundcloud-red-orange` | `#FF3300` |
| `accent` | `soundcloud-orange` | `#FF8800` |
| `accent-hover` | `soundcloud-red-orange` | `#FF3300` |
| `warning` | `soundcloud-orange` | `#FF8800` |
| `warning-hover` | `soundcloud-orange-pressed` | `#E67300` |
| `error` | `soundcloud-red-orange` | `#FF3300` |
| `success` | `soundcloud-orange` | `#FF8800` |
| `border` | `soundcloud-charcoal` | `#333333` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `soundcloud-white` | `#FFFFFF` |
| `on-identity` | `soundcloud-orange` | `#FF8800` |
| `background` | `soundcloud-white` | `#FFFFFF` |
| `surface` | `soundcloud-surface` | `#F2F2F2` |
| `surface-elevated` | `soundcloud-white` | `#FFFFFF` |
| `text-primary` | `soundcloud-black` | `#111111` |
| `text-secondary` | `soundcloud-charcoal` | `#333333` |
| `text-tertiary` | `soundcloud-gray` | `#999999` |
| `primary` | `soundcloud-orange` | `#FF8800` |
| `primary-hover` | `soundcloud-orange-pressed` | `#E67300` |
| `accent` | `soundcloud-orange` | `#FF8800` |
| `accent-hover` | `soundcloud-red-orange` | `#FF3300` |
| `mark` | `soundcloud-orange` | `#FF8800` |
| `border` | `soundcloud-gray-light` | `#CCCCCC` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `wordmark` | `heading` |
| `code` | `mono` |

## Rules

### 🛑 error (5)

#### `colorChoice` → `logo.mark.fill`

- **allowed:** soundcloud-orange, soundcloud-red-orange, soundcloud-white, soundcloud-black
- **forbidden:** soundcloud-gray, soundcloud-gray-light, soundcloud-charcoal, soundcloud-pantone

> The SoundCloud cloud-waveform mark renders in the brand orange, the deeper red-orange gradient variant, or as a flat reversed white / black mark on chromatic backgrounds. Filling the mark with the neutral grays or the Pantone approximation (kept as a documented variant only) breaks the published brand treatment. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant

> The SoundCloud mark has a fixed aspect ratio and a small, published set of color variants (orange, white, black, and the orange-to-red-orange gradient). Stretching, rotating, or filling it with arbitrary colors conflicts with the brand's straightforward, creator-forward voice. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> SoundCloud Black (#111111) on SoundCloud White (#FFFFFF) gives ~19:1 — well clear of WCAG 2.1 Level AA. This rule encodes the floor any new foreground / background role pairing must clear on the light canvas. 

#### `contextRestriction` → `roles.colors.primary`

- **forbiddenContexts:** body-text, secondary-link, validation-failure

> SoundCloud Orange is reserved for the brand mark, the play affordance, and the primary action. Using it for body text or for validation-failure / error states collides with its established positive-action meaning and dilutes the brand's only chromatic accent. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The light-first canvas makes contrast checks the default verification on every new role pairing, especially around the orange accent which sits near the AA-large floor on white. 

### ⚠️ warning (3)

#### `contrastRatio` → `roles.colors.primary`

- **against:** `background`
- **minRatio:** `3`
- **standard:** `WCAG-AA-large`

> SoundCloud Orange (#FF8800) on white falls near the 3:1 AA-large floor — the saturated mid-orange is bright enough to read at interactive sizes but is not WCAG-AA-clear for small-text uses. Treat the orange as an accent for marks and interactive surfaces, not for body text. 

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 500, 600, 700, 900

> SoundCloud's display type runs Medium (500) through Bold (700) with the heaviest Black (900) cut reserved for hero / editorial headlines. Lighter weights read as body or UI weight and compromise the editorial impact of the marketing voice. 

#### `fontPairing` → `typography.heading`

- **requires:** `body`
- **minSizeRatio:** `1.5`

> SoundCloud hero typography runs materially larger than the player UI's body text. A 1.5× floor between display and prose preserves the editorial hierarchy and prevents the creator-forward voice from collapsing into a single typographic register. 

### 💡 recommendation (1)

#### `compositionConstraint` → `roles.colors.primary`

- **pairsWith:** soundcloud-white, soundcloud-black, soundcloud-charcoal
- **doesNotPairWith:** soundcloud-gray-light, soundcloud-surface

> SoundCloud Orange reads cleanest against pure white, deep black, or charcoal. Pairing it against the pale surface gray collapses the contrast and softens the orange's role as the brand's only chromatic accent. 

## Provenance

- **Source:** <https://htmlcolors.com/brand-color/soundcloud>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** SoundCloud, the SoundCloud wordmark, and the orange cloud / waveform mark are trademarks of SoundCloud Global Limited & Co. KG. This atom captures brand-atoms' read of SoundCloud's publicly observable identity (the marketing site, the player UI, and the cross-cited brand-color values from third-party aggregators). It is not an official SoundCloud brand-guidelines document. 
- **Imported:** `2026-05-19`
- **Notes:** SoundCloud does not publish a public brand-guidelines document with hex values. The primary orange (#FF8800) and secondary red-orange (#FF3300) are cross-cited by multiple third-party brand-color aggregators (htmlcolors.com, designpieces.com) and match the rendered values on the public player. SoundCloud's marketing site uses Interstate (proprietary, licensed from Font Bureau) for headlines and a system-sans stack for body. This atom substitutes `inter@1` as the open-source rendering fallback for both heading and body roles. 

---

*Generated by the brand-atoms converter. Source: `soundcloud@1.0.0` from the encyclopedia.*