Deezer
Marquee Hero
Loading
Soundcloud
Soft, diffused lavender hues over a spacious, clean expanse of gentle sans-serif.
Click any value to copy. Roles are suggestions, not gospel.
- #d4a44coklch(74.6% 0.119 80)Dominant
- #672238oklch(36.4% 0.101 4)Surface
- #8bc3daoklch(78.7% 0.067 225)Ink
- #54999eoklch(64.0% 0.070 202)Accent
- #bbd3daoklch(85.1% 0.028 217)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Söhne | 28px | 600 | 1.29 | 0 | Aa Bb Cc |
| h2 | Söhne | 65px | 800 | 0.85 | -1.3px | Aa Bb Cc |
| body | Söhne | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | Söhne | 14px | 600 | 1.43 | 0 | Aa Bb Cc |
Max content width 1240px
:root {
--color-dominant: #d4a44c;
--color-surface: #672238;
--color-ink: #8bc3da;
--color-accent: #54999e;
--color-detail: #bbd3da;
}
/* CSS variables exposed by source */
:root {
--secondary-rgb: 102,102,102;
--font-monospace-family: "Monaco","Courier New",monospace;
--spacing-1x: 8px;
--font-primary-color: #121212;
--font-secondary-color: #666;
--spacing-5x: 40px;
--borderRadiuses-8: 8px;
--spacing-6x: 48px;
--font-link-color: #044dd2;
--primary-rgb: 18,18,18;
--borderRadiuses-10: 10px;
--spacing-1_25x: 10px;
--background-light-color: #fff;
--font-light-color: #fff;
--primary-color: #121212;
--font-main: "Söhne";
--surface-rgb: 255,255,255;
--font-sans-serif-family: "Söhne",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,"Segoe UI",Roboto,"Lucida Grande",sans-serif,"Apple Color Emoji","Segoe UI Emoji";
--borderRadiuses-50: 50px;
--font-special-color: #f50;
--borderRadiuses-4: 4px;
--spacing-2x: 16px;
--spacing-0_25x: 2px;
--background-surface-color: #fff;
--spacing-4x: 32px;
--spacing-0_75x: 6px;
--font-error-color: #d61348;
--spacing-3_5x: 28px;
--spacing-8x: 64px;
--borderRadiuses-16: 16px;
--spacing-0_5x: 4px;
--spacing-1_5x: 12px;
--spacing-7x: 56px;
--spacing-2_5x: 20px;
--borderRadiuses-20: 20px;
--secondary-color: #666;
--borderRadiuses-100: 100px;
--spacing-3x: 24px;
--font-dark-color: #121212;
--background-highlight-color: #f3f3f3;
--background-dark-color: #121212;
--surface-color: #fff;
--spacing-1_75x: 14px;
--white-color: #fff;
--typography-body2-font-size: 1rem;
--button-secondary-active-font-color: #121212;
--support-bg-color: #558b2f;
--header-height: 46px;
--button-primary-background-color: #121212;
--typography-body2-line-height: 1.4285714285714286rem;
--button-tertiary-disabled-font-color: #121212;
--success-color: #008850;
--support-bg-rgb: 85,139,47;
--breakpoints-md: 1152;
--toggle-body-user-select: none;
--typography-body-line-height: 1.4285714285714286rem;
--toggle-icon-top: 50%;
--typography-display3-line-height: 2.5714285714285716rem;
--link-secondary-hover-color: hsla(0,0%,40%,0.4);
--toggle-handle-top: 2px;
}Drop-in prompt
Build a landing page in the visual style of Soundcloud.
Reference design system (extracted from the live site):
- Palette: #d4a44c, #672238, #8bc3da, #54999e, #bbd3da
- Typefaces: Söhne
- 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/soundcloud-com
