Analysis paralysis is a real problem every time you open a font picker with thousands of fonts. You can spend lots of time worrying about which font-size, color, or size to pick on every UI.

To make life easier, you should almost always rely on design tokens.

Design tokens are to designers, what variables are to developers. You can equate the definition of a variable in your head with that of a design token.

Design tokens = named reusable values = Variables

Variables and design tokens are essentially synonymous. A designer will likely utilize features in their design tool of choice to save predefined color palettes and styles. Sketch has color variables, Figma allows you to save styles, and in the same way a developer should save the definitions of a color palette as variables. This type of reuse keeps designs consistent, and to cement that idea into a rule remeber this:

Consistency is key!

Design tokens keep you from repeating values all across a codebase, or guessing at new values that start to clutter up a design and make it harder to maintain over time. Instead of reaching for a color picker, reach for colors in your design system.

Consider the following example (hover over the values on the right to compare custom values to named ones):

In the worse example, multiple different colors and sizes start to make the design less consistent. Spacing doesn't match up and colors are just slightly off.

Design tokens force you to choose colors and spaces from a limited set, and as a result, force your design to remain consistent.

Look at how simple the set of design tokens looks when we pull out the colors and sizes used in each and display them side by side. Similarly, the composition in the pricing cards also looks simpler.

Simple inputs = simple output.

Design tokens are the smallest piece of the design system, like an individual LEGO block, or a single puzzle piece.

Fewer LEGO blocks feels like a constraint, but in creative pursuits constraints can help you be more creative and reduce the cognitive overhead you might have in choosing between arbitrary sizes or naming new colors or sizes. In truth, very few people will really notice a difference of a few pixels or rems in an actual interface, and a developer that can rely on an already named token saves time not having to find the right naming convention for each color.

Additional resources

Guide to Design Tokens

A reference from Invision on using design tokens

Resources

Nord Design System's tokens

The tokens used by Nord for its design system

Examples

Tailwind CSS Theme

A popular CSS solution that relies on design tokens

Examples