Superhuman

Why it works

The layout breaks complex features into digestible modular sections with generous breathing room between each product showcase. Bold call-to-action buttons contrast sharply against clean backgrounds, guiding attention without noise. UI mockups show real interactions, building trust through specificity rather than abstract marketing language.

Who should look at this

Founders building B2B SaaS tools who need to communicate multiple interconnected features without overwhelming visitors.

Signature technique

Stacked product cards with identical visual hierarchy — each gets a headline, four-point feature list, centred image, and a single link. Repeat the pattern to create a predictable rhythm that makes scanning effortless.

How the page is built

1. Top banner. A slim dark strip at the very top nudges visitors who already know the Mail product toward a dedicated page, so the main headline can stay focused on the broader suite without losing existing customers.
2. Hero headline. Three enormous words — 'Superpowers, everywhere you work' — do the entire job of positioning, supported by a single line of product description and one prominent button, so the visitor makes a decision before they scroll.
3. Product switcher tabs. Four tabs (Mail, Grammarly, Coda, Go) let the visitor self-select which tool they care about, showing a relevant demo beneath rather than forcing everyone through the same linear story.
4. AI assistant (Go) feature section. Three short benefit labels — inline suggestions, context-aware chat, Go app — each with a single descriptive sentence, let the visitor scan what the AI does without reading a wall of text.
5. Agent showcase. A horizontal row of task cards (prep for meetings, write and edit, automate emails, build agents) shows the range of things the AI can do, making the product feel immediately practical rather than abstract.
6. Social proof strip. Logos from HubSpot, Figma, DoorDash, Zapier, Rivian and Eventbrite appear in a clean row without any commentary, letting the brand names do the persuasion work silently.
7. Enterprise close. A final section aimed at larger teams reframes the whole product as something an IT or finance department would sign off on, catching any visitor who arrived for an individual plan but has buying authority for a team.

Look and feel

The top of the page wraps a human silhouette in deep purple and soft blue gradients, making the product feel calm and slightly cinematic rather than aggressive or techy. Type is very large and light-coloured against dark backgrounds, giving the impression that the words float rather than sit on a page. The overall mood is confident restraint — nothing flickers or pulses, which makes the product feel like it belongs to serious, busy people.

Where it might not fit

A site this stripped-back assumes visitors already know they need a productivity tool and are choosing between options — if your audience is unaware they have a problem, the sparse copy gives them too little reason to care. Businesses that sell something visually rich, like food, fashion or physical spaces, would lose the emotional pull that product photography or texture could provide.

What to borrow

• Use a single slim banner at the very top for one secondary message (like a legacy product link), then let the main page ignore it completely — this frees your hero to stay uncluttered.
• Build a tab switcher that swaps the demo section below it rather than taking the visitor to a new page, so people with different needs can all find themselves without leaving the homepage.
• Place a trust logo row with no headline, no star ratings and no quotation marks — just six well-known company logos in a plain horizontal line, relying entirely on name recognition.

Brief your developer

“I want a dark purple-to-blue gradient hero with a very large single headline, one button, and a tab switcher below it that swaps a live demo area without leaving the page.”

Want a full version for your own site? Get the brief.

How do I show multiple products on one homepage without confusing people?

Superhuman solves this with a tab row that sits between the hero and the detail section — the visitor clicks Mail, Go or Docs and the content below updates, so each person feels like the page is speaking to them specifically. The hero headline stays broad ('everywhere you work') so it does not exclude anyone before they reach the tabs. The key is keeping the tabs visual and short — one word per product — so scanning them costs almost no effort.

Do I need animations or video to make a SaaS homepage feel premium?

Superhuman's top section in the screenshot contains no moving elements at all — the premium feeling comes entirely from the large type, the breathing room around every element, and the dark gradient that makes the page feel considered rather than assembled. The UI screenshots floating over the hero image do the job that a product video would do, but they load instantly and never distract. If your product can be shown in a static screenshot, that is often enough.