Graphite
Split Studio
Deep indigo code streams on a stark, clean interface, sharp and relentlessly functional.




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 | Aeonik | 68px | 300 | 1.1 | -2px | Aa Bb Cc |
| h3 | Aeonik | 68px | 300 | 1.1 | -2px | Aa Bb Cc |
| body | Aeonik | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Aeonik | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | Noto Sans Mono | 16px | 500 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #dbfb4b;
--color-surface: #2b3b60;
--color-ink: #9e5ff6;
--color-accent: #94648c;
--color-detail: #c0c0cc;
}
/* CSS variables exposed by source */
:root {
--color-surface-information-loud: 63 67 219;
--color-interactive-secondary-surface: 102 124 161;
--color-border-success: 0 204 106;
--color-interactive-surface: 63 67 219;
--text-lg: 1.125rem;
--color-text-brand: 68 76 231;
--color-surface-danger: 199 29 0;
--color-interactive-hover: 53 56 207;
--text-5xl--line-height: 1;
--color-text-subtle: 70 90 120;
--text-base--line-height: calc(1.5 / 1);
--color-text-secondary: 70 90 120;
--color-text-pink: 227 0 230;
--color-border-danger: 255 100 60;
--color-surface-secondary: 248 250 252;
--color-border-primary: 124 143 177;
--color-border-information: 68 76 231;
--color-surface-inverse: 248 250 252;
--text-lg--line-height: calc(1.75 / 1.125);
--color-interactive-ghost-active: 36 51 73;
--color-border-table: 36 51 73;
--radius-sm: .25rem;
--font-weight-bold: 700;
--text-6xl: 3.75rem;
--text-xs--line-height: calc(1 / .75);
--font-weight-light: 300;
--color-surface-success: 0 143 83;
--color-border-warning: 254 180 18;
--color-interactive-ghost-hover: 70 90 120;
--color-text-black: 0 0 0;
--color-surface-warning: 253 113 10;
--color-text-danger: 255 100 60;
--color-border-focus-danger: 251 62 20;
--radius-md: .375rem;
--color-border-subtle: 55 71 97;
--radius-lg: .5rem;
--text-xl: 1.25rem;
--color-interactive-secondary-hover: 36 51 73;
--color-text-primary: 248 250 252;
--color-text-white: 255 255 255;
--color-text-information: 68 76 231;
--color-text-inverse: 20 20 20;
--color-interactive-danger-active: 255 69 24;
--color-surface-primary: 0 0 0;
--color-interactive-danger-hover: 255 100 60;
--color-surface-success-loud: 0 225 117;
--color-surface-table: 36 51 73;
--color-surface-background: 20 20 20;
--color-text-success: 0 225 117;
--spacing: .25rem;
--color-surface-information: 26 28 76;
--text-xl--line-height: calc(1.75 / 1.25);
--font-weight-semibold: 600;
--color-surface-brand: 68 76 231;
--color-border-secondary: 70 90 120;
--text-sm: .875rem;
--color-text-warning: 254 193 24;
--font-weight-extrabold: 800;
--text-4xl: 2.25rem;
--color-interactive-secondary-active: 55 71 97;
}Drop-in prompt
Build a landing page in the visual style of Temporal.
Reference design system (extracted from the live site):
- Palette: #dbfb4b, #2b3b60, #9e5ff6, #94648c, #c0c0cc
- Typefaces: Aeonik, Noto Sans Mono
- 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/temporal-io