Babbel
Feature Stack
Loading
Thefutur
Deep indigo and charcoal, precise sans-serifs on expansive, airy grids.
Click any value to copy. Roles are suggestions, not gospel.
- #041cdcoklch(42.0% 0.270 265)Dominant
- #082492oklch(33.8% 0.180 265)Surface
- #f54e3foklch(65.6% 0.206 29)Ink
- #7cc27coklch(75.0% 0.121 144)Accent
- #899ec5oklch(69.7% 0.062 263)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Calibre | 44px | 600 | 0.95 | -1.1px | Aa Bb Cc |
| h2 | Calibre | 64px | 600 | 0.8 | -1.28px | Aa Bb Cc |
| h3 | Calibre | 26px | 600 | 1.1 | -0.52px | Aa Bb Cc |
| body | Calibre | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Calibre | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | Calibre | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #041cdc;
--color-surface: #082492;
--color-ink: #f54e3f;
--color-accent: #7cc27c;
--color-detail: #899ec5;
}
/* CSS variables exposed by source */
:root {
--border: 120 2% 90%;
--radius-input: 12px;
--accent: 0 0% 96%;
--primary-foreground: 0 0% 100%;
--secondary-foreground: 168 100% 1%;
--background: 120 20% 100%;
--accent-foreground: 168 100% 1%;
--radius: 16px;
--radius-pill: 980px;
--primary: 236 79% 44%;
--foreground: 168 100% 1%;
--secondary: 0 0% 96%;
--tw-ring-offset-shadow: 0 0 #0000;
--sidebar-background: 0 0% 98%;
--tw-ring-shadow: 0 0 #0000;
--sidebar-primary-foreground: 0 0% 98%;
--card: 120 20% 100%;
--card-foreground: 168 100% 1%;
--sidebar-accent-foreground: 240 5.9% 10%;
--footer-bg: 168 100% 1%;
--tw-border-spacing-x: 0;
--muted: 0 0% 96%;
--footer-foreground: 0 0% 100%;
--tw-scale-y: 1;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-translate-y: 0;
--popover: 120 20% 100%;
--ring: 236 79% 44%;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
--cta-dark: 160 3% 7%;
--sidebar-border: 220 13% 91%;
--footer-dim: 160 1% 48%;
--sidebar-foreground: 240 5.3% 26.1%;
--muted-foreground: 168 1% 43%;
--tw-skew-x: 0;
--sidebar-accent: 240 4.8% 95.9%;
--popover-foreground: 168 100% 1%;
--footer-muted: 160 1% 60%;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--input: 120 2% 90%;
--tw-scroll-snap-strictness: proximity;
--destructive: 0 84% 60%;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 #0000;
--body-text: 168 100% 1%;
--tw-border-spacing-y: 0;
--destructive-foreground: 0 0% 100%;
--cta-dark-foreground: 0 0% 100%;
--tw-skew-y: 0;
--sidebar-primary: 240 5.9% 10%;
--sidebar-ring: 217.2 91.2% 59.8%;
}Drop-in prompt
Build a landing page in the visual style of Thefutur.
Reference design system (extracted from the live site):
- Palette: #041cdc, #082492, #f54e3f, #7cc27c, #899ec5
- Typefaces: Calibre
- Macrostructure: Feature Stack
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/thefutur-com
