Demo page

One showcase at full width: the page head with the claim, the showcase in its frame with its honesty caption, more demos, the call to action.

Page · stable · v1.0.0 · owner: Site system lead · contract 19 of 20 points (open: figma)

Do and don't

Do: /demos/mini-audit/

Declared by demo.ts

A page declaration: page-head → prose-section → related → cta-section. Open associated page (declared association; rendered-page verification is separate).

Declared composition; rendered page verification is separate.

Do: /demos/audit-explorer/

Declared by demo.ts

A page declaration: page-head → prose-section → related → cta-section. Open associated page (declared association; rendered-page verification is separate).

Declared composition; rendered page verification is separate.

Do: /demos/agent-check/

Declared by demo.ts

A page declaration: page-head → prose-section → related → cta-section. Open associated page (declared association; rendered-page verification is separate).

Declared composition; rendered page verification is separate.

Do: /demos/agent-replay/

Declared by demo.ts

A page declaration: page-head → prose-section → related → cta-section. Open associated page (declared association; rendered-page verification is separate).

Declared composition; rendered page verification is separate.

Do: /demos/autonomy/

Declared by demo.ts

A page declaration: page-head → prose-section → related → cta-section. Open associated page (declared association; rendered-page verification is separate).

Declared composition; rendered page verification is separate.

Do: /demos/before-after/

Declared by demo.ts

A page declaration: page-head → prose-section → related → cta-section. Open associated page (declared association; rendered-page verification is separate).

Declared composition; rendered page verification is separate.

Do: /demos/layers/

Declared by demo.ts

A page declaration: page-head → prose-section → related → cta-section. Open associated page (declared association; rendered-page verification is separate).

Declared composition; rendered page verification is separate.

Do: /demos/ops-quarter/

Declared by demo.ts

A page declaration: page-head → prose-section → related → cta-section. Open associated page (declared association; rendered-page verification is separate).

Declared composition; rendered page verification is separate.

Do: /demos/repo-change/

Declared by demo.ts

A page declaration: page-head → prose-section → related → cta-section. Open associated page (declared association; rendered-page verification is separate).

Declared composition; rendered page verification is separate.

Don't: An unregistered block

Declared by demo.ts

A page declaration: page-head → prose-section → related → cta-section. No captured page instance is attached.

Pages compose only registered templates.

Don't: Two fields touching

Declared by demo.ts

A page declaration: page-head → prose-section → related → cta-section. No captured page instance is attached.

A field is always followed by cotton.

Rules

Rule	Why	Check
Built pages follow: header, page-head, prose-section, related?, cta-section, footer.	A declared composition is what makes the page checkable and the site consistent.	Automated: scripts/site/system/check-pages.ts (check_composition per page)

API

No props.

Contract details

The full contract: identity, anatomy, variants, states, tokens, layout, motion, accessibility, content, tests

Identity

Aspect	Value
Id	`page-demo`
Layer	Pages
Category	page
Owner	Site system lead
Status	stable
Version	1.0.0
Source	`apps/showcase/site/system/pages/demo.ts` (private repository; the contract and the render function are this one module)

Version	Date	Change
1.0.0	2026-10-26	Demo page as one module: its markup moved out of the page builder (scripts/site) into the system.

Use when

Paths matching /^\/demos\/[a-z0-9-]+\/$/. Why: Every page of this kind is composed the same way, so readers learn it once.

Do not use when

For a page with a different job. Why: A new kind of page gets its own declaration and review.

Anatomy

Part	What it is
1	page-head
2	prose-section
3	related (optional)
4	cta-section

Made of: header, page-head, prose-section, related, cta-section, footer.

Used in: pages directly.

Variants

Variant	When	Why
default	Wherever the page declaration places it.	One shape per job keeps pages predictable.

States

State	Rendered or not applicable
default	default
hover	Not applicable: The demo page is not interactive, so it has no hover state.
focus-visible	Not applicable: The demo page does not take focus; links and buttons inside it carry their own focus ring.
active	Not applicable: The demo page cannot be pressed.
disabled	Not applicable: The demo page has nothing to disable.
loading	Not applicable: The demo page is rendered at build time and is complete when the page loads.
empty	Not applicable: The demo page is not rendered without content; the builder skips it.
error	Not applicable: The demo page shows no data that can fail.
current	Not applicable: The demo page has no current item.
visited	Not applicable: The demo page is not a link.
expanded	Not applicable: The demo page does not open or close.

Tokens

Part	Token
page.ground	`--cotton`

Layout

Aspect	Value
breakpoints	Required review at 390, 768, 1024 and 1440 px; execution is not implied by this declaration; columns stack under 768 px; the wrap keeps a 16 px gutter on phones.
wrapping	Text wraps; nothing scrolls sideways.
textExpansion	Japanese runs 20 to 40% longer; headings break between phrases (jaBreaks) and blocks grow downwards.

Spacing and rhythm

Aspect	Value
internal	Each template's own padding.
external	None.
rhythm	Field, cotton, field: never two fields touching; the woven edge at each join (D-SITE-002, D-SITE-003).

Motion

Aspect	Value
None	No intrinsic element animation. The optional claude-entrance consumer profile may translate below-fold structure once (20px, --dur-weave, --ease-enter, --stagger); reduced motion disables it. This preserved baseline entrance is separate from element playback.

Runtime and reuse

Render-only element; mount any registered child enhancements separately. Preserve required Site CSS, fonts, responsive and locale rules from nativeElement.

Accessibility passport

Aspect	Value
role	a landmark or list, as stated in its parts
name	Its visible text
keyboard	Links and buttons inside, in reading order.
focus	The --focus ring on every link and button inside.
screenReader	Read in source order; decorative weaving is aria-hidden.
contrast	Ink on cotton 14:1; text on every dye field 4.5:1 or better (checked by check-brand).
target	Links and buttons are 44 px tall.

Content

Slot	Length	Voice
page-head: demo claim	One claim within Page head limits; identify what the reader can try.	Describe the actual demonstration without implying client or production results.
prose-section: showcase frame and caption	One primary showcase with its honesty caption; related demos are optional before the closing action.	Name sample inputs, simulated services and unrun real-world behavior where applicable.

Good: “Try the mini audit on the labelled sample and inspect what each check found.”

Bad: “A simulated agent replay presented as a live client deployment.”

Japanese: These specific interactive demo routes are English. The Japanese demos overview uses its own existing composition; do not infer Japanese runtime output or translated demo controls from this declaration.

Icons and illustrations

None: this element uses no icon or illustration of its own.

Decisions and exceptions

Usage

9 uses across the built pages (measured by npm run site:system).

Tests

Aspect	Value
unit	tests/unit/site-system.test.ts: renders every do and don't example through the registry and checks the classes it owns
visual	Not yet: there are no screenshot baselines; the Library page is checked for sideways scroll at 1440 px by tests/site/system.spec.ts
a11y	tests/site/system.spec.ts: axe (0 serious or critical) on the element's Library page in light and dark
parity	scripts/site/system/check.ts: Library examples are rendered by the same render function the site imports

Figma

not-yet: The Loom Site Figma library is the last stage of the plan; this element is not mapped yet.

Start with a conversation about your system.

We read your system, show you what we found, and agree with your team what to fix first.

Book a conversation Start with a free health check