Whitespace-led quiet hero

Open preview

Overview

Minimal Hero keeps only two things: what you sell, and what you want the visitor to do next. Everything else is deliberately removed. The whitespace is part of the content.

Why it works

The less ornamentation you carry, the harder each remaining element pulls the eye. For SaaS and developer tools — where visitors usually arrive with a problem already in mind — lowering the barrier to the first click beats explaining everything up front.

Structure

• Eyebrow pill: version tag, “Live”, or “New”
• H1: two-part headline (plain + gradient-emphasized phrase)
• Lede: under two lines, keeps momentum
• Primary CTA: solid dark button with arrow icon — physically implies “next”
• Ghost link: a low-commitment secondary path for unconvinced readers
• Proof row: logos or plain text, quietly establishing trust

When to use

• When you need to communicate product value in a single glance
• When you want to keep landing-page conversion measurement simple
• When feature-rich products need a single focused entry point to reduce cognitive load

Recommended stack

Category

Hero

Styles

Minimal / SaaS / Soft / Swiss

Audience

for SaaS

SPA

No

Hosting

static

Notes

Pure HTML/CSS. Drop it into Next.js, Astro, Nuxt, Remix, or any static site as-is.

AI prompt

Build a minimal hero section for a SaaS landing page.
Requirements:
- Centered, max-width ~980px, generous vertical padding.
- One H1 with a 2-part headline: plain text + a gradient-emphasized phrase.
- Short lede copy under 2 lines at desktop width.
- Primary CTA as a solid dark button with an arrow icon.
- Secondary CTA as a subtle ghost link.
- Small uppercase "eyebrow" pill above the H1.
- Soft pastel radial gradients in the background (top-right purple, bottom-left teal).
- Light theme, Inter or system sans.
- Header with a logo on the left and 4 nav links on the right.
- A subtle "trusted by" row of logos/text at the bottom.
- Fully responsive, no JS needed, no external assets.

Same structure, but dark theme:
- Background #0b0b10 with faint purple/teal radial gradients.
- Headline gradient stays vivid; lede in muted gray.
- CTA is a light pill on dark surface.

Keep the same layout but amplify expressiveness:
- Headline pushed to clamp(3rem, 9vw, 6rem).
- Gradient headline spans 2 colors with a slight animated shimmer.
- Add a small looping video or Lottie on the right half at >=1024px.

FAQ