Theme system prototype
Clarity that holds in every condition.
A complete light and dark token system, with every component specimen an integration team needs to graft this into the production page.
Component specimens
Every live component the production page uses, styled entirely from the tokens above. Tab through this section to check the focus ring in both themes.
Tag row
- Tokens
- Contrast
- Effects
- Focus states
Stat row
- 48Tokens defined
- 4Themed effects
- 2Themes audited
Hairline card, elevation on hover
Signal monitoring
A hairline border plus a neutral shadow, no colour glow at rest. The shadow strengthens on hover or focus.
Read the full token listToken and swatch board
Every contract token, read live from the resolved CSS custom properties and rendered as a swatch with its hex value. Toggle the theme control above to see both sides.
Contrast report
Computed live in JavaScript from the resolved token colours using the WCAG relative luminance formula. Nothing here is a hardcoded number.
| Pair | Swatches | Requirement | Ratio | Result |
|---|