BehaviorAI
Split Studio
Glassy, pastel gradients meet clean, geometric sans-serifs in a spacious, airy digital realm.




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 | Exposure-09cb373df0d2138c | 48px | 400 | 1.41 | -0.48px | Aa Bb Cc |
| h2 | Exposure-09cb373df0d2138c | 48px | 400 | 1 | -0.48px | Aa Bb Cc |
| h3 | DenimINK-fc4757ccf169d42a | 32px | 400 | 1 | 0 | Aa Bb Cc |
| body | DenimINK-fc4757ccf169d42a | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | DenimINK-fc4757ccf169d42a | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #54d3f4;
--color-surface: #2a688c;
--color-ink: #93f8fa;
--color-accent: #698a8f;
--color-detail: #94c3c6;
}
/* CSS variables exposed by source */
:root {
--color-gray: #7e8486;
--color-medium-green: #00c67a;
--color-white: #fff;
--color-mustard: #fd3;
--color-gray-10: #f5f9fa;
--color-dark-green: #0e663b;
--color-sea: #00d0ff;
--color-violet: #6c4df7;
--color-gray-700: #434647;
--color-gray-400: #9fa5a7;
--color-gray-800: #2a2c2d;
--color-meadow: #5bf6bb;
--color-gray-600: #595e5e;
--color-air: #effbff;
--color-chalky-blue: #46a9df;
--color-gray-100: #e8eff2;
--font-family-exposure: Exposure-09cb373df0d2138c,"Exposure-09cb373df0d2138c fallback: Times New Roman",serif;
--color-gray-200: #d0d6d7;
--color-red: #d00000;
--color-warm-green: #89d229;
--color-bright-blue: #00c3f2;
--color-dark-purple: #160f31;
--color-black: #000;
--color-lime-green: #aaff4e;
--color-green: #46e7b4;
--color-cloud: #ffcfcf;
--color-pink-red: #ff423b;
--color-gray-150: #dfe5e7;
--font-family-denim: DenimINK-fc4757ccf169d42a,"DenimINK-fc4757ccf169d42a fallback: Arial","DenimINK-fc4757ccf169d42a fallback: Arial Bold",sans-serif;
--color-light-gray: #e8eff2;
--color-medium-blue: #00b7e4;
--color-sky: #a6ecff;
--color-purple: #ab88fb;
--color-gray-300: #bec3c6;
--color-medium-gray: #d0d6d7;
--color-bone: #f5f9fa;
--color-dark-gray: #434647;
--color-sunset: #f99f3f;
--color-yellow: #fcff41;
--color-barbie-pink: #ff1476;
--color-gray-500: #7e8486;
--color-peach: #ffca9f;
--color-pink: #ff9bb2;
--color-gray-900: #1d1f20;
--color-gray-50: #eef4f6;
--color-orange: #e07300;
--color-charcoal: #1d1f20;
--color-gray-950: #141515;
--gb-angle: 0deg;
--container-max-width: 1440px;
--section-gap: 160px;
--z-index-nav-menu: 100;
--angle: 0deg;
}Drop-in prompt
Build a landing page in the visual style of Captions.
Reference design system (extracted from the live site):
- Palette: #54d3f4, #2a688c, #93f8fa, #698a8f, #94c3c6
- Typefaces: Exposure-09cb373df0d2138c, DenimINK-fc4757ccf169d42a
- 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/captions-ai--features-edit-with-ai