Everything looked urgent
Separating primary action from danger, fixing fruit contrast, and making pill controls describe what they actually do.
The leaderboard had one visual problem that turned out to be three design-system problems. Primary buttons, errors, badges, and active tabs all leaned on the same red, so everything looked equally urgent. An audit found roughly 90 uses across 27 files, but the answer was not to replace one overused color with several new ones. It was to decide what each element means before deciding how much attention it deserves.
One accent, used deliberately#
The first decision round tested whether danger needed its own hue, whether lower-priority controls needed a second accent, or whether neutral treatment was enough. Three live leaderboard variants settled the second question: no new accent. The existing accent stays with the primary action, errors move to a distinct semantic color, and idle navigation, filters, dates, and labels use neutral surfaces, borders, and font weight. Time-sensitive gameplay status remains an explicit exception because it asks for attention now.
That distinction became a table in the design reference rather than another collection of page-specific fixes. The author chose the categories and their default weight, while the implementation applied them to the concrete surfaces under review. One bug became obvious as soon as the categories existed: a failed share action had been styled exactly like its primary button, because error and accent were literally the same token value.
Appearance exposed semantics#
The same review reached the recently restructured stats page, where several pill controls looked alike but did different jobs. Mode and time scope replace the rendered panel, so they are tabs. Language narrows the panel already on screen, so it is a pressed-button group. The shared component now requires callers to declare which behavior they mean, and emits matching roles and relationships instead of calling every row of pills a tablist.
The final verification covered more than snapshots: all four themes for fruit and heart contrast, accessibility trees for the nested stats panels, and focused tests for both control variants. Code review still found a missing accessible relationship and a stale assumption, which were fixed before merge. The useful hierarchy is now carried by color, weight, borders, and semantics together, leaving the primary accent to mean something again.