Whoop
Marquee Hero
Loading
Tempo Fit
Deep crimson expanse, bold sans-serif geometry, a focused, energetic, minimalist depth.
Click any value to copy. Roles are suggestions, not gospel.
- #c41024oklch(52.2% 0.205 25)Dominant
- #890416oklch(39.9% 0.159 24)Surface
- #f48490oklch(74.0% 0.137 14)Ink
- #b0646coklch(59.1% 0.098 14)Accent
- #ceb2a7oklch(78.5% 0.036 43)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Moderat | 55px | 400 | 1.3 | 0% | Aa Bb Cc |
| h2 | Moderat | 32px | 500 | 1.2 | -0.64px | Aa Bb Cc |
| h3 | Moderat | 40px | 400 | 1.1 | -1.2px | Aa Bb Cc |
| body | Moderat | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Moderat | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1326px
:root {
--color-dominant: #c41024;
--color-surface: #890416;
--color-ink: #f48490;
--color-accent: #b0646c;
--color-detail: #ceb2a7;
}
/* CSS variables exposed by source */
:root {
--color-green-rgb: 113,118,100;
--color-black-rgb: 0,0,0;
--color-off-white-rgb: 244,245,245;
--color-croissant: #c6a778;
--color-silver-rgb: 208,208,208;
--color-arsenic-rgb: 61,64,70;
--color-dimgray: #6a6a6a;
--color-silver: #d0d0d0;
--color-off-white: #f4f5f5;
--color-dark-beige: #dfd7cf;
--color-beige: #ede7e1;
--color-modern-rgb: 244,244,244;
--color-croissant-dark-rgb: 170,131,72;
--color-brown-rgb: 122,116,98;
--color-pine: #2e291d;
--color-dark-beige-rgb: 223,215,207;
--color-black2: #2e291d;
--color-black2-rgb: 46,41,29;
--color-dimgray-rgb: 106,106,106;
--color-beige-rgb: 237,231,225;
--color-white: #fff;
--color-croissant-rgb: 198,167,120;
--color-croissant-dark: #aa8348;
--accent-2: #2e291d;
--color-black: #000;
--color-green: #717664;
--color-modern: #f4f4f4;
--font-moderat: "Moderat","Helvetica Neue","Helvetica",sans-serif;
--color-brown: #7a7462;
--color-arsenic: #3d4046;
--primary: #fff;
--color-oxford-blue-rgb: 0,15,94;
--color-oxford-blue: #000f5e;
--color-pine-rgb: 46,41,29;
--color-white-rgb: 255,255,255;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-border-spacing-x: 0;
--tw-scale-y: 1;
--tw-ring-color: rgba(59,130,246,.5);
--navbar-mobile-start: 15px;
--tw-translate-y: 0;
--swiper-theme-color: #007aff;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
--vh: 9px;
--tw-skew-x: 0;
--swiper-navigation-size: 44px;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--tw-scroll-snap-strictness: proximity;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--main-background-color: #ede7e1;
--tw-skew-y: 0;
--base-nav-space: 0px;
}Drop-in prompt
Build a landing page in the visual style of Tempo Fit.
Reference design system (extracted from the live site):
- Palette: #c41024, #890416, #f48490, #b0646c, #ceb2a7
- Typefaces: Moderat
- 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/tempo-fit
