---
title: "Page types (website)"
description: "Section plans are starting points; drop any section you have no real content for. Archetype numbers refer to section-archetypes.md."
canonical: https://void-design.vercel.app/docs/website/page-types
lastModified: 2026-09-16
---

# 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 `<a>`; `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 (`<ol>` with hairlines: date `label-mono`, title `text-xl`, dek `text-md text-fg-muted`) → tags only if they have ≥ 3 posts → RSS link.
- **Article:** kicker (`label-mono`: category · reading time) → H1 `text-display` max 20ch → italic dek → byline (name, date `<time dateTime>`, 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.
- **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`.
- **Must:** `BlogPosting` JSON-LD with `dateModified`; OG image per post; answer-first intro paragraph.
- **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 `<table>` → FAQ about billing (archetype 11) → enterprise/contact band.
- **Comparison table:**

```tsx
<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 (`<time>`, `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.