Appearance
Headline and Copy Frameworks
Your headline has five seconds to stop a visitor from bouncing — the right framework turns that moment into a conversion.
Why This Matters
- 💻 Dev: You build the components that render headlines, subheads, and body copy. Understanding hierarchy lets you structure markup semantically (H1, H2, p) and build A/B testing infrastructure that treats headlines as the highest-priority experiment.
- 📋 PM: Headline frameworks give you a repeatable system for messaging. Instead of debating copy in meetings, you pick a framework, fill in the blanks, and test. That turns opinion into process.
- 🎨 Designer: Typography, spacing, and visual weight determine whether the headline actually gets read. You control the visual hierarchy that makes or breaks the five-second window.
The Concept (Simple)
Think of your landing page headline like a movie trailer.
A great trailer does four things in under two minutes:
- Hooks you with an arresting image or line
- Shows the stakes — what is at risk, what could go wrong
- Hints at the payoff — a glimpse of the resolution
- Makes you want the full experience — you buy the ticket
Your headline works the same way, except you have five seconds instead of two minutes. Nobody reads the rest of your page if the headline does not earn their attention first. The frameworks below are your screenplay formulas — proven structures that make those five seconds count.
How It Works (Detailed)
The Messaging Hierarchy
Every landing page follows a visual and cognitive hierarchy. Visitors scan in a predictable order:
╔══════════════════════════════════════════════════════════╗
║ H1 HEADLINE ║
║ (5 seconds — stop or bounce) ║
╠══════════════════════════════════════════════════════════╣
║ Subheadline / Supporting Line ║
║ (Clarifies H1, adds detail or benefit) ║
╠══════════════════════════════════════════════════════════╣
║ ║
║ Body Copy / Bullet Points / Feature Descriptions ║
║ (Builds the case — logic, proof, detail) ║
║ ║
╠══════════════════════════════════════════════════════════╣
║ [ Call to Action Button ] ║
║ (The single thing you want them to do) ║
╚══════════════════════════════════════════════════════════╝The H1 carries roughly 80% of the persuasion weight. If it fails, nothing below it matters. This is why headline testing delivers the highest ROI of any landing page experiment.
The Four Core Frameworks
1. PAS — Problem, Agitate, Solution
Start with a pain the visitor already feels, twist the knife, then offer relief.
┌─────────────────────────────────────────────────────────┐
│ PROBLEM │
│ "Tired of losing deals because your proposals │
│ look unprofessional?" │
│ │ │
│ ▼ │
│ AGITATE │
│ "Every sloppy proposal costs you $5K–$50K │
│ in lost revenue." │
│ │ │
│ ▼ │
│ SOLUTION │
│ "Send polished proposals in minutes, not hours." │
└─────────────────────────────────────────────────────────┘Best for: audiences with a known, acute pain point. Works especially well in B2B where the cost of the problem is quantifiable.
2. AIDA — Attention, Interest, Desire, Action
Grab attention, build interest with facts, create emotional desire, then prompt action.
- Attention: Bold, unexpected statement
- Interest: Supporting data or insight
- Desire: Paint the outcome they want
- Action: Clear next step
Best for: products where the visitor may not realize they have a problem yet. Works well for new categories.
3. BAB — Before, After, Bridge
Show the visitor's current painful state, paint the desired future, then reveal how to get there.
- Before: "You are manually tracking invoices in spreadsheets."
- After: "Imagine every invoice sent, tracked, and reconciled automatically."
- Bridge: "Acme Invoicing connects to your bank and does it for you."
Best for: transformation-oriented products. SaaS tools that replace manual processes.
4. 4Ps — Promise, Picture, Proof, Push
Make a bold promise, help them visualize it, prove it is real, then push toward action.
Best for: products with strong social proof and measurable results.
Headline Formulas (Fill-in Templates)
| # | Formula | Example |
|---|---|---|
| 1 | [Action verb] + [desired outcome] + [timeframe] | "Build a stunning website in 30 minutes" |
| 2 | [Desired outcome] + without + [pain point] | "Grow revenue without hiring a sales team" |
| 3 | The [category] that [key differentiator] | "The CRM that sells for you" |
| 4 | [Number] + [audience] + [action/result] | "50,000 teams ship faster with Linear" |
| 5 | Stop [pain] + Start [benefit] | "Stop chasing payments. Start getting paid." |
| 6 | [Outcome] + for + [audience] | "Payments infrastructure for the internet" |
| 7 | What if + [aspirational scenario]? | "What if onboarding took minutes, not months?" |
Subheadline Patterns
The subheadline plays a supporting role. It should do one of three things:
- Clarify — explain the H1 in concrete terms
- Qualify — tell the visitor who this is for
- Quantify — add a specific number or proof point
╔══════════════════════════════════════════════════════════╗
║ H1: "Ship faster, break nothing." ║
║ ║
║ Subhead (Clarify): ║
║ "Automated testing and deploys for modern dev teams." ║
║ ║
║ Subhead (Qualify): ║
║ "Built for engineering teams of 5–50." ║
║ ║
║ Subhead (Quantify): ║
║ "Used by 12,000 teams to deploy 3x faster." ║
╚══════════════════════════════════════════════════════════╝Body Copy Structure
After the headline and subheadline earn attention, body copy builds the case:
- Lead with a single benefit — not a feature list
- Use short paragraphs — two to three sentences max
- Break up text with bullet points — scannable beats readable
- Include power words — free, new, proven, instant, guaranteed, simple, exclusive
Power Words That Increase Conversion
| Category | Words |
|---|---|
| Urgency | Now, Today, Instant, Immediately, Limited |
| Value | Free, Bonus, Save, Exclusive, Premium |
| Trust | Proven, Guaranteed, Certified, Backed, Verified |
| Ease | Simple, Easy, Quick, Effortless, Seamless |
| Outcome | Results, Growth, Revenue, Profit, Transform |
Headline Testing Methodology
Headlines have the highest impact-to-effort ratio of any element on the page. Test them first, always.
┌────────────────────────────────────────────────────────┐
│ HEADLINE TESTING PRIORITY │
│ │
│ 1. Test H1 copy ─▶ Highest impact │
│ 2. Test subheadline ─▶ High impact │
│ 3. Test CTA copy ─▶ Medium-high impact │
│ 4. Test body copy ─▶ Medium impact │
│ 5. Test visual elements ─▶ Variable impact │
└────────────────────────────────────────────────────────┘Run one headline test at a time. You need at least 200–400 conversions per variant for statistical significance. Do not call a winner after 50 visits.
In Practice
Shopify: "Start selling online today"
Shopify uses a direct PAS structure compressed into six words. The implied problem: you are not selling online yet. The agitation: "today" implies you are behind. The solution: Shopify makes it happen now. The subheadline clarifies the offer — a free trial with no credit card.
Airbnb: "Earn money as a host"
This is a Before/After headline. Before: you have an empty room. After: you have income. The bridge (Airbnb's platform) is implied. Notice the specificity of "earn money" rather than a vague "join our community."
Basecamp: "The All-In-One Toolkit for Working Remotely"
Basecamp uses the 4Ps framework. The promise: all-in-one (you do not need five tools). The picture: remote work made simple. The proof comes below the fold with customer counts and testimonials. The push is a prominent free trial CTA.
Stripe: "Payments infrastructure for the internet"
Stripe's headline uses the "[Outcome] for [audience]" formula. It is an authority headline — it does not try to be clever or emotional. It declares what Stripe is with confidence. This works because Stripe's audience (developers) values clarity over persuasion.
What to learn from these examples
- Short headlines outperform long ones (aim for 6–12 words)
- Specific beats generic ("Earn money" beats "Join a community")
- Match your headline tone to your audience (developers want clarity, consumers want emotion)
- Every headline implies a framework even when it does not spell it out
Key Takeaways
- Your headline carries roughly 80% of the persuasion weight on any landing page — test it before anything else
- PAS (Problem-Agitate-Solution) works best when visitors already feel a specific pain
- BAB (Before-After-Bridge) works best for transformation products that replace manual processes
- Subheadlines should clarify, qualify, or quantify — never repeat the H1 in different words
- Power words (free, proven, instant, simple) measurably lift conversion when used authentically
- Headline testing delivers the highest ROI of any A/B test — run it first with at least 200 conversions per variant
- Match your headline tone to your audience — developers want clarity, consumers want emotion
Action Items
┌──────────┬──────────────────────────────────────────────────────┐
│ 💻 Dev │ ☐ Build A/B testing infrastructure that supports │
│ │ headline variants as the primary experiment type │
│ │ ☐ Use semantic HTML (H1, H2, p) so headline │
│ │ hierarchy is accessible and SEO-friendly │
│ │ ☐ Implement event tracking on scroll depth to │
│ │ measure how many visitors read past the headline │
│ │ ☐ Create a reusable hero component that accepts │
│ │ headline, subhead, and CTA as props │
├──────────┼──────────────────────────────────────────────────────┤
│ 📋 PM │ ☐ Pick one framework (PAS, AIDA, BAB, 4Ps) and │
│ │ draft three headline variants using fill-in │
│ │ templates before your next launch │
│ │ ☐ Create a headline testing calendar — one test per │
│ │ sprint, minimum two-week run time │
│ │ ☐ Document your winning headlines in a swipe file │
│ │ so the team can reference proven patterns │
│ │ ☐ Define statistical significance thresholds before │
│ │ launching any headline test (min 200 conversions) │
├──────────┼──────────────────────────────────────────────────────┤
│ 🎨 Design│ ☐ Ensure the H1 is the most visually dominant │
│ │ element on the page — larger, bolder, more │
│ │ contrast than anything else │
│ │ ☐ Design subheadline typography to be clearly │
│ │ secondary (lighter weight, smaller size) │
│ │ ☐ Test headline readability at mobile viewport — │
│ │ long headlines that wrap awkwardly lose visitors │
│ │ ☐ Create a visual hierarchy spec: H1 size, subhead │
│ │ size, body size, spacing ratios │
└──────────┴──────────────────────────────────────────────────────┘