The skeleton is five sections in a fixed order: Hero, Proof, Problem, Solution, CTA — high-converting pages all map to it.
The hero has to answer three questions in ~3 seconds: what you offer, who it's for, and why they should care. Headline + subhead + one CTA, nothing more.
Put social proof right after the hero, not buried at the bottom — visitors decide whether to trust you almost immediately. Logos, one testimonial, one hard number.
Agitate the problem before pitching the solution. No felt pain means no reason to care about the cure, so name the real cost in time, money, and frustration.
Sell outcomes, not features: cap it at three benefits and frame each as a result — "save 10 hours a week" beats "advanced automation."
Repeat the exact same CTA at the top and bottom — same color, same copy. Repetition converts the scroller who wasn't ready the first time.
Do / Don't
Do: Lead the hero with a headline, subhead, and a single clear call to action
Do: Place proof (logos, testimonials, a key metric) directly below the hero
Do: Frame benefits as concrete outcomes and keep them to three max
Don't: Use carousels or sliders in the hero — they hide the one message that matters
Don't: Bury social proof at the bottom of the page where nobody scrolls to it
Don't: Jump straight to the solution before establishing the pain it solves
The Design System Blueprint
An 11-page visual guide to consistent, scalable UI: colors, typography, spacing, components, motion.
