Cluely
Marquee Hero
Loading
HeyClicky
Soft desktop collage, playful sans serif floating over a milky white void
Click any value to copy. Roles are suggestions, not gospel.
- #ec2d36oklch(61.2% 0.224 25)Dominant
- #91c0eboklch(79.0% 0.079 247)Surface
- #85391boklch(44.2% 0.113 41)Ink
- #9c9362oklch(65.9% 0.068 99)Accent
- #b9c5a2oklch(80.5% 0.050 123)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Inter | 88px | 500 | 1.1 | -2.64px | Aa Bb Cc |
| h2 | Inter | 56px | 500 | 1.2 | -1.68px | Aa Bb Cc |
| body | Inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
:root {
--color-dominant: #ec2d36;
--color-surface: #91c0eb;
--color-ink: #85391b;
--color-accent: #9c9362;
--color-detail: #b9c5a2;
}
/* CSS variables exposed by source */
:root {
--font-geist-mono: "Geist Mono", "Geist Mono Fallback";
--font-inter: "Inter", "Inter Fallback";
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-instrument-serif: "Instrument Serif", "Instrument Serif Fallback";
--tw-ring-offset-color: #fff;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-inset-shadow-alpha: 100%;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow-alpha: 100%;
--default-transition-duration: .15s;
--tw-drop-shadow-alpha: 100%;
--tw-border-style: solid;
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
--tw-shadow: 0 0 #0000;
--page-zoom: 1;
--tw-ring-offset-width: 0px;
--ease-out: cubic-bezier(0, 0, .2, 1);
--default-mono-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--tw-inset-shadow: 0 0 #0000;
--default-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}Drop-in prompt
Build a landing page in the visual style of HeyClicky.
Reference design system (extracted from the live site):
- Palette: #ec2d36, #91c0eb, #85391b, #9c9362, #b9c5a2
- Typefaces: Inter
- 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/heyclicky-com
