Antimetal
Split Studio
Loading
Grafana — Pricing
Deep indigo shadows and crisp, assertive sans-serifs create a cool, focused clarity.
Click any value to copy. Roles are suggestions, not gospel.
- #1c54f4oklch(52.5% 0.245 264)Dominant
- #06257eoklch(31.7% 0.153 264)Surface
- #749cfcoklch(70.6% 0.148 266)Ink
- #837083oklch(56.9% 0.037 326)Accent
- #aab4c5oklch(76.7% 0.027 261)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Poppins | 60px | 600 | 1.25 | -1.5px | Aa Bb Cc |
| h2 | Poppins | 48px | 600 | 1.13 | -1.2px | Aa Bb Cc |
| h3 | Poppins | 30px | 600 | 1.25 | -0.75px | Aa Bb Cc |
| body | Inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Inter | 14px | 400 | 1 | 0 | Aa Bb Cc |
| button | Inter | 11px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #1c54f4;
--color-surface: #06257e;
--color-ink: #749cfc;
--color-accent: #837083;
--color-detail: #aab4c5;
}
/* CSS variables exposed by source */
:root {
--border: #aeaebc;
--color-purple-200: #f3cfff;
--surface-warning-foreground: #af450a;
--border-button: #1440e1;
--text-body: #454554;
--color-pink-500: #f35998;
--color-violet-600: oklch(54.1% .281 293.009);
--color-orange-600: #f04306;
--color-red-900: #61231e;
--surface-destructive-foreground: #ef695e;
--surface-success-foreground: #097347;
--color-orange-800: #9e260e;
--primary-foreground: #fff;
--color-blue-700: #1440e1;
--color-black-25: #00000040;
--surface-button: #1b55f5;
--color-purple-800: #831890;
--color-orange-900: #7f230f;
--surface-foreground: #000;
--color-black-10: #0000001a;
--radius-4xl: 2rem;
--text-base--line-height: calc(1.5 / 1);
--color-blue-300: #8ec0ff;
--color-orange-50: #fff6ed;
--color-gray-300: #d8d8df;
--color-yellow-400: #feee4f;
--font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--surface-primary: #17171c;
--shadow-spread-n-2: -2;
--color-amber-300: #ffd762;
--color-gray-500: #aeaebc;
--surface-secondary: #f4f4f6;
--color-green-500: #17b26a;
--text-9xl--line-height: 1;
--surface-beta-foreground: #9d1ab1;
--color-white: #fff;
--color-gray-400: #bcbcc8;
--surface-button-hover: #1440e1;
--shadow-spread-0: 0;
--color-blue-400: #599cff;
--color-pink-50: #fdf2f7;
--color-stone-900: oklch(21.6% .006 56.043);
--radius-sm: .25rem;
--color-yellow-300: #fff867;
--font-weight-bold: 700;
--surface-destructive-disabled-foreground: #f4f4f6;
--surface-success: #d1f0e1;
--color-gray-100: #f4f4f6;
--color-input-foreground: #505062;
--color-purple-600: #bb24d5;
--text-xs--line-height: calc(1 / .75);
--text-form-description: #67677e;
--surface-overlay: #0000001a;
--border-field-error: #a42f26;
--color-green-900: #094b31;
--border-brand: #ff671d;
--radius-2xl: 1rem;
--radius-md: .375rem;
--color-blue-800: #1734b6;
--color-pink-100: #fde6f0;
}Drop-in prompt
Build a landing page in the visual style of Grafana — Pricing.
Reference design system (extracted from the live site):
- Palette: #1c54f4, #06257e, #749cfc, #837083, #aab4c5
- Typefaces: Poppins, 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/grafana-com--pricing
