Grafana
Split Studio
Cool, stark geometry—crisp sans-serif, muted greys, punctuated by vibrant, focused orange.




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 | Rotonto | 66px | 400 | 1.15 | 1.32px | Aa Bb Cc |
| h2 | JetBrainsMono | 14px | 400 | 1.2 | 0 | Aa Bb Cc |
| h3 | Aeonik | 21px | 700 | 1.15 | 0 | Aa Bb Cc |
| body | Aeonik | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | JetBrainsMono | 14px | 400 | 1.2 | 0 | Aa Bb Cc |
| button | Aeonik | 16px | 400 | 0 | 0.24px | Aa Bb Cc |
:root {
--color-dominant: #f86204;
--color-surface: #fce4d4;
--color-ink: #482b16;
--color-accent: #977752;
--color-detail: #d5d0c0;
}
/* CSS variables exposed by source */
:root {
--text-2xl: 1.75rem;
--color-gray-22: #383838;
--color-green-link-dark: #00aa3c;
--text-underline-offset-heading-4: .28em;
--color-orange-dark: #ba4300;
--color-blue-dark: #004e9b;
--text-lg: 1.3125rem;
--font-body: "Aeonik", "Aeonik Fallback", Helvetica, sans-serif;
--spacing-0.5px: .5px;
--spacing-content: 42rem;
--color-blue-link: #0c64bc;
--color-gray-27: #444;
--font-mono: "JetBrainsMono", "JetBrainsMono Fallback", monaco, monospace;
--border-width-2px: 2px;
--color-pink-neon: #fb68ec;
--color-gray-96: #f4f4f4;
--color-orange: #ff6100;
--color-blue-link-dark: #0091ff;
--color-red-dark: #ba1704;
--text-underline-offset-mono: .125em;
--color-white: #fff;
--color-green-dark: #00802d;
--color-gray-80: #ccc;
--color-gray-20: #323232;
--color-gray-dark: #565e67;
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--color-purple-neon: #cb75ff;
--font-weight-bold: 700;
--color-current: currentColor;
--color-red: #ea3737;
--text-6xl: 4.125rem;
--color-green: #00be43;
--color-blue: #0482ff;
--color-purple: #ac39f2;
--color-blue-neon: #16a6ff;
--text-xl: 1.5rem;
--color-gray-text-dark: #adb9c6;
--color-gray-10: #1b1b1b;
--text-underline-offset-heading-2: .23em;
--color-green-neon: #1be349;
--text-md: 1.125rem;
--color-red-neon: #ff5c38;
--color-putty: #e2e4dd;
--spacing: 1.75rem;
--color-gray-60: #999;
--color-pink-dark: #b14886;
--color-putty-deep: #d0d2c8;
--color-yellow: #ffb200;
--color-orange-neon: #ff8e0a;
--text-sm: .875rem;
--color-putty-lighter: #fafaf9;
--color-gray: #828c97;
--color-gray-40: #666;
--text-underline-offset-heading: .22em;
--text-4xl: 2.25rem;
--color-gray-70: #b1b1b1;
--color-gray-16: #292929;
--color-yellow-dark: #bd8209;
--text-5xl: 3.125rem;
--text-underline-offset-code: .125em;
}Drop-in prompt
Build a landing page in the visual style of Video API for developers | Mux.
Reference design system (extracted from the live site):
- Palette: #f86204, #fce4d4, #482b16, #977752, #d5d0c0
- Typefaces: Rotonto, JetBrainsMono, Aeonik
- 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/mux-com