W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
SoundCloud
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.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/soundcloud/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/soundcloud/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
SoundCloud
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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@1as the open-source rendering fallback for both heading and body roles.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by SoundCloud
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
SoundCloud
A clear hierarchy in SoundCloud's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
SoundCloud
[email protected]font · heading
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ soundcloud-orange #FF8800 accent-hover
→ soundcloud-red-orange #FF3300 background
→ soundcloud-white #FFFFFF border
→ soundcloud-gray-light #CCCCCC identity
→ soundcloud-white #FFFFFF mark
→ soundcloud-orange #FF8800 on-identity
→ soundcloud-orange #FF8800 primary
→ soundcloud-orange #FF8800 primary-hover
→ soundcloud-orange-pressed #E67300 surface
→ soundcloud-surface #F2F2F2 surface-elevated
→ soundcloud-white #FFFFFF text-primary
→ soundcloud-black #111111 text-secondary
→ soundcloud-charcoal #333333 text-tertiary
→ soundcloud-gray #999999 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter wordmark
→ heading Inter Palette mode mappings (from soundcloud)
Light mode (15 roles)
accent
→ soundcloud-orange accent-hover
→ soundcloud-red-orange background
→ soundcloud-white border
→ soundcloud-gray-light error
→ soundcloud-red-orange primary
→ soundcloud-orange primary-hover
→ soundcloud-orange-pressed success
→ soundcloud-orange surface
→ soundcloud-surface surface-elevated
→ soundcloud-white text-primary
→ soundcloud-black text-secondary
→ soundcloud-charcoal text-tertiary
→ soundcloud-gray warning
→ soundcloud-orange warning-hover
→ soundcloud-orange-pressed Dark mode (15 roles)
accent
→ soundcloud-orange accent-hover
→ soundcloud-red-orange background
→ soundcloud-black border
→ soundcloud-charcoal error
→ soundcloud-red-orange primary
→ soundcloud-orange primary-hover
→ soundcloud-red-orange success
→ soundcloud-orange surface
→ soundcloud-charcoal surface-elevated
→ soundcloud-gray text-primary
→ soundcloud-white text-secondary
→ soundcloud-gray-light text-tertiary
→ soundcloud-gray warning
→ soundcloud-orange warning-hover
→ soundcloud-orange-pressed Rules (9 typed constraints)
error · 5 rules
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 rules
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 rule
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.