Compose a template, then fill a page
Tailwind Plus splits the library in two. UI blocks are the sections. Templates are those sections stacked into a page you copy. This catalogue works the same way.
Two shelves
Blocks are what you pick from. Templates are the order you pick them in. Pages are that order with real words.
| Tailwind Plus | This catalogue | What you do with it |
|---|---|---|
| UI blocks. Marketing, application, and ecommerce sections. | Atoms, molecules, organisms | Choose a section that already has one job. |
| Page examples. Landing, pricing, about, detail, settings. | Templates | Stack those sections in one order. Leave the words as slots. |
| A site template opened in a project, then rewritten with real content. | A route under src/pages | Replicate the stack. Pour the published content into the slots. |
The order of work
Name one reader job
A template exists for one job. A landing page, a subject index, and a filterable catalogue are different templates. Do not merge them to make the chrome match.
Use the one shell
Width, gutters, background, and the single h1 live in the shell: Section, Container, Rhythm, SectionHeader. Every template in this catalogue uses that shell. A page does not add a second frame around it.
Stack blocks in order
A template is an ordered list of organisms and molecules. Tailwind Plus calls those lists page examples: a landing page is a hero, then features, then a price section. Here, a subject index is a heading, a decision, a card grid, one action, then related routes. Pick blocks that already exist. Do not draw a new section for one route.
Leave the content as slots
The template shows the skeleton: what the heading is for, how long it can run, what a row contains, which action is the only one. It uses placeholder copy. It does not own the published sentences.
Replicate the stack on the route
A page is that same stack with real content poured in. Copy the order into the route file and fill the slots. Do not import pieces out of another page, and do not restyle the shell because this route feels different.
Fix breaks in the block
If a real title wraps, or a list is too long, change the block that holds it. The page keeps the template's order.
Page examples
Each template below is a finished stack. Open it to see the specimen, then replicate that order on a route.
Subject index
A hub page for choosing one subject area or dimension before continuing to a deeper route.
SubjectIndexPage → Section → Container → SectionHeader → IndexCardGrid → InlineLink
Purpose-first landing
A front-door narrative that opens with human tension, then earns the Playbook handoff.
AgencyHome → HomeDreamSeed → Section → Container → Button
Navigation system story
A values/beliefs/control page with shared system header, instrument, proof and next station.
SystemStoryPage → NavigationSystemHeader → CopyableInstrument → TimelessQuestions
Belief story
A public belief page that names a claim, countercase, evidence boundary and next move.
BeliefArticleReturnNav → local belief article component → Section → Container
Identity and mechanism
An about-style page that explains who this is for, what exists, and how the mechanism works.
IdentityAndMechanismPage → Section → Container → Button → InlineLink
Evidence marketplace
The Lab hub and venture index: choose a crossing or inspect one experiment, without ranking proof.
IdeasHero → IdeasVentureCard → HomeDreamSeed
Evidence-led venture story
A venture page that leads with beneficiary, current evidence, mechanism and next test.
VentureHero → VentureCollectionLink → venture-specific sections → Score and metric displays
Capability finder page
A Playbook operating board: filter jobs by domain, then compare tool, schedule, and triggering event.
CapabilityFinder → CapabilityShapeChooser → CapabilityResults → FilterableCollection