Azure Microsoft
Marquee Hero
Loading
AI-native data platform for the Enterprise – Mage AI
Electric indigo depth, playful geometric forms, clean sans-serif whispers of innovation.
Click any value to copy. Roles are suggestions, not gospel.
- #04f17eoklch(83.9% 0.220 152)Dominant
- #b88cfboklch(72.7% 0.161 301)Surface
- #048644oklch(54.4% 0.141 152)Ink
- #9b7457oklch(59.1% 0.065 58)Accent
- #b6a8cdoklch(75.6% 0.054 302)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | geistSans | 64px | 600 | 1.05 | 0 | Aa Bb Cc |
| h2 | geistSans | 36px | 400 | 1.6 | 0 | Aa Bb Cc |
| h3 | geistSans | 24px | 600 | 1.35 | 0 | Aa Bb Cc |
| body | geistSans | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | geistSans | 9px | 500 | 1.5 | 0 | Aa Bb Cc |
| button | geistSans | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #04f17e;
--color-surface: #b88cfb;
--color-ink: #048644;
--color-accent: #9b7457;
--color-detail: #b6a8cd;
}
/* CSS variables exposed by source */
:root {
--type-display-lg-mobile: 42px;
--space-16: 64px;
--color-accent-mint: #c9f6ea;
--color-lavender: #d9c2ff;
--color-text-inverse-muted: #ffffff9e;
--type-heading-hero: 62px;
--color-slate-700: #34343a;
--color-blue-dark: #0b4bb8;
--space-4: 16px;
--shadow-overlay: 0 18px 48px #10161b29;
--shadow-none: none;
--type-body-compact-mobile: 14px;
--space-8: 32px;
--color-slate-900: #10161b;
--space-32: 128px;
--type-display-lg: 64px;
--color-panel: #fff;
--color-text-subtle: #8b8982;
--color-signal-red: #ff3b3b;
--radius-none: 0;
--font-mono: "geistMono", "geistMono Fallback", SFMono-Regular, Menlo, Monaco, Consolas, monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
--color-text-inverse-subtle: #ffffff61;
--shadow-card: 0 10px 28px #10161b14;
--space-5: 20px;
--radius-sm: 6px;
--shadow-soft: 0 24px 60px #10161b14;
--font-sans: "geistSans", "geistSans Fallback", Arial, Helvetica, sans-serif, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--type-mono-rail: 14px;
--font-weight-bold: 600;
--space-3: 12px;
--color-page: #fbfbfc;
--color-surface-white: #fff;
--font-weight-regular: 400;
--radius-pill: 999px;
--color-canvas-warm: #fbfbfc;
--color-signal-purple: #956eff;
--type-mono-rail-mobile: 13px;
--space-1: 4px;
--font-geist-mono: "geistMono", "geistMono Fallback", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
--color-green: #c9f6ea;
--color-blue: #3686ff;
--space-10: 40px;
--type-display-md: 44px;
--color-accent-cyan: #d9f6ff;
--border-inverse: 1px solid #ffffff26;
--color-ink-800: #080808;
--radius-md: 8px;
--font-weight-display: 600;
--color-text-primary: #080808;
--type-body-lede-mobile: 18px;
--space-24: 96px;
--type-body-default-mobile: 15px;
--color-text-inverse: #fff;
--color-accent-lavender: #d9c2ff;
--color-border-default: #deddd4;
--type-body-lede: 20px;
--space-0: 0;
--color-accent-yellow: #fff38a;
--color-ink: #080808;
--font-weight-strong: 520;
}Drop-in prompt
Build a landing page in the visual style of AI-native data platform for the Enterprise – Mage AI.
Reference design system (extracted from the live site):
- Palette: #04f17e, #b88cfb, #048644, #9b7457, #b6a8cd
- Typefaces: geistSans
- 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/mage-ai
