Design System Inspiration of Epidemic Sound

Overview

Visual Theme & Atmosphere

Epidemic Sound licenses music and sound effects to brands and creators — “an expansive catalog of world-class music and sound effects that’s seen and heard over 3 billion times a day”, more than 55,000 original tracks, and a direct licence model where “we own all the rights to all our tracks”. It partners with artists on a 50/50 royalty split with upfront payments. Its press releases are datelined Stockholm, Sweden, and call it a “Swedish Unicorn”.

The marketing site runs a light override of a dark-first product system: an off-white page #f1f0eb, black ink and black pill buttons, translucent blue-grey secondary pills, and brand accents — pink #ff82c2, azur #20afff, yellow #ffda40, red #ff6138. Headlines are set in Sebenta, text in Inter.

What makes it worth reading:

• A dark-first system with a light override. --es-color-background-base is #121418 and text primary is white; the marketing body carries alternative-light-theme-override and inverts to black on off-white.
• Complete action families. --es-color-action-{primary, accent, positive, negative, segment, secondary, tertiary, ghost} each with hovered, pressed and disabled values.
• Named brand neutrals. Off-white, off-black, fog, ecru, moss and stone sit beside the brights, plus platform colours (--es-color-platform-tiktok, -youtube, -twitch …) for integrations.

Primary tasks

• Explore music and sound effects.
• Create a free account; see pricing.

Brand Narrative

A Stockholm company that owns its whole catalogue so creators never worry about rights. Its product lives in the dark; its storefront turns the lights on — off-white, black pills and Sebenta headlines — with pink, azur and yellow as the music.

Principles

• Worry-free rights. The licence model is the product.
• Artists paid fairly. 50/50 royalties and upfront payments.
• Every action has four states.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured with getComputedStyle on epidemicsound.com: 223 root custom properties — --es-* 168 plus a few --color-brand-*; Tailwind’s --tw-* (20) excluded.

Brand

• Pink (#ff82c2) — --es-color-brand-pink, --es-color-action-accent; hovered (#e575af), pressed (#cc689b).
• Azur (#20afff) — focus and active inputs · Yellow (#ffda40) — trim and track highlight · Red (#ff6138) — negative.
• Off-white (#f1f0eb) — the page · Off-black (#292c33).
• Fog (#cfd6e5) · Ecru (#e4d9cf) · Moss (#bfbda8) · Stone (#9793a5).
• Positive (#5ad363) · Purple (#bb76ff) — action-segment, background-new.

Ink and surfaces

• Foreground (#000000) on the light override; Background base (#121418) in the dark product theme.
• Inverse hovered (#272727) · Inverse pressed (#333333).
• Canvas (#ffffff) · Light tint (#3d4d74) — the translucent secondary pills.

Typography

Font family

Sebenta (500) for display and Inter (400–700) for text; both load (document.fonts).

Scale

H1 80px/500 Sebenta; H2 32px/500 Sebenta; section labels 14px/600 Inter uppercase; buttons 14px/600.

Layout

• A sticky header of pill buttons over an off-white page with big Sebenta headlines and media tiles.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

--es-elevation-floating 0 8px 16px rgba(0,0,0,.25); --es-elevation-bottom mirrors it upward.

Motion & Easing

Not measured.

Components

Measured with focus under a real Tab key and a hover counted only when :hover matched. The consent banner offered only “Change cookie settings” and “Accept”; it was never answered.

• Primary pill — Create free account: #000000, white 14px/600, full pill, 44px. Hover #272727, press #333333; focus a 2px black outline.
• Secondary pill — Log in: rgba(61,77,116,0.12) → 0.18 → 0.24.
• Ghost pill — What we offer, For business: transparent → 6% → 12% of the same tint.

Radius

Full pills (10000px).

States

Hover: black pills lift to #272727; translucent pills deepen 6%. Press: #333333, another 6%. Focus: 2px black outlines.

Do’s and Don’ts

Do

• Put black pills on off-white #f1f0eb, and step translucent pills 6% → 12% → 18% → 24%.
• Use Sebenta for headlines, Inter for text.
• Keep pink #ff82c2 for accent actions and likes.

Don’t

• Don’t use pure white as the marketing ground; it is off-white.
• Don’t make buttons square; everything is a full pill.
• Don’t use the platform colours for Epidemic’s own UI.

Voice & Tone

Not assessed as authored voice.

Agent Prompt Guide

Quick Color Reference

#f1f0eb off-white · #000000 ink · #272727 hover · #ff82c2 pink · #20afff azur · #ffda40 yellow · #ff6138 red · #121418 dark base

Example Component Prompts

• “A 44px black pill, white 14px/600 Inter; hover #272727, press #333333; focus a 2px black outline.”
• “An 80px Sebenta headline in black on #f1f0eb.”

Governance

Known Gaps

• Contrast, button-secondary. Text #000000 on #3d4d741f measures 2.51:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-ghost. Text #000000 on #00000000 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.