Primitive tokens map a value (hex code or pixel value) to a generic name, which can be used almost anywhere but has no meaning/context in use. Primitive tokens are not meant to be used in high fidelity / delivery for implementation.

When we think about primitive tokens, we group them into two categories, “global” aka brand agnostic, and “brand” aka brand specific. Global tokens can serve as placeholders when we don’t have brand values and brand values are specific and defined by the brand.

Theme tokens are role based tokens that map based on a brand’s visual language. Roles are the first step to creating meaning with our values and allow us to curate design decisions specifically through the lens of a brand.

Semantic tokens are more specific in nature and are contextual. This type of token applies design decisions directly to a design element within context of it’s intended use. Semantic tokens can be informed by global primitive tokens or theme tokens.

If the token must be dynamic or swappable to different brands, then we must use a theme token as the reference. If we have a static color, often the case with neutrals, we may use a global primitive token for this use. How we approach utilizing global primitive tokens as references for semantic tokens depends on what the intended use is with the token.

Component tokens are by far the most specific in nature and are rarely used. This type of token allows the greatest amount of control, which could be meaningful for us when we need that level of clarity. However, component tokens are not reusable. We utilize these tokens when we need to create overrides or we need to support additional clarity in design with interactive states.