Knoll
Split Studio
Warm sand hues meet crisp, clean sans-serif, fostering serene, open space.




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 |
|---|---|---|---|---|---|---|
| h2 | Martina Plantijn | 16px | 300 | 1.5 | 0 | Aa Bb Cc |
| h3 | IBM Plex Mono | 11px | 400 | 1.45 | -0.5px | Aa Bb Cc |
| body | ui-sans-serif | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | IBM Plex Mono | 12px | 300 | 1.33 | -0.5px | Aa Bb Cc |
| button | ui-sans-serif | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
:root {
--color-dominant: #ce9272;
--color-surface: #d1ae81;
--color-ink: #5e3925;
--color-accent: #688b94;
--color-detail: #d4c5a6;
}
/* CSS variables exposed by source */
:root {
--border: oklch(.922 0 0);
--font-adobe-kannada: "adobe-kannada",sans-serif;
--font-pinyon-script: "Pinyon Script",cursive;
--color-danger-300: #fcd7ca;
--color-slate-200: oklch(92.9% .013 255.508);
--color-red-very-dark: #3d0c03;
--primary-foreground: oklch(.985 0 0);
--color-bg-main: #faf6f2;
--color-text-new-gray: #2e3030;
--color-danger-700: #c42d31;
--text-base--line-height: 1.5;
--radius-4xl: 2rem;
--color-neutral-200: oklch(92.2% 0 0);
--color-gray-300: #e6e2de;
--font-size-header1-5: 72px;
--font-mono: "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--color-gray-500: #c5c5c5;
--font-size-header8: 20px;
--shadow-product-card: 0px 0px 10px #00000029;
--shadow-dropdown: 0px 2px 10px #00000029;
--color-red-light: #ecc2bb;
--color-white: #fff;
--color-gray-400: #ddd;
--font-size-header2-5: 56px;
--color-accent: oklch(.97 0 0);
--color-gray-black: #000;
--color-gray-dark: #8c8c8c;
--shadow-9: 0px 10px 30px #0000001a;
--font-weight-bold: 700;
--color-gray-100: #f5f5f5;
--font-size-body1: 12px;
--shadow-8: 0px 3px 10px #0000001a;
--text-xs--line-height: calc(1/.75);
--radius-9: 9px;
--radius-2xl: 1rem;
--radius-md: calc(.625rem - 2px);
--color-danger-200: #fde8e1;
--text-xl: 1.25rem;
--color-light: #fff;
--color-mocha-extra-light: #fefdfc;
--color-danger-900: #a32801;
--font-size-header12: 12px;
--color-neutral-100: oklch(97% 0 0);
--color-danger-1000: #8f250c;
--accent: oklch(.97 0 0);
--color-success-300: #eaf7f1;
--color-warning-900: #ef8511;
--color-red-orange: #bb6a44;
--shadow-featured-card: 0px 2px 10px #00000029;
--color-mocha-super-dark: #1c1919;
--radius-8: 8px;
--color-text-main: #000;
--font-size-body11: 11px;
--text-2xl--line-height: calc(2/1.5);
--secondary-foreground: oklch(.205 0 0);
--spacing: .25rem;
--font-size-header5: 32px;
--background: #faf6f2;
--color-success-500: #a9dcc9;
--shadow-4: 0 0 1px 0 #080b0e0f,0 16px 16px -1px #080b0e1a;
}Drop-in prompt
Build a landing page in the visual style of Italic | Home.
Reference design system (extracted from the live site):
- Palette: #ce9272, #d1ae81, #5e3925, #688b94, #d4c5a6
- Typefaces: Martina Plantijn, ui-sans-serif
- 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/italic-com