Immersive Garden
Split Studio
Crisp, stark geometry - cold gray type floats on expansive, echoing white.




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 | BentonSans | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| h2 | BentonSans | 12px | 400 | 1.4 | 0 | Aa Bb Cc |
| h3 | AftenScreen | 27px | 400 | 1.3 | -1.06667px | Aa Bb Cc |
| body | BentonSans | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | BentonSans | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #c59461;
--color-surface: #e4b782;
--color-ink: #452c1d;
--color-accent: #87674e;
--color-detail: #c2c2c2;
}
/* CSS variables exposed by source */
:root {
--color-beige-theme-animated-text-highlight-bg: #e4ded7;
--color-white--rgb: 255,255,255;
--color-sand: #eae5df;
--color-aila-almost-black--rgb: 16,16,16;
--color-almost-black: #070707;
--color-aila-yellow: #ffca6b;
--color-dark-theme-animated-text-highlight-bg--rgb: 38,39,42;
--color-almost-black--rgb: 7,7,7;
--color-beige-theme-animated-text-highlight-bg--rgb: 228,222,215;
--color-white: #fff;
--color-grey-highlight-dark: #797979;
--color-grey-highlight-light--rgb: 162,162,169;
--color-grey-highlight-light: #a2a2a9;
--color-background--rgb: 242,242,242;
--color-aila-purple: #a5a9fd;
--color-sand--rgb: 234,229,223;
--color-background: #f2f2f2;
--color-aila-almost-black: #101010;
--color-aila-purple--rgb: 165,169,253;
--color-aila-grey--rgb: 31,31,31;
--color-grey-highlight-dark--rgb: 121,121,121;
--color-sand-highlight--rgb: 165,157,146;
--color-aila-yellow--rgb: 255,202,107;
--color-aila-grey: #1f1f1f;
--color-sand-highlight: #a59d92;
--color-dark-theme-animated-text-highlight-bg: #26272a;
--leva-sizes-checkboxSize: 16px;
--leva-colors-elevation1: #292d39;
--leva-colors-highlight3: #fefefe;
--leva-radii-sm: 3px;
--leva-borderWidths-active: 1px;
--ease-quad-in-out: cubic-bezier(0.455,0.03,0.515,0.955);
--ease-back-out: cubic-bezier(0.175,0.885,0.32,1.275);
--leva-fontWeights-folder: normal;
--leva-radii-lg: 10px;
--leva-sizes-joystickHeight: 100px;
--leva-colors-folderTextColor: #fefefe;
--ease-back-in-out: cubic-bezier(0.68,-0.55,0.265,1.55);
--leva-fontSizes-root: 11px;
--leva-space-colGap: 7px;
--indent: max(0.9375rem,3.7615740741vw);
--leva-colors-accent1: #0066dc;
--ease-expo-in: cubic-bezier(0.95,0.05,0.795,0.035);
--ease-back-out-more: cubic-bezier(0.56,0.91,0.465,1.65);
--leva-colors-elevation2: #181c20;
--ease-quart-out: cubic-bezier(0.165,0.84,0.44,1);
--leva-fonts-mono: ui-monospace, SFMono-Regular, Menlo, 'Roboto Mono', monospace;
--ease-sine-in-out: cubic-bezier(0.445,0.05,0.55,0.95);
--leva-space-md: 10px;
--ease-expo-out: cubic-bezier(0.19,1,0.22,1);
--ease-cubic-in-out: cubic-bezier(0.645,0.045,0.355,1);
--leva-radii-xs: 2px;
--ease-back-in: cubic-bezier(0.6,-0.28,0.735,0.045);
--leva-colors-folderWidgetColor: #8c92a4;
--ease-quad-in: cubic-bezier(0.55,0.085,0.68,0.53);
--leva-colors-accent2: #007bff;
--leva-sizes-colorPickerWidth: 160px;
--leva-colors-highlight2: #8c92a4;
--ease-quint-in-out: cubic-bezier(0.86,0,0.07,1);
--ease-quad-out: cubic-bezier(0.25,0.46,0.45,0.94);
}Drop-in prompt
Build a landing page in the visual style of 14islands | Creative design & technology agency.
Reference design system (extracted from the live site):
- Palette: #c59461, #e4b782, #452c1d, #87674e, #c2c2c2
- Typefaces: BentonSans
- 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/14islands-com