Composing Pages

The Scroll Arc

Users scroll in a predictable emotional arc. Disrupting this order creates friction.

1. Attention  → Hero: "What is this?"
2. Interest   → Value prop: "Why should I care?"
3. Trust      → Social proof: "Who else uses it?"
4. Evaluation → Features/Pricing: "Does it fit my needs?"
5. Action     → CTA: "How do I start?"

Compose Like This

Before you pick sections, answer three questions:

1. What must the visitor understand within the first screen?
2. What proof do they need before they trust the offer?
3. What action should feel easiest by the end of the page?

If a section does not help one of those three, it is usually filler.

Proven Section Orderings

SaaS Landing Page

Hero → Logo Cloud → Features → How it Works → Testimonials → Pricing → FAQ → Final CTA → Footer

Agency / Service

Hero → Services → Case Studies → Process → Team → Testimonials → Contact CTA → Footer

E-Commerce

Hero → Deal of the Day → Product Grid → Trust Strip → Reviews → Comparison → Purchase CTA → FAQ → Footer

Section Pairing Rules

| After this section… | Good next sections | Avoid | |-----------------------|-------------------|-------| | Hero | Logo Cloud, Features, Services | Pricing, FAQ | | Features | How it Works, Testimonials, CTA | Footer | | Testimonials | Pricing, CTA, Case Studies | Hero | | Pricing | FAQ, Final CTA | Features, Hero | | FAQ | Final CTA, Footer | Hero, Pricing |

Visual Rhythm

Alternate background tones for visual rhythm:

Section 1: ░░░░░░  white bg, hero
Section 2: ▓▓▓▓▓▓  tinted bg (gray-50)
Section 3: ░░░░░░  white bg
Section 4: ▓▓▓▓▓▓  tinted bg
Section 5: ██████  dark/accent bg, CTA (contrast break)
Section 6: ░░░░░░  white bg
Footer:    ▓▓▓▓▓▓  dark

Bad vs. Good Flow

Weak flow

Hero → Pricing → Features → FAQ → Testimonials → Footer

Problem:

• Pricing appears before the offer is explained
• Trust lands too late
• The page asks for action before earning it

Better flow

Hero → Features → Testimonials → Pricing → FAQ → CTA → Footer

Why it works:

• The visitor understands the offer first
• Social proof reduces risk before pricing
• FAQ removes friction before the final CTA

Working with an Existing Page?

If you already have some sections in place, use augment_page instead — it detects which composition roles are already covered and only fills the gaps. See Augmenting Existing Pages for the full workflow.

AI-Powered Composition with compose_page

Instead of manually choosing sections, let the MCP tool compose a page from your business context:

compose_page(
  domain: "legal",
  tone: "serious",
  ux_goals: ["build_trust", "drive_contact", "highlight_expertise"],
  content_needs: ["legal", "team", "contact"]
)

Returns an ordered page structure:

1. Navbar Base — navigation
2. Hero Base — entry
3. Services Reveal List — supporting
4. Awards List Base — supporting
5. Testimonials Base — trust
6. FAQ Base — supporting
7. Contact Base — conversion
8. Footer Base — footer

It also returns a small set of matching snippets for polish and interaction, for example hero atmosphere, CTA emphasis, or editorial text treatments.

Then use get_pattern("hero/base") to get the HTML for each section and get_snippet("decorative/aurora") or similar to pull the recommended CSS enhancements.

What the tool now composes

compose_page has two outputs:

1. Patterns for structure and conversion flow
2. Snippets for visual polish, motion, and interaction cues

The pattern layer answers: “What sections should this page contain?”

The snippet layer answers: “How should those sections feel and behave?“

content_needs Reference

Use content_needs when the page must include a specific kind of content, not just a general UX outcome.

Allowed values: about, article, blog, careers, case_study, comparison, contact, conversion, faq, gallery, integrations, legal, newsletter, portfolio, pricing, product, related_content, resume, support, team, testimonials, trust

More Examples

SaaS Product:

compose_page(domain: "saas", tone: "modern", ux_goals: ["explain_offer", "drive_signup", "reduce_friction"])
→ Navbar → Hero → Features → Pricing → Integrations → Testimonials → FAQ → Footer
→ Snippets: aurora / reveal / button-bg-slide

Agency Portfolio:

compose_page(domain: "agency", tone: "premium", ux_goals: ["showcase_work", "highlight_expertise", "drive_contact"])
→ Navbar Centered Logo → Hero → Portfolio Interactive List → Case Study → Awards List → Contact → Footer
→ Snippets: gradient-mesh / thumbnail-hover-scrim / underline-dual

Editorial SaaS Article:

compose_page(
  domain: "saas",
  tone: "editorial",
  ux_goals: ["highlight_expertise", "provide_overview", "drive_signup"],
  content_needs: ["article", "related_content", "newsletter"]
)
→ Blog Details → Blog / Related Articles → Newsletter → Testimonials → Footer
→ Snippets: label-rail / balance / scroll-progress-ring

Composition Roles

Every pattern has a role that determines its position on the page:

| Role | Position | Examples | |------|----------|---------| | navigation | Top | navbar, announcement-bar | | entry | After nav | hero, page-header | | supporting | Middle | features, services, portfolio, integrations | | conversion | After supporting | pricing, contact, appointment, waitlist | | trust | Before footer | testimonials, trust-strip, awards-list | | footer | Bottom | footer |

Searching with Semantic Filters

Use search_patterns with context filters for targeted results:

search_patterns(
  query: "trust building section",
  domain: "legal",
  tone: "serious",
  ux_goal: "build_trust"
)

Patterns matching your domain, tone, and UX goal score higher. Patterns that explicitly avoid your tone are penalized.

Warnings

The compose_page tool may return warnings:

• “UX goal not covered” — Add a section that supports that goal (e.g., FAQ for reduce_friction)
• “Neighbor conflict” — Two incompatible patterns selected (e.g., hero + coming-soon)

These are advisory, not errors.

Recommended Snippets

Treat the snippet recommendations as a finishing layer, not a replacement for structure.

• Use 1-2 snippets on high-importance sections like hero, CTA, portfolio, or article pages.
• Prefer readability and emphasis over decoration when the tone is serious, technical, or institutional.
• Prefer atmosphere, depth, and hover cues when the tone is premium, modern, or editorial.
• Skip decorative motion if the page already feels visually dense.

Checklist

• [ ] Page follows Attention → Interest → Trust → Evaluation → Action
• [ ] Hero answers “what is this?” in 3 seconds
• [ ] Social proof appears before features
• [ ] Pricing comes after trust-building content
• [ ] Background tones alternate for visual rhythm
• [ ] Max 10 sections (fewer is better)
• [ ] Every section has a job; remove decorative filler