# cursor.com

Source: https://cursor.com/
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, corporate-clean, calm, confident, technical, premium, serious
Colors: #f5f5f1, #d1ccc4, #b4adaa, #a29390, #7e7161, #292821, #50504a, #cea161
Type (h1): CursorGothic · 26px/32.5px · 400 · tracking -0.325px — "Cursor is your coding agent for building ambitious software."
Type (h2): CursorGothic · 14px/21px · 400 · tracking 0.14px — "Trusted every day by teams that build world-class software"
Type (h3): CursorGothic · 22px/28.6px · 400 · tracking -0.11px — "Agents turn ideas into code"
Type (body): EB Garamond · 17.28px/23.328px · 400 — "Software creation is changing. We are a group of researchers, engineers, and tec"
Type (button): CursorGothic · 14px/14px · 400 — "Contact sales"
Button (primary): "Download" — fill #26251e, text #f7f7f4, radius 9999px, border 1px, padding 5.6px 10.5px 5.88px 10.5px, height 27px, type 14px/400
Button (secondary): "ContactContact sales" — text #26251e, radius 9999px, border 1px, padding 5.6px 10.5px 5.88px 10.5px, height 27px, type 14px/400
Radii: 4px (24), 9999px (18), 8px (12), 10px (3)

## Images

- Hero (desktop): https://media.lvly.design/library/cursor-com/hero.webp?v=d6209555
- Page crop (mid-1): https://media.lvly.design/library/cursor-com/mid-1.webp?v=23db5554
- Page crop (mid-2): https://media.lvly.design/library/cursor-com/mid-2.webp?v=785d5670
- Hero (mobile): https://media.lvly.design/library/cursor-com/mobile-hero.webp?v=3c4438eb
- Full page (desktop): https://media.lvly.design/library/cursor-com/full.jpg?v=bed28aeb
- Full page (mobile): https://media.lvly.design/library/cursor-com/mobile-full.jpg?v=ebe51afb
- Clip preview (mp4): https://media.lvly.design/library/cursor-com/video-14fucc.preview.mp4?v=2d53f315

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.

## Steal-worthy details

- Product shots framed against fine-art landscapes (painted mountains, lakes, hazy fields) in the same greige family as the page — the mock window sits *inside* a picture rather than on a gradient blob, which makes an IDE feel premium and calm.
- Two-tone headlines: line one in `#26251e`, line two in a muted gray, same size and weight — hierarchy through color alone, no subhead needed.
- Nav and hero use the same three-part button vocabulary: text link → outlined pill → filled near-black pill (`Sign in · Contact sales · Download`), repeated identically in the hero (`Download for macOS ↓ · Request a demo →`).
- A 72px/400 display headline tracked −3% (−2.16px) with a 1.1 line height; the weight is regular, not bold, so authority comes from size and tracking.
- Body copy at 13px system-ui inside the product mocks, matching real app density, so the screenshots read as genuine rather than upscaled marketing art.
- A single small orange text link per section as the only saturated element; the gold `Build` badge as the only chip of color inside the UI.
- The full-bleed section container is a soft gray card (`#f0efeb`-ish tonal step) with 8px radius on a `#f7f7f4` page — tonal layering, no borders, no shadows on the sections themselves; shadows are reserved for the mock windows.
- Arrows and glyphs (`↓`, `→`) set inline in the button label rather than as icons, so buttons stay pure type.

## Style recipe

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