Page-template catalogue

Designers and agents compare reader jobs, public contracts and implemented page templates before choosing a composition.

Composition​

The index is a directory of templates. /design-system/templates/composition is the guide for building one: UI blocks (atoms, molecules, organisms) stacked in one order, then a route that replicates that order with real content. Tailwind Plus uses the same split — blocks, then page examples, then a site filled in.

Each *-template.tsx page uses Container size="page" (max-w-7xl, gutters px-6 lg:px-8). Purpose (when to use, block order, live routes) sits above the layout specimen. Sticky group nav and preview cards open one template page.

Contract-only and page-private patternId values remain in the registry as page types; they do not receive showcase *-template.tsx pages.

Specimens and boundaries​

Fixtures supply fictional copy and no outcome claims. Named iframe specimens use this route's specimen query. Unknown keys render the ordinary directory.

Verification​

test/components/PageTemplates.contract.test.tsx binds template coverage and live routes. test/e2e/page-templates.spec.ts exercises the directory and template pages. Projection, publication, links and TypeScript checks remain authoritative.