Recipe: Hero Section Design
A repeatable formula for high-converting hero sections — copywriting structure, visual hierarchy, and layout patterns that work across landing pages.
The 4-Layer Stack
Every effective hero section follows a four-layer vertical stack. Each layer has one job. When layers bleed into each other, conversion drops.
- 1Eyebrow — 3-5 words. Category signal or trust marker. Optional but lifts clarity.
- 2Headline — 6-12 words. One clear value proposition. No clever wordplay that requires thought.
- 3Subhead — 15-25 words. Concrete outcome or objection killer. Specific, not vague.
- 4CTA row — Primary button + secondary link. Never more than two actions.
Copywriting Rules
- •Lead with the outcome, not the feature. “Ship 3x faster” beats “Built with Rust.”
- •One idea per hero. If you have two audiences, build two pages.
- •Specificity sells.“10,247 teams” outperforms “thousands of teams.”
- •Read aloud test. If it sounds unnatural spoken, rewrite it.
Layout Patterns
Center-Stack
Text centered, CTA centered. Best for single-product SaaS with a clear value prop. Max 500px content width.
Split
Text left, visual right. Best when the product has a screenshot or demo that sells itself.
Badge-Stack
Headline + row of 3-5 trust badges (logos, ratings, press). Social proof before the fold.
Direct-Input
Headline + inline input field. Best for free tools and lead-gen where the action IS the value.
Spacing Spec
| Layer | Margin-bottom |
|---|---|
| Eyebrow → Headline | 12px |
| Headline → Subhead | 20px |
| Subhead → CTA row | 32px |
| Section padding (top/bottom) | 96px |
Pro tip: Write 5 headlines, pick the clearest one — not the cleverest. Test with strangers who match your ICP. If they cannot explain what you do in one sentence, rewrite.