Masterclass
Split Studio
Loading
Savee
Deep charcoal expanse, crisp geometric sans-serif, a quietly confident digital stillness.
Click any value to copy. Roles are suggestions, not gospel.
- #141ceboklch(44.2% 0.283 266)Dominant
- #8488f4oklch(67.2% 0.158 280)Surface
- #0c14acoklch(35.2% 0.222 266)Ink
- #98746coklch(59.2% 0.047 33)Accent
- #c4b4acoklch(78.1% 0.022 48)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | saveeFont | 60px | 500 | 1 | -3.3px | Aa Bb Cc |
| h2 | saveeFont | 60px | 500 | 1 | -3.3px | Aa Bb Cc |
| body | saveeFont | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | saveeFont | 16px | 400 | 1.38 | -0.24px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #141ceb;
--color-surface: #8488f4;
--color-ink: #0c14ac;
--color-accent: #98746c;
--color-detail: #c4b4ac;
}
/* CSS variables exposed by source */
:root {
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--color-gray-800: 47,47,47;
--color-toggle-handle: 212,212,212;
--color-base-gray-200: 229,229,229;
--_number-flow-d: 0;
--max-z-index: 2147483640;
--tw-text-opacity: 1;
--_number-flow-dx: 0px;
--color-base-brand-2: 107,94,255;
--color-base-gray-700: 64,64,64;
--color-base-gray-300: 212,212,212;
--tw-border-spacing-x: 0;
--color-base-gray-600: 82,82,82;
--color-gray-300: 212,212,212;
--color-image-empty: 163,163,163;
--color-image-loading2: 64,64,64;
--tw-scale-y: 1;
--color-secondary: 212,212,212;
--tw-ring-color: rgb(59 130 246/0.5);
--color-brand: 16,25,237;
--color-gray-500: 115,115,115;
--tw-translate-y: 0;
--color-gray-900: 30,30,30;
--color-gray-50: 250,250,250;
--tw-rotate: 0;
--color-gray-950: 21,21,21;
--color-base-gray-100: 245,245,245;
--tw-ring-offset-color: #fff;
--color-muted: 163,163,163;
--color-white: 253,253,253;
--color-base-gray-950: 21,21,21;
--color-gray-700: 64,64,64;
--color-gray-400: 163,163,163;
--color-base-white: 253,253,253;
--color-gray-600: 82,82,82;
--color-base-brand: 16,25,237;
--color-brand-2: 107,94,255;
--tw-skew-x: 0;
--color-gray-100: 245,245,245;
--color-base-gray-50: 250,250,250;
--tw-shadow: 0 0 #0000;
--tw-bg-opacity: 1;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--_number-flow-d-opacity: 0;
--color-gray-200: 229,229,229;
--nav-height: 80px;
--tw-scroll-snap-strictness: proximity;
--color-black: 5,5,5;
--color-base-gray-500: 115,115,115;
--tw-scale-x: 1;
--color-base-gray-800: 47,47,47;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--color-base-gray-400: 163,163,163;
--color-base-gray-900: 30,30,30;
--color-base-black: 5,5,5;
--tw-skew-y: 0;
--warning-height: 60px;
--_number-flow-d-width: 0;
--color-image-loading: 47,47,47;
}Drop-in prompt
Build a landing page in the visual style of Savee.
Reference design system (extracted from the live site):
- Palette: #141ceb, #8488f4, #0c14ac, #98746c, #c4b4ac
- Typefaces: saveeFont
- Macrostructure: Split Studio
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/savee-it
