BehaviorAI
Split Studio
Soft, cool blue and warm gold gradients flow across ample, airy white 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 | bureauSerif | 72px | 200 | 1 | -2.16px | Aa Bb Cc |
| h2 | bureauSerif | 40px | 200 | 1 | -1.2px | Aa Bb Cc |
| h3 | bureauSerif | 28px | 200 | 1 | -0.84px | Aa Bb Cc |
| body | Inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Inter | 14px | 400 | 1.43 | -0.18px | Aa Bb Cc |
| button | Inter | 14px | 400 | 1.43 | -0.13px | Aa Bb Cc |
:root {
--color-dominant: #459afc;
--color-surface: #62aafc;
--color-ink: #023d82;
--color-accent: #7c7c7b;
--color-detail: #c3ccd5;
}
/* CSS variables exposed by source */
:root {
--text-2xl: 1.5rem;
--text-lg: 1.125rem;
--border-danger: lab(61.6712% 41.9637 36.4136);
--radius-3xl: 2rem;
--text-2xl--line-height: calc(2 / 1.5);
--font-bureau-serif: "bureauSerif", "bureauSerif Fallback";
--text-base--line-height: calc(1.5 / 1);
--spacing: .25rem;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--surface-interactive-primary-disabled: lab(82.0432% 0 0);
--surface-interactive-secondary-base: lab(95.139% -.175655 2.06032);
--text-xl--line-height: calc(1.75 / 1.25);
--font-weight-semibold: 600;
--surface-interactive-primary-active: lab(0% 0 0);
--text-sm: .875rem;
--surface-interactive-secondary-disabled: lab(82.0432% 0 0);
--text-lg--line-height: calc(1.75 / 1.125);
--radius-sm: .25rem;
--font-sans: "Inter", "Inter Fallback";
--text-4xl: 2.25rem;
--font-weight-bold: 700;
--border-hover: lab(14.7726% 2.29341 3.7733);
--text-sm--line-height: calc(1.25 / .875);
--surface-interactive-secondary-hover: lab(96.9378% .213504 .6055);
--text-2xs: .625rem;
--border-strong: lab(86.0894% .121564 5.46051);
--font-weight-extralight: 200;
--text-3xl--line-height: calc(2.25 / 1.875);
--surface-interactive-primary-base: lab(0% 0 0);
--text-xs: .75rem;
--text-3xl: 1.875rem;
--font-weight-light: 300;
--text-xs--line-height: calc(1 / .75);
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-inter: "Inter", "Inter Fallback";
--surface-interactive-primary-hover: lab(14.7726% 2.29341 3.7733);
--surface-interactive-secondary-active: lab(86.0894% .121564 5.46051);
--surface-overlay-invariant: lab(0% 0 0/.4);
--surface-overlay: lab(0% 0 0/.4);
--surface-base: lab(100% 0 0);
--radius-2xl: 1.5rem;
--radius-xl: 1rem;
--radius-md: .5rem;
--radius-lg: .75rem;
--text-4xl--line-height: calc(2.5 / 2.25);
--text-xl: 1.25rem;
--surface-elevated: lab(95.139% -.175655 2.06032);
--text-base: 1rem;
--border-focus: lab(0% 0 0);
--color-surface-base: lab(100% 0 0);
--border-base: lab(95.139% -.175655 2.06032);
--container-md: 28rem;
--tw-ring-offset-shadow: 0 0 #0000;
--logo: lab(0% 0 0);
--tw-inset-shadow-alpha: 100%;
--tw-ring-shadow: 0 0 #0000;
--aspect-video: 16 / 9;
--content-interactive-primary-base: lab(0% 0 0);
--leading-relaxed: 1.625;
}Drop-in prompt
Build a landing page in the visual style of Handhold.
Reference design system (extracted from the live site):
- Palette: #459afc, #62aafc, #023d82, #7c7c7b, #c3ccd5
- Typefaces: bureauSerif, 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/handhold-io