Value Proposition Hero
Primary landing page hero communicating the core product value to new visitors.
Layout
Left-aligned text column (60% width) + right-side visual (40% width). On mobile: stacked, text first. Maximum content width 1100px, centered.
Content Slots
Eyebrow
Short category or context label (e.g., "For design teams"). 12–14px, accent color or muted. Optional.
Headline
Primary value statement. 40–56px, bold. Max 8–10 words. Answers: what do you get?
Subheadline
Supporting context sentence. 18–20px, secondary color. Max 2 lines. Answers: how or for whom?
Primary CTA
Main action button. 1 only. Verb-first label ("Start free", "Get started").
Secondary CTA
Lower-commitment alternative ("See demo", "Learn more"). Ghost or text button.
Social proof
Trust signal below CTAs: star rating, customer count, or 2–3 logo strip.
Hero visual
Product screenshot, illustration, or video. Right column on desktop, below text on mobile.
Hierarchy Rules
- Headline must be the single largest text element on the page
- Primary CTA must have the highest visual weight of all buttons visible
- Social proof should be smaller than the subheadline — it supports, not competes
- Hero visual should not obscure or compete with the headline on any viewport
- Apply the squint test: headline and CTA must remain visible when the screen is blurred
Examples
- SaaS tool: "Ship design faster" / "The component library your team will actually use" / Get started free
- E-commerce: "Furniture for real life" / "Designed to last, priced to make sense" / Shop now