Grafana
Split Studio
Loading
Antimetal
Cool, spacious neutrals with stark sans-serifs evoke precision and quiet power.
Click any value to copy. Roles are suggestions, not gospel.
- #d8971foklch(72.2% 0.144 76)Dominant
- #dcbc58oklch(80.4% 0.124 92)Surface
- #735110oklch(46.0% 0.089 78)Ink
- #807f7aoklch(59.6% 0.008 97)Accent
- #c5bba7oklch(79.5% 0.030 85)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Test Signifier | 54px | 400 | 1.1 | -1.998px | Aa Bb Cc |
| h2 | Test Signifier | 24px | 400 | 1.2 | 0 | Aa Bb Cc |
| h3 | Test Signifier | 36px | 400 | 1.1 | 0 | Aa Bb Cc |
| body | Geist | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Geist | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #d8971f;
--color-surface: #dcbc58;
--color-ink: #735110;
--color-accent: #807f7a;
--color-detail: #c5bba7;
}
/* CSS variables exposed by source */
:root {
--text-lg--line-height: calc(1.75 / 1.125);
--color-white: #fff;
--text-2xl: 1.5rem;
--color-accent: #e2e67d;
--color-cream: #f4f4e7;
--font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
--text-lg: 1.125rem;
--color-bg: #d7d7d0;
--color-border: #1a16141a;
--text-sm--line-height: calc(1.25 / .875);
--color-black: #000;
--text-xs--line-height: calc(1 / .75);
--text-2xl--line-height: calc(2 / 1.5);
--font-weight-medium: 500;
--font-weight-normal: 400;
--text-xs: .75rem;
--spacing: .25rem;
--font-serif: "Test Signifier", "Noto Serif", Georgia, serif;
--color-fg: #1a1614;
--color-card: #fdfcfa;
--color-nav-bg: #cfcfc8bd;
--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--text-xl--line-height: calc(1.75 / 1.25);
--font-weight-semibold: 600;
--text-xl: 1.25rem;
--text-sm: .875rem;
--ease-in-out: cubic-bezier(.4, 0, .2, 1);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-inset-shadow-alpha: 100%;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow-alpha: 100%;
--tw-drop-shadow-alpha: 100%;
--tw-scale-z: 1;
--tw-border-style: solid;
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
--blur-2xl: 40px;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--tw-outline-style: solid;
--ease-in: cubic-bezier(.4, 0, 1, 1);
--default-font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-scale-x: 1;
--tw-translate-z: 0;
--tw-scale-y: 1;
--default-transition-duration: .15s;
--animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
--tw-space-y-reverse: 0;
--tw-translate-y: 0;
--blur-md: 12px;
--ease-out: cubic-bezier(0, 0, .2, 1);
--blur-sm: 8px;
--default-mono-font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--tw-inset-shadow: 0 0 #0000;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Antimetal.
Reference design system (extracted from the live site):
- Palette: #d8971f, #dcbc58, #735110, #807f7a, #c5bba7
- Typefaces: Test Signifier, Geist
- 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/antimetal-com
