---
version: alpha
name: SoundCloud
description: A near-black room where the album art is the only thing allowed to shout.
colors:
  on-surface-variant: "#846170"
  on-surface: "#FFFFFF"
  surface: "#121212"
  primary: "#699FFF"
  surface-2: "#303030"
  ink-muted: "#999999"
  black: "#000000"
  off-white: "#F3F3F3"
  artwork-teal: "#70929C"
  artwork-stone: "#8E8485"
  artwork-coral: "#E6846E"
  consent-link: "#3860BE"
  consent-rule: "#D8D8D8"
  app-frame: "#E5E5E5"
  banner-edge: "rgba(255, 255, 255, 0.15)"
  scrim: "rgba(0, 0, 0, 0.5)"
typography:
  display:
    fontFamily: "Söhne"
    fontSize: 65px
    fontWeight: 400
    lineHeight: 55.25px
    letterSpacing: -1.3px
  heading-1:
    fontFamily: Interstate
    fontSize: 28px
    fontWeight: 400
    lineHeight: 36px
    letterSpacing: 0em
  wall-heading:
    fontFamily: Interstate
    fontSize: 24px
    fontWeight: 400
    lineHeight: 33.6px
    letterSpacing: 0em
  heading-2:
    fontFamily: Interstate
    fontSize: 22px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0em
  hero-copy:
    fontFamily: "Söhne"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 20.9px
    letterSpacing: -0.19px
  search-input:
    fontFamily: Interstate
    fontSize: 18px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  button-large:
    fontFamily: Interstate
    fontSize: 17px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0.2px
  label:
    fontFamily: Interstate
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  body:
    fontFamily: Interstate
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  credit:
    fontFamily: Interstate
    fontSize: 14px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: 0em
  caption:
    fontFamily: Interstate
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
rounded:
  consent-link-button: 2px
  search-field: 3px
  medium-button-promo-banner-transport-con: 4px
  consent-button-qr-code-plate: 8px
  artwork-tile: 12px
  hero-light-theme-block: 16px
  large-cta-hero-session-buttons: 9999px
spacing:
  "1": 4px
  "2": 8px
  "3": 12px
  "4": 16px
  "5": 20px
  "6": 24px
  "8": 32px
  "16": 64px
  "20": 80px
  "30": 120px
  1-5: 6px
  7-5: 30px
---
# SoundCloud — Style Reference

> A near-black room where the album art is the only thing allowed to shout.

**Theme:** dark

SoundCloud paints one interface and inherits a second. Its own is a near-black room — a `#121212` canvas with `#303030` for anything you can touch — running from the marketing home through Discover into the signed-out Feed and Library walls; the inherited one is the consent layer, a near-white slab set in Interstate that drops over every captured page and shares nothing with the room but the word SoundCloud. Inside SoundCloud's system the palette is deliberately colourless: white ink, a grey one step down at `#999999`, one blue held back for links, and four muddy placeholder tones standing in for cover art that has not loaded. The signature move is that **white is the action colour** — create account, play, upload are all white plates on the black, so the brightest object on screen is the thing you are meant to press. Söhne does two jobs and skips the middle: 65px at weight 800 with −1.3px tracking and a line-height shorter than the type is tall, then a hard drop to 14px/600 for every label in the chrome. The rhythm follows — a 120px hero, 64px around the trending band and the mobile teaser, 80px under the footer, and a 4 → 8 → 16 → 32px gap ladder inside them.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas | `#121212` | `--color-canvas` | Page ground and mobile-teaser block; also the ink on white buttons. The darkest plane — nothing sits below it. |
| Surface | `#303030` | `--color-surface` | Every touchable-but-not-primary plate: search field, transport bar, promo banner, skip/shuffle/volume controls. |
| Ink | `#FFFFFF` | `--color-ink` | Primary text, and the fill of the primary actions — double duty as ink and CTA plate. |
| Ink Muted | `#999999` | `--color-ink-muted` | Nav items, footer links, secondary labels. Counted 279 times, all text: never let it fill a box. |
| Link Blue | `#699FFF` | `--color-link` | Inline links only — the banner's "Learn More", the footer locale. Counted 159 times, all text, zero fills, zero borders. Not a button colour. |
| Black | `#000000` | `--color-black` | The hero's create-account plate and the consent layer's accept/reject buttons — darker than the canvas, for the highest-commitment click. |
| Off-White | `#F3F3F3` | `--color-offwhite` | The "Get started" pill, the consent slab's ground, the 2px outline on consent buttons. A half-step below Ink. |
| Artwork Rose | `#846170` | `--color-art-rose` | Cover-art placeholder fill and gradient stop. Fill-only, never chrome. |
| Artwork Teal | `#70929C` | `--color-art-teal` | Cover-art placeholder fill and gradient stop. Fill-only. |
| Artwork Stone | `#8E8485` | `--color-art-stone` | Cover-art placeholder fill and gradient stop. Fill-only. |
| Artwork Coral | `#E6846E` | `--color-art-coral` | Placeholder fill and gradient stop — the warmest paint here, and it is a loading state. |
| Consent Link | `#3860BE` | `--color-consent-link` | "Privacy Policy" and "List of Partners" in the consent slab. The inherited blue — never on the dark canvas. |
| Consent Rule | `#D8D8D8` | `--color-consent-rule` | Hairline splitting the consent slab's two text columns. Border-only. |
| App Frame | `#E5E5E5` | `--color-app-frame` | The `.l-main` border on signed-out Feed and Library. Border-only, not on the marketing home. |
| Banner Edge | `rgba(255, 255, 255, 0.15)` | `--color-banner-edge` | The 1px outline on the promo banner — the system's visible line on dark. |
| Scrim | `rgba(0, 0, 0, 0.5)` | `--color-scrim` | The consent layer's filter over the page. Half-black, no blur. |

## Tokens — Typography

### Söhne — the entire SoundCloud interface, from the 65px hero to the 12px sidebar label, carrying hierarchy on size and weight rather than on family · `--font-soehne`
- **Substitute:** Inter, Neue Haas Grotesk, Helvetica Now Display
- **Weights:** 100, 400, 600, 700, 800
- **Sizes:** 12px, 14px, 17px, 18px, 19px, 22px, 24px, 28px, 65px
- **Line height:** 14px at 14px (a 1.0 lock on the artist credit) up to 55.25px at 65px — a display line-height *below* its own size
- **Letter spacing:** −1.3px on the 65px display, −0.19px on the 19px hero copy, +0.2px on 17px button labels, `normal` on everything else
- **Role:** The entire SoundCloud interface, from the 65px hero to the 12px sidebar label, carrying hierarchy on size and weight rather than on family.

### Interstate — the consent layer only: its headings, its body copy and its two button labels, on the near-white slab · `--font-interstate`
- **Substitute:** Roboto, Franklin Gothic, Archivo
- **Weights:** 100, 400, 600, 700
- **Sizes:** 14px, 16px
- **Line height:** 20px, 20.8px and 27.2px — a 1.3–1.7 ratio, notably looser than Söhne at the same size
- **Letter spacing:** 0.14px on the 14px button and preference labels, `normal` elsewhere
- **Role:** The consent layer only: its headings, its body copy and its two button labels, on the near-white slab.

### `a` — the zero-size face on image-replacement controls, where the accessible label is real text rendered at 0px · `--font-ir`
- **Substitute:** none — this is a technique, not a typeface
- **Weights:** 400
- **Sizes:** 0px
- **Line height:** 0px and `normal`
- **Letter spacing:** normal
- **Role:** The zero-size face on image-replacement controls (`sc-ir`), where the label — "Skip to previous", "Repeat track" — is real text collapsed to nothing so a sprite can take its place. `sans-serif` at 400 is the observed tail of the stack.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 65px / 800 | 55.25px | −1.3px | `--text-display` |
| Heading 1 | 28px / 600 | 36px | normal | `--text-h1` |
| Wall Heading | 24px / 100 | 33.6px | normal | `--text-wall` |
| Heading 2 | 22px / 600 | 28px | normal | `--text-h2` |
| Hero Copy | 19px / 600 | 20.9px | −0.19px | `--text-lede` |
| Search Input | 18px / 400 | 20px | normal | `--text-input-lg` |
| Button Large | 17px / 600 | 24px | 0.2px | `--text-button-lg` |
| Label | 14px / 600 | 20px | normal | `--text-label` |
| Body | 14px / 400 | 20px | normal | `--text-body` |
| Credit | 14px / 700 | 14px | normal | `--text-credit` |
| Caption | 12px / 600 | 16px | normal | `--text-caption` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** comfortable in the marketing bands, compact in the product chrome

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 1 | 4px | `--spacing-1` |
| 1.5 | 6px | `--spacing-1-5` |
| 2 | 8px | `--spacing-2` |
| 3 | 12px | `--spacing-3` |
| 4 | 16px | `--spacing-4` |
| 5 | 20px | `--spacing-5` |
| 6 | 24px | `--spacing-6` |
| 7.5 | 30px | `--spacing-7-5` |
| 8 | 32px | `--spacing-8` |
| 16 | 64px | `--spacing-16` |
| 20 | 80px | `--spacing-20` |
| 30 | 120px | `--spacing-30` |

The pills break the grid on purpose: 13px/23px and 0px/18px are optical paddings sized to cap height inside a 9999px radius, not steps on the ladder.

### Border Radius
| Element | Value |
|---------|-------|
| Consent link-button | 2px |
| Search field | 3px |
| Medium button, promo banner, transport control | 4px |
| Consent button, QR code plate | 8px |
| Artwork tile (home) | 12px |
| Hero light-theme block | 16px |
| Artwork tile (Discover) | 3% |
| Play button, gallery slider button | 50% |
| Carousel dot | 100% |
| Large CTA, hero session buttons | 9999px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Artwork hairline | `rgba(18, 18, 18, 0.1) 0px 0px 0px 1px inset` | `--shadow-artwork` |

Recorded 50 times, all on cover-art spans across the home and Discover grids. Inset, not elevation: it keeps a pale album cover from bleeding into the canvas.

### Layout
- **Page max-width:** not measured — the census carries no width; the tiles show one centred column, header to footer, on a single gutter
- **Section gap:** 120px around the hero slide container; 64px on the trending title band and the mobile teaser; 80px under the marketing footer
- **Card padding:** 20px 30px on the promo banner; 64px 70px on the mobile teaser block
- **Element gap:** 16px (hero content, action row, list), 8px (hero CTA row), 4px (artist credit, footer logo), 32px (QR row, social links)
- **Chrome heights:** `--header-height: 46px`, `--play-controls-height: 48px` *(declared, not painted)*

## Components

### Global Header
**Role:** The fixed strip that carries the wordmark, three destinations and the session buttons across every page.
Built on the `.header__navMenuItem.sc-mr-1x` row: Söhne 14px/600 at 20px, `normal` tracking, ink `#999999` — grey is the resting state, and the active destination goes `#FFFFFF` at the same size and weight, underlined. The logo link `.header__logoLink.header__logoLink-wordmark.sc-border-box.sc-ir` is image-replaced: its text is "SoundCloud" at 0px in `#999999`. Padding and height are `not measured`; the site declares `--header-height: 46px`. The header has no fill row of its own — it sits straight on the canvas, so the search field's `#303030` is the only edge you perceive.

### Search Field
**Role:** The single input in the product chrome — the fastest path from the header to a track.
`.headerSearch__input.sc-input.g-all-transitions-300`: fill `#303030`, ink `#FFFFFF`, Söhne 14px/400 at 20px, padding `8px 16px`, radius `3px`, border `none`, shadow `none`. That 3px is the tightest corner in the system — almost square, which keeps a full-width field reading as a slot rather than a button. On the marketing home the same class sets an 18px/400 input at 20px, the one place 18px appears. The `#303030` fill on `#121212` is the entire edge treatment: no ring, no glow.

### Session Button Pair
**Role:** Sign in and Create account, always adjacent, always the same geometry — one recessed, one raised.
`.g-opacity-transition.sc-button.sc-button-medium.loginButton` is fill `#121212`, text `#FFFFFF`, Söhne 14px/600 at 20px, padding `6px 12px`, radius `4px`, no border, no shadow. Its partner `.g-opacity-transition.sc-button.sc-button-medium.signupButton` inverts to fill `#FFFFFF`, text `#121212` on identical type, padding and radius. That is the whole hierarchy mechanism: the secondary takes the canvas colour and disappears into the strip, the primary is a white plate, no outline separates them, and the shared `6px 12px` keeps both the same size. Over hero photography the pair restates at pill radius and swaps sides: `.g-opacity-transition.frontHero__loginButton.sc-button.sc-button-` is fill `#FFFFFF`, text `#000000`, 14px/600, padding `0px 18px`, radius `9999px`, while `.g-opacity-transition.frontHero__createAccountButton.sc-button.sc` is fill `#000000`, text `#FFFFFF` on the same metrics — over an image, black is the emphatic plate. Zero vertical padding leaves the capsule's height to line-height alone.

### Primary CTA Pill
**Role:** The marketing home's commitment buttons — get started, upload, explore.
`.sc-button.sc-button-large.sc-button-cta.sc-button-secondary` ("Get started"): fill `#F3F3F3`, ink `#121212`, Söhne 17px/600 at 24px with `0.2px` tracking, padding `0px 24px`, radius `9999px`, no border, no shadow. Siblings share the pill and the ink, not the metrics: `.frontContent__uploadButton.sc-button.sc-button-cta.sc-button-pri` ("Upload your own") is fill `#FFFFFF`, text `#121212`, 17px/600, padding `13px 23px`; `.trendingTracks__ctaButton.sc-button.sc-button-large.sc-button-ct` ("Explore trending playlists") is fill `#FFFFFF`, text `#121212` at 14px/600, same `13px 23px`. The transparent variant `.sc-button.sc-button-large.sc-button-transparent` ("Explore Artist Pro") carries only type — Söhne 17px/600, 24px, `0.2px`, ink `#FFFFFF`; fill, padding and radius are `not measured`.

### Hero Slide
**Role:** The home page's opening statement — a split-frame artist photograph with the pitch set over it.
`.frontHeroSlide__title` is Söhne 65px/800, line-height `55.25px`, tracking `−1.3px`, ink `#FFFFFF` — a display line that sets tighter than it is tall, so "DISCOVER. / GET DISCOVERED." stacks as one solid block. Beneath it `.frontHeroSlide__copy` runs 19px/600 at 20.9px with `−0.19px` tracking: the same negative-tracking logic scaled down, and unusually heavy for copy at that size. `.frontHeroSlide__container` carries 120px of vertical padding. The credit block `.frontHeroSlide__artistInfo` gaps at 4px, pairing `.frontHeroSlide__artistInfoName` (14px/700, 14px line-height) with `.frontHeroSlide__artistInfoDescription` (14px/400, 14px) — a 1.0 lock that welds name to role. `.frontHeroSlide__cta` gaps at 8px, the content column at 16px.

### Carousel Controls
**Role:** Moving between hero slides and along the Discover shelves without a visible track.
`.frontHero__carouselNavDot` is a `100%` radius dot on the home hero — three of them, size and fill `not measured`; the tiles show small open rings under the slide. The shelf equivalent on Discover is `.tileGallery__sliderButton.tileGallery__slideForwardButton.sc-but`: fill `#303030`, text `#FFFFFF`, 14px/600, padding `6px 12px`, radius `50%`, no border, no shadow. Surface tone made circular — the same `#303030` as the search field and player bar, so a control floating over the artwork grid still reads as chrome, not content.

### Artwork Tile
**Role:** The unit the whole product is made of — a square cover with a title and a subtitle under it.
Two variants, split by page. On the home `.image.image__lightOutline.sc-artwork.sc-artwork-placeholder-6` takes radius `12px`, no fill, no border, no shadow; on Discover the same class takes `3%` — a percentage corner that scales with the tile. The inner span `.sc-artwork.sc-artwork-placeholder-6.image__full.g-opacity-transi` adds the system's only shadow, `rgba(18, 18, 18, 0.1) 0px 0px 0px 1px inset`, darkening the tile's own edge. Before art loads the placeholder paints a two-stop gradient from the four artwork tones — `#E6846E → #846170`, `#70929C → #846170`, `#846170 → #70929C`, `#8E8485 → #E6846E`, and five more permutations of the same four. `.playableTile__artwork` reserves 190px of vertical space on the home, 159.359px on Discover.

### Player Transport Bar
**Role:** The persistent playback strip pinned to the bottom of every page, signed in or not.
`.playControls__inner` is a `section` filled `#303030`, radius `0px`, padding `0px 0px`, no border, no shadow — a squared-off full-bleed band, the floor of the window. Inside, every control is image-replaced text at 0px: `.skipControl.sc-ir.playControls__control.playControls__prev` and `…__next` are fill `#303030`, ink `#FFFFFF`, padding `6px 12px`, radius `4px`; `.shuffleControl.sc-ir.sc-button.sc-button-secondary` matches; `.repeatControl.sc-ir.sc-button.sc-button-secondary` keeps `4px` at `0px 0px`; `.volume__button.volume__speakerIcon.sc-button.sc-button-secondary` takes `16px 4px`. The exception is `.playControl.sc-ir.playControls__control.playControls__play`: fill `#FFFFFF`, padding `6px 6px`, radius `50%` — the white circle that breaks the `4px` corner. `--play-controls-height: 48px` *(declared, not painted)*.

### Promo Banner
**Role:** The dismissible announcement strip between the header and the page content.
`.banner.sc-type-medium.sc-text-body.sc-p-2x`: fill `#303030`, padding `20px 30px`, radius `4px`, border `1px rgba(255, 255, 255, 0.15)`, shadow `none`. The 15% edge stops a `#303030` plate from dissolving into `#121212`. Type is Söhne 14px/400 at 18px in `#FFFFFF`, the lead-in "Now available:" at the same size in weight 700, and `.firstFansPromotionBanner__link` ("Learn More") in `#699FFF` at 14px/400. Centred content, close glyph right.

### Sign-in Wall
**Role:** What Feed and Library show a signed-out visitor — a headline and an auth card, nothing else.
The headline is `.signinRedirectMessage__text`: Söhne 24px/100 at 33.6px in `#FFFFFF`. Weight 100 is the lightest the census records for Söhne, and it lands here — the wall asks rather than sells. Below it the auth card is framed by the `.l-main` border in `#E5E5E5`; its own fill, padding and radius are `not measured`. The tiles show it stacking three provider buttons, an "Or with email" label, an email field and a Continue button at full column width, "Need help?" beneath. The compressed footer runs the same Söhne 14px/400 `#999999` link list as the marketing footer.

### Marketing Footer
**Role:** The dot-separated legal and resource index that closes the home page.
`.l-footer.sc-text-verylight.sc-text-secondary.marketing` sets Söhne 14px/400 at 20px in `#999999`, separated by middots rather than columns — the header's inactive-nav ink, run at page scale. It takes 80px of vertical padding; `.footer__logoLink` gaps at 4px, `.footer__socialLinks.sc-mb-4x` at 32px. The locale control `.localeSelector_language.sc-text` ("English (US)") is the one tinted item down here: Söhne 14px/400 in `#699FFF`.

### Consent Layer
**Role:** The inherited privacy slab — a different typeface, a different ground, and the only light surface in the capture.
`.otFlat.ot-iab-2.bottom.vertical-align-content` is a full-width `div` filled `#F3F3F3`, radius `0px`, padding `0px 0px`, no border, no shadow, under a `.onetrust-pc-dark-filter.ot-fade-in` scrim of `rgba(0, 0, 0, 0.5)`. Type is Interstate: headings 16px/600 (20.8px for "Keep the scene alive & your vibe fresh", 27.2px for "Personalized Ads"), body 14px/100 in `#000000`, links 14px/700 in `#3860BE`. The buttons are the tell — "I accept" is fill `#000000`, text `#FFFFFF`, 14px/400 with `0.14px` tracking, padding `12px 30px`, radius `8px`, border `2px #F3F3F3`; `.cookie-setting-link` ("Manage preferences") inverts to fill `#FFFFFF`, text `#000000` on the same metrics. A `#D8D8D8` hairline splits the text columns.

## Do's and Don'ts

### Do
- Put `#303030` under anything interactive that is not the primary action — search field, player bar, banner, transport controls. One luminance step is the whole ladder.
- Make the primary action a white or off-white plate with `#121212` ink: radius `9999px` on marketing pages, `4px` in product chrome.
- Set display type at 65px/800, `−1.3px` tracking, `55.25px` line-height. The leading being shorter than the size is the point.
- Keep `#699FFF` inline and textual — its 159 observations are text, every one.
- Use the `4px → 8px → 16px → 32px` gap ladder inside bands, `64px / 80px / 120px` between them.
- Let the album art carry the saturation. The four non-neutral paints — `#846170`, `#70929C`, `#8E8485`, `#E6846E` — are counted only as fills on `.image.image__lightOutline.sc-artwork.sc-artwork-placeholder-6` and its siblings, so the chrome around them stays greyscale.
- Reach for the inset hairline `rgba(18, 18, 18, 0.1) 0 0 0 1px` when an image sits edge-to-edge.

### Don't
- Don't add a drop shadow. The shadow census records one value, `rgba(18, 18, 18, 0.1) 0px 0px 0px 1px inset`, 50 times on `.sc-artwork.sc-artwork-placeholder-2.image__full.g-opacity-transi` and its siblings — an inset hairline on cover art. Elevation here is luminance, not blur.
- Don't fill anything with `#999999` or `#699FFF`. All 279 observations of `#999999` are text on rows like `.header__navMenuItem.sc-mr-1x`, and all 159 of `#699FFF` are text on rows like `.firstFansPromotionBanner__link`.
- Don't tint rose, teal, stone or coral into the interface — they are fills on cover-art divs, a loading state, not a brand palette.
- Don't introduce a coloured CTA. White is the action colour, and any hue you add outranks the music.
- Don't mix the consent layer's vocabulary — Interstate, the `#F3F3F3` ground, `8px` radius, `2px` outline, `#3860BE` — into SoundCloud's dark system. They share a page, not a language.
- Don't soften the hero's tracking. `−1.3px` and `−0.19px` are what make the voice sound like a wall rather than a website.
- Don't put a border on the dark canvas casually. The box census carries one outlined box on it — `.banner.sc-type-medium.sc-text-body.sc-p-2x`, at `1px rgba(255, 255, 255, 0.15)`.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#121212` | Page ground, mobile-teaser block, recessed session button |
| 1 | Surface | `#303030` | Search field, player transport bar, promo banner, secondary controls |
| 2 | Ink Plate | `#FFFFFF` | Primary buttons and the play control — the brightest object is the action |
| — | Consent Slab | `#F3F3F3` | The inherited layer's ground, above a `rgba(0, 0, 0, 0.5)` scrim |

## Elevation

Depth is luminance, two steps of it: `#121212` to `#303030`, then straight to `#FFFFFF`. Nothing between, no ambient shadow, no blur. The only box-shadow the pages paint is `rgba(18, 18, 18, 0.1) 0px 0px 0px 1px inset` on 50 cover-art spans — *inset*, pushing an edge in rather than lifting anything out. The visible outline on dark is the promo banner's `1px rgba(255, 255, 255, 0.15)`; signed-out Feed and Library add an `#E5E5E5` frame on `.l-main`. Layer by brightness, never by floating.

## Imagery

Photography is the system, and it is documentary rather than promotional: an artist in a red top pulling the fabric over her face against a brick wall; a producer in headphones lit blue-green at a mic. Full-bleed, split-frame, graded dark enough that white display type sits on it without a scrim. One different register cuts in — the mobile teaser's collage of phone, keyboard, headphones and chain in rust orange and lilac with hard cut edges, the only drawn artwork in the capture. Cover art is the third layer: user-supplied squares whose colour SoundCloud does not control, which is exactly why the chrome refuses to compete. Placeholders resolve to two-stop gradients from `#E6846E`, `#846170`, `#70929C` and `#8E8485` — muddy on purpose, so a loading grid never looks designed.

## Layout

Full-bleed dark canvas, contained content: one centred column shared by header, hero, shelves and footer, outer width `not measured`. The home is a stack of bands — hero carousel at 120px of vertical padding, a centred search-or-upload block, a trending shelf whose title band takes 64px, alternating image/text sections, the mobile teaser at 64px, the footer at 80px. Discover swaps bands for horizontal shelves: a 22px/600 title, a row of tiles reserving 159.359px of artwork height, a `50%`-radius forward button at the right edge, and a sidebar of store badges, a middot link list and the locale control. Feed and Library collapse to one centred wall — headline, auth card, compressed footer — inside an `#E5E5E5` frame. Navigation is a single strip: wordmark left, three destinations, wide search field centre, session buttons and an overflow glyph right. The player bar is pinned to the bottom of every page.

## Typography Voice

Söhne runs in two modes with almost nothing between. Mode one is the wall: 65px at weight 800, `−1.3px` tracking, `55.25px` line-height — leading below the font size, so headlines interlock into one mass while the negative tracking tightens the counters until the words read as a stencil. Mode two is the chrome: 14px at 600 for labels, nav items and buttons, 14px at 400 for links and footnotes, both at 20px, both `normal`. Hierarchy is therefore *size* and *ink*, not styling — a nav item and a footer link are the same type in different greys. Two exceptions earn their place: 19px/600 at `20.9px` for hero copy, heavier and tighter than copy that size usually is, and 24px at weight 100 on the sign-in wall, where the system whispers. Positive tracking appears at `0.2px` on 17px button labels and `0.14px` on the consent layer's 14px — optical corrections, not style.

## Agent Prompt Guide

## Quick Color Reference
- background: `#121212`
- text: `#FFFFFF`
- surface: `#303030`
- border: `rgba(255, 255, 255, 0.15)`
- accent: `#699FFF`
- primary action: `#FFFFFF`

## Example Component Prompts
1. **Session Button Pair**: Two adjacent buttons on a `#121212` canvas, Söhne 14px/600 at 20px, padding 6px 12px, radius 4px, no border, no shadow. First fill `#121212`, text `#FFFFFF`; second fill `#FFFFFF`, text `#121212`. Equal size — hierarchy is the inversion.
2. **Search Field**: Full-width input, fill `#303030`, text `#FFFFFF`, Söhne 14px/400 at 20px, padding 8px 16px, radius 3px, no border, no shadow, magnifier glyph inset right. On `#121212` the fill is the only edge — no ring.
3. **Hero Slide**: Split frame on `#121212`; left half a full-bleed artist photograph, right half a darkened image carrying the text. Headline Söhne 65px/800, line-height 55.25px, letter-spacing −1.3px, `#FFFFFF`, two lines ending in periods. Body Söhne 19px/600, line-height 20.9px, letter-spacing −0.19px. Container padding 120px vertical, content gap 16px, CTA row gap 8px. CTA a `#F3F3F3` pill, radius 9999px, padding 0 24px, Söhne 17px/600 at 24px, letter-spacing 0.2px, ink `#121212`. Credit bottom-left: name 14px/700 at 14px over role 14px/400 at 14px, gap 4px, `#FFFFFF`. Three `100%`-radius dots centred beneath.
4. **Artwork Shelf**: Title Söhne 22px/600 at 28px, `#FFFFFF`. Below it a horizontal row of square cover tiles, radius 12px, no border, each with an inset `rgba(18, 18, 18, 0.1) 0px 0px 0px 1px` hairline and 190px of reserved artwork height; unloaded tiles take a two-stop gradient `#E6846E` → `#846170`. Under each, a 14px/600 `#FFFFFF` title over a 14px/400 `#999999` subtitle. Forward control at the right edge: fill `#303030`, radius 50%, padding 6px 12px, `#FFFFFF` chevron.
5. **Player Transport Bar**: Full-bleed bottom strip, fill `#303030`, radius 0, no border, no shadow, 48px tall. Centre a row of icon buttons — previous / next / shuffle / repeat at fill `#303030`, `#FFFFFF` glyph, padding 6px 12px, radius 4px; play at fill `#FFFFFF`, radius 50%, padding 6px 6px; volume padding 16px 4px, radius 4px. Labels are real text collapsed to 0px.

## Similar Brands
- **NTS Radio** — a near-monochrome grid where show artwork supplies every colour on the page.
- **Resident Advisor** — dark canvas, grey chrome-weight type, event imagery doing the chromatic work.
- **MUBI** — a black room built so film posters are the only saturated objects, white as the action colour.
- **Boiler Room** — heavy display type over documentary performance photography, tightly tracked and shouting.
- **Beatport** — dense dark catalogue UI where the fixed-radius cover tile is the atomic unit.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #121212;
  --color-surface: #303030;
  --color-ink: #FFFFFF;
  --color-ink-muted: #999999;
  --color-link: #699FFF;
  --color-black: #000000;
  --color-offwhite: #F3F3F3;
  --color-art-rose: #846170;
  --color-art-teal: #70929C;
  --color-art-stone: #8E8485;
  --color-art-coral: #E6846E;
  --color-consent-link: #3860BE;
  --color-consent-rule: #D8D8D8;
  --color-app-frame: #E5E5E5;
  --color-banner-edge: rgba(255, 255, 255, 0.15);
  --color-scrim: rgba(0, 0, 0, 0.5);

  /* Typography — Families */
  --font-soehne: 'Söhne', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-interstate: 'Interstate', 'Roboto', ui-sans-serif, system-ui, sans-serif;
  --font-ir: 'a', sans-serif;

  /* Typography — Scale */
  --text-display: 65px;      --leading-display: 55.25px;   --tracking-display: -1.3px;
  --text-h1: 28px;           --leading-h1: 36px;
  --text-wall: 24px;         --leading-wall: 33.6px;
  --text-h2: 22px;           --leading-h2: 28px;
  --text-lede: 19px;         --leading-lede: 20.9px;       --tracking-lede: -0.19px;
  --text-input-lg: 18px;     --leading-input-lg: 20px;
  --text-button-lg: 17px;    --leading-button-lg: 24px;    --tracking-button-lg: 0.2px;
  --text-label: 14px;        --leading-label: 20px;
  --text-body: 14px;         --leading-body: 20px;
  --text-credit: 14px;       --leading-credit: 14px;
  --text-caption: 12px;      --leading-caption: 16px;

  /* Spacing */
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7-5: 30px;
  --spacing-8: 32px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-30: 120px;

  /* Border Radius */
  --radius-link-btn: 2px;
  --radius-input: 3px;
  --radius-control: 4px;
  --radius-consent: 8px;
  --radius-artwork: 12px;
  --radius-block: 16px;
  --radius-artwork-fluid: 3%;
  --radius-circle: 50%;
  --radius-dot: 100%;
  --radius-pill: 9999px;

  /* Shadow */
  --shadow-artwork: rgba(18, 18, 18, 0.1) 0px 0px 0px 1px inset;

  /* Chrome */
  --header-height: 46px;
  --play-controls-height: 48px;
}
```
### Tailwind v4
```css
@theme {
  --color-canvas: #121212;
  --color-surface: #303030;
  --color-ink: #FFFFFF;
  --color-ink-muted: #999999;
  --color-link: #699FFF;
  --color-black: #000000;
  --color-offwhite: #F3F3F3;
  --color-art-rose: #846170;
  --color-art-teal: #70929C;
  --color-art-stone: #8E8485;
  --color-art-coral: #E6846E;
  --color-consent-link: #3860BE;
  --color-consent-rule: #D8D8D8;
  --color-app-frame: #E5E5E5;
  --color-banner-edge: rgba(255, 255, 255, 0.15);
  --color-scrim: rgba(0, 0, 0, 0.5);

  --font-soehne: 'Söhne', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-interstate: 'Interstate', 'Roboto', ui-sans-serif, system-ui, sans-serif;
  --font-ir: 'a', sans-serif;

  --text-display: 65px;
  --text-display--line-height: 55.25px;
  --text-display--letter-spacing: -1.3px;
  --text-h1: 28px;
  --text-h1--line-height: 36px;
  --text-wall: 24px;
  --text-wall--line-height: 33.6px;
  --text-h2: 22px;
  --text-h2--line-height: 28px;
  --text-lede: 19px;
  --text-lede--line-height: 20.9px;
  --text-lede--letter-spacing: -0.19px;
  --text-input-lg: 18px;
  --text-input-lg--line-height: 20px;
  --text-button-lg: 17px;
  --text-button-lg--line-height: 24px;
  --text-button-lg--letter-spacing: 0.2px;
  --text-label: 14px;
  --text-label--line-height: 20px;
  --text-body: 14px;
  --text-body--line-height: 20px;
  --text-credit: 14px;
  --text-credit--line-height: 14px;
  --text-caption: 12px;
  --text-caption--line-height: 16px;

  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7-5: 30px;
  --spacing-8: 32px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-30: 120px;

  --radius-link-btn: 2px;
  --radius-input: 3px;
  --radius-control: 4px;
  --radius-consent: 8px;
  --radius-artwork: 12px;
  --radius-block: 16px;
  --radius-artwork-fluid: 3%;
  --radius-circle: 50%;
  --radius-dot: 100%;
  --radius-pill: 9999px;

  --shadow-artwork: rgba(18, 18, 18, 0.1) 0px 0px 0px 1px inset;
}
```