Cursor

A sophisticated SaaS product site using layered, angled product screenshots against soft photographic backdrops to create depth while maintaining a structured information hierarchy.

Colors

Industry

Mood

Screen type

Type style

Visual details

How it works

hero:
Full-width statement headline in large serif with a supporting subtitle, followed by a dark CTA button; the section sits above a tilted perspective screenshot of the product interface composited over a muted landscape photograph.
layout:
Alternating left-right pattern of text blocks and tilted product screenshot cards throughout the page; each section pairs a 40% text column with a 60% angled image block; footer uses a multi-column grid of footers links in small type.
type:
Serif headline (appears to be a classic proportion) paired with clean sans-serif body copy; size hierarchy established through dramatic jumps from 4xl hero to body text; accent color used sparingly on links and underlines to guide reading flow.
colors:
Warm neutral palette (beige, taupe, soft greens) used as background layers and photographic tints; small accent pops of burnt orange appear on CTA buttons and inline text highlights; white content cards sit atop colored grounds to create separation.
distinctive:
Consistent use of perspective-transformed product screenshots mounted at subtle angles (15–20°) over soft, blurred landscape and solid-color backgrounds, creating a layered depth that feels editorial rather than flat—each screenshot appears physically placed rather than floating.