Stability
Split Studio
Deep sunset gradients, playful sans-serifs, spacious technical clarity.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Neue Montreal | 72px | 500 | 1 | -0.96px | Aa Bb Cc |
| h2 | Neue Montreal | 16px | 300 | 1.5 | 0 | Aa Bb Cc |
| h3 | Neue Montreal | 20px | 500 | 1.2 | 0 | Aa Bb Cc |
| body | Neue Montreal | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Neue Montreal | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | Neue Montreal | 15px | 500 | 1.6 | 0 | Aa Bb Cc |
:root {
--color-dominant: #9c3c24;
--color-surface: #785104;
--color-ink: #e6a393;
--color-accent: #8a7362;
--color-detail: #d5bbb2;
}
/* CSS variables exposed by source */
:root {
--color-brown-900: #b3aaaa;
--color-opacity-white-75: #ffffffbf;
--color-pink-500: lab(56.9303% 76.8162 -8.07021);
--color-orange-600: lab(57.1026% 64.2584 89.8886);
--color-neutral-600: lab(34.924% 0 0);
--color-foreground-tertiary-on-light: #7d7c83;
--color-teal-400: lab(76.0109% -53.3483 -2.27906);
--color-foreground-inactive: #6a6a72;
--color-blue-700: lab(36.9089% 35.0961 -85.6872);
--color-opacity-white-10: #ffffff1a;
--color-neutral-300: lab(84.92% 0 -.0000119209);
--color-dodger-blue-500: #0071ea;
--color-purple-800: lab(30.6017% 56.7637 -64.4751);
--color-opacity-gray-90: #1c1c1fe5;
--color-opacity-white-15: #ffffff26;
--color-background-light-overlay: #ffffffe5;
--text-base--line-height: calc(1.5/1);
--radius-4xl: 2rem;
--color-cyan-700: lab(44.7267% -21.5987 -26.118);
--color-amethyst-900: #d7cdff;
--color-gray-300: #38383e;
--color-slime-300: #017431;
--font-mono: ui-monospace,Menlo,Monaco,"Cascadia Mono","Segoe UI Mono","Roboto Mono","Oxygen Mono","Ubuntu Monospace","Source Code Pro","Fira Mono","Droid Sans Mono","Courier New",monospace;
--color-cyan-200: lab(91.0821% -24.0435 -12.8306);
--color-amber-300: lab(86.4156% 6.13147 78.3961);
--color-gray-500: #7d7c83;
--color-foreground-button-secondary: #fcfbf9;
--color-foreground-inactive-on-dark: #6a6a72;
--color-foreground-primary-on-dark: #fcfbf9;
--color-accent-blue-on-primary: #1f8bff;
--color-green-500: lab(70.5521% -66.5147 45.8073);
--color-accent-green: #02d95c;
--color-white: #fff;
--color-sky-600: lab(51.7754% -11.4712 -49.8349);
--color-gray-400: #5b5b62;
--color-blue-400: lab(65.0361% -1.42065 -56.9802);
--radius-sm: .25rem;
--color-grass-700: #7afa1f;
--color-gray-100: #1c1c1f;
--color-foreground-tertiary-glass: #ffffff80;
--color-purple-600: lab(43.0295% 75.21 -86.5669);
--color-background-tertiary: #252529;
--color-vermilion-800: #fcbaab;
--color-dumbo-450: #6a6a72;
--color-overlay-on-primary: #ffffff0a;
--color-violet-500: lab(49.9355% 55.1776 -81.8963);
--color-lime-200: lab(94.0718% -22.5338 42.5238);
--color-fuchsia-200: lab(87.7108% 19.9958 -18.2054);
--color-dumbo-350: #4e4d55;
--color-green-900: lab(30.797% -29.6927 17.382);
--color-background-smoke-thick: #1c1c1f66;
--color-tertiary: #1c1c1f;
--color-opacity-gray-40: #1c1c1f66;
--color-pumpkin-900: #ffe4d1;
--radius-md: .375rem;
--color-accent-green-on-primary: #02d95c;
--radius-lg: .5rem;
--color-neutral-900: lab(7.78201% -.0000149012 0);
--color-dandelion-400: #947d04;
--color-grass-500: #4aab04;
}Drop-in prompt
Build a landing page in the visual style of Suno.
Reference design system (extracted from the live site):
- Palette: #9c3c24, #785104, #e6a393, #8a7362, #d5bbb2
- Typefaces: Neue Montreal
- 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/suno-com