Handhold
Split Studio
Crisp, cool grayscale—geometric forms float in expansive, airy negative 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 |
|---|---|---|---|---|---|---|
| h1 | Geist Variablefont Wght | 80px | 600 | 1 | -2px | Aa Bb Cc |
| h2 | Geist Variablefont Wght | 40px | 700 | 1.2 | -1px | Aa Bb Cc |
| h3 | Geist Variablefont Wght | 20px | 600 | 1.2 | -0.5px | Aa Bb Cc |
| body | Geist Variablefont Wght | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Geist Variablefont Wght | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #eba514;
--color-surface: #faa9e7;
--color-ink: #09b72b;
--color-accent: #7d8d8f;
--color-detail: #dcd5be;
}
/* CSS variables exposed by source */
:root {
--brand--lime-600: #6dad03;
--brand--green: #014536;
--brand--blue-25: #eaf0fe;
--brand--lime-500: #8dd80a;
--font-weight--black: 900;
--font-weight--xbold: 800;
--brand--green-50: #80a29a;
--brand--lime-700: #528308;
--brand--lime-900: #385710;
--brand--lime-200: #e2ffa3;
--brand--lime-950: #1c3102;
--font-family--body: "Geist Variablefont Wght", Arial, sans-serif;
--brand--lime-800: #43670d;
--font-weight--thin: 100;
--font-weight--medium: 500;
--brand--blue-75: #b5c9fb;
--font-weight--normal: 400;
--brand--blue: #96b2f9;
--brand--blue-50: #d5e0fd;
--brand--lime-300: #c5fb5b;
--brand--lime-50: #f9ffe5;
--font-weight--light: 300;
--brand--lime-400: #adf229;
--brand--green-75: #346a5e;
--font-weight--semi-bold: 600;
--brand--lime-100: #efffc8;
--font-family--heading: "Geist Variablefont Wght", Arial, sans-serif;
--font-weight--bold: 700;
--brand--green-25: #ccdedb;
--font-weight--xlight: 200;
--neutral--transparent: transparent;
--_theme---border-color--accent-strong: #528308;
--_theme---text-color--warning: #b11414;
--_sizes---max-width--large: 48rem;
--_theme---system--warning-text: #ccdedb;
--_theme---text-color--tertiary: #a3a3a3;
--_typography---h6--h6-letter-spacing: 0em;
--_typography---font-size--medium: 1.25rem;
--_theme---system--error-text: #346a5e;
--_layout---gaps--regular: 2rem;
--_typography---h6--h6-font-weight: 700;
--_theme---border-color--subtle: #e5e5e5;
--_sizes---max-width--small: 20rem;
--_typography---h2--h2-line-height: 1.2;
--_sizes---border-width--bold: .25rem;
--_typography---h6--h6-line-height: 1.4;
--_layout---section-padding--medium: 5rem;
--_theme---border-color--accent-focus: #c5fb5b;
--_sizes---max-width--xxlarge: 80rem;
--_theme---border-color--accent-subtle: #e2ffa3;
--focus--offset: .125rem;
--_layout---spacing--xsmall: .5rem;
--_theme---text-color--secondary: #000;
--_theme---background--secondary: whitesmoke;
--neutral--neutral-600: #525252;
--_theme---background--accent-lo: #f9ffe5;
--focus--width: .125rem;
--_sizes---border-radius--medium: 1.25rem;
--_layout---spacing--xxlarge: 5rem;
--_theme---background--error: #f3acac;
}Drop-in prompt
Build a landing page in the visual style of BehaviorAI.
Reference design system (extracted from the live site):
- Palette: #eba514, #faa9e7, #09b72b, #7d8d8f, #dcd5be
- Typefaces: Geist Variablefont Wght, Inter
- 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/behaviorai-eu