Skip to main content

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.

Each *-template.tsx page uses Container size="page" (max-w-7xl, gutters px-6 lg:px-8). The template name sits above a framed page. Intent, the fixture note, and links to the live route sit under that frame, outside the page being shown. 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.