Factmag
Marquee Hero
Loading
Epidemic Sound
Stark Swiss precision, bold black ink on a sterile bone canvas
Click any value to copy. Roles are suggestions, not gospel.
- #046e95oklch(50.6% 0.102 232)Dominant
- #f8fcfcoklch(98.8% 0.004 197)Surface
- #0d547doklch(42.7% 0.094 241)Ink
- #9c745coklch(59.3% 0.062 52)Accent
- #9db2bcoklch(75.1% 0.027 228)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Sebenta | 80px | 500 | 1 | -2.4px | Aa Bb Cc |
| h2 | Sebenta | 32px | 500 | 1.25 | -0.96px | Aa Bb Cc |
| h3 | Sebenta | 32px | 500 | 1.25 | -0.96px | Aa Bb Cc |
| body | Inter | 16px | 400 | 1 | 0 | Aa Bb Cc |
| caption | Inter | 14px | 600 | 1.71 | 1.4px | Aa Bb Cc |
| button | Inter | 14px | 600 | 1.71 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #046e95;
--color-surface: #f8fcfc;
--color-ink: #0d547d;
--color-accent: #9c745c;
--color-detail: #9db2bc;
}
/* CSS variables exposed by source */
:root {
--text-2xl: 1.5rem;
--color-brand-black: #000;
--font-weight-bold: 700;
--color-brand-white: #fff;
--radius-2xl: 1rem;
--radius-md: .375rem;
--radius-lg: .5rem;
--text-2xl--line-height: calc(2/1.5);
--spacing: .25rem;
--text-sm: .875rem;
--font-weight-semibold: 600;
--text-sm--line-height: calc(1.25/.875);
--font-weight-medium: 500;
--font-weight-normal: 400;
--container-md: 28rem;
--es-color-brand-ecru: #E4D9CF;
--es-color-background-elevation: #292C33;
--es-color-action-secondary: #CFD6E529;
--es-color-misc-grabber: #CFD6E57A;
--tw-ring-shadow: 0 0 #0000;
--es-color-platform-instagram: linear-gradient(to top right,#FFCA05,#F6026B,#8512FA);
--es-color-action-positive-hovered: #51BE59;
--es-color-data-visualization-negative: #FF6138;
--aspect-video: 16/9;
--es-color-input-active-hovered: #1D9DE5;
--es-color-background-positive: #5AD363;
--es-color-icon-primary: #ffffff;
--es-color-background-brand-off-white: #F1F0EB;
--es-color-brand-extended-mint-green: #C4E7D1;
--es-color-brand-azur: #20AFFF;
--es-color-action-primary: #ffffff;
--es-color-action-tertiary-disabled: #CFD6E514;
--es-color-track-highlight-hovered: #E5C43A;
--es-color-action-secondary-hovered: #CFD6E53D;
--es-color-track-inverse: #0000003D;
--es-color-background-overlay-fade-full-to-bottom: linear-gradient(180deg,#0F0F0F00,#0F0F0F);
--es-color-background-caution: #FFDA40;
--tw-outline-style: solid;
--es-color-misc-handle-disabled: #3E4147;
--es-color-background-overlay-fade-to-top: linear-gradient(0deg,#00000000,#000000BF);
--tw-inset-ring-shadow: 0 0 #0000;
--es-grid-gutter-medium: 1rem;
--tw-border-spacing-x: 0px;
--es-color-brand-extended-neon-yellow: #D6F382;
--grid-padding-max: max(3.5rem,calc(calc(calc(100vw - calc(100vw - 100%)) / 2) - min(calc(calc(100vw - calc(100vw - 100%)) / 2), calc(90rem / 2)) + 3.5rem));
--es-color-border-primary: #ffffff;
--es-color-platform-website: #7D7D7D;
--es-color-action-negative-hovered: #E85833;
--es-color-data-visualization-blue: #20AFFF;
--es-color-text-disabled: #ffffff52;
--es-color-input-disabled: #CFD6E514;
--es-color-action-ghost-disabled: #CFD6E500;
--es-color-data-visualization-pink: #FF82C2;
--es-color-action-primary-inverse-disabled: #0000000F;
--es-border-width-input: 1px;
--es-color-action-ghost-pressed: #CFD6E529;
--tw-inset-shadow: 0 0 #0000;
--tw-ring-offset-color: #fff;
--es-color-background-negative: #FF6138;
--es-color-action-tertiary-hovered: #CFD6E529;
}Drop-in prompt
Build a landing page in the visual style of Epidemic Sound.
Reference design system (extracted from the live site):
- Palette: #046e95, #f8fcfc, #0d547d, #9c745c, #9db2bc
- Typefaces: Sebenta, 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
