Overview

Global design decisions stored and distributed in platform-agnostic format

Common terminology

Term

Descripion

Design token

A design decision stored as JSON variable with associated value and description

Type

Lists the token type - has to be a supported type defined by W3C DTCG standard or Tokens Studio.

Raw value (unresolved value)

Value that stores the design decision in its fullest possible form.

Value

Final value that is consumed once tokens are transformed.

Description

Optional explanation for the token and its intended use.

Extension

Some tokens can include specific extensions that alter their value in specific way, f.e. adding modifier to mix two colors together in certain ratio.

Base tokens

Tokens only used as references in other tokens. F.e. radius.base would not be used on its own, but rather inside the value of radius.xl token.

Primitive tokens

Tokens that store decisions that are not connected to any particular use case but are prevalent in the system. F.e. spacing.2.

Semantic tokens

Tokens that adhere to platform’s taxonomy and are connected to one or multiple use cases. F.e. color.background.primary.

Token set

Group of tokens that follows the same filepath.

Themes

Groups of tokens and/or token sets that collectively represent a big global change or “mode”. F.e. Dark theme.

Tokens Studio

Figma plugin with its own frontend UI and tools to manage design tokens in a more powerful way compared to regular design tools.

Style Dictionary

A build system and translation tool we use to build packages for each platform.