№ epidemicsound-com--blog

Part of Epidemic Sound - 4 pages captured →

Epidemic Sound · Blog

Stark Swiss precision, bold black ink on a sterile bone canvas

Marquee Heroeditorial minimalism music creatorlight

Clean editorial layout featuring a high-contrast, saturated hero image paired with bold, oversized sans-serif typography. The composition uses generous white space to create a modern, breathable reading experience. · music blog layout, editorial hero, bold typography, minimalist blog, creator economy design

Epidemic Sound · Blog - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Epidemic Sound · Blog - full page scroll

Epidemic Sound · Blog - mobile full page

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: saturated · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#fc6c44
OKLCHoklch(70.3% 0.185 36)
RoleDominant
find sites →
Hex#74ccfc
OKLCHoklch(80.8% 0.109 234)
RoleSurface
find sites →
Hex#821e02
OKLCHoklch(40.0% 0.139 35)
RoleInk
find sites →
Hex#7c7474
OKLCHoklch(56.6% 0.010 17)
RoleAccent
find sites →
Hex#a9bbc3
OKLCHoklch(78.1% 0.023 226)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	Sebenta	60px	500	1.15	0	Aa Bb Cc
h2	Sebenta	40px	500	1.2	0	Aa Bb Cc
h3	Sebenta	32px	500	1.25	-0.96px	Aa Bb Cc
body	-apple-system	16px	500	1.6	0	Aa Bb Cc
button	Inter	14px	600	1.71	0	Aa Bb Cc

Spacing scale

6px

12px

36px

80px

Radius scale

0px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #fc6c44;
  --color-surface: #74ccfc;
  --color-ink: #821e02;
  --color-accent: #7c7474;
  --color-detail: #a9bbc3;
}

/* CSS variables exposed by source */
:root {
  --text-secondary: rgba(#000,0.5);
  --primary-button-background-active-color: #cfcfcf;
  --color-secondary-text: #000;
  --accent-button-background-hover-color: #464141;
  --font-sans: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  --color-wash: #fff;
  --background-primary: #fff;
  --text-primary-hover: #464141;
  --text-primary: #000;
  --color-border: #0f0f0f16;
  --color-darkmode: #000;
  --primary-button-background-color: #000;
  --primary-button-background-hover-color: #464141;
  --background-floating: #3f4349;
  --font-mono: Menlo,Courier,monospace;
  --font-brand: Sebenta,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --color-primary-text: #000;
  --background-brand-off-white: #f1f0eb;
  --accent-button-background-color: #000;
  --es-color-background-elevation: #fff;
  --es-color-action-secondary: #3d4d741f;
  --pink: #ff82c2;
  --es-button-s-padding: 0.4rem 1.6rem;
  --black: #000;
  --es-color-text-secondary: #00000099;
  --es-color-action-primary-hovered: #272727;
  --es-color-border-tertiary: #0f0f0f16;
  --es-button-s-min-width: 7.6rem;
  --es-color-action-primary: #000;
  --white: #fff;
  --es-color-action-secondary-hovered: #3d4d742e;
  --es-text-button-s-font-size: 1.4rem;
  --gray1: #333;
  --es-color-background-backdrop: #000000b3;
  --es-text-button-s-line-height: 2.4rem;
  --es-color-text-inverse: #fff;
  --es-button-s-min-height: 4.4rem;
  --es-radius-small: 0;
  --es-heading-s-line-height: 4rem;
  --es-text-s-line-height: 2.4rem;
  --es-text-s-font-size: 1.4rem;
  --es-grid-padding-medium: 3.2rem;
  --es-heading-s-font-weight: 500;
  --es-heading-s-letter-spacing: -0.096rem;
  --es-text-button-s-font-weight: 600;
  --es-heading-s-font-size: 3.2rem;
  --es-grid-padding-small: 1.6rem;
  --ghost-accent-color: #ff82c2;
  --es-text-s-font-weight: 500;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Epidemic Sound · Blog.
Reference design system (extracted from the live site):
- Palette: #fc6c44, #74ccfc, #821e02, #7c7474, #a9bbc3
- Typefaces: Sebenta, -apple-system, Inter
- Macrostructure: Marquee Hero
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/epidemicsound-com--blog

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Sebenta

60px

500

1.15

Aa Bb Cc

Sebenta

40px

500

1.2

Aa Bb Cc

Sebenta

32px

500

1.25

-0.96px

Aa Bb Cc

body

-apple-system

16px

500

1.6

Aa Bb Cc

button

Inter

14px

600

1.71

Aa Bb Cc

:root { --color-dominant: #fc6c44; --color-surface: #74ccfc; --color-ink: #821e02; --color-accent: #7c7474; --color-detail: #a9bbc3; } /* CSS variables exposed by source */ :root { --text-secondary: rgba(#000,0.5); --primary-button-background-active-color: #cfcfcf; --color-secondary-text: #000; --accent-button-background-hover-color: #464141; --font-sans: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif; --color-wash: #fff; --background-primary: #fff; --text-primary-hover: #464141; --text-primary: #000; --color-border: #0f0f0f16; --color-darkmode: #000; --primary-button-background-color: #000; --primary-button-background-hover-color: #464141; --background-floating: #3f4349; --font-mono: Menlo,Courier,monospace; --font-brand: Sebenta,"Helvetica Neue",Helvetica,Arial,sans-serif; --color-primary-text: #000; --background-brand-off-white: #f1f0eb; --accent-button-background-color: #000; --es-color-background-elevation: #fff; --es-color-action-secondary: #3d4d741f; --pink: #ff82c2; --es-button-s-padding: 0.4rem 1.6rem; --black: #000; --es-color-text-secondary: #00000099; --es-color-action-primary-hovered: #272727; --es-color-border-tertiary: #0f0f0f16; --es-button-s-min-width: 7.6rem; --es-color-action-primary: #000; --white: #fff; --es-color-action-secondary-hovered: #3d4d742e; --es-text-button-s-font-size: 1.4rem; --gray1: #333; --es-color-background-backdrop: #000000b3; --es-text-button-s-line-height: 2.4rem; --es-color-text-inverse: #fff; --es-button-s-min-height: 4.4rem; --es-radius-small: 0; --es-heading-s-line-height: 4rem; --es-text-s-line-height: 2.4rem; --es-text-s-font-size: 1.4rem; --es-grid-padding-medium: 3.2rem; --es-heading-s-font-weight: 500; --es-heading-s-letter-spacing: -0.096rem; --es-text-button-s-font-weight: 600; --es-heading-s-font-size: 3.2rem; --es-grid-padding-small: 1.6rem; --ghost-accent-color: #ff82c2; --es-text-s-font-weight: 500; }

Build a landing page in the visual style of Epidemic Sound · Blog. Reference design system (extracted from the live site): - Palette: #fc6c44, #74ccfc, #821e02, #7c7474, #a9bbc3 - Typefaces: Sebenta, -apple-system, Inter - Macrostructure: Marquee Hero Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/epidemicsound-com--blog