9.4 KiB
9.4 KiB
Content — Specific, Real, Useful
The design is the container. The content is the reason. If the words are slop, the design can't save them.
The Cardinal Rule
Write content the way you'd talk to a smart friend who asked "what is this?" — not the way a marketing department writes.
Before writing any copy, ask:
- What does this product DO? (specific verb, specific object)
- Who is it FOR? (specific person, not "users" or "businesses")
- WHY should they care? (specific outcome, not "saving time")
Headlines
The headline is the page. It's the one piece of copy users actually read.
The four patterns that work
1. The claim Make a specific promise.
- "Ship features 3x faster"
- "Cut your AWS bill in half"
- "Find any bug in under 60 seconds"
- "The invoicing app for people who hate invoicing"
2. The user Name the specific person.
- "For designers who'd rather think than fiddle."
- "The trading platform built for serious retail traders."
- "Email for people who send 200 emails a day."
3. The contrast Position against the alternative.
- "Stop writing CSS. Start describing what you want."
- "The CRM that doesn't feel like a spreadsheet."
- "A wiki that's actually fun to write in."
4. The specific weirdness Say something only this product could say.
- "Less software, more wood."
- "Open tabs: 47. Active tabs: 3. (We close the rest.)"
- "Postgres, but it's 2026."
Headlines anti-patterns
| ❌ Don't | ✅ Do |
|---|---|
| "Welcome to [Brand]" | Specific claim or user statement |
| "The platform for [audience]" | "For [specific person] who [specific need]" |
| "Empowering businesses to thrive" | "Cut your [specific thing] by [specific number]" |
| "Built for the modern [audience]" | "Built for [specific audience] doing [specific thing]" |
| "Revolutionizing the [industry]" | Specific outcome, named |
| "Fast. Simple. Beautiful." | One true adjective, or a sentence |
| "The future of [thing] is here" | Anything else |
Headlines checklist
- Does it make a claim?
- Is the claim specific?
- Could a competitor use the same headline? (If yes, rewrite.)
- Is it under 12 words? (Ideal: 6–10 words. Hard cap: 15.)
- Does it work without the surrounding context? (If someone screenshots just the headline, does it still communicate?)
Subheads
The subhead explains the headline or adds context. Two jobs:
- Extend the headline — add the "how" or "why" or "for whom"
- Earn the click — give enough detail that the reader knows what's next
Examples
Headline: "Ship features 3x faster" Subhead: "Linear's AI agents handle issue triage, status updates, and standup notes — so your team ships instead of plans."
Headline: "The invoicing app for people who hate invoicing" Subhead: "Made for designers, writers, and freelancers who'd rather be making things than chasing payments."
Headline: "Stop writing CSS. Start describing what you want." Subhead: "Tempo turns Figma designs into production-ready components — no round-trip, no translation loss."
Subheads anti-patterns
- ❌ Restating the headline in different words
- ❌ Generic context: "We help businesses..."
- ❌ Two sentences that could be one
- ❌ A second claim that contradicts or competes with the headline
Body Copy
Rules
- Specific > general. "We saved 12 hours a week" beats "We saved time."
- Short sentences. Mix short and long. Never three long sentences in a row.
- One idea per paragraph. If a paragraph has two ideas, split it.
- Left-aligned, ragged right. Never justified. Never centered (except short quotes).
- Active voice. "We shipped X" beats "X was shipped."
- Cut every word that doesn't earn its place. Read aloud. If you stumble, rewrite.
Structure
For landing pages:
- Lead with the most important sentence
- One idea per paragraph
- Short paragraphs (2–4 sentences)
- Use lists / structured content where appropriate
For long-form (articles, docs):
- Strong first sentence — not a throat-clearing intro
- Subheadings every 200–400 words
- Pull quotes for emphasis
- Images / diagrams to break up text
Body copy anti-patterns
- ❌ Lorem ipsum left in production
- ❌ Throat-clearing intros: "In today's fast-paced world..."
- ❌ Three adjectives in a row: "fast, simple, beautiful"
- ❌ Buzzwords: "leverage," "synergy," "ecosystem," "paradigm," "disrupt"
- ❌ Empty intensifiers: "very," "really," "extremely," "incredibly"
- ❌ Vague pronouns: "this," "it," "that" without clear referent
Calls to Action (CTAs)
The label is the promise
❌ "Submit" → ✅ "Get my report" ❌ "Learn more" → ✅ "See how it works" ❌ "Click here" → ✅ (literally never) ❌ "Sign up" → ✅ "Start free" / "Create my account" ❌ "Buy now" → ✅ "Get [Product] for $X"
CTA principles
- First person, present tense. "Start my free trial" > "Start your free trial."
- Specific outcome. "Get the template" > "Download."
- Verb, not noun. "Compare plans" > "Comparison."
- What happens next. If the button leads to a checkout, say so. If it opens a modal, the label can be more casual.
CTA anti-patterns
- ❌ "Submit" (the default for forms — never use it without context)
- ❌ "Click here" (accessibility and clarity failure)
- ❌ "Yes" / "No" (always describe what yes/no means)
- ❌ "Continue" (continue to what?)
- ❌ Three different CTAs in a row competing for attention
Microcopy
The small text that makes interfaces feel human.
Buttons (secondary actions)
- "Cancel" — clear
- "Maybe later" — softer
- "Not now" — most polite
- ❌ "No thanks" (passive-aggressive)
Empty states
- ❌ "No data" ✅ "No projects yet. Create your first one to get started."
- ❌ "Nothing here" ✅ "Once you add a task, it'll show up here."
Error messages
- ❌ "An error occurred" ✅ "We couldn't save your changes. Check your connection and try again."
- ❌ "Invalid input" ✅ "Enter a valid email address (you used an extra @)."
Success messages
- ❌ "Success" ✅ "Saved. Your changes are live."
- ❌ "Done" ✅ "Sent. We'll let you know when [Recipient] responds."
Loading states
- ❌ "Loading..." ✅ "Loading your projects..."
- ❌ "Please wait" ✅ "Hang tight — this usually takes a few seconds."
Tooltips
- Be brief. One sentence max.
- Explain the WHY, not just the WHAT.
- ❌ "Bold" ✅ "Bold (⌘B)"
Placeholders
- ❌ Used as labels
- ✅ Used as examples: "e.g. acme.com" or "Search projects..."
Tone of Voice
Pick a tone and hold it. Voice should be consistent across the page.
Voices that work for tech/SaaS
- Linear / Vercel style: Calm, confident, precise. Lowercase headlines. Direct verbs.
- Stripe style: Clear, specific, evidence-led. They show numbers and case studies.
- Arc style: Warm, confident, slightly playful. Premium without being formal.
Voices that work for editorial/creative
- Magazine style: Considered, varied sentence rhythm, occasional editorial voice.
- Studio style: Insider language, occasional opinions, knows the audience.
Voices that work for indie / small biz
- Warm, plain, human. Talk like a person, not a brand.
- First-person, plural: "We make X for people who Y."
- Acknowledge the reader's reality.
Tone anti-patterns
- ❌ Switching tone mid-page (formal headline, casual button)
- ❌ Corporate throat-clearing: "At [Company], we believe..."
- ❌ Forced friendliness: "Hey there! 👋 Ready to get started? Let's go!"
- ❌ Trying too hard to be cool: "This ain't yo mama's CRM"
Real Names, Real Numbers
The single biggest content upgrade: replace generic with specific.
Names
- ❌ "John D., CEO of Acme Corp"
- ✅ "Jane Park, Head of Design at Linear"
- ❌ "A major financial institution"
- ✅ "Stripe moved $X through our platform in 2025"
Numbers
- ❌ "Faster" ✅ "3.4x faster (median, n=240)"
- ❌ "Thousands of users" ✅ "Used by 4,200 teams, including Linear, Vercel, and Stripe"
- ❌ "Significant cost savings" ✅ "Saved $2.3M in AWS costs in 2025"
Times / Dates
- ❌ "Recently" ✅ "Last week"
- ❌ "Coming soon" ✅ "Q3 2026"
Specificity rules
- If you can't name a number, name the source of your estimate
- If you can't name a customer, say what kind of customer ("used by YC-backed startups")
- If you can't say a date, say the quarter
- "Soon" / "recently" / "many" are placeholders. Replace them.
Localization
If shipping in multiple languages:
- Don't auto-translate and ship. Have a native speaker review.
- Strings in one place — i18n keys, not inline text.
- Planned space for 30–50% longer text in German, French, Spanish, etc.
- Date, number, currency formatting per locale (
Intl.DateTimeFormat). - Right-to-left support if Arabic/Hebrew — test layout.
Content Checklist (before shipping)
- Every headline makes a claim (or names a user, or says something specific)
- No "Lorem ipsum" anywhere
- No placeholder text ("Tagline", "Description goes here")
- CTAs are specific verbs with specific outcomes
- Empty states explain what to do next
- Error messages are human and actionable
- All names (people, companies) are real (or clearly fictional)
- Numbers are specific (or sources are cited)
- Tone is consistent across the page
- No buzzwords left in ("empower," "leverage," "synergy")
- Reading aloud works (no awkward phrasing)