Wordnerds Template Vocabulary

Version: 0.2
Last updated: 2026-05-28
Renderer contracts: lib/template-contracts.ts (variants + slots — validation source of truth)
Orchestration guidance: docs/TEMPLATE-REGISTRY.md (SB7 beats, AEO blocks, variant selection rules)

This file is the canonical vocabulary of all templates available in the Wordnerds site renderer. It is the source of truth for: which templates exist, their grid pattern, their slot definitions (with types), their funnel-stage suitability, and which surfaces they apply to.

Design-orchestrator uses this file for template selection (funnel-stage suitability field). It then reads docs/TEMPLATE-REGISTRY.md for SB7/AEO overlay and variant selection rules. Neither doc duplicates the other.

Renderer Sync Checklist

Adding a new template to this file triggers four simultaneous changes:

1. lib/schema.ts — add the new name to the TemplateType union
2. lib/template-contracts.ts — add a TemplateContract entry (variants, required_slots, optional_slots)
3. lib/fragments/<name>.ts — implement the renderer fragment; register in lib/renderer.ts
4. design-orchestrator/SKILL.md Prerequisites — add the new template name to Stage 1.1 load list

Changing a variant name or slot name: update template-contracts.ts + this file in the same commit. Out-of-sync entries silently degrade orchestrator decisions.

Quick Reference

Organisms

SiteNavOrganism

Purpose. Site-wide navigation header — same on every page, content variation only.
Grid pattern. Full bleed (12-col). Content constrained to .wn-container (1280px).
Layer: organism — positioned outside <main> by the renderer.

Variants: sticky-dark · sticky-light
Funnel stages: all
Surfaces: website, gen-ui
Orchestration: docs/TEMPLATE-REGISTRY.md#SiteNavOrganism

SiteFooterOrganism

Purpose. Site-wide footer — legal, navigation reinforcement, secondary CTAs.
Grid pattern. Full bleed (12-col dark background); 3-col content grid inside.
Layer: organism — positioned outside <main> by the renderer.

Variants: dark-3col
Funnel stages: all
Surfaces: website, gen-ui
Orchestration: docs/TEMPLATE-REGISTRY.md#SiteFooterOrganism

Templates

HeroTemplate

Purpose. Page-opening section — sets the frame in ≤8 seconds. Mandatory on every page.
Grid pattern.

• dark-split / light-split → Asymmetric (7+5): text left (.wn-col-7), media right (.wn-col-5)
• centred → Full bleed (12-col), content in .wn-col-10-centred

Section padding: --space-3xl (108→120px) — hero only.

Variants: dark-split · light-split · centred
Funnel stages: all (hero is mandatory on every page regardless of stage)
Surfaces: website, gen-ui, lead-magnets
Orchestration: docs/TEMPLATE-REGISTRY.md#HeroTemplate

ProblemStatementTemplate

Purpose. The empathy moment — "you're not alone." Establishes the villain. Precedes the authority proof.
Grid pattern. Even split (6+6): text left, quote/illustration right (or flipped per variant).
Section padding: --space-2xl (72→80px) standard.

Variants: text-left-quote-right · text-right-quote-left
Funnel stages: EXPLORING (primary), TRYING (problem-restatement opener)
Surfaces: website, gen-ui
Orchestration: docs/TEMPLATE-REGISTRY.md#ProblemStatementTemplate

FeaturePillarsTemplate

Purpose. Three or four parallel capabilities or differentiators as visually equal pillars.
Grid pattern.

• 3-up → 3-up grid (4+4+4): three .wn-col-4 items; each pillar carries a supporting image
• 4-up → 2×2 grid (each pillar is .wn-col-6): four items in two rows of two. Per-pillar image is dropped in favour of a brand-blue numbered circle chip (.guide-proof__pillar-number) inline with the <h3>. See PATTERNS.md §10 for chip rules. Use this variant for analytical-technique or named-capability lists where numbered enumeration is the right reading frame.

Variants: 3-up · 4-up
Funnel stages: EXPLORING, TRYING
Surfaces: website, gen-ui, lead-magnets, slides
Orchestration: docs/TEMPLATE-REGISTRY.md#FeaturePillarsTemplate

StepCardsTemplate

Purpose. The named plan — sequential, verb-led steps. Primary plan carrier.
Grid pattern.

• 3-step → 3-up grid (4+4+4): three .wn-col-4 cards
• 4-step → 4-up grid (3+3+3+3): four .wn-col-3 cards

Each step card renders a brand-yellow numbered circle chip (.step__number, 28px) top-aligned with the <h3>. See PATTERNS.md §10.

quote_intro slot: renders a <blockquote> above the step cards. Use for a named-customer quote that frames the plan — the quote must have an attribution. Do not use for marketing framing; that belongs in intro (plain text).

Variants: 3-step · 4-step
Funnel stages: EXPLORING, TRYING
Surfaces: website, gen-ui, lead-magnets, slides
Orchestration: docs/TEMPLATE-REGISTRY.md#StepCardsTemplate

DiagramExplainerTemplate

Purpose. Present a process/architecture diagram as the section centrepiece — heading + AEO answer-capsule above, a large centred diagram in the middle, explanatory prose below. For explainer sections where the visual carries the load and demands room (e.g. the five-step data pipeline). Added 2026-05-29. Grid pattern. Heading + capsule and body in .wn-col-8-centred; the diagram in a full-width centred <figure> (max-width 960px). Section padding: --space-2xl-3xl (generous).

Variants: centered Funnel stages: EXPLORING, TRYING Surfaces: website, gen-ui Orchestration: docs/TEMPLATE-REGISTRY.md#DiagramExplainerTemplate

PathwayCardsTemplate

Purpose. Routes different personas or segments to deeper pages. Each card is a self-contained CTA.
Grid pattern.

• 3-up → 3-up grid (4+4+4): three .wn-col-4 cards
• 2-up → 2-up grid (6+6): two .wn-col-6 cards

Variants: 3-up · 2-up
Funnel stages: EXPLORING (primary), TRYING
Surfaces: website, gen-ui
Orchestration: docs/TEMPLATE-REGISTRY.md#PathwayCardsTemplate

ProofOutcomeTemplate

Purpose. Success vision + named proof point — shows what winning looks like.
Grid pattern. Asymmetric (7+5): text + outcome left (.wn-col-7), verbatim aside right (.wn-col-5) — or flipped per variant.
Stat requirement: verbatim or body slot must carry ≥1 specific number tied to a named customer or sector. Flag [STAT REQUIRED] if absent at brief time; sourcing before publication is mandatory.

Variants: text-left-aside-right · text-right-aside-left
Funnel stages: TRYING (primary), COMMITMENT
Surfaces: website, gen-ui, lead-magnets, slides
Orchestration: docs/TEMPLATE-REGISTRY.md#ProofOutcomeTemplate

IntegrationCalloutTemplate

Purpose. Integration and ecosystem hook — surfaces Open data approach and Power BI capability concretely.
Grid pattern. Wide + narrow (8+4): main content left (.wn-col-8), media/callout right (.wn-col-4).

Variants: dark · light
Funnel stages: EXPLORING (preview), TRYING (depth)
Surfaces: website, gen-ui
Orchestration: docs/TEMPLATE-REGISTRY.md#IntegrationCalloutTemplate

FAQTemplate

Purpose. Populates FAQPage JSON-LD. Answers questions an AI engine will be asked about Wordnerds.
Grid pattern.

• single-column → content in .wn-col-10-centred (editorial width)
• two-column → even split (6+6) with items distributed across columns

Q1 voice rule: FAQ Q1 ("What is Wordnerds?") uses the third-person entity-assertion answer per the entity-assertion sub-rule in 03-constraints.md. Q2 onwards uses first-person plural per voice-by-subject.

Variants: single-column · two-column
Funnel stages: EXPLORING, TRYING (mandatory on both)
Surfaces: website, gen-ui
Orchestration: docs/TEMPLATE-REGISTRY.md#FAQTemplate

FooterCTATemplate

Purpose. Final conversion moment for scroll-through visitors.
Grid pattern. Full bleed (12-col). Content centred in .wn-col-8-centred.
Section padding: --space-2xl-3xl (72→120px) — generous to give the CTA room.

Variants: yellow · dark · light
Funnel stages: all
Surfaces: website, gen-ui, lead-magnets
Orchestration: docs/TEMPLATE-REGISTRY.md#FooterCTATemplate

PromoBandTemplate

Purpose. Single timely promotional callout — webinar, playbook, case study. Swappable per campaign without touching the rest of the page.
Grid pattern. Full bleed (12-col). Content in .wn-container (1280px), horizontally arranged.
Configuration: remove from schema when no active promotion; re-add at campaign launch. Do not leave empty.

Variants: accent (brand-yellow — time-sensitive) · light (neutral — evergreen)
Funnel stages: EXPLORING (primary), TRYING
Surfaces: website, gen-ui
Orchestration: docs/TEMPLATE-REGISTRY.md#PromoBandTemplate

ResourcesRowTemplate

Purpose. Horizontal content-discovery — latest blog, playbook, and optionally webinar titles. Serves consideration-stage visitors going deeper.
Grid pattern.

• 2-col → 2-up (6+6): two .wn-col-6 columns
• 3-col → 3-up (4+4+4): three .wn-col-4 columns

Measurement note: treat as a testable hypothesis. Measure column-level clicks; drop if traffic doesn't justify the space.

Each resource_column item: heading (text), items (list of {label, href}), optional cta_label + cta_href.

Variants: 2-col · 3-col
Funnel stages: TRYING (primary), INTEGRATING
Surfaces: website only (content-index pattern — not appropriate for gen-ui lead pages)
Orchestration: docs/TEMPLATE-REGISTRY.md#ResourcesRowTemplate