Page types

Section plans are starting points; drop any section you have no real content for. Archetype numbers refer to section-archetypes.md.

Landing / product homepage

• Direction: from the brief (usually precision, warm or editorial).
• Plan: hero 1b or 1a → proof strip 2 (if real) → product showcase 3 → feature rows 4 (2–3) → metrics 7 or quote 8 (if real) → how it works 9 (dev) → pricing teaser 10 or FAQ 11 → CTA band 12 → footer 13.
• Signature: the product surface (framed real UI, a live-looking log) or a typographic hero.
• Must: one CTA label everywhere; the H1 names the category and outcome; SoftwareApplication JSON-LD only with real offers (seo); first-load JS ≤ 170 KB.
• Avoid: feature grid of icons; a second bento; testimonials carousel.

Portfolio / personal site

• Direction: precision or terminal (dark, mono voice) for engineers; swiss or editorial for designers and writers.
• Plan: poster or editorial hero 1c/1a with name + what you do + where → selected work (3–6 projects, each: title, role, year, one-line outcome, real image) → writing or talks (dated list with hairlines, archetype 5) → about (short, first person, a real photo or none) → contact (email as text + 2–3 real profiles) → footer.
• Work list, not a card grid: rows with divide-y divide-line-subtle, image thumbnails revealed on hover only under pointer-fine (portal-free: absolute inside the row, pointer-events-none).
• Signature: one brand-level detail: a live local time, "now playing", a contribution heatmap rendered on the server, a mono decoder on the name. Only one.
• Must: Person JSON-LD with sameAs for real profiles; H1 is your name + role; each project page has its own title/description/OG.
• Avoid: skill bars, "Hi, I'm X 👋", tech-logo clouds, 3D avatars, fake testimonials.
• Density: the owner's taste favors a one-screen home at 1280×800 with dense 13–15px text; heading ≤ 54px; test at 1366×768.

Docs homepage

• Direction: the product's direction; instrument or precision for data/dev products; editorial for long-form docs.
• Plan: compact hero (H1 "Acme docs", one-line scope, search field or ⌘K hint, quickstart link) → start paths (3–4 task links as a divided list: "Deploy your first app", "Migrate from X") → sections index (grouped link lists in columns, label-mono group heads) → popular references → changelog/latest release strip → community/support links.
• Must: search reachable in one keystroke (no open animation, motion rule 1); every link a real ; TechArticle/BreadcrumbList on pages (seo); .md mirrors and llms.txt (template has them).
• Layout: max-w-wide shell with sticky sidebar top-(--header-h), content max-w-prose, right TOC ≥ 1280px; section-y compact.
• Avoid: marketing hero art, reveals, big display type (≤ text-display-sm).

Blog index and article

• Direction: editorial (or the site's direction with editorial typography rules).
• Index: H1 + one-line description → featured post (title, dek, date, reading time; image only if it adds meaning) → dated list (
  with hairlines: date label-mono, title text-xl, dek text-md text-fg-muted) → tags only if they have ≥ 3 posts → RSS link.
  1. Article: kicker (label-mono: category · reading time) → H1 text-display max 20ch → italic dek → byline (name, date , updated date if changed) → body max-w-prose text-lg (17–19px, lh 1.6–1.7) → figures that break out to max-w-page → footnotes → author box → next/previous.
  2. Details: links underlined; code blocks highlighted at build time; headings get anchor links ([id] scroll margin is in base); text-wrap: pretty (base); pull quotes text-2xl italic, border-l-2 border-brand-line pl-6.
  3. Must: BlogPosting JSON-LD with dateModified; OG image per post; answer-first intro paragraph.
  4. Avoid: progress bars, share-button rails, sticky newsletter popups, reveals on paragraphs.

Pricing page

• Plan: H1 stating the model in plain words ("Pay per build minute. Free for personal projects.") → plan columns (archetype 10, 2–4 plans) → full comparison
  → FAQ about billing (archetype 11) → enterprise/contact band.

  Comparison table:

  <div className="overflow-x-auto rounded-xl border border-line-subtle">
    <table className="w-full min-w-[640px] text-left text-sm">
      <thead className="sticky top-(--header-h) bg-bg-subtle">
        <tr className="border-b border-line-subtle">
          <th scope="col" className="px-4 py-3 font-medium text-fg-muted">Limit</th>
          {plans.map((p) => <th key={p.name} scope="col" className="px-4 py-3 font-medium text-fg">{p.name}</th>)}
        </tr>
      </thead>
      <tbody className="divide-y divide-line-subtle">
        {rows.map((r) => (
          <tr key={r.label}>
            <th scope="row" className="px-4 py-3 font-normal text-fg-muted">{r.label}</th>
            {r.values.map((v, i) => <td key={i} className="px-4 py-3 text-fg tabular-nums">{v ?? <span className="text-fg-subtle">—</span>}</td>)}
          </tr>
        ))}
      </tbody>
    </table>
  </div>

  • Must: prices with currency and period; what happens at the limit; tax note; annual/monthly toggle (if any) is a real radio group, prices tabular-nums, no animated counting; Offer JSON-LD only for real public prices.
  • Avoid: scaled middle card, "Most popular" on a plan nobody chose, hidden "contact us" for everything.

  Changelog

  • Direction: the product's; typography from precision/editorial.
  • Plan: H1 "Changelog" + subscribe (RSS/email if real) → entries newest first: date (, label-mono, sticky left column ≥ lg) · version badge · title text-2xl · 1–3 paragraph summary · real screenshot or short muted video (poster, preload="none") · list of fixes → pagination by page, not infinite scroll.
  • Layout: grid lg:grid-cols-12: date column lg:col-span-3 lg:sticky lg:top-24 lg:self-start, entry lg:col-span-8 lg:col-start-5; divide-y divide-line-subtle between entries.
  • Must: permalink per entry (id + anchor link), per-entry OG if pages exist, dateModified in sitemap from the newest entry.
  • Signature (optional): the newest entry's hero media with one reveal.
  • Avoid: confetti, emoji headers, marketing adjectives in fix notes.

  Agency / studio site

  • Direction: swiss or editorial; occasionally precision (dark) for technical studios.
  • Plan: poster hero 1c with corner metadata → selected work (large media rows, 1 per viewport, title + client + year + discipline) → capabilities list 5 → clients (real list as text or logos) → approach (3–5 numbered statements) → contact (email, address, hiring link).
  • Signature: one: masked statement reveal on scroll (motion/references/recipes.md §10), or project media with a subtle view() parallax (≤ 6%).
  • Must: ProfessionalService/Organization + ItemList of work only if real (hellohello pattern); time-to-content < 1.5s (no preloader); reduced motion shows everything.
  • Avoid: smooth-scroll hijack, custom cursor that hides the real one, 8-second intros.