Token Anatomy - Type

The type of Design Token defines which category of design property this decision belongs to, or when it can be applied.

Type = Design property

For example, the system could interpret a Token with a Value of #22c55e applied to a text layer as a string property to create a text element or a color hex code.

When we define a Token Type of color alongside the Value, it's much easier to communicate that this design decision is to be applied when the color of a text element should be green.

Token Types for design properties

There are many 'Official' Token Types are listed in the W3C Design Tokens Community Group (DTCG) Specifications for Design Tokens.

Most often, typematches a design property. For example, the type of Color can be applied to any design element requiring color.

The DTCG Specifications define how the Token is written depending on its type. For example, a Typography Token requires several design decisions to be composed into a single token, whereas a Color Token does not.

Tokens Studio supports 24 unique Token Types, and the DTCG is constantly adding new Token Types to the specification.

If you are ready to jump into Tokens Studio, this guide will walk you through the nuances of each Token Type.

Up next - Value

Next, let's explore the value of a Design Token as this anatomic property depends on the Token's Type.