Design System Inspiration of Epidemic Sound
1. 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.
2. Color Palette & Roles
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.
3. Typography Rules
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.
4. Component Stylings
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).
5. Layout Principles
- A sticky header of pill buttons over an off-white page with big Sebenta headlines and media tiles.
6. Depth & Elevation
--es-elevation-floating 0 8px 16px rgba(0,0,0,.25); --es-elevation-bottom mirrors it upward.
7. 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.
8. Responsive Behavior
Not measured. Desktop 1440×1000 only.
9. 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."
10. Voice & Tone
Not assessed as authored voice.
11. 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.
12. Principles
- Worry-free rights. The licence model is the product.
- Artists paid fairly. 50/50 royalties and upfront payments.
- Every action has four states.
13. Personas
Not researched. No persona claim is made from a UI capture.
14. States
Hover: black pills lift to #272727; translucent pills deepen 6%. Press: #333333, another 6%.
Focus: 2px black outlines.
15. Motion & Easing
Not measured.
Tier 1 sources: https://www.epidemicsound.com/ (live homepage — 223 root custom properties read via getComputedStyle, Tailwind excluded; Sebenta and Inter loaded; three components measured at rest, hover, pressed and focus, captured 2026-09-26); https://www.epidemicsound.com/zz-this-does-not-exist (nonsense-path control — HTTP 404 in the browser, read 2026-09-26); https://www.epidemicsound.com/about-us/ (About — 3 billion plays a day, 55,000+ original tracks, direct licensing, read 2026-09-26); https://corporate.epidemicsound.com/press-and-media/press-releases/2026/financial-times-recognizes-epidemic-sound-as-one-of-europes-fastest-growing-companies-2026/ (press release — Stockholm, Sweden dateline; "Swedish Unicorn"; 50/50 royalty split, read 2026-09-26)