Live, owner-facing previews of every pattern in the catalog — the diagram patterns, the Class B artifact templates, and the surface-shell page pattern this gallery itself consumes. It also links the semantic foundations' visual keys and contracts.

owner preview >> do not vendor

Diagram patterns
Class A // static

diagram-static-H

Horizontal cascade tree: a root fans right into sections, then nodes // group boxes + held + legacy states.

Class A // static

diagram-static-V

Vertical centered spine: a top-anchored trunk drops through centered stages // for linear top-down structure.

Class A // static

diagram-static-SEQ

Sequence / stepped chain: an ordered left-to-right progression of stages with per-step notes.

Class A // static

diagram-static-FLOW

Convergence flow, shown as topology alone or with node inspection + pinning. Both previews use the same model and full diagram chrome.

Class A // static

diagram-static-peer

Equal peers on a triangle or a square, joined by directed and neutral relations // the letters and what each relation means belong to the instance.

Class A // interactive

diagram-interactive-spine

Interactive IA state spine: a pan/zoom spine whose nodes carry an inspector + Spectral State color // color encodes state only.

Surface // interactive diagram

diagram-interactive-radial

A live radial map of a containment hierarchy. Consciousness + free will is a captured research reference; Vellmark parks is a synthetic example. Both run the same pattern.

Class B // project-output artifacts
Class B // document

output-artifact

The Class B output-artifact document template, on the document register: title + metadata + sections + provenance footer // line intensity for its own rules.

Class B // sealed interactive archive

message-archive

A sealed conversation archive for two-party + group conversations, with offline search + year navigation. Participant color encodes identity, not state.

Surface patterns
Surface // page shell

surface-shell

Shared page shell for a family of public surfaces: an identity-mark slot, surface identity, lede, an optional status badge, an optional control slot, the rule that closes the header, and the flush-right footer that closes the page. Header left, footer right — the reading path opens and closes where the eye does. It owns the chrome around the payload and never the payload. It inherits Tier 1 + Tier 2 but hard-codes no consumer's Tier 3, so a consumer fills the slot with its own mark. This gallery, the repo root, and the style guide all consume it — the preview is its Tier-3-neutral specimen. Not Class A and not Class B.

Semantic foundations
Primitive // state

Spectral State

The state of an architectural element: eight roles, seven neon hues on a 12-step wheel and a neutral field, calibrated per theme. Opt-in, and never general UI color.

Profile // under Spectral State

Evidence State

What current evidence shows about an assumption: five roles, three reused from Spectral State by reference and two of its own. A sanctioned profile, not a separate palette.

Composition // annotation

Review Semantics

Review state in reviewed documents: Review State, a sanctioned profile under Spectral State, and inert marks that attach review, evidence, state and basis to the content they concern. Opt-in, on the document register.

Primitive // function

Three Functions

Which invariant function an element performs: legislative, executive or judicial. A sibling to Spectral State, not a profile under it, because function is not state.

Live previews follow system light/dark appearance // append #light or #dark to any preview URL for a fixed-theme check.

Previews under _preview/ are generated by tools/gen-pattern-previews.mjs from the canonical shells // re-run it + git diff --exit-code patterns/_preview/ to confirm no drift. Each preview opens from this gallery or directly via file:// from a clean clone — no server, and no local _dsa-tokens mirror: source, helper, engine, styles, and exporter all resolve from the canonical pattern bundle, with DS-root tokens and fonts. This gallery holds two independent relationships, and they carry different maintenance verbs.

This live page consumes the canonical assets it references — surface-shell.css for its own chrome, colors_and_type.css, and the wordmark pairings — by direct same-repo reference, and is hand-maintained. It is never regenerated: when an owner contract changes, verify this page's rendering, landmarks, interaction, and behavior.

The generated preview set under _preview/ is what this gallery's pattern cards catalog. It is regenerated from the canonical pattern sources — re-run the generator, then pass --check, generated-set parity, and visual verification whenever an adopted pattern changes.

Both are first-party same-repo consumption: no copied bundle, no downstream vendor obligation.

The semantic foundations link their canonical visual keys and contracts at the repository root. They have no generated preview, and a link here is not a consumption relationship: each key's own relationship is recorded in CONSUMERS.md.