Azure Microsoft
Marquee Hero
Cool, deep indigo space — crisp sans-serif geometry on a boundless, digital canvas.




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 | EB Garamond | 80px | 500 | 0.96 | -1px | Aa Bb Cc |
| h2 | Geist | 19px | 500 | 1.4 | -0.38px | Aa Bb Cc |
| h3 | Geist | 28px | 500 | 1.25 | -0.5px | Aa Bb Cc |
| body | Geist | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Geist | 14px | 500 | 1.43 | 0 | Aa Bb Cc |
| button | Geist | 16px | 500 | 1.5 | -0.13px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #369adf;
--color-surface: #073a8b;
--color-ink: #83caec;
--color-accent: #588ca4;
--color-detail: #dad4c3;
}
/* CSS variables exposed by source */
:root {
--border: 240 5.9% 90%;
--color-orange-200: oklch(90.1% .076 70.697);
--text-2xl: 1.5rem;
--color-zinc-200: oklch(92% .004 286.32);
--font-forma: "forma","forma Fallback";
--color-purple-500: oklch(62.7% .265 303.9);
--color-sky-500: oklch(68.5% .169 237.323);
--color-zinc-100: oklch(96.7% .001 286.375);
--text-7xl: 4.5rem;
--color-orange-800: oklch(47% .157 37.304);
--color-neutral-600: oklch(43.9% 0 0);
--text-lg: 1.125rem;
--text-8xl--line-height: 1;
--primary-foreground: 0 0% 98%;
--color-neutral-500: oklch(55.6% 0 0);
--color-amber-600: oklch(66.6% .179 58.318);
--color-yellow-800: oklch(47.6% .114 61.907);
--font-geist: "Geist","Geist Fallback";
--text-5xl--line-height: 1;
--text-base--line-height: calc(1.5/1);
--radius-4xl: 2rem;
--color-neutral-200: oklch(92.2% 0 0);
--color-blue-300: oklch(80.9% .105 251.813);
--color-gray-300: oklch(87.2% .01 258.338);
--accent-foreground: 240 5.9% 10%;
--font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--color-yellow-400: oklch(85.2% .199 91.936);
--color-gray-500: oklch(55.1% .027 264.364);
--color-zinc-50: oklch(98.5% 0 0);
--text-9xl--line-height: 1;
--color-purple-100: oklch(94.6% .033 307.174);
--text-lg--line-height: calc(1.75/1.125);
--color-red-400: oklch(70.4% .191 22.216);
--color-white: #fff;
--color-sky-600: oklch(58.8% .158 241.966);
--color-gray-400: oklch(70.7% .022 261.325);
--font-sans: "Geist","Geist Fallback",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--color-yellow-300: oklch(90.5% .182 98.111);
--color-zinc-950: oklch(14.1% .005 285.823);
--font-weight-bold: 700;
--radius: .375rem;
--color-gray-100: oklch(96.7% .003 264.542);
--color-red-500: oklch(63.7% .237 25.331);
--font-weight-extralight: 200;
--text-6xl: 3.75rem;
--color-zinc-700: oklch(37% .013 285.805);
--text-xs--line-height: calc(1/.75);
--font-weight-light: 300;
--color-neutral-700: oklch(37.1% 0 0);
--color-sky-50: oklch(97.7% .013 236.62);
--color-neutral-50: oklch(98.5% 0 0);
--radius-2xl: 1rem;
--color-blue-800: oklch(42.4% .199 265.638);
--text-7xl--line-height: 1;
--color-neutral-900: oklch(20.5% 0 0);
--text-xl: 1.25rem;
--color-neutral-100: oklch(97% 0 0);
--color-blue-100: oklch(93.2% .032 255.585);
--color-gray-800: oklch(27.8% .033 256.848);
--color-green-600: oklch(62.7% .194 149.214);
}Drop-in prompt
Build a landing page in the visual style of Cluely.
Reference design system (extracted from the live site):
- Palette: #369adf, #073a8b, #83caec, #588ca4, #dad4c3
- Typefaces: EB Garamond, Geist
- 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/cluely-com--blog-virality