designtokens.fyi

© Design Systems House

Token

Short for “design token”, this is a design decision encoded into a name, usually made with a human readable schema. These are similar to variables in programming languages except they are primarily meant to communicate design concepts opposed to holding any data.

Examples

color.red.500
surface.elevated.bgColor
checkbox.checked.bgColor

The above tokens are composed of parts; levels and delimiters. Each token above suggests it may belong to a separate tier of tokens based on a schema of increasing specificity. When a group of choice tokens are assigned option tokens, this creates a theme. A theme is applied based on an intended expression or mode.