Web Standards Lab
This page documents the active `www` implementation contract: Open Props tokens, UI package primitives, product-art diagrams, and first-class dark mode.
Token contract
--bg-base - Page background and grid field.--bg-card / --bg-elevated - Reading surfaces and raised panels.--bg-code / --code-border - Code, devtools, route, and package diagrams.--text-primary / --text-secondary - Readable hierarchy in both themes.--brand / --on-brand - Primary command and link emphasis.--success / --warning / --info / --error - Roadmap, standards, reference, and failure states.Primitives
Commands use stable dimensions, token colors, and focus-visible states.
Inputs stay utilitarian and inherit the same Open Props token system.
Status labels and motion states are readable text first and color second.
Product art
Layout
Show routes, package graphs, code, browser contracts, or docs structure in the first viewport.
Buttons, cards, badges, panels, inputs, and visuals come from @openelement/ui.
Every page and shadow component must resolve through the same semantic tokens.