Great SaaS sites, decoded: 20 homepages, 20 free specs
A series that explains why twenty well-known SaaS homepages work, each with a free design spec you can download and build from.
3 min read
In this note
What this series is
Great SaaS sites, decoded takes twenty well-known software homepages and explains, in plain English, why each one works. Every post covers the big idea of the hero, the navigation choice, the signature component further down the page, the type and colour decisions, what changes on a phone, and one pattern worth borrowing. Each post comes with a free design spec you can download.
Where the facts come from
iter0 keeps a craft spec for each of these pages, written from a capture on 2 Oct 2026 at a 1440px desktop width and a 390px phone width. The posts are written from those specs only, so they report what was measured and say plainly when a behaviour was not captured. This is independent analysis. It is not affiliated with any of the companies, and it contains no screenshots, logos or marketing copy from them.
The twenty homepages
Read them in any order. Each post links to the next two so you can keep going.
- Linear: big type, cropped product
- Stripe: oversized art behind the headline
- Vercel: empty space and one dark object
- Notion: a centred headline with a capsule
- Raycast: one saturated photo on black
- Cursor: a small headline, a huge preview
- Mercury: a full-bleed photo, a solid bar
- Resend: a serif headline in the dark
- PostHog: the homepage as a product screen
- Cal.com: the product beside the headline
- Clerk: faint art, a dark gallery below
- Loops: a serif heading and a visible flow
- Granola: editorial type, floating nav pill
- Framer: black stage, staggered examples
- Mintlify: text beside a very large preview
- Railway: an illustrated sky, then a canvas
- Warp: all-monospace, one big diagram
- Tally: hand-drawn art and one button
- Dovetail: type as the hero image
- Zed: a text-only hero, product later
How to use a spec
The specs describe layout, proportion, type scale and colour roles. Use them as a pattern guide, not a template to copy: bring your own name, words, product pictures and proof. If you give a spec to iter0, it builds an original page around the same pattern.
Put the brief into practice
A launch page should make the buyer, promise, proof, and next action obvious. iter0 uses this same standard when it turns a brief or reference site into a builder-ready page.
Start your launch build