Cluely
Marquee Hero
Cool, digital expanse—crisp sans-serif geometry on a vast, slate-grey 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 |
|---|---|---|---|---|---|---|
| body | universalSans | 15px | 400 | 1.5 | -0.1px | Aa Bb Cc |
| caption | universalSans | 14px | 500 | 1.4 | -0.1px | Aa Bb Cc |
| button | universalSans | 14px | 500 | 1.4 | -0.1px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #7f7f7f;
--color-surface: #424242;
--color-ink: #bcbcbc;
--color-accent: #7c7c7c;
--color-detail: #bcbcbc;
}
/* CSS variables exposed by source */
:root {
--border: 0 0% 89.8%;
--surface-l1: 0 0% 97%;
--bg-warning: hsl(47 100% 45% / .08);
--fg-incognito: 245 47% 51%;
--fg-invert: 0 0% 99%;
--primary-foreground: 0 0% 98%;
--surface-l1-hover: 0 0% 95%;
--fg-positive: 180 98% 23%;
--fg-danger: 355 63% 44%;
--background-secondary: oklch(99.33% .0009 106.42);
--fg-success: 136 100% 29%;
--font-size-label: 15px;
--background-color: 0 0% 97%;
--border-incognito-muted: 243 89% 91%;
--font-size-ui: 15px;
--accent: 0 0% 96.1%;
--surface-invert: 0 0% 2%;
--secondary-foreground: 0 0% 9%;
--text-swap-blur: 1.5px;
--background: oklch(97.72% 0 none);
--border-l3: oklch(11.57% 0 none/.15);
--surface-l3: 0 0% 91%;
--surface-inset: 0 0% 97%;
--text-sm: 14px;
--font-size-meta: 13px;
--surface-incognito-elevated: 243 100% 96%;
--bg-electric-blue: hsl(222 100% 55% / 10%);
--fg-tertiary: 0 0% 52%;
--fg-quaternary: 0 0% 62%;
--text-swap-dur: .15s;
--primary: 0 0% 2%;
--surface-incognito: 243 100% 96%;
--surface-l2-active: 0 0% 91%;
--font-size-chrome: 14px;
--border-l2: oklch(11.57% 0 none/.1);
--accent-foreground: 0 0% 9%;
--surface-l2: 0 0% 95%;
--fg-warning: 45 100% 29%;
--surface-l4-hover: 0 0% 78%;
--fg-link: 227 56% 50%;
--fg-electric-blue: 222 100% 55%;
--radius: .5rem;
--text-heading-2: 22px;
--border-l1: oklch(11.57% 0 none/.06);
--surface-l4: 0 0% 87%;
--border-incognito-hover: 245 60% 65%;
--surface-banner: 127 31% 36%;
--fg-secondary: 0 0% 39%;
--surface-elevated: 0 0% 99%;
--text-heading-6: 16px;
--text-swap-ease: cubic-bezier(.23, 1, .32, 1);
--font-size-title: 16px;
--text-heading-3: 19px;
--text-heading-5: 17px;
--text-swap-translate-y: 3px;
--border-incognito: 245 74% 74%;
--fg-orange: 28 100% 49%;
--fg-primary: 0 0% 2%;
--text-heading-4: 18px;
--text-xs: 13px;
}Drop-in prompt
Build a landing page in the visual style of Grok.
Reference design system (extracted from the live site):
- Palette: #7f7f7f, #424242, #bcbcbc, #7c7c7c, #bcbcbc
- Typefaces: universalSans
- 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/grok-com--highlights