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

# Epidemic Sound · Design System

> Editorial typography meets vivid sound in motion.

**Theme:** light · **Industry:** media · **Source:** https://www.epidemicsound.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._

Epidemic Sound’s homepage pairs oversized editorial headlines with a warm neutral canvas and vivid feature bands. Video-led case studies and a dark catalog gallery make the music library feel both expressive and easy to explore.

## North star

Let editorial serif headlines and the warm neutral canvas frame vivid, media-led color moments without adding visual clutter.

## Overview

The page establishes a warm, quiet base with Gallery Canvas (#f1f0eb), letting large black Sebenta headlines carry the opening message. Inter supports navigation, body copy, metadata, and controls with compact, clear hierarchy; display headlines use tight tracking and occasional italic emphasis for an editorial cadence. Full-width feature bands in Signal Blue (#20afff), Pop Pink (#ff82c2), and Golden Yellow (#ffda40) interrupt the neutral flow with distinct product moments. A muted warm beige section supports the app and news imagery, while a continuous charcoal catalog area creates contrast for colorful category tiles and artist cards. The composition alternates centered feature statements with left-aligned editorial sections and media grids. Wide video thumbnails and artist photography provide real-world context rather than decorative illustration. Buttons are black pills with white text; cards and most content surfaces stay flat, with restrained rounding and hairline separators instead of shadow-heavy elevation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Ink | `#000000` | `--color-ink` | neutral | Primary headline and body text, navigation, inverse surface, and black primary CTA background. |
| Soft Graphite | `#60605e` | `--color-soft-graphite` | neutral | Muted supporting copy, captions, footer details, and secondary text on light sections. |
| Gallery Canvas | `#f1f0eb` | `--color-gallery-canvas` | surface | Main warm off-white page canvas behind the hero, video rail, feature sections, FAQ, and footer. |
| Quiet Divider | `#deddd9` | `--color-quiet-divider` | semantic | Hairline borders and subtle section, media, and control surfaces. |
| Midnight Slate | `#292c33` | `--color-midnight-slate` | surface | Large dark catalog and exclusive-track area, with light text and colorful media cards. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Navigation capsule, white text on black controls, and occasional light content surfaces. |
| Pop Pink | `#ff82c2` | `--color-pop-pink` | accent | Full-width plugin feature band, product cards, and graphic blocks behind the closing CTA. |
| Golden Yellow | `#ffda40` | `--color-golden-yellow` | accent | Find Similar feature band and selected artist-card information panels. |
| Hazy Periwinkle | `#cfd6e5` | `--color-hazy-periwinkle` | surface | Muted blue-lavender app-section media background; supporting imagery, not a core interface color. |
| Slate Shadow | `#363941` | `--color-slate-shadow` | semantic | Minor dark media detail within the dark catalog treatment, not a primary page surface. |
| Signal Blue | `#20afff` | `--color-signal-blue` | accent | Full-bleed Studio feature band and occasional feature-link highlight. |
| Sky Blue | `#22aaf7` | `--color-sky-blue` | accent | Minor variation within the blue feature or media treatment; keep subordinate to Signal Blue. |
| Pale Fog | `#e7e7e4` | `--color-pale-fog` | neutral | Subtle text, navigation, and button detail on light or contrasting surfaces. |
| Muted Khaki | `#bfbda8` | `--color-muted-khaki` | semantic | Appears within media imagery only; do not use as a defining interface color. |
| Artist Green | `#5ad363` | `--color-artist-green` | accent | Bright artist-card panel within the exclusive tracks gallery, not a global surface. |
| Vivid Coral | `#ff6138` | `--color-vivid-coral` | accent | Small accent observed in a link or media detail; use sparingly, not as a section color. |

### Semantic aliases

`--color-canvas` → `#f1f0eb` (Gallery Canvas) · `--color-surface` → `#292c33` (Midnight Slate) · `--color-surface-2` → `#deddd9` (Quiet Divider) · `--color-surface-3` → `#ffffff` (Clean White) · `--color-surface-4` → `#000000` (Ink) · `--color-text` → `#000000` (Ink) · `--color-text-muted` → `#60605e` (Soft Graphite) · `--color-text-subtle` → `#ffffff` (Clean White) · `--color-border` → `#deddd9` (Quiet Divider) · `--color-accent` → `#ff82c2` (Pop Pink) · `--color-accent-2` → `#ffda40` (Golden Yellow) · `--color-accent-3` → `#20afff` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f1f0eb` | 18.4:1 | AAA |
| `#000000` | `#292c33` | 1.5:1 | fail |
| `#000000` | `#deddd9` | 15.45:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#60605e` | `#f1f0eb` | 5.52:1 | AA |
| `#60605e` | `#292c33` | 2.22:1 | fail |
| `#60605e` | `#deddd9` | 4.64:1 | AA |
| `#60605e` | `#ffffff` | 6.3:1 | AA |
| `#ffffff` | `#f1f0eb` | 1.14:1 | fail |
| `#ffffff` | `#292c33` | 13.98:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 500, 600, 400, 700 | Navigation, body copy, buttons, captions, links, and uppercase eyebrows. | Inter |
| Sebenta | `--font-display` | webfont | 500 | Display headlines and section headings throughout the page. | DM Serif Display |

- **Inter:** Use measured weights 400–700; headlines are not Inter. Keep UI copy clean and restrained; eyebrows are uppercase with expanded tracking.
- **Sebenta:** Use medium-weight editorial serif forms, tight negative tracking, and occasional italic emphasis within headlines.

### Type scale — Augmented Fourth (ratio ≈ 1.38, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 500 | 1 | -0.03em | — | Sebenta | Oversized editorial hero or campaign headline. |
| h1 | 64px | 500 | 1.06 | -0.03em | — | Sebenta | Primary page headline and major top-level statements. |
| h2 | 48px | 500 | 1.13 | -0.03em | — | Sebenta | Feature, category, editorial, and CTA section headings. |
| h3 | 40px | 500 | 1.2 | -0.03em | — | Sebenta | Secondary content headings and grouped feature titles. |
| h4 | 32px | 500 | 1.25 | -0.03em | — | Sebenta | Smaller card and subsection headings. |
| body | 16px | 500 | 1.5 | 0 | — | Inter | Main explanatory copy and supporting paragraph text. |
| caption | 14px | 500 | 1.71 | 0 | — | Inter | Media credits, song details, and compact supporting labels. |
| button | 16px | 600 | 1.5 | 0 | — | Inter | Primary and secondary action labels. |
| nav | 14px | 600 | 1.71 | 0 | — | Inter | Main navigation and compact utility links. |
| link | 16px | 500 | 1.5 | 0 | — | Inter | Inline actions and content links. |
| eyebrow | 14px | 600 | 1.71 | 0.1em | uppercase | Inter | Uppercase section labels above editorial headlines. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 5, 6, 8, 10, 12, 16, 24, 48, 56 px.
- Section rhythm 56px · element gap 8px · card padding 24px · max content width 1328px.

Use the measured 1328px page maximum as the wide-screen content boundary, with a comfortable density and a consistent 8px base spacing rhythm. The hero is centered and spacious, followed by a horizontally browsable video-card rail. Alternate full-bleed colored feature bands with quieter canvas sections, then use a four-column category grid and six-column artist gallery at wide widths. Editorial and FAQ sections return to left alignment. Preserve generous section breathing room and use responsive stacking rather than compressing text or media.

## Shape & elevation

- Radius: button `9999px` · nav `9999px` · link `8px` · xs `8px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The visual system is predominantly flat: no measured shadows, with contrast created by solid section bands, photography, and the dark catalog surface. Use thin #deddd9 separators and light control fills where needed. Buttons are rounded pills; content cards are mostly square-edged or subtly rounded, with layering reserved for image overlays and CTA color blocks.

## Imagery

Use broad cinematic video stills for brand examples, with darkened or naturally toned footage and visible client identity overlays where appropriate. Category cards rely on colorful, varied campaign imagery; artist cards use portrait photography paired with vivid flat-color information panels. Product and app sections can use clean interface imagery. Keep media rectangular with restrained corner rounding, and avoid adding decorative 3D effects.

## Components

### Primary CTA

Black pill with white 16px Inter semibold label; pair with a lighter secondary action when both account creation and sales contact are offered.

### Navigation capsule

White rounded navigation bar on the warm canvas, with compact Inter links and separated account actions at the right.

### Video case-study rail

Horizontal row of cinematic thumbnails with brand and track-credit labels; allow partial next-card visibility and carousel controls.

### Color feature band

Full-bleed solid blue, pink, or yellow section with a serif feature heading, concise Inter copy, and product media.

### Artist feature card

Portrait media above a vivid color information panel containing artist name, genre, and compact performance metrics.

### Category tile grid

Four-column image-led genre and use-case tiles on the charcoal surface, with clear labels and a compact browse action.

### FAQ accordion

Left-aligned serif heading followed by full-width pale rows, concise questions, and trailing disclosure chevrons.

### Measured component styles

- **Primary button** (“Create free account”): background #000000 · text #ffffff · radius 10000px · padding 9.6px 24px · 600 16px Inter
- **Secondary button** (“Learn more”): background #ffffff · text #000000 · radius 0px · padding 4px 24px · 600 14px Inter
- **Link** (“"Glory Bound"”): transparent background · text #000000 · radius 0px · padding 0px · 500 16px Inter
- **Card** (“Studio, a faster way of soundtracking Sy”): background #ff82c2 · text #000000 · radius 0px · padding 24px · 400 16px Inter
- **Navigation item** (“Music”): transparent background · text #000000 · radius 0px · padding 0px · 600 14px Inter

## Do

- Use Gallery Canvas (#f1f0eb) as the default page background.
- Set prominent headlines in Sebenta or a close editorial serif substitute.
- Use Inter for all navigation, body copy, buttons, and metadata.
- Reserve Signal Blue, Pop Pink, and Golden Yellow for bold feature moments.
- Use black pill buttons with white labels for primary actions.
- Let photography and video carry the colorful detail in media galleries.

## Don't

- Don't turn every section into a saturated color block.
- Don't use heavy shadows or layered glass effects.
- Don't replace the editorial serif headlines with generic geometric sans.
- Don't use bright artist-card colors as the default page background.
- Don't over-round cards or media; reserve pill radii for controls.
- Don't let product mock-up colors redefine the core brand palette.

## Agent prompt

Build a new Epidemic Sound-style page using a warm Gallery Canvas (#f1f0eb) foundation and a clear editorial hierarchy. Use Sebenta-style serif display headlines with tight tracking and occasional italic emphasis; use Inter for navigation, body copy, captions, and controls. Keep the top navigation as a white capsule and primary actions as black pills with white labels. Structure content in spacious, clear sections: centered intro, media-led horizontal case studies, alternating full-bleed Signal Blue (#20afff), Pop Pink (#ff82c2), or Golden Yellow (#ffda40) feature bands, then a Midnight Slate (#292c33) catalog gallery. Use authentic cinematic stills and artist portraits, flat surfaces, restrained rounding, and subtle dividers. Preserve responsive grids and readable alignment; avoid shadow-heavy decoration or unrelated gradients.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting points with paired actions on a warm canvas. | primary and secondary CTA, reassurance note | large serif headline, pill buttons, centered copy |
| 2 | gallery | Horizontal, multi-column video rail with a partial next card visible. | carousel browsing, track and brand credits | cinematic thumbnails, compact captions, carousel arrows |
| 3 | feature-split | Full-bleed blue feature area with product content arranged across the section. | learn-more link, product feature introduction | Signal Blue band, pink information card, product media |
| 4 | integrations | Centered integration announcement within a full-width pink band. | integration awareness | Pop Pink background, centered serif heading, software icons |
| 5 | video | Centered eyebrow, heading, and description on a warm neutral surface. | feature explanation | small uppercase label, serif headline, video media |
| 6 | video | Centered content on a full-width yellow band. | feature explanation | Golden Yellow background, uppercase eyebrow, serif heading |
| 7 | product-showcase | Two-column app promotion with centered headline and product imagery. | app store links, mobile discovery | warm beige surface, device or app imagery, download links |
| 8 | category-nav | Four-column category grid on a large charcoal section. | browse by use case, explore all music | dark surface, image tiles, serif section heading |
| 9 | other | Left-aligned eyebrow and headline within the continuing dark area. | section introduction | uppercase eyebrow, light serif heading, charcoal background |
| 10 | product-grid | Six-column horizontal card gallery with carousel controls. | artist discovery, carousel browsing | portrait cards, vivid information panels, dark surround |
| 11 | content-feed | Editorial introduction above a three-column media-led news area. | news discovery, carousel pagination | warm beige background, large feature image, pink story card |
| 12 | cta | Large left-aligned statement over layered pink graphic blocks on the warm canvas. | account creation CTA | oversized serif headline, pink geometric blocks, black pill button |
| 13 | faq | Left-aligned heading above a single-column list of full-width accordion rows. | expandable answers, licensing reassurance | serif heading, pale rows, trailing chevrons |
| 14 | footer | Four-column link directory with brand and locale controls, followed by a compact legal row. | multi-category navigation, language selector, social links | warm canvas, small Inter links, brand mark |

## Source CSS custom properties (selected)

```css
--color-brand-white: #fff;
--color-brand-black: #000;
--animation-duration: 600ms;
--es-i-text-font-family: Inter, "Inter Fallback: Arial", "Inter Fallback: Helvetica Neue", Arial, "Helvetica Neue";
```

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