Tool UX governs the widgets. This chapter governs everything else — the marketing pages, the content pages, the long-form chapters where the user is reading, not calculating. /about, /membership, /agents, /handbook, /explore, /blog, /categories, and every static page that will exist next year.

Why this chapter exists: an audit on 2026-05-14 found that the marketing pages were quietly worse than the tool widgets. Eight raw-hex colors on /about. Six on /agents. Four different H1 type scales across four pages. Five different hero patterns. Six different CSS class prefixes (.about-, .m-, .at-, .hb-, .col-, .tux-) — every page is its own little design kingdom. The brand-palette test catches banned tokens leaking out of global.css; it does not catch rogue new hex values leaking in to pages. That gap is what this chapter closes.

1. The shape of a page

Every marketing page follows the same vertical skeleton. Different content, same beats:

1. Hero — eyebrow (optional), h1, subhead, primary CTA (optional). One per page. Above the fold.
2. Body sections — alternating cream / paper backgrounds for visual rhythm. 4-6 sections, each with its own h2 + subhead + content.
3. Closer CTA (optional) — when the page has a conversion goal (e.g. /membership → "Become a member"). Pages like /about close with a letter signature instead.
4. Footer — the shared HomeFooter, not a per-page footer.

No page has its own nav, its own footer, its own splash screen, or its own onboarding modal. The page IS the content; the chrome stays consistent.

2. The type scale — one set, no per-page variants

Four clamp() formulas for h1 across four pages was the worst finding in the audit. From this chapter on, there is one type scale.

The handbook cover (/handbook) is intentionally outside this scale — it's a book cover, not a marketing page. That divergence is documented as a §10 exception. Any other page using a different clamp is a violation.

3. The hero pattern

Every marketing page hero has the same four-slot anatomy. Slots can be omitted; their ORDER cannot change:

1. Eyebrow (optional) — JetBrains Mono uppercase, brand-green, sits above the H1. Use it for section identifiers ("The Microapp Handbook", "The team", "Membership"). Omit on the most editorial pages (e.g. /about's letter intentionally has no eyebrow).
2. H1 (required) — Display scale, max 14-18 characters per line. Center-aligned on hero pages; left-aligned on book-style pages. One per page.
3. Lede (recommended) — Inter, ~36-52ch max-width, sits directly under the H1. Two sentences max. Tells the user what the page promises in plain prose.
4. CTA cluster (when the page has a conversion) — see §6. Single primary CTA + optional secondary link. Not two equal-weight buttons.

Decoration policy: floating background dots and stickers are allowed on the most "marketing" pages (/membership) and discouraged on the most "editorial" pages (/about, /handbook). Pick a mood and commit; mixing partial decoration looks like an abandoned theme.

4. Containers — three widths, three names

The audit found 680px, 720px, 760px, 920px, 60rem (= 960px), 1100px, and "no max-width" all in use, often inside the same page. From this chapter on, there are three.

All three include horizontal padding (1.5rem at mobile, 2rem at desktop). Center the container; don't apply margin auto on the page body directly.

5. Section rhythm

1. Vertical padding per section: 4.5rem 1.5rem (default). Compress to 3rem 1.5rem only for the section directly under the hero. Expand to 6rem 1.5rem for the final section before the footer.
2. Alternate backgrounds: cream / paper / cream / paper. Use var(--color-brand-cream) as the base, var(--color-brand-paper) for the "alt" sections. Never invent a third background color for variety.
3. Section header pattern: eyebrow → h2 → lede. Three elements, top-aligned, max-width 52ch on the lede.
4. Don't end a page on alt-paper. Closing sections sit on cream so the page meets the cream footer cleanly.

6. CTAs — one button, one style

The audit found three different CTA implementations in three pages — /membership has a Basecamp-style shadow-stack pill; the home has Tailwind utility classes; /agents uses card-as-CTA. From this chapter on, there is one primary CTA:

1. Shape: rounded pill (border-radius: 9999px), padding 1rem 2rem, font Plus Jakarta Sans 800 at 1rem.
2. Default color: green (--color-brand-green), white text, 0 4px 0 var(--color-brand-green-dark) shadow stack.
3. Emphasis variant: yellow (--color-brand-yellow), ink text, 0 4px 0 var(--color-brand-yellow-dark) shadow stack. Use sparingly — when you want this CTA to outweigh the one above it (e.g. closing CTA on /membership).
4. Hover: translateY(-1px) + shadow grows to 5px. Active: translateY(2px) + shadow shrinks to 2px. Matches the rest of the brand.
5. Labels are imperative verbs: "Become a member", "Start reading", "Try Word Counter", "Browse the team". Not nouns. Not "Click here".
6. One primary CTA per section. Two side-by-side primaries is the "I couldn't decide" anti-pattern. Use primary + ghost secondary if you need both — never two primaries.

7. Brand-token discipline — no raw hex

This is the rule the brand-palette test misses. Today the test catches palette hexes leaking out of global.css. It does not catch new rogue hexes leaking in. That's the audit's worst finding: /about has eight raw hex values that aren't in the palette at all. #5a9e3a ("the agents page green") has been silently sitting in four files for months.

1. No raw hex in src/pages/*.astro or src/layouts/*.astro — period. Every color goes through a var(--color-brand-X) token. If a color you need isn't in the palette, add it to global.css first, then reference it.
2. No "close-but-not-exact" matches. If you wanted brand-green and typed #5a9e3a from memory — that's not the palette green. The palette green is --color-brand-green (its literal value lives in global.css — never typed in pages). Use the token; don't guess the value.
3. No private page palettes. A "lighter green for the agents page" is not a thing. The palette has one green family with documented variants (--color-brand-green, --color-brand-green-dark, --color-brand-green-light, --color-brand-forest, --color-brand-lime). Pick one.

8. Class-name discipline

Every page is currently its own design kingdom — .about-, .m-, .at-, .hb-, .col-, .tux-, and counting. Each prefix re-implements heading sizes, container widths, button styles. Six islands, zero bridges.

1. Prefer shared primitives over local classes. Use <PageHero>, <PageSection>, <PageCTA>, <ReadingContainer> from src/components/page-ui/ (next PR ships these). Importing beats authoring.
2. When you must write per-page styles (rare — only when a page has genuinely unique chrome), prefix the page's slug: /about uses .about-, /membership uses .m-. No fantasy prefixes; if your page is /something, your prefix is .something-.
3. No new chapter prefixes — handbook chapters use .<slug>- (the existing pattern: .col- for colophon, .tux- for tool-ux, .pp- for this chapter).

9. The shared primitives

Same shape as Tool UX §9 — the bridge from the constitution to the implementation. The next PR scaffolds these in src/components/page-ui/; this chapter documents their names so the next page that needs them imports rather than reinvents.

10. Drift — what currently violates this chapter

Honest section. The conventions above were written after the existing pages had already drifted. Each row is queued for retrofit; the order is opportunistic (when we touch a page for another reason, we update it).

When this table reaches zero rows, the marketing pages are consistent. Until then, the chapter is the goal and the table is the gap.

For agents and reviewers

Anyone editing a marketing page — Bob, a human, a future agent — reads this chapter before opening the PR. The next PR ships the primitives in src/components/page-ui/; once it lands, importing them by name is the path of least resistance.

Reviewers cite section numbers in PR comments. "§7 — no raw hex" beats re-arguing the rule every time. Ben adds a Page Patterns check pass to its audit alongside the existing Tool UX pass.