Opens in a new tab

Decide when a value deserves a token

Tokens, the named values in your design system, are useful, but turning every number into one can make a system harder to use. A token for a 13px gap that appears in only one place is one more name to remember and one more option to scroll past.

I like to use a simple test: if a value appears in three or more places, or you’d want to change it everywhere at once, make it a token. For example, your brand color and your standard section padding clearly qualify. A one-off value tied to a single component, like the exact width of a decorative shape, should usually stay in that component’s styles.

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