superhuman.com/

Superhuman

superhuman.com/

Superhuman is now a productivity suite spanning an email client, a collaborative docs tool, an AI assistant called Go, calendar, and a Grammarly integration, rather than just its original fast-email product. The homepage headline "Superpowers, everywhere you work" is backed by a specific efficiency claim — flying through your inbox "twice as fast" and saving "4 hours every single week" — and states that its Docs product connects to "800+ tools instantly." Its trusted-by row names OpenAI, Figma, HubSpot, DoorDash, and GEICO as customers, an unusually varied mix spanning an AI lab, a design tool, and an insurance company for one productivity suite.

Visit website

Category

Productivity & Collaboration

Style

Light Colorful

Stack

Next.js

Fonts

Super Sans VF

Palette

Meta title

Superhuman: Docs, Mail, and AI That Work Everywhere

Sections

Updated

Oct 10, 2026

Superhuman's landing page, section by section

Each section below is cropped straight from Superhuman's live page — useful references for productivity & collaboration landing page design.

Superhuman design review: how the homepage is built

Superhuman's homepage runs 6286px at 1440px wide and stacks an announcement bar, navigation, a gradient hero, a logo strip, a four-tab product suite, a dark green manifesto block, a closing banner and a maroon footer. Colour comes from a lavender-to-blue hero gradient, beige panels with hatched borders, and a footer in the detected dark maroon #421d24, with periwinkle accents such as #6a8ac8 and #6b5d9c. Headlines use Super Sans VF in a light weight. Unusually for a productivity product, four apps share one tabbed suite. Full-width bands change colour from blue to beige, green, pink and maroon.

Above the fold

The top carries a dark purple pill banner reading "Looking for Superhuman Mail?" with a "Learn more" button, then a white navigation bar with five dropdowns, "Contact sales" and "Sign in". The hero headline "Superpowers, everywhere you work" sits in white over a purple-blue gradient, above the subline "Mail, Docs, and AI that works in every app and tab" and one dark "Get Superhuman" button with an arrow chip. Floating chat cards surround a portrait.

Logo strip and product suite

Below the hero, "Trusted by the most innovative companies in the world" introduces a six-cell grid of logos: Brex, Doordash, Atlassian, TED, Zapier and Zoom. "Your Superhuman suite" follows with four tabs: "Mail", "Grammarly", "Docs" and "Go". Each panel splits in two: left holds a headline such as "The most productive email app ever made" and four bullets; right is a gradient image with a play icon.

Remaining panels and manifesto

The other three panels repeat the template with headlines "Everyone's favorite AI writing partner", "The best place for teams and AI to work together" and "AI that actually works in every app you use". Their mockups show as empty white cards. A dark green band then splits into a photo collage and the heading "Becoming Superhuman." and an outlined "Read our announcement" button.

Closing section and footer

The closing banner is a pink-and-blue cloud image with the left-aligned headline "AI that works everywhere you work" and a white "Get Superhuman" button at right,. The maroon footer follows with the wordmark, "Builders of Superhuman Platform apps" and four link columns: "Products" with seven links, "Company" with ten, "Legal" with six and "Connect" with six social links. An oversized, low-contrast "SUPERHUMAN" wordmark spans the bottom edge.

On mobile

At 390px the page grows to 10535px, and the hero changes to "Bring AI inside every app and tab with Superhuman Go" with a "Try Go" button and a "Learn more" link. The logo strip becomes a two-row, three-column grid starting with OpenAI and Figma. Product sections stack as full-width rounded cards in beige, green, purple and maroon. The footer links collapse into a single column.

Worth borrowing

A tab row naming "Mail", "Grammarly", "Docs" and "Go" lets one page carry four products in identically structured panels.
Repeating one text-left, media-right panel makes a long product stack quick to scan.
A large closing headline with one white "Get Superhuman" button repeats the hero action at the page bottom.