Skip to content
Knowledge base

Patterns · web

Website Hero Section Patterns

Last verified 2026-07-08

Website Hero Section Patterns

Derived from Mobbin section screenshots of Analogue Agency, ClickUp, Proton, Passionfroot, Retool, Figma, and Mural (July 2026 research pass).

Observed patterns

1. Center-stacked hero: headline → subhead → single CTA

Passionfroot is the canonical example: a two-line serif headline ("Where creators do brand deals"), one short sans subhead, and a single dark pill button ("Start for Free →") — all center-aligned on a warm cream background. Floating, tilted product-UI fragments (payment card, chart, calendar) sit at the edges of the canvas, decorating without competing with the copy. Retool uses the same skeleton for its bottom CTA band: small "BETA" pill badge above, one bold headline ("Get up and running in seconds"), one purple button — nothing else.

2. Headline + inline email capture (single-field signup)

ClickUp puts a bold left-aligned headline ("Let's make the world more productive, together.") beside a one-field form: "Enter your work email" input with an attached purple "Get Started" button, on a white card over a subtle dotted texture. Analogue Agency does the compact version inside a saturated blue rounded card: two-line value promise, email field + white "Sign Up" pill. Rule of thumb: email capture heroes ask for exactly one field.

3. Oversized statement typography as the hero itself

Figma fills a flat yellow band with a giant black grotesque headline ("Creative tools meet the internet.") — no imagery at all; type occupies ~60% of the viewport width and the brand color does the visual work. Mural inverts hierarchy: a small kicker line ("Work better for better work") over an enormous "Get started" serif wordmark rendered inside a yellow sticky-note graphic on a violet field — the CTA literally is the hero art.

4. Split-tone editorial hero

Proton uses a mission-style headline with two-color emphasis: the second line ("privacy and digital freedom") switches to the brand purple while the first line stays near-black. Body copy is constrained to a narrow ~560px column, centered. The nav keeps the account CTA (filled purple pill "Create a free account") even on content pages.

5. Nav CTA mirrors hero CTA

In every capture the top-right nav carries the same conversion action as the hero: Retool ("Start for free", blue), Figma ("Get started for free", black), Mural ("Sign up, free forever", black), Passionfroot ("Get access →", black), Proton ("Create a free account", purple). Secondary auth ("Log in"/"Sign in") sits to its left as plain text or a ghost button.

Copy style

  • Headlines are 3–8 words, benefit- or vision-led, sentence case, often ending

with a period (Figma, Passionfroot-adjacent style).

  • Subheads are one sentence, ~12–20 words, in a muted gray.
  • CTA labels lead with a verb and de-risk: "Start for free", "Get started for

free", "Sign up, free forever". "Free" appears in almost every primary CTA.

Visual rhythm

  • Generous vertical padding: headline blocks float in whitespace roughly 2–3×

the headline height above and below.

  • One accent color per hero; buttons are solid fills with high contrast

against the field (white-on-blue, black-on-yellow, white-on-black).

  • Rounded-rectangle / pill buttons everywhere; no outlined primary CTAs.

Design rules derived

Do

  • Lead with one headline (3–8 words), one subhead (≤20 words), one primary

CTA. Center-stack unless pairing with a form or screenshot.

  • Repeat the primary CTA verbatim in the top-right of the nav.
  • Include a risk-reducer in or near the CTA ("free", "no credit card",

"free forever").

  • If capturing email in the hero, use a single input joined to the button as

one visual unit.

  • Pick one saturated brand color and let it dominate either the background

(Figma, Mural, Analogue) or the button (ClickUp, Retool, Proton) — not both.

  • Keep decorative product imagery tilted/cropped at the edges so the copy

column stays clean (Passionfroot).

  • Constrain hero copy to a readable measure (~50–65ch for subheads).

Don't

  • Don't put two competing primary buttons in the hero; a secondary action, if

present, should be text or ghost style.

  • Don't ask for more than an email address in a hero form.
  • Don't run headlines longer than two lines at desktop width.
  • Don't layer copy over busy photography — every observed hero uses flat

color, subtle texture, or heavily muted imagery behind text.

Anti-patterns

  • Feature-dump heroes: cramming bullet lists or 3+ paragraphs above the

fold. Top sites defer detail to feature sections.

  • Vague CTA labels ("Submit", "Learn more") as the primary action — the

observed set is uniformly verb-first and outcome-specific.

  • Carousel/slider heroes: absent from all sampled top-tier sites; one

static message wins.

  • Low-contrast buttons: every sampled CTA passes obvious contrast against

its background; avoid tonal (same-hue, low-delta) primary buttons.

  • Orphaned signup: hero CTA present but missing from the nav, forcing

users to scroll back up after reading — top sites never do this.