Radix Ui
Ecosystem Index
Deep indigo expanse, stark sans-serif geometry, and precise, cool digital clarity.




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 | 48px | 400 | 1 | 0 | Aa Bb Cc |
| h2 | Aeonik | 16px | 500 | 1.5 | -0.4px | Aa Bb Cc |
| h3 | ui-sans-serif | 14px | 500 | 1.43 | 0 | Aa Bb Cc |
| body | ui-sans-serif | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | ui-sans-serif | 14px | 500 | 1.43 | 0 | Aa Bb Cc |
| button | ui-sans-serif | 14px | 500 | 1.43 | 0 | Aa Bb Cc |
Max content width 1248px
:root {
--color-dominant: #7a21ed;
--color-surface: #1c044c;
--color-ink: #8c44e4;
--color-accent: #5c9f8d;
--color-detail: #bbbac6;
}
/* CSS variables exposed by source */
:root {
--color-purple-200: oklch(90.2% .063 306.703);
--border: 240 5.9% 90%;
--color-brand-purple2-200: #e5e1ff;
--color-slate-200: oklch(92.9% .013 255.508);
--color-ansi-red-500: #cd3131;
--color-sky-500: oklch(68.5% .169 237.323);
--color-brand-sand-600: #e6a704;
--color-pink-500: oklch(65.6% .241 354.308);
--color-red-900: oklch(39.6% .141 25.723);
--color-neutral-600: oklch(43.9% 0 0);
--primary-foreground: 0 0% 98%;
--color-brand-green-300: #00e285;
--color-blue-700: oklch(48.8% .243 264.376);
--color-neutral-300: oklch(87% 0 0);
--color-slate-500: oklch(55.4% .046 257.417);
--color-purple-800: oklch(43.8% .218 303.724);
--color-brand-navy-50: #fdfdff;
--text-base--line-height: 1.5;
--color-blue-300: oklch(80.9% .105 251.813);
--color-neutral-200: oklch(92.2% 0 0);
--color-brand-green-400: #00b368;
--color-gray-300: oklch(87.2% .01 258.338);
--color-yellow-400: oklch(85.2% .199 91.936);
--font-mono: "Input Mono Reg",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--color-slate-300: oklch(86.9% .022 252.894);
--color-amber-300: oklch(87.9% .169 91.605);
--color-gray-500: oklch(55.1% .027 264.364);
--color-primary-foreground: hsl(0 0% 98%);
--color-green-500: oklch(72.3% .219 149.579);
--color-white: #fff;
--color-gray-400: oklch(70.7% .022 261.325);
--color-blue-400: oklch(70.7% .165 254.624);
--color-slate-400: oklch(70.4% .04 256.788);
--color-brand-watermelon-800: #87171f;
--radius-sm: calc(.5rem - 4px);
--color-popover: hsl(0 0% 100%);
--color-accent: hsl(240 4.8% 95.9%);
--color-yellow-300: oklch(90.5% .182 98.111);
--color-brand-purple2-500: #7f3ffc;
--color-terminal-bg: #fff;
--font-weight-bold: 700;
--color-gray-100: oklch(96.7% .003 264.542);
--color-ansi-black-500: #000;
--color-purple-600: oklch(55.8% .288 302.321);
--text-xs--line-height: calc(1/.75);
--color-neutral-700: oklch(37.1% 0 0);
--color-brand-navy-500: #706b8e;
--color-brand-watermelon-500: #f47f83;
--color-brand-navy-100: #f4f3fb;
--color-ansi-yellow-300: #f5f543;
--color-lime-200: oklch(93.8% .127 124.321);
--color-brand-sand-800: #82612a;
--color-brand-green-800: #002f17;
--radius-2xl: 1rem;
--radius-md: calc(.5rem - 2px);
--color-brand-green-50: #edfff2;
--color-blue-800: oklch(42.4% .199 265.638);
--color-brand-purple2-800: #340469;
--color-pink-100: oklch(94.8% .028 342.258);
--text-xl: 1.25rem;
}Drop-in prompt
Build a landing page in the visual style of Buildkite.
Reference design system (extracted from the live site):
- Palette: #7a21ed, #1c044c, #8c44e4, #5c9f8d, #bbbac6
- Typefaces: Aeonik, ui-sans-serif
- Macrostructure: Ecosystem Index
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/buildkite-com--resources-blog