Layer stack · Idiomatic composition

Tokens become pages become flows

Abstraction rises from Subframe theme values through semantic roles, wrappers, and layouts into design-lab screens — then FLOWS[] stitches screens into JTBD journeys.

Composition layer stack Six stacked layers from Subframe theme up through synced primitives, semantic tokens and wrappers, layouts, screens, and the focal Flows JTBD layer. ABSTRACTION ↑ BIND-TOKENS ↓ L5 Flows (JTBD routes) FLOWS[] · /flow/* · ProductShell L4 Screens apps/design-lab/src/screens L3 Layouts & compositions AppShell · three-pane · PlanPanel L2 Wrappers + semantic tokens libs/design · convoy-tokens.css L1 Synced primitives packages/ui/src/ui · read-only L0 Subframe theme (values) brand-* · type scale · radius STABLE / SANDBOX TIERS CUT ACROSS L2–L3 · DESIGN-LAB IS THE ONLY SANDBOX CONSUMER

bind-tokens

Two authorities

Subframe owns values (L0/L1). libs/design owns semantic names (L2). Every semantic token must var() to a primitive — never restate a literal.

check-catalog

Provenance at each layer

SYNCED-PRIMITIVE (L1) · CONVOY-WRAPPER (L2/L3) · SPECIFIED-UNBUILT / PROPOSED-NEW (provisional in sandbox, queued for L0 codify).

Factory

L5 is the product

A flow is not a screen. L5 sequences L4 screens across lifecycle stages for one JTBD, validated by trace-flow.

Convoy · DESIGN_SPEC §1 stages diagram-design · layers · dark brand skin