The hero section is the most important 600 pixels on your site. A visitor decides in 5 seconds whether to scroll or leave. Here's how to design a hero that earns the scroll.
The formula
- Badge/eyebrow (optional) — context or proof. "Trusted by 2,800+ teams" or "New in 2026".
- Headline — benefit-led, 8–10 words max. "Turn your ideas into apps" not "The AI-Powered Platform".
- Subtitle — one sentence explaining the mechanism. "Describe what you want and watch AI build it in seconds."
- CTA buttons — primary action + secondary option. "Start Building Free" + "See Examples".
- Social proof (optional) — stats, logos, or a specific testimonial below the CTA.
2026 design patterns
- Centered text hero. The dominant pattern. Max-w-4xl centered, text-center, generous py-24 or py-32. Clean, minimal, lets the copy do the work.
- Split hero. Text left, visual right. Works when you have a product screenshot or interactive demo to show. 50/50 or 60/40 split.
- Hero with embedded input. A search bar, prompt input, or email signup directly in the hero. Reduces friction by putting the first action above the fold.
Common mistakes
- Gradient background. Full-page gradients look dated. Use bg-white with strong typography instead.
- Headline that hedges. "Powerful solutions for modern teams" says nothing. Be specific about the outcome.
- Too many CTAs. Two buttons max. Primary + secondary. More than two creates decision paralysis.
- Missing social proof. A number, a logo row, or "No credit card required" near the CTA removes friction. Don't leave the space empty.
- Gradient text on the entire headline. Gradient text on one accent word is fine. On the whole H1 it becomes unreadable.