Opens in a new tab

Give states their own tokens

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.

George Wert
Created by George Wertgeorgewert.com

Get Free Design Lessons Every Monday Morning

Get Free Design Lessons Every Monday Morning

Three short lessons each Monday on a single design topic. They're written in plain language and give you ideas to use on your next site.

You're in!

Check your inbox for your first email.
Close