AI-native data platform for the Enterprise - Mage AI
Marquee Hero
Cold terminal obsidian, pixelated white glyphs, sharp amber accents on charcoal




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 | mondwest | 96px | 400 | 1 | -0.75px | Aa Bb Cc |
| h2 | mondwest | 48px | 400 | 1.05 | -0.75px | Aa Bb Cc |
| h3 | GeistPixelSquare | 24px | 700 | 1.2 | -0.25px | Aa Bb Cc |
| body | neueBit | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | neueBit | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ec6711;
--color-surface: #f4a46c;
--color-ink: #993c04;
--color-accent: #8c8c84;
--color-detail: #dcccc2;
}
/* CSS variables exposed by source */
:root {
--border: lab(100% 0 0/.1);
--color-copper-500: #ed670f;
--text-caption-md--line-height: 100%;
--text-heading-2xs--letter-spacing: -.75px;
--primary-foreground: lab(7.78201% -.0000149012 0);
--text-body-md: 1.75rem;
--font-geist-pixel-square: "GeistPixelSquare",Geist Mono,ui-monospace,SFMono-Regular,Roboto Mono,Menlo,Monaco,Liberation Mono,DejaVu Sans Mono,Courier New,monospace;
--text-heading-lg: 3rem;
--font-body: "neueBit","neueBit Fallback";
--text-heading-sm--line-height: 105%;
--text-caption-subtitle--line-height: 130%;
--text-base--line-height: calc(1.5/1);
--color-text-tertiary: #9f9b92;
--font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--text-caption-sm: .75rem;
--color-surface-secondary: #292623;
--surface-primary: #201c19;
--text-caption-md: .875rem;
--surface-secondary-contrast: #e6e5e0;
--surface-secondary: #292623;
--text-heading-sm: 2rem;
--color-white: #fff;
--font-weight-bold: 700;
--text-heading-xs: 1.75rem;
--font-weight-body-alt: 400;
--color-page-primary: #16120f;
--text-xs--line-height: calc(1/.75);
--text-caption-lg: 1rem;
--font-mondwest: "mondwest","mondwest Fallback";
--text-display-lg--letter-spacing: -.75px;
--text-caption-subtitle: 1.5rem;
--text-body-md--line-height: 90%;
--text-heading-xs--letter-spacing: -.75px;
--text-body-2xs-alt: .75rem;
--text-secondary: #cecdc9;
--color-surface-primary: #201c19;
--text-heading-md--letter-spacing: -.75px;
--surface-primary-contrast: #e6e5e0;
--accent: lab(15.204% 0 -.00000596046);
--font-weight-heading: 400;
--text-heading-xs--line-height: 105%;
--text-body-xs-alt--letter-spacing: -.25px;
--text-2xl--line-height: calc(2/1.5);
--secondary-foreground: lab(98.26% 0 0);
--spacing: .25rem;
--font-pixelify-sans: "Pixelify Sans","Pixelify Sans Fallback";
--text-heading-xl: 4rem;
--background: lab(2.75381% 0 0);
--color-core-black: #000;
--text-heading-md: 2.5rem;
--font-caption: "Pixelify Sans","Pixelify Sans Fallback";
--color-core-white: #fff;
--text-sm: .875rem;
--text-body-xs-alt: .875rem;
--text-body-sm-alt--line-height: 120%;
--text-body-xs: 1.25rem;
--text-body-xl--line-height: 90%;
--text-display-lg: 6rem;
--text-primary: #fff;
--text-heading-2xs--line-height: 105%;
}Drop-in prompt
Build a landing page in the visual style of Overmind · Features.
Reference design system (extracted from the live site):
- Palette: #ec6711, #f4a46c, #993c04, #8c8c84, #dcccc2
- Typefaces: mondwest, neueBit
- Macrostructure: Marquee Hero
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/overmindlab-ai--product-observability