UPGRADED INTERACTIVE DESIGN
This page is the upgrade, not a description of one. Every component, token and interaction pattern below is built with the proposed system and running live. If a pattern is hard to use here, it should not ship in the White Paper.
Groups
Target
Checks
Dependencies
The Token Layer
One source of truth for every visual decisionThe current White Paper re-declares spacing, radii, easing and control heights as literals in dozens of component rules. The proposal collapses these into named tokens, so a change to the tap-target minimum or the easing curve propagates everywhere at once. This is the single highest-leverage change in the upgrade.
Accessibility
Measured, not assertedA public research proposal will be read on phones, in bright sun, by people using screen readers, and by reviewers who are not CSS experts. The contrast figures below are computed live from the resolved token values of the active theme, so the audit follows the theme rather than documenting a single case.
Body text, secondary text, accents on surface, and semantic colours against the card background. The 4.5:1 threshold applies to normal text and 3:1 to large text and non-text UI boundaries. Values below threshold are marked as failures rather than quietly shipped.
Motion, Print & Reach
The document must survive being printed and being reducedAn archival white paper is a print artefact first. Three guarantees are proposed, all of them active on this page.
Every transition and animation is disabled under
prefers-reduced-motion. Reveal-on-scroll content is
forced visible, so nothing can be trapped in an invisible state.
Chrome is stripped, cards avoid page breaks, collapsed accordions are forced open, and external links print their target. The document becomes a clean PDF without a second file.
Every interactive control carries a 44 px minimum height via the
--tap token, satisfying WCAG 2.5.5. Small visual
labels no longer imply small hit areas.
Use your browser print preview on this page to see the print stylesheet applied, or enable reduced motion in your OS accessibility settings and reload to see the motion layer collapse.
Performance & Delivery
Static-host ready for CloudflareThese pages are served from Cloudflare as static files. The proposal keeps that constraint explicit rather than quietly adding a build pipeline.
Component Specimens
Live, keyboard-operable, screen-reader labelledEvery control below is functional. Tab to them, operate them with the keyboard, and use the disclosure patterns the way a screen-reader user would.
All meet the 44 px minimum target. Active state is communicated by fill, not colour alone.
Each chip carries a text label, so the tier is never encoded by colour alone.
Announced through an aria-live region rather than a silent overlay.
A 15% root-zone exceedance over the paired pre-treatment control at p < 0.05 abandons the in-situ architecture entirely. The control exposes aria-expanded and the chevron rotates, so state is available to assistive technology.
Used for claims that survived reconciliation against the source document.
Used for contextual dependence, modelled-not-surveyed content, and unresolved assumptions.
Reserved exclusively for absolute falsifiers and verified defects. If everything is critical, nothing is.
Used for provenance, method and cross-document alignment statements.
Three Tier A, one Tier C. The Tier C claim is optional by design and terminates without halting the programme.
Rollout & Trade-offs
What is gained, what is spent, what is deferredThe token layer adds a small indirection between intent and rendered value, which makes the existing CSS marginally harder to read for anyone editing it cold. That is a real cost and it is accepted: the current file already repeats dozens of hard-coded values, and the duplication is the larger maintenance hazard. Nothing in this proposal requires a build step, a bundler, or a server — which is what keeps it deployable as static files on Cloudflare.