Media & Entertainment / iOS / Android / Web

SoundCloud

SoundCloud puts the artwork first by draining the interface of color: a near-black surface, white against gray for hierarchy, small 4px corners, and the brand orange kept out of the UI entirely.

Download
  • #FB5500
  • #FE7F00
  • #F93800
  • #121212
  • #303030
  • #999999
  • #F3F3F3

Color

Every color token in the file, grouped by role.

Brand

  • brand#FB5500
  • brand light#FE7F00
  • brand deep#F93800

Surfaces

  • surface dark#121212
  • surface raised#303030
  • canvas light#F3F3F3
  • surface light#FFFFFF

Text

  • ink#121212
  • on ink#FFFFFF
  • ink muted#999999
  • ink muted light#666666
  • link#044DD2

Lines

  • scrim#00000080 (50%)

Typography

Each style is set with the file's own family, size, weight and spacing.

  • SöhneSöhne is private and not available in open fonts. Shown in Roboto, the closest open match.
  • heading28px / 600 / 36px

    Pack my box with five dozen liquor jugs

  • subheading22px / 600 / 28px

    Pack my box with five dozen liquor jugs

  • body14px / 400 / 20px

    The quick brown fox jumps over the lazy dog

  • label14px / 600 / 20px

    Continue to checkout

  • meta10px / 500 / 10px

    The quick brown fox jumps over the lazy dog

  • button14px / 600 / 20px

    Continue to checkout

Shape

Corner radius tokens.

  • none0
  • field3px
  • sm4px
  • md6px
  • lg8px
  • circle50%

Spacing

The spacing scale, drawn to size.

  • xs3px
  • sm6px
  • base8px
  • md10px
  • lg13px
  • xl16px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button secondary
    button-secondary
  • button mobile
    button-mobile
  • search field
    search-field
  • nav item
    nav-item
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 109 lines
version: alpha
name: SoundCloud-design-analysis
description: "A music streaming site drawn almost entirely in neutrals: a near-black #121212 desktop surface with gray secondary text, a light mobile web page, Soehne at 14px on 20, and small 4px corners on every button."
status: Draft
appVersion: "measured in a browser, 2026-10-06"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  brand: "#fb5500"
  brand-light: "#fe7f00"
  brand-deep: "#f93800"
  ink: "#121212"
  on-ink: "#ffffff"
  ink-muted: "#999999"
  ink-muted-light: "#666666"
  surface-dark: "#121212"
  surface-raised: "#303030"
  canvas-light: "#f3f3f3"
  surface-light: "#ffffff"
  link: "#044dd2"
  scrim: "#00000080"

typography:
  # Font note: "Söhne" is a private font and is not available in open fonts. Closest open alternative: "Roboto".
  heading:
    fontFamily: "Söhne, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 36px
  subheading:
    fontFamily: "Söhne, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 28px
  body:
    fontFamily: "Söhne, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  label:
    fontFamily: "Söhne, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px
  meta:
    fontFamily: "Söhne, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 10px
    fontWeight: 500
    lineHeight: 10px
  button:
    fontFamily: "Söhne, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px

rounded:
  none: 0
  field: 3px
  sm: 4px
  md: 6px
  lg: 8px
  circle: 50%

spacing:
  xs: 3px
  sm: 6px
  base: 8px
  md: 10px
  lg: 13px
  xl: 16px

components:
  button-primary:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 32px
    padding: 6px 12px
  button-secondary:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 32px
    padding: 6px 12px
  button-mobile:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    height: 40px
    padding: 10px 16px
  search-field:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body}"
    rounded: "{rounded.field}"
    height: 36px
    padding: 8px 40px 8px 16px
  nav-item:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    height: 46px
    padding: 0 8px

Overview

SoundCloud is a music streaming service. The public pages are drawn almost entirely in neutrals: a near-black desktop surface with gray secondary text, small 4px corners on the buttons, and a dense 14px row rhythm. The brand orange that the app icon carries does not appear in the logged out interface at all. [Observed]

What defines the look:

  1. Near-black, not pure black. The desktop surface is #121212, with #303030 for the raised search field and a half-opacity black scrim over artwork. [Measured]
  2. Gray carries the hierarchy. White text marks the current item and #999999 marks everything else, so the type does the work that color usually does. [Measured]
  3. Desktop is dark and mobile web is light. At 390 the same pages invert to a #f3f3f3 page with #121212 text and #666666 secondary text. This is a deliberate split, not a theme toggle. [Measured]
  4. Small, almost square corners. Buttons use 4, the search field 3, and only avatars go round. Nothing is a pill. [Measured]
  5. One face at one size. Soehne sets everything, with body, links, nav and buttons all at 14 on 20 and only the weight changing between 400, 600 and 700. [Measured]

Source for this file: the SoundCloud discover page, the top charts page, a chart set page and the SoundCloud profile page, each measured in a browser at 1440 and 390 wide, read on 2026-10-06. The brand orange values were sampled from the official app icon, because no orange appears in the measured pages. No published design system was found. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Brand orange#fb5500App icon only, not in the logged out interface
Orange light#fe7f00Top of the icon gradient
Orange deep#f93800Bottom of the icon gradient
Surface#121212Desktop page, dark buttons
Raised surface#303030Search field
Primary text#ffffffCurrent nav item, titles on dark
Secondary text#999999Inactive nav, meta on dark
Light page#f3f3f3Mobile web page
Text on light#121212Mobile web titles and body
Secondary on light#666666Mobile web meta
Link#044dd2Inline links on the light page
Scrim#00000080Over artwork

The orange is a vertical gradient on the app icon, running #fe7f00 at the top through #fb5500 in the middle to #f93800 at the bottom. [Measured from the official icon]

Typography

Soehne sets the whole interface. Headings are 28 on 36 at 600, section headings 22 on 28 at 600 on desktop and 22 on 31.46 at 700 on mobile web, body and links 14 on 20 at 400, nav and buttons 14 on 20 at 600, and the smallest labels 10 on 10 at 500. The face is loaded at 400, 600 and 700 only, so there is no light or black weight to use. [Measured]

A second face, Interstate, appears on these pages, but only inside the consent banner, which is not part of the product interface. It is left out of the tokens above. [Observed]

Shape and spacing

Corners are small and consistent: 4 on buttons, 3 on the search field, 6 and 8 on a few cards, and 50 percent on avatars. Buttons are 32 high on desktop with 6 by 12 padding and 40 high on mobile web with 10 by 16. Nav items are 46 high with 13 of vertical padding. [Measured]

Iconography and motion

Icons are small monochrome shapes that follow the gray and white text colors. Waveforms are drawn on a canvas, so their colors could not be read. Motion was not measured. [Observed for the icons, Inferred for motion]

Themes

Two surfaces rather than two themes: the desktop pages render dark and the same pages at 390 render light. No theme toggle was found on the public pages. [Measured]

Platform: iOS

The SoundCloud iOS app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Chevron plus previous title with the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for the main areas of a music service. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Play, as a filled circular control over artwork. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. A persistent mini player above the tab bar is normal for this kind of app. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. The mobile web buttons are 40 high, below the 44pt minimum, so the app is expected to use taller targets. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the near-black surface, the gray hierarchy and the small corners with the desktop web. [Inferred]

Platform: Android

The SoundCloud Android app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Chevron plus previous title with the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for the main areas of a music service. [Inferred]

Main action

Expected on Android: Floating action button.

Play, as a filled circular control over artwork. No floating action button was seen on the web, and none is assumed. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. A persistent mini player above the tab bar is normal for this kind of app. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. The mobile web buttons are 40 high, below the 48dp minimum, so the app is expected to use taller targets. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Account deletion and data safety entries were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the near-black surface, the gray hierarchy and the small corners with the desktop web. [Inferred]

Platform: Web

The discover page, the top charts page, a chart set page and the SoundCloud profile page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. The charts page offers tab links (Top 50, New and Hot) rather than a breadcrumb. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A dark top bar on desktop holding the mark, Home, Feed, Library, an Upload link, a 36 high search field and the two account buttons. Nav items are 46 high and mark the current one by turning white against #999999. At 390 the bar becomes a light header with a bottom row of 10px labels. [Measured]

Main action

Expected on Web: Page-level button.

On desktop the Create account button: white fill, #121212 text, 4px corner, 121 by 32. On mobile web the Listen in app button: #121212 fill, white text, 4px corner, 40 high. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

A consent banner overlays the first visit. No other modal was reachable on the public pages. [Observed]

Controls

Expected on Web: Native or custom.

A 36 high search field at #303030 with a 3px corner, tab links at 14 on 20 at 700, and circular avatars. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values. Body stays at 14 on both widths, and only the heading weights and line heights shift between desktop and mobile web. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Desktop buttons are 32 high and nav items 46. Mobile web buttons rise to 40. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

The desktop page reserves a 75px left inset for the rail. [Measured]

Icons

Expected on Web: Any.

Small monochrome shapes that take the gray and white text colors. [Observed]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Sign in and Create account sit in the top bar. Discover, charts and profile pages read without an account. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

The page breaks the usual expectation that one site keeps one surface color: desktop is dark and the 390 view is light, with the same type and the same 4px corners. [Measured]

Cross-platform consistency

Consistent across the measured widths: the type face, the 14 on 20 body, the 4px button corner and the gray secondary text. [Measured]

Intentionally different: the desktop surface is near-black and the 390 surface is light, with the text colors inverted to match. The apps were not measured. [Measured for web, Inferred for the apps]

Do's and Don'ts

Do

  • Use near-black #121212 rather than pure black for the dark surface.
  • Let white against #999999 mark the current item, instead of adding an accent color.
  • Keep button corners at 4 and the search field at 3.
  • Keep body, links, nav and buttons all at 14 on 20 and change only the weight.
  • Raise the search field to #303030 so it reads against the surface.

Don't

  • Don't add the brand orange to the interface. The measured pages do not use it.
  • Don't turn buttons into pills.
  • Don't use a weight below 400 or above 700. Only three are loaded.
  • Don't assume the mobile page is a dark theme.

Known Gaps

  • The signed-in product, the queue, the upload flow and the full player were not measured, since they sit behind an account.
  • Waveforms are drawn on a canvas, so the waveform and play control colors could not be read.
  • The brand orange is given from the official app icon, not from the interface, because no orange appears on any measured page.
  • SoundCloud publishes no design system, so no role names are given and the color names above are ours.
  • The iOS and Android apps were not captured. Their sections are inferred from the web design and platform conventions.
  • Motion, the spacing scale and the icon set were not measured.
  • Account deletion and store policy rules were not verified.
  • Soehne is private. Roboto was chosen as the open alternative after rendering the real face next to candidates at 28px/600 and 17px/600, where it matched the measured line width within 0.2 and 1.8 percent and shares the neo-grotesque structure. Hanken Grotesk was within a hair on both, so this is a judgement call.