Design system
The tokens and component states this page lists, rendered by the real components and read out of the live stylesheet. Flip the theme in the rail and every value and ratio below follows.
How this page works
This page imports the components in src/components/ui/ and reads every value out of src/styles/global.css at runtime, so no number here can drift from what ships.
What it does NOT do is discover tokens or components on its own. The lists are maintained by hand in DesignPage.tsx: add a token or a component and you add it here too. A token listed here but missing from the stylesheet is caught and flagged; one that exists in the stylesheet and was never listed is invisible to this page.
Accent
One aqua accent. --accent-ink is the contrast-tuned pair for text on a light surface.
Categorical
Series colours. Never carry meaning in these alone; pair with a label.
Categorical (ink)
The same hues darkened until they pass as text. Use these for words, the plain ones for fills.
Surfaces
Lines and washes
Translucent. Shown and measured composited over --surface, which is what you actually see.
Text
Semantic aliases
What components actually reference. Each points at a token above. Fix a contrast failure HERE, not at the call site, or the fix reaches one page and not its peers.