Antimetal
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