Source
Page intent
A JSON payload that declares SEO, hero, sections, CTAs and link contracts.
WEB BUILDER / PROOF BLOCKS
Operating discipline made visible.
These blocks exist because the operator-first voice needs primitives that show route, gate, layer and timeline — not decorations that mimic them. Each one is rendered here on real content, not described.
SYSTEM PROOF PANEL
Route + status + checks + gate, all visible at once.
The proof panel is the operator's working surface in HTML. Route is named. Status is declared. Checks list what would pass or block. The gate explains who decides next.
web-builder / production route
Canonical route /platform/web-builder/
Surface state live capability
Structured payload SEO, hero, sections and CTAs live in an auditable JSON contract.
ready
Brand contract Each site validates against a zod brand schema. Enforced, not aspirational.
ready
Audit gate audit:platform must pass before public action.
required
Public action Deploy and DNS are owner decisions, not pipeline auto-applies.
blocked
Publication gate owner approval
The capability prepares the surface; the operator approves public action.
LAYERED SYSTEM
Stack layers when the contract is hierarchical.
Some operating contracts are hierarchical: the lower layer constrains the upper. The layered system block expresses that visually with stacked tiers, each with its own status and artifacts.
Layer output
Substrate
Event sourcing, audit_log, idempotency, reversibility. The invariants every capability inherits before it gets to be called a capability.
- Append-only event log
- Audit log mandatory
- Idempotency keys
- Rollback ≤ 90 days
Output auditable timeline
Layer output
Capability
A packaged module that uses the substrate to do one operating job (Amazon Ads, Search Intelligence, Web Builder). Inherits all substrate invariants.
- Owns one operating job
- Replaces a manual loop
- Operator in control
Output live capability
Layer output
Engagement
Where a capability gets activated inside a client account. Services are how the operator runs the capability for the client.
- Capability activated
- Daily loop running
- Operator approves applies
Output operated system
CAPABILITY BENTO
Bento grid for capability sets with hierarchy.
The capability bento lays out a set of related capabilities with one optional hero (size: 'large') and supporting tiles. Used across this site for surface-level capability listings and for the canonical 'input → pattern → output' triptych.
Input
The signal entering the operating layer — raw event, search query, user action, ingest from API.
Pattern
The shared logic that transforms input into a useful state. Rules, contracts, scoring, audit.
Output
The result the operator decides on. Suggestion, draft action, queue item, readback.
READINESS MATRIX
Cross-tabulate templates against the readiness signals.
When the block needs to show that multiple things have multiple states, the matrix presents it as a structured grid. Used for template readiness, capability readiness, integration readiness — anything multi-dimensional.
Template
SEO
Schema
Assets
Audit
Approval
Service page Defined offer with scope, objections, proof and contact path.
SEO ready
Schema ready
Assets local
Audit required
Approval gated
Capability page Packaged platform capability with operating proof.
SEO ready
Schema ready
Assets local
Audit required
Approval gated
Solution page Vertical combination of capabilities + services.
SEO ready
Schema ready
Assets local
Audit required
Approval gated
Editorial article Long-form content with article UX kit.
SEO ready
Schema ready
Assets local
Audit required
Approval owner
INTEGRATION CONTEXT
Orbit pattern for tool clusters.
When the section needs to show tool clusters around an operating layer, the integration_context orbit puts groups of tools radiating around a central concept. Use marquee variant for endless logo strips instead.
Marketplace
Where commerce decisions happen.
Amazon
Catalog, orders, ads.
Search
Where organic discovery is measured.
Google Ads
Paid + GSC signals.
Commerce surfaces
Where customers transact.
Shopify
Catalog, orders, draft orders.
Tool names identify operating context only. No partnership, endorsement or provider access is implied.
PROCESS STEPS
Sequential operating method.
When the block needs to show that something happens in order — brief, structure, render, audit, decide — process_steps presents it as numbered, connected steps with consistent visual weight.
1
Brief
Define audience, page job, route, constraints, claims and owner decision.
2
Structure
Turn the page into a structured payload with SEO, hero, sections, CTAs and route keys.
3
Render
Astro renders approved blocks and local assets through a thin wrapper.
4
Audit
Run build, structured page, route and platform checks before release.
5
Decide
The owner decides deploy, indexability and public promotion.
EXPLORE MORE
These are the proof blocks. The kit ships more for marketing, article UX and motion.
The full Web Builder showcase is divided into six categories. Open any to see the kit running on real sections.
Back to templates