Design tokens

Learn about the single source of truth to name and store design decisions in a Pigment application.

What are design tokens ?

Design tokens are name and value pairings that represent small, repeatable design decisions. A token can be a color, shadow or font style designed for a specific need.

For example, instead of choosing one of many shades of green for an icon, we can apply a design token that is consistent with all similar usages across our application.

The tokens described on this page came from Pigment's base theme.

How to use them ?

Pigment's design tokens are defined in the preset for Tailwind CSS and exposed as CSS custom properties (aka CSS variables), meaning you can use them with any styling solution.

Since Pigment is a Tailwind-first library, all the tokens described on this page are available in Tailwind's utility classes.