Tempo Fit
Marquee Hero
Loading
Whoop
Deep indigo expanse, crisp sans-serif geometry, and spacious, cool digital serenity.
Click any value to copy. Roles are suggestions, not gospel.
- #4f57fboklch(55.6% 0.239 273)Dominant
- #043424oklch(29.0% 0.058 165)Surface
- #7d83fcoklch(66.3% 0.176 278)Ink
- #7c7c7boklch(58.6% 0.002 106)Accent
- #9eafb4oklch(74.2% 0.020 217)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | proxima-nova | 120px | 400 | 0.8 | -3.6px | Aa Bb Cc |
| h2 | proxima-nova | 100px | 400 | 0.85 | -2.99982px | Aa Bb Cc |
| h3 | proxima-nova | 25px | 600 | 1 | -1px | Aa Bb Cc |
| body | proxima-nova | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | proxima-nova | 15px | 400 | 1.33 | 0 | Aa Bb Cc |
| button | proxima-nova | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #4f57fb;
--color-surface: #043424;
--color-ink: #7d83fc;
--color-accent: #7c7c7b;
--color-detail: #9eafb4;
}
/* CSS variables exposed by source */
:root {
--color-accent: 74 83 255;
--font-base-sans-serif: "proxima-nova","Arial","Helvetica",sans-serif;
--color-accent-foreground: 255 255 255;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-skew-x: 0;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--tw-scroll-snap-strictness: proximity;
--tw-scale-x: 1;
--tw-border-spacing-x: 0;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--tw-scale-y: 1;
--tw-skew-y: 0;
--tw-ring-color: rgba(59,130,246,.5);
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Whoop.
Reference design system (extracted from the live site):
- Palette: #4f57fb, #043424, #7d83fc, #7c7c7b, #9eafb4
- Typefaces: proxima-nova
- 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/whoop-com
