Cloudflare
Marquee Hero
Cool, expansive digital space: crisp sans-serif, gradient hues evoke data streams.




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 | GeistSans | 64px | 400 | 1 | -3.84px | Aa Bb Cc |
| h2 | GeistSans | 56px | 450 | 1 | -3.36px | Aa Bb Cc |
| h3 | GeistSans | 14px | 500 | 1.43 | 0 | Aa Bb Cc |
| body | GeistSans | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | GeistSans | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ecbc35;
--color-surface: #795c0b;
--color-ink: #7cfcd4;
--color-accent: #a0966e;
--color-detail: #a6b9c1;
}
/* CSS variables exposed by source */
:root {
--text-base--line-height: calc(1.5 / 1);
--color-gray-300: hsla(0, 0%, 90%, 1);
--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New, monospace, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
--color-gray-500: hsla(0, 0%, 79%, 1);
--text-fluid-24-32: clamp(1.5rem, .6429rem + 1.4286vi, 2rem);
--accents-3: #999;
--text-fluid-24-28: clamp(1.5rem, 1.0714rem + .7143vi, 1.75rem);
--text-fluid-16-28: clamp(1rem, -.2857rem + 2.1429vi, 1.75rem);
--spacing-fluid-24-40: clamp(1.5rem, -.2143rem + 2.8571vi, 2.5rem);
--accents-8: #111;
--color-zinc-900: lab(8.30603% .618205 -2.16572);
--accents-2: #eaeaea;
--text-8xl: 6rem;
--text-sm: .875rem;
--color-gray-950: lab(1.90334% .278696 -5.48866);
--spacing-fluid-16-24: clamp(1rem, .1429rem + 1.4286vi, 1.5rem);
--font-weight-thin: 100;
--color-violet-50: lab(96.2416% 2.28849 -5.51657);
--text-fluid-14-24: clamp(.875rem, -.1964rem + 1.7857vi, 1.5rem);
--shadow-sticky: 0 12px 10px -10px #0000001f;
--text-lg: 1.125rem;
--text-8xl--line-height: 1;
--shadow-large: 0 30px 60px #0000001f;
--text-fluid-18-24: clamp(1.125rem, .4821rem + 1.0714vi, 1.5rem);
--accents-4: #888;
--color-violet-700: lab(35.2783% 67.9912 -88.793);
--shadow-medium: 0 8px 30px #0000001f;
--color-background-100: hsla(0, 0%, 100%, 1);
--text-fluid-14-20: clamp(.875rem, .2321rem + 1.0714vi, 1.25rem);
--color-violet-100: lab(93.0838% 4.35197 -9.88284);
--color-gray-900: hsla(0, 0%, 30%, 1);
--color-gray-700: hsla(0, 0%, 56%, 1);
--font-weight-extrabold: 800;
--text-sm--line-height: calc(1.25 / .875);
--text-3xl--line-height: calc(2.25 / 1.875);
--text-3xl: 1.875rem;
--text-xs: .75rem;
--font-weight-medium: 500;
--font-weight-normal: 400;
--font-sans-fallback: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--shadow-hover: 0 30px 60px #0000001f;
--color-yellow-500: lab(76.3898% 14.5258 98.4589);
--text-base: 1rem;
--color-zinc-100: lab(96.1634% .0993311 -.364041);
--color-slate-500: lab(48.0876% -2.03595 -16.5814);
--accents-6: #444;
--color-slate-300: lab(84.7652% -1.94535 -7.93337);
--text-fluid-32-64: clamp(2rem, -1.4286rem + 5.7143vi, 4rem);
--text-fluid-64-128: clamp(4rem, -2.8571rem + 11.4286vi, 8rem);
--text-fluid-20-28: clamp(1.25rem, .3929rem + 1.4286vi, 1.75rem);
--font-weight-bold: 700;
--text-xs--line-height: calc(1 / .75);
--color-neutral-700: lab(27.036% 0 0);
--text-fluid-20-32: clamp(1.25rem, -.0357rem + 2.1429vi, 2rem);
--text-xl: 1.25rem;
--text-2xl--line-height: calc(2 / 1.5);
--spacing: .25rem;
--color-gray-alpha-400: #00000014;
--shadow-smallest: 0px 2px 4px #0000001a;
--text-xl--line-height: calc(1.75 / 1.25);
}Drop-in prompt
Build a landing page in the visual style of Vercel.
Reference design system (extracted from the live site):
- Palette: #ecbc35, #795c0b, #7cfcd4, #a0966e, #a6b9c1
- 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/vercel-com--ai-gateway