cluely.com

Cluely opens on an illustrated dawn — a painted sky washing from #4face5 through pale #cae6ed to a warm horizon, with low blue mountains and a soft sun disc — and sets an 80px EB Garamond headline in white on top of it, which is the whole trick: a literary serif doing the talking for a piece of screen-recording software. Everything under that first screen drops to plain #ffffff and near-black #2d292c Geist, so the page reads as one indulgent image followed by a very disciplined product tour. The rhythm is enormous vertical air (a 6,939px page with maybe seven ideas in it), centered 28px section heads with tiny gray subheads beneath, and product screenshots that never sit on the bare page — each one floats inside a soft lavender-blue slab with a generous radius, which hides the screenshots' own hard edges and keeps the sky's palette running all the way down to the footer. Radii are pills almost everywhere (93 elements at 9999px), borders are barely-there hairlines, and there is essentially no shadow work: depth comes from the tinted slab behind a thing, not from a drop shadow under it. The result is calm and expensive-feeling in a way that does a lot of quiet arguing on behalf of a product whose pitch is "undetectable."

Build the page as one image followed by a white document.

Type. Two families only: a high-contrast old-style serif for display (EB Garamond, weight 500) and a neo-grotesk for everything else (Geist). Display 72–80px, line-height 0.96× the size, letter-spacing -1px, centered, maximum two lines. Section heads 28px/35px at -0.5px in the grotesk, also centered, with a 19px/26.6px gray subhead at -0.38px directly beneath. Body 12–16px/1.6 with normal tracking. Buttons and labels 14px/500 at -0.35px. Eyebrow labels are 11–12px uppercase gray at wide tracking. Never set the serif below 40px — it is display only.

Color. Ground is pure #ffffff; ink is a warm near-black #2d292c; secondary text is that ink at ~55%. One saturated accent, #2f8fdc, used for the CTA fill and inline link accents and nothing else. The atmosphere palette — #4face5, #84cbeb, #cae6ed, #f5f8f6 — is for illustration, card fills and the slabs behind media, never for text. Allow one warm counterweight (#f3a473) inside imagery only.

Hero. Give the first screen a full-bleed painted scene with a real horizon and a light source, not a gradient mesh: sky wash at the top, silhouetted landforms at the bottom third, a haze band where they meet. Set white display type in the darkest upper band. Let the first product visual start inside the hero and run off the bottom edge of the viewport.

Shape and depth. Pills are the default: border-radius: 9999px on every button, badge, chip, tab and status marker. Media plates get 24px, inner captures 12px, small chips 4–8px. Borders are 1px at ~8% ink and used sparingly. No drop shadows — depth is a tinted slab behind an element, never a shadow under it. Every screenshot sits inset inside a pale blue-lavender plate with generous padding on all four sides.

Layout and rhythm. Content column ~1140px inside a 1440px frame. Section blocks are centered heading + subhead, then a full-width visual; 140–200px of vertical air between sections and let a section end on empty white. Two-up comparisons use identical cards differentiated only by fill vs. outline. Stat lists are number | label + gloss rows divided by full-width hairlines, with the number's unit set at half size beside it. Logo rows are a single centered line of 16px monochrome-ish marks under a small uppercase eyebrow.

Motion. Restrained: 200–300ms ease-out fades and 12–16px rises on scroll entry, one at a time per section. The CTA pill re-appears fixed at top-right after the hero scrolls away, fading in rather than sliding. No parallax on the painted hero — it is a picture, and moving it cheapens it.

The two moves that make it recognizable: a serif display headline on a painted sky, and every screenshot floating on a tinted slab so no rectangle ever meets the white page directly.