Design Tokens

Access small, atomic values to build your own tooling.

All style definitions in the ADAPT Design System are derived from a number of atomic variables – we call these Design Tokens.

Theme built from tokens
Use tokens to build your own tooling

Theme built from tokens

The ADAPT Design System for React (ie. the library documented on this website) reads from a central theme file. This file is generated using inputs from these tokens.

We take these tokens and run them through a series of transformations to put them in the required format. If you were building a Figma plugin, a Bootstrap theme or even a Powerpoint template, you'd need to customise your transformations to work with their APIs.

Use tokens to build your own tooling

This is very experimental. Expect the structure of these tokens to change. We will version updates so you'll get notes on changes to each version.

If you're not able to use ReactJS, or perhaps you're not even working on a web project. No worries. You can still build your own tooling / theme generation and read from these design tokens.

yarn add @adapt-design-system/tokensyarn add @adapt-design-system/tokens

Now you have access to all of the above tokens.