Marketing Pages

Top-of-funnel pages (landing pages, marketing sites, blogs, docs, changelogs) have one job: get a visitor who arrived with low patience to understand the offer and take the next step. They are read fast, often on a phone, often by someone who will leave in seconds. Optimize for instant clarity, scannability, and trust, not for cleverness.

Decide the Positioning Before the Copy

This doc covers how a marketing page looks and reads. What it says comes first, and it is a separate decision: who the product is for, what it replaces, the sharpest difference, and why now. Settle those four answers before writing the headline, or the page will hedge and read like every other launch. Load the positioning principle (ux/positioning.md) at the start of any landing page work, and ask the user for the answers rather than inventing them.

The Hero

The space a visitor sees before scrolling (above the fold) is the whole pitch. It must answer "what is this and why should I care" without any scrolling.

• One value proposition, stated plainly. If a visitor cannot repeat what you do after reading the headline, rewrite it. The positioning principle decides what that proposition is; this section decides how it is presented.
• One primary call-to-action. Three equally weighted buttons in a row leave no clear next step. Give the page a single obvious action, then a quieter secondary option if needed.
• Tailor the CTA to visitor state. A logged-out visitor sees "Get started", a logged-in one sees "Open app". Sending an existing user back through signup is friction.

<a class="cta-primary" href="/signup">Get started</a>
<a class="cta-secondary" href="/demo">See a demo</a>

The supporting line under the headline earns the click: say who it is for and the concrete benefit, not a second slogan.

Visual Hierarchy and Scannability

Almost nobody reads a marketing page top to bottom. They scan headings, buttons, and bold phrases, then decide. Build for that.

• Make the reading path obvious: large headline, supporting subhead, then body. Use weight and color for hierarchy, not size alone.
• Emphasize by de-emphasizing. When the CTA needs to stand out, quiet the surrounding sections rather than shouting louder.
• If the primary action lives far down a long page, anchor it so it stays reachable. Most visitors never scroll to the bottom, so an action buried there is an action most people never see.
• Section headings act as scan anchors. Keep them short and benefit-led so a skimmer who only reads headings still gets the story.

The Skim Path Must Carry the Whole Offer

Many visitors never read a page straight through. They read a subset of it, in roughly this order, and decide from that alone. On a page whose job is to sell something, the subset is:

1. The main headline
2. Sub-headlines, as they scroll
3. Bullets
4. The offer, and the product image next to it
5. The price
6. The closing line (the P.S. on a long-form page, the final CTA block anywhere else)

Body prose and video are not in the path. Treat them as unread by default.

So the skim path is not a summary of the page, it is the page for a large share of visitors. It has to stand alone and it has to flow in the order above:

• Test it by deletion. Hide everything except those elements. If what remains does not explain what this is, who it is for, what the main objection is, what it costs, and what to do next, the page does not work, no matter how good the prose is.
• Never put a load-bearing fact only in prose or video. Whatever the reader needs to decide has to have a home in the skim path. A visitor should not have to watch 4 minutes to learn the price.
• Bullets are a scan surface, not a dumping ground. Each one states a concrete outcome and reads on its own out of context. A bullet that only makes sense after the paragraph above it is invisible to the person it was written for.
• Order carries meaning. The skim elements are read in sequence, so a price that appears before the offer is understood, or a closing CTA that names a benefit the page never set up, breaks the story for the exact reader you were building it for.

On pages that are not selling anything

This principle also covers blogs, docs, changelogs, and other informational pages. The skim path applies there, but the elements are different, and the selling ones do not exist. A docs page has no price, no offer block, and no product shot, and forcing them in is worse than omitting them.

The informational skim path is the title, the section headings, code blocks and screenshots, and the first line under each heading. Run the same deletion test against the question that page exists to answer: with the prose hidden, can the reader tell what this page covers, whether it is the right page, and where to go next. Nothing about price or objections applies.

The structure is not a licence for the tactics

Reaching the skimmer is a layout problem. It does not permit an eyebrow label above the headline, invented countdowns or scarcity counts, or a fabricated original price to anchor against. Each is covered as its own rule: see review-rules.md (Labels above titles), (Fabricated urgency and scarcity), (Fabricated social proof and activity) and (Fabricated reference prices). The last three are Critical, because inventing data and rendering it as fact is a different failure from arranging real facts badly.

Ecommerce Product Pages Are Their Own Discipline

Selling one product to one buyer follows a stricter contract than a generic marketing page: objection resolution, the squint test, buyer-matched tone. See the dedicated product-pages principle (product-pages).

Copy: Concrete Over Clever

Marketing copy fails when it is vague or self-congratulatory. Trade adjectives for specifics.

• Name the benefit, not the feature. "Send messages in the background" beats "Enable async relay mode".
• Front-load the important word. "Export ready, download it" beats a long sentence that hides the point at the end.
• Specific labels build trust. "Save changes" tells the visitor what happens; "Submit" does not.
• Keep sentences short. A skimming reader bounces off a wall of text. One idea per line.
• Sentence case reads friendlier than Title Case On Every Word, which looks like a legal notice.

Social Proof and Trust

Visitors trust other people more than they trust your headline. Show evidence, placed where a decision is being made.

• Logos, named testimonials, counts, and outcomes carry more weight than claims you make about yourself.
• Specific beats generic: a quote with a real name and result lands harder than a faceless five-star row.
• Put proof near the CTA so it reinforces the action at the moment of decision.
• Trust also comes from working links: a visible, honest privacy policy and terms page signal a real product.

Generous Whitespace and Rhythm

Crowded marketing pages feel cheap and anxious. Space gives content room to breathe and tells the eye where one idea ends and the next begins.

• Let sections separate clearly. Consistent vertical rhythm between blocks reads as intentional.
• Use gap on a parent rather than margin on each child, so spacing stays contained and the last item leaves no trailing gap.
• Cap content width on wide screens. A full-bleed text column on a large monitor is sparse and unreadable.
• Whitespace is a design choice, not empty waste. Forced padding around a dropped-in graphic looks like clip art; intentional negative space looks composed.

Typography for Reading

Long marketing and blog copy is a reading experience. The defaults that work for dense product UI do not work for paragraphs.

• Cap the measure (line length) at roughly 60 to 75 characters. Full-container-width body text creates exhausting lines that lose the reader between rows.
• Give body text comfortable line-height, looser than the tight leading of UI labels.
• Apply text-wrap: balance to headings so they do not leave a single orphaned word on the last line.

article {
  max-width: 68ch;
}
article h1,
article h2 {
  text-wrap: balance;
}

• Declare a fallback font stack matched in x-height and weight, so the page does not shift when the web font loads.

Performance and First Paint

Marketing pages live and die on speed. A visitor who waited too long for the hero is already gone, and bounce climbs with every slow second.

• Preload above-the-fold assets: the hero image and the fonts the headline uses, so the first paint is styled and stable.
• Generate blog, docs, and changelog pages at build time with periodic revalidation, rather than fetching on each request. Static pages paint faster and survive traffic spikes.
• Avoid layout shift. Reserve space for images and fonts so content does not jump as the page settles.
• Skip motion that fights the visitor: scroll hijacking, parallax that does not track scroll one-to-one, and auto-advancing carousels all undercut the speed you worked for.

<link rel="preload" as="image" href="/hero.webp" />
<link rel="preload" as="font" href="/fonts/sans.woff2" type="font/woff2" crossorigin />

Blog and Docs Readability

Long-form pages reward the visitor who reads, so make reading and acting on the content effortless.

• Give long pages a table of contents so readers can jump to the part they need and keep their place.
• Put a copy-to-clipboard button on every code block. Without it, a reader hand-selects the snippet and risks missing a line.
• Let docs be copied as Markdown: a "Copy as Markdown" affordance and a working .md URL serve both humans and agents.
• Show, do not only tell. Pair code with a rendered example of what it produces.
• Style headings for visual scanning while keeping semantic order (h1 then h2 then h3) intact for accessibility and SEO.
• Offer an RSS feed for blogs and changelogs so returning readers can follow without checking back.

Checklist

• Positioning settled first: who it is for, what it replaces, the sharpest difference, why now (ux/positioning.md)
• Headline stops reading true when a rival's name is pasted over it
• Above the fold answers "what is this and why care" with no scrolling
• One clear value proposition in the headline
• Exactly one primary CTA; secondary actions are visually quieter
• CTA adapts to logged-in vs logged-out state
• Page is scannable: weight and color for hierarchy, short benefit-led headings
• Skim path stands alone: headline, sub-headlines, bullets, offer with its adjacent product image, price, closing line still explain the offer with everything else hidden
• Deletion test answers all 5: what it is, who it is for, the main objection, what it costs, what to do next
• No load-bearing fact lives only in prose or video
• Every bullet states a concrete outcome and reads out of context
• Informational pages (blog, docs, changelog) use the informational skim path, with no forced price, offer block, or product shot
• Rendered page screenshot checked at desktop and mobile widths, not just the code
• Selling a single product? Apply the product-pages principle (objections, squint test, buyer tone)
• Primary action stays reachable on long pages, not buried at the bottom
• Copy is concrete and benefit-led, sentences short, important word first
• Social proof is specific and placed near the CTA
• Working privacy and terms links present
• Generous whitespace and consistent vertical rhythm; content width capped
• Body measure ~60 to 75ch with comfortable line-height
• text-wrap: balance on headings; matched fallback font stack to avoid shift
• Above-the-fold image and fonts preloaded; first paint is fast and stable
• Blog/docs/changelog generated at build time, not fetched per request
• No scroll hijacking, untracked parallax, or auto-advancing carousels
• Docs have a TOC, copy-to-clipboard code blocks, and visual examples
• Blog and changelog expose an RSS feed