BehaviorAI
Split Studio
Cool, quiet data architecture: crisp, structured lines in a muted, tech-forward green scale.




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 | PP Kyoto-b14c6ebb315b725b | 36px | 500 | 1.25 | 0 | Aa Bb Cc |
| h2 | PP Kyoto-b14c6ebb315b725b | 24px | 500 | 1.25 | 0 | Aa Bb Cc |
| h3 | ABC Diatype-017f0f97e8794fab | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| body | ABC Diatype-017f0f97e8794fab | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | ABC Diatype-017f0f97e8794fab | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | ABC Diatype-017f0f97e8794fab | 16px | 500 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #70bc84;
--color-surface: #b4dcbc;
--color-ink: #095028;
--color-accent: #548c6c;
--color-detail: #adcdb6;
}
/* CSS variables exposed by source */
:root {
--border: #e4e3db;
--text-2xl: 1.5rem;
--color-cartesia-neutral-200: #f3f2ef;
--color-cartesia-neutral-400: #e4e3db;
--color-violet-600: oklch(54.1% .281 293.009);
--color-cartesia-forest: #004e23;
--font-handwriting: "Homemade Apple", cursive;
--color-cartesia-green-950: #00311a;
--color-cartesia-blue-600: #7a92a8;
--text-lg: 1.125rem;
--color-cartesia-green-800: #125c25;
--color-red-900: oklch(39.6% .141 25.723);
--color-cartesia-blue-800: #415869;
--primary-foreground: oklch(99.7% 0 0);
--color-cartesia-blue-700: #5c7488;
--font-ibm-plex-mono: "IBM Plex Mono-39f46362fd5bf7f0","IBM Plex Mono-39f46362fd5bf7f0 fallback: Courier New",monospace;
--color-cartesia-blue-300: #a8c0d2;
--font-pp-kyoto: "PP Kyoto-b14c6ebb315b725b","PP Kyoto-b14c6ebb315b725b fallback: Times New Roman",Georgia,"Times New Roman",serif;
--color-cartesia-growth: #abd49e;
--surface-foreground: #1e1c1a;
--color-cartesia-neutral-700: #787672;
--text-5xl--line-height: 1;
--color-cartesia-orange-950: #3f1403;
--text-base--line-height: calc(1.5 / 1);
--color-red-200: oklch(88.5% .062 18.334);
--color-cartesia-orange-800: #9a380c;
--accent-foreground: #1e1c1a;
--font-mono: "IBM Plex Mono-39f46362fd5bf7f0","IBM Plex Mono-39f46362fd5bf7f0 fallback: Courier New",monospace;
--color-cartesia-neutral-600: #a7a6a2;
--color-cartesia-green-500: #309d4b;
--color-cartesia-blue-400: #a0b8cc;
--color-cartesia-blue-500: #99b0c8;
--text-lg--line-height: calc(1.75 / 1.125);
--color-white: #fff;
--font-abc-diatype: "ABC Diatype-017f0f97e8794fab","ABC Diatype-017f0f97e8794fab fallback: Arial","ABC Diatype-017f0f97e8794fab fallback: Arial Bold",ui-sans-serif,system-ui,sans-serif;
--color-cartesia-green-200: #ceecbf;
--color-cartesia-neutral-800: #525150;
--color-cartesia-blue-950: #182530;
--color-cartesia-neutral-500: #c5c2bc;
--color-cartesia-blue-900: #2a3d4d;
--color-cartesia-green-600: #227a38;
--color-cartesia-orange-100: #ffe8d6;
--font-sans: "ABC Diatype-017f0f97e8794fab","ABC Diatype-017f0f97e8794fab fallback: Arial","ABC Diatype-017f0f97e8794fab fallback: Arial Bold",ui-sans-serif,system-ui,sans-serif;
--color-cartesia-orange-50: #fff6f0;
--color-cartesia-green-50: #f4faef;
--radius: .45rem;
--font-weight-bold: 700;
--color-background: oklch(98.2% .001 106.423);
--color-cartesia-neutral-50: #fefefe;
--color-cartesia-orange-300: #ffbb8a;
--text-6xl: 3.75rem;
--text-xs--line-height: calc(1 / .75);
--color-cartesia-orange-900: #6e2608;
--color-cartesia-green-100: #e2f5da;
--color-neutral-50: oklch(98.5% 0 0);
--radius-md: calc(.45rem * .8);
--color-cartesia-neutral-950: #111010;
--color-cartesia-blue-100: #d1e2e8;
--text-xl: 1.25rem;
--color-cartesia-orange-400: #fda05e;
}Drop-in prompt
Build a landing page in the visual style of Cartesia \ AI that learns and interacts like humans.
Reference design system (extracted from the live site):
- Palette: #70bc84, #b4dcbc, #095028, #548c6c, #adcdb6
- Typefaces: PP Kyoto-b14c6ebb315b725b, ABC Diatype-017f0f97e8794fab
- 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/cartesia-ai