cursor.com

Cursor's landing page is a dev tool dressed as a gallery. The ground is warm off-white (#f7f7f4, palette lead #f5f5f1) rather than white, and the product is shown not as a floating screenshot but as a real macOS window set against muted landscape paintings — misty mountains, lakes, hazy skies in dusty greige and mauve (#d1ccc4, #b4adaa, #a29390) — so the software reads as something considered and unhurried instead of loud. Type is the whole voice: a custom grotesk (CursorGothic) at 72px, weight 400, tracked to −2.16px, in near-black #26251e, with a one-sentence headline and no eyebrow, no gradient, no marketing exclamation. Section headlines are set in two tones — the first line dark, the second in mid gray — which does the work of a subhead without adding one. Chrome is reduced to two pills (a filled near-black Download, an outlined Contact sales) and one warm gold "Build" badge (#cea161) inside the mocked UI. The only saturated color on the page is a small orange "Learn about →" link, so it lands as an invitation. Radii are tight: 4px inside the product UI, 8px on cards, 9999px on every button. Nothing bounces; the loading clip shows the window simply settling onto its painting.

Build a light, unhurried SaaS page where the product is presented like a painting. Page ground #f7f7f4; section wells one step darker, #efeeea, 8px radius, no border, no shadow. Text near-black #26251e for primary, #7e7161 for secondary, #a29390 for tertiary labels. Palette otherwise warm neutral only: #d1ccc4, #b4adaa. Reserve saturation for exactly one small orange text link per section and one warm gold badge #cea161 inside product UI. Display type: a neutral grotesk (Inter Tight or a similar custom grotesk), 72px, weight 400, letter-spacing −0.03em, line-height 1.1; section heads 32–36px in the same weight, set as two lines where line two is the secondary gray. Body 14–16px system-ui/Inter, weight 400; product-mock copy 13px with 4px radii to feel like a real app. Buttons are pills (9999px), 27–44px tall, 14px regular type: filled near-black with white text for the primary, 1px-outlined on transparent for the secondary, plain text for the tertiary; put arrows and glyphs in the label as characters. Frame every product screenshot as a real OS window (title bar, traffic lights, soft shadow) placed over a muted landscape photograph or painting desaturated toward the page's greige — never a gradient blob. Motion: nothing springs; elements fade and settle. Layout on a 1440 grid with 70px outer margins and generous vertical room (≈120px between hero copy and the first image).