# Patterns — Creating Landing Pages
## Contents
- Page skeleton (problem → proof → product → action)
- Hero patterns by product type
- Copy formulas
- CTA hierarchy markup
- Social proof blocks
- Visual direction worksheet
- Gotchas
## Page skeleton (problem → proof → product → action)
```html
```
Each section: one job, one message, max one CTA.
## Hero patterns by product type
| Product | Hero thesis element |
|---|---|
| Dev tool / API | Working code snippet or terminal session, real output |
| Visual product (design, video) | The product's own output, full-bleed |
| SaaS dashboard | One annotated screenshot of the "aha" screen — not a collage |
| AI product | Live or looped input→output demo, honest speed |
| Service / agency | The single best result with the number that proves it |
Headline sits with the element, max ~10 words, states the benefit.
## Copy formulas
Headline (pick one, fill with concrete nouns):
- Outcome + time: "Ship your changelog in 5 minutes"
- Kill the pain: "Never write release notes by hand again"
- Capability + audience: "Session replay built for mobile teams"
Subheadline: one sentence — how it works + for whom.
Button labels: verb + object, first person works well — "Create my changelog",
"Start recording — free". Never "Submit", "Learn more" (as primary), "Get started" (default-smell).
Testimonial pull: quote the *result*, not the compliment —
✅ "Cut our onboarding time from 3 weeks to 4 days." — Dana K., Head of Ops
❌ "Great tool, love the team!"
## CTA hierarchy markup
```html
```
```css
.cta-primary { /* filled, brand color, largest tap target on screen */ }
.cta-secondary { /* text link or ghost — visibly subordinate */ }
```
Same `.cta-primary` label + destination everywhere it repeats.
## Social proof blocks
```html
…
Cut our onboarding time from 3 weeks to 4 days.
Dana K. — Head of Ops, Acme
```
Numbers block: only true, only impressive, max three. "12,400 teams" beats "many customers"; if the true number is small, use a different proof type.
## Visual direction worksheet
Before building, write down (one line each):
1. Palette: 4–6 named hex colors derived from the subject (not cream/terracotta, not black/acid-green).
2. Type: display face + body face, chosen for this brief; type scale (e.g. 1.25 ratio).
3. Layout concept in one sentence + rough ASCII wireframe of the hero.
4. THE signature element — the one bold move. Everything else stays quiet.
Then critique: "Would this exact plan fit any other product?" If yes, revise until it wouldn't.
## Gotchas
- **The feature-grid reflex**: a 3×2 grid of icon+blurb usually restates the
product section with less proof — cut or merge it.
- **Carousel/slider testimonials** hide proof behind interaction — static, one
per section.
- **Fake urgency** (countdowns, "3 spots left") destroys trust with technical
audiences instantly.
- **Above-the-fold obsession**: long pages convert when each section earns the
scroll; don't cram everything into the first screen.
- **Lorem ipsum in review**: never review layout with placeholder copy — copy
IS the design decision on a landing page.
- **Hero video autoplay with sound** — muted, looped, short, with poster; or
don't autoplay.
- **Dark pattern CTAs** ("No thanks, I hate saving money") — never.
…
Dana K. — Head of Ops, Acme