# cluely.com

Source: https://cluely.com/
Captured: 2026-09-20
Tags: saas, landing, light, both, minimal, editorial, organic, calm, confident, premium, optimistic
Colors: #4face5, #84cbeb, #cae6ed, #f5f8f6, #2d292c, #2f8fdc, #f3a473, #aadaec
Type (h1): EB Garamond · 80px/76.8px · 500 · tracking -1px — "#1 Undetectable AI for Meetings"
Type (h2): Geist · 19px/26.6px · 500 · tracking -0.38px — "Cluely takes perfect meeting notes and gives real-time answers, all while comple"
Type (h3): Geist · 28px/35px · 500 · tracking -0.5px — "Cluely listens in to the conversation"
Type (body): Geist · 12px/19.2px · 400 — "“A discounted cash flow model values a company by projecting future free cash fl"
Type (small): Geist · 12px/19.2px · 400 — "“A"
Type (button): Geist · 14px/14px · 500 · tracking -0.35px — "All systems operational"
Button: "All systems operational" — fill #d3d9e9, text #464853, radius 6px, border 1px, padding 0px 12px, height 34px, type 14px/500
Radii: 9999px (93), 4px (22), 12px (13), 8px (6), 24px (5)

## Images

- Hero (desktop): https://media.lvly.design/library/cluely-com/hero.webp?v=1f0ca15c
- Page crop (mid-1): https://media.lvly.design/library/cluely-com/mid-1.webp?v=e2b22c0e
- Page crop (mid-2): https://media.lvly.design/library/cluely-com/mid-2.webp?v=c9cad867
- Hero (mobile): https://media.lvly.design/library/cluely-com/mobile-hero.webp?v=a01b1ac0
- Full page (desktop): https://media.lvly.design/library/cluely-com/full.jpg?v=e7c6045b
- Full page (mobile): https://media.lvly.design/library/cluely-com/mobile-full.jpg?v=4ca6d046
- Clip preview (mp4): https://media.lvly.design/library/cluely-com/video-4adadw.preview.mp4?v=783f2a05

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."

## Steal-worthy details

- Literary serif display over a grotesk body — EB Garamond 500 at 80px with 76.8px line-height (0.96, tighter than the type is tall) and -1px tracking, while every other string on the page is Geist 400/500. The pairing is the entire brand and it costs two font loads.
- The hero is a painted scene, not a gradient — layered mountain silhouettes, a haze band and a blown-out sun disc at the right third, so the sky has a horizon line and a light source instead of the usual mesh blur. White type sits in the upper, darkest band where contrast is free.
- A hairline rule between headline and subhead, cut to the subhead's measure — roughly 1px of white at low opacity spanning only the paragraph's width, not the container's, so it reads as a typographic flourish rather than a divider.
- CTA as a saturated blue pill against the pale sky — #2f8fdc fill, 14px/500 label at -0.35px tracking, a leading Apple glyph, 9999px radius, and it is the single strongest color on the first screen. The same pill returns as a sticky top-right button once you scroll.
- The product shot is deliberately cut by the fold — the app window begins inside the hero image and runs off the bottom of the viewport, so the first screen promises a second one instead of resolving.
- Two-up explainer where one card is filled and its twin is outlined — a #4face5-to-blue tinted card beside a near-white #f5f8f6 one, same size, same radius, same internal screenshot. The fill alone carries the "before / after" reading without a label.
- Every screenshot floats on a tinted slab rather than the page — a pale lavender-blue plate with a ~24px radius, the UI capture inset well inside it and given its own small radius, so the screenshot's rectangular edge never touches white. No shadow anywhere in the stack.
- Stat rows with the unit demoted inline — "300" at display size with "ms" set maybe half that and baseline-aligned beside it, each row a number column, a 28px label and a two-line gray gloss, separated by full-width hairlines.

## Style recipe

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.