Design teardown
Cursor
Warm paper page, regular gothic type, pill actions, and framed product scenes.
cursor.com
Design character
Paper, ink, and frames
A wide desktop page with a fixed top bar, a short left-aligned opening, and a large framed product scene. Later bands alternate a narrow text column with another frame, then a row of media tiles, a four-up note row, a photo with a short statement, a four-up highlight row, a centered closing line with one pill, and a five-column footer. Copy stays short: one sentence for a title, one muted sentence beside it, then a single text link. Tone is calm, plain, and sentence case, with almost no bold and little punctuation. Hierarchy comes from size and a quieter ink, not from weight.
Typography
Marketing type is a custom gothic sans set almost entirely at weight 400. Large sizes tighten slightly; 14–16px opens tracking a hair. Section titles and their supporting lines share 22px and split only by color. Mono and a serif appear inside product frames, not in the page chrome.
Color system
The page is warm paper and a brown-black ink. Fills step a few shades darker for cards and quiet pills. Orange is reserved for text links. Green and red appear only as small status marks. Borders are the ink at low strength, not a separate gray.
Spacing and geometry
A 10px base with half steps. The page gutter is 20px. Sections stack with about 67px of vertical padding, and the opening block starts about 112px below the bar. Density is airy: wide empty bands, short text, and frames that carry the detail.
Layout
Fixed 52px bar, then a centered rail near 1300px. The opening is a 658px text block over a wide frame. Feature bands put copy on the left and a 10px-radius window on the right. Lower bands become equal card rows, then a centered close and a five-column footer.
Motion
The page itself is still. The bar stays fixed while bands scroll underneath with no visible entrance animation. Motion is short and local: menus fade and rise, rows tint, and the frames contain a blinking caret, a shimmering status word, and slow pulsing dots.
UI fingerprint
- Paper and ink The ground is #f7f7f4 and the type is #26251e. Cards step only to #f2f1ed. Pure black and pure white are not the page colors.
- Regular gothic From 72px down to 14px, weight stays 400. Size and a muted ink make the hierarchy.
- Pill, then orange Actions are full pills in ink or stone. The only orange, #f54e00, is a text link with an arrow.
- Flat page, soft frames Cards have a 4px radius and no shadow. Product pictures sit in 10px windows with a wide, light shadow.