Fleet-wide cascade tokens. Both modes share the same token names; only values swap. Every component below resolves color through these tokens — no hardcoded literals.
Semantic colors for state (warning/danger/info/accent). Cold-pair (--c-accent) provides viz contrast without introducing a third hue family.
Four-token ladder for data series. Hard cap at four — beyond that, switch primitives.
Type scale resolves identically in both modes. Inter for headlines/display; JetBrains Mono for body, code, labels.
html[data-mode="amber"] { --c-primary: #b45309; }Four tiers. Dark uses neutral shadows; amber uses warm-tinted shadows. Token swap only — same z-axis hierarchy.
Three variants × three states. Hover transitions identical in both modes.
Geometry-stable across modes per constellation-apollo-027 carve-out. Color carries feedback, not size.
Hairline borders, hover highlight, tabular-nums for values.
| Component | Source rule | Tokens | Mode parity |
|---|---|---|---|
| Stacked Oscilloscope | viz-primitives.md § 1 | --c-primary, --c-border | 100% |
| Compact Card Row | section-patterns.md | --c-bg, --c-border | 100% |
| Triad Modal | narrative-patterns.md | --c-bg-raised, --elev-3 | 100% |
| Growing Graph | viz-primitives.md § 5 | --c-primary, --c-primary-glow | 100% |
| Tab Nav | narrative-patterns.md | --c-bg-raised, --c-primary | 100% |
Default boas.dev section. Dense, scannable, hairline-divided.
Disclosure-style expansion. Summary bar visible always; body opens on toggle.
CSS-radio navigation. No JS. Static HTML compatible.
--c-bg, --c-primary), status (--c-warning, --c-danger, --c-info, --c-accent), viz ladder (--viz-1..4), motion (--t-fast, --tempo-scale), elevation (--elev-0..3).Three primary stories per surface. Each opens a focused modal with --elev-3 surface. CSS-radio mechanic — no JS.
The cascade vocabulary is the contract. Components consume --c-* tokens; modes provide values. No component knows what mode it's in — and that's the point.
Mode mechanic is a single data-mode attribute on <html>. localStorage persistence + prefers-color-scheme initial resolution. Toggle flips live without reload.
Dark = phosphor terminal, amber = ochre placeholder pending re-imagination. Both honor the same component contract — paint-only difference.
Lightweight per-row disclosure. Multiple can be open simultaneously.
Animated cursor sweeps left-to-right; spikes ignite as cursor crosses. 8s period. Identical timing in both modes.
Continuous rotation + pulsing core. Both modes run identical motion.
Four parallel rows of swappable labels on staggered timers. Active flash uses --c-primary.
Progressive node + edge reveal with hub pulse. Same animation in both modes.
Each primitive at L3 in both modes. Cells use the dual-mode glitch token cascade (--glitch-*).
Toggle between dark and amber above. Every component on this page renders functionally identical — same DOM, same animations, same timing, same structure. Only paint (color, glow, elevation tint) swaps via --c-* token cascade.
If a component shows behavioral drift between modes, that is a bug to fix in the cascade — not an intended difference.
Aesthetic re-imagination pending. Current amber palette is placeholder per operator directive 2026-04-27 — paper conceit removed; new amber identity to be designed.