---
title: "SoundCloud design system"
variant: extended
source: https://soundcloud.com/
captured_at: 2026-10-12
theme: dark
industry: media
generator: Design DNA (https://four.wiralomi.com/style/soundcloud-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# SoundCloud · Design System

> Dark stages, bold type, music in motion.

**Theme:** dark · **Industry:** media · **Source:** https://soundcloud.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

SoundCloud’s homepage pairs a near-black canvas with oversized, condensed-feeling headlines and artist-led imagery. A discovery feed and playback controls give the page the character of a live music product rather than a conventional marketing site.

## North star

Keep the canvas nearly black and let bold white type, artist imagery, and music content create the contrast.

## Overview

The visual system is anchored by a near-black #121212 canvas, with white typography carrying most of the contrast and muted gray supporting navigation, metadata, and secondary copy. Darker gray surfaces distinguish search and utility controls without introducing bright section bands. The hero is the main interruption: large artist photography fills a rounded, wide panel, while compact white copy and pill-shaped actions sit over the image. Söhne provides a consistent sans-serif voice, from heavy uppercase display headlines to smaller semibold navigation and track labels. The page alternates between discovery-focused content and spacious promotional feature blocks, keeping the overall dark field continuous. Album artwork and artist photos supply warm, varied color; these image colors are content, not core brand tokens. Thin dividers, restrained borders, and minimal shadows keep the interface flat, while persistent playback controls reinforce the feeling of an active listening environment.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#121212` | `--color-midnight-canvas` | brand | Dominant page background across the hero, discovery feed, feature sections, and footer. |
| Stage White | `#ffffff` | `--color-stage-white` | neutral | Primary headlines, body copy, icons, and light-filled actions against dark surfaces. |
| Quiet Gray | `#999999` | `--color-quiet-gray` | neutral | Secondary navigation, artist metadata, supporting labels, and subdued links. |
| Panel Gray | `#666666` | `--color-panel-gray` | surface | Muted surface tone detected in interface elements; use sparingly for subdued panels. |
| Muted Plum | `#846170` | `--color-muted-plum` | accent | Gradient color detected in decorative or content artwork, not a defining interface color. |
| Divider Charcoal | `#353535` | `--color-divider-charcoal` | semantic | Subtle border and hairline tone on dark interface elements. |
| Control Charcoal | `#303030` | `--color-control-charcoal` | surface | Search input and dark utility-control backgrounds. |
| Footer Gray | `#4f4f4f` | `--color-footer-gray` | semantic | Low-contrast footer border detail, visually secondary to the page canvas. |
| Link Blue | `#699fff` | `--color-link-blue` | accent | Occasional highlighted link, including promotional or account-related text. |
| Slate Teal | `#70929c` | `--color-slate-teal` | accent | Gradient color appearing in decorative artwork; not a core surface or text color. |
| Coral Signal | `#e6846e` | `--color-coral-signal` | accent | Warm gradient accent found in decorative imagery rather than the primary interface. |
| Dusty Rose | `#8e8485` | `--color-dusty-rose` | accent | Muted gradient detail in decorative content; keep out of core UI unless needed. |

### Semantic aliases

`--color-canvas` → `#121212` (Midnight Canvas) · `--color-surface` → `#666666` (Panel Gray) · `--color-surface-2` → `#303030` (Control Charcoal) · `--color-text` → `#ffffff` (Stage White) · `--color-text-muted` → `#999999` (Quiet Gray) · `--color-text-subtle` → `#121212` (Midnight Canvas) · `--color-border` → `#353535` (Divider Charcoal) · `--color-accent` → `#699fff` (Link Blue) · `--color-accent-2` → `#e6846e` (Coral Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#121212` | 18.73:1 | AAA |
| `#ffffff` | `#666666` | 5.74:1 | AA |
| `#ffffff` | `#303030` | 13.2:1 | AAA |
| `#999999` | `#121212` | 6.58:1 | AA |
| `#999999` | `#666666` | 2.02:1 | fail |
| `#999999` | `#303030` | 4.63:1 | AA |
| `#121212` | `#666666` | 3.26:1 | AA-large |
| `#121212` | `#303030` | 1.42:1 | fail |
| `#699fff` | `#121212` | 7.14:1 | AAA |
| `#699fff` | `#666666` | 2.19:1 | fail |

### Gradients

- `linear-gradient(135deg, rgb(230, 132, 110), rgb(132, 97, 112))`
- `linear-gradient(135deg, rgb(132, 97, 112), rgb(112, 146, 156))`
- `linear-gradient(135deg, rgb(142, 132, 133), rgb(132, 97, 112))`
- `linear-gradient(135deg, rgb(112, 146, 156), rgb(132, 97, 112))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Söhne | `--font-body` | webfont | 600, 400, 800, 700 | Site-wide interface and editorial typography, including display headings, body text, buttons, navigation, and links. | Inter |
| a | `--font-a` | system | 400 | Minor system-font fallback detected in a small portion of the interface. | Arial |

- **Söhne:** Use measured weights from 400 to 800; display headlines are uppercase and tightly tracked, while UI copy is compact and semibold.
- **a:** Fallback only; keep the visual system consistent with Söhne or a close sans-serif substitute.

### Type scale — Custom (ratio ≈ 1.85, base 19px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 65px | 800 | 0.85 | -0.02em | uppercase | Söhne | Oversized uppercase hero and promotional headlines. |
| h1 | 28px | 600 | 1.29 | 0 | — | Söhne | Section-level headline and prominent page messaging. |
| body | 19px | 600 | 1.1 | -0.01em | — | Söhne | Hero description and primary supporting copy. |
| caption | 14px | 600 | 1.43 | 0 | — | Söhne | Track labels, metadata, and compact supporting details. |
| button | 17px | 600 | 1.41 | 0.012em | — | Söhne | Primary and secondary action labels. |
| nav | 14px | 600 | 1.43 | 0 | — | Söhne | Header and product navigation labels. |
| link | 14px | 600 | 1.43 | 0 | — | Söhne | Text links across content and footer. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 12, 13, 16, 18, 20, 23, 24, 32, 48, 64, 70, 120 px.
- Section rhythm 48px · element gap 16px · card padding — · max content width 1240px.

The main content sits within a centered, measured maximum width of 1240px. A broad hero panel leads into a centered search and upload area, then a multi-column music feed; lower sections use two-column feature splits before a compact footer. Keep the dark canvas continuous between sections, with a measured 48px section gap and 16px element gap. The overall density is comfortable: feed content is compact, while promotional blocks retain generous breathing room.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · link `9999px` · xs `4px` · sm `12px` · pill `9999px`
- Shadow `inset` (other): `rgba(18, 18, 18, 0.1) 0px 0px 0px 1px inset`
- Motion: standard transition `0.2s ease` on interactive elements.

The page is predominantly flat, with dark surfaces distinguished by subtle tonal shifts and restrained hairlines. Avoid prominent card shadows or layered panels. The hero image and artwork provide depth through photography and color, while controls remain legible through contrast and simple filled shapes.

## Imagery

Large artist photography anchors the hero and creator feature, cropped wide and placed within rounded panels or split layouts. Album covers form a dense horizontal discovery feed, with artwork providing the strongest color variation. A small illustrated music-device composition appears in the listening feature; treat its vivid colors as editorial imagery, not as interface palette.

## Components

### Announcement bar

A centered charcoal notice above the hero, with compact copy, a small icon, a highlighted link, and a dismiss control.

### Hero panel

Wide artist-photo feature with uppercase white headline, concise copy, compact actions, attribution, and carousel indicators.

### Search input

Dark #303030 search field with muted prompt and search icon; measured variants use a pill radius.

### Pill actions

High-contrast rounded actions use white or near-white fills with dark text; the measured primary button uses a 9999px radius.

### Music discovery feed

A dense row of album artwork and track metadata, supported by compact links and persistent playback controls.

### Feature split

Promotional sections pair bold uppercase messaging and supporting copy with photography, QR code, or colorful illustration.

### Footer

Compact utility links, social icons, language selector, and brand mark arranged on the continuing dark canvas.

### Measured component styles

- **Primary button** (“Get started”): background #f3f3f3 · text #121212 · radius 9999px · padding 0px 24px · 600 17px Söhne
- **Secondary button** (“Create account”): background #ffffff · text #121212 · radius 4px · padding 6px 12px · 600 14px Söhne
- **Link** (“Joft 6”): transparent background · text #ffffff · radius 0px · padding 0px · 600 14px Söhne
- **Input**: background #303030 · text #ffffff · border 1px solid · radius 3px · padding 8px 40px 8px 16px · 400 14px Söhne
- **Navigation item** (“SoundCloud Home Feed Library”): transparent background · text #999999 · radius 0px · padding 0px · 600 14px Söhne

## Do

- Use #121212 as the continuous page canvas.
- Set key headlines in bold uppercase white type.
- Use #999999 for secondary labels and navigation.
- Let artist photography and album art carry vivid color.
- Make primary actions high-contrast and pill-shaped.
- Keep content centered within the measured 1240px maximum width.

## Don't

- Do not turn image-artwork colors into broad UI surfaces.
- Do not introduce bright section backgrounds between content blocks.
- Do not use oversized shadows or layered card treatments.
- Do not make secondary navigation as bright as primary headlines.
- Do not crowd feature sections with dense interface controls.
- Do not replace the music feed with generic marketing cards.

## Agent prompt

Build a new SoundCloud-style page with a continuous #121212 Midnight Canvas and a centered content area capped at the measured 1240px width. Use Söhne or Inter, with bold uppercase display headlines, white primary copy, and #999999 Quiet Gray for secondary labels. Keep controls restrained: #303030 Control Charcoal inputs, subtle #353535 Divider Charcoal hairlines, and high-contrast pill actions. Organize the page into a bold artist-led hero, discovery content, and spacious feature sections. Use photography, album artwork, and occasional illustration as the source of vivid color; do not promote artwork hues into large interface backgrounds. Preserve comfortable spacing, flat surfaces, compact metadata, and a clear listening-product feel.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide image-led hero with overlaid messaging and top-aligned navigation. | Artist attribution, Carousel indicators, Account entry | Uppercase display heading, Pill actions, Photo background |
| 2 | content-feed | Centered search and upload actions above a multi-column feed of tracks. | Track discovery, Search, Upload entry, Persistent playback | Dark search field, Album artwork, Compact metadata |
| 3 | feature-split | Two-column promotional feature pairing headline and QR content with colorful illustration. | Platform availability, QR code access | Bold uppercase heading, Illustrated devices, Dark canvas |
| 4 | feature-split | Creator photograph paired with headline, supporting copy, and a learn-more link. | Creator-focused message, Learn-more link | Photo and text split, Uppercase heading, Minimal CTA |
| 5 | footer | Compact centered social, directory, legal, language, and brand links. | Social destinations, Language selection, Legal navigation | Muted link text, Social icons, Brand mark |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/soundcloud-com