Playground
Move a token. Watch everything move.
This is the whole argument for a token layer, made touchable: nothing on the right hardcodes a value, so changing one variable re-themes a screen, a chart and a chat at once. The contrast check runs live — the same arithmetic that gates the build.
Accent
Mango means “the next action”. Change it and every filled button, chart series and progress bar follows — because none of them owns a colour.
Contrast, checked live
The same 3:1 and 4.5:1 thresholds npm run check:contrast
enforces. A pale accent fails as body text and passes as a button, because the ink label carries it.
Form
Density is a cognitive-load control, not a style: marketing needs air, a screen you work in all day needs proximity.
Motion
Turning motion off is a complete alternative rendering, not a downgrade — nothing here carries meaning that only movement conveys.
Today
This week
One screen, six components, zero hardcoded values. Everything above follows the panel.