Buttons, links and inputs change when people interact with them. They have hover, active, disabled and error states, and each of those needs colors too. If you pick those colors by eye every time, every component can end up with a slightly different hover shade.
State tokens can fix this. For example, a token like bg-brand_hover holds the hover color for brand buttons, so every button that uses it darkens by the same amount. The same idea works for disabled and error colors. Once these tokens exist, new components react the same way as the old ones, with no extra decisions.











