Newskit Logo

Foundation

Design tokens

Design tokens are the design decisions of the design system — specifically, they are named entities that store visual and functional attributes. They are used in place of hardcoded values (such as hex values for colour or pixel values for spacing) to maintain a scalable and consistent system for UI.

Literal vs contextual tokens

Literal tokens

These add a layer of abstraction to hardcoded values. Rather than referencing a colour e.g.#5E44E4, it is ‘tokenised’ to purple050. Now, if the hex code needs to be changed to a different shade of purple050, for whatever reason, rather than finding everywhere the hex code is used in the code, it can be updated in one place.

Contextual tokens

These add a further layer of abstraction and assign the token to a specific purpose. In the example above, the purple050 token is given context - it should be used in typography as the brand colour - and is assigned the inkBrand token.

Using contextual design tokens allows us to do things like customising the way our components look app-wide. When considering whether to use a contextual or literal token, consider: would you want the value you’re using to change if you changed the theme? If yes, use a contextual token.

Naming convention

To ensure that the tokens are clear to read, flexible and extensible NewsKit tokens have a clearly defined naming convention.

All tokens are written using the camelCase convention e.g.lineHeight.

Where the token maps to a numerical series we suffix numerically with three digits and in increments of 10. Tokens follow the naming convention: {Property}{Series}

For example:

body010,
body020,
fontWeight010,
fontWeight020,
header010,
header020,
inkBrand010,
inkBrand020,

Presets

Design tokens are grouped into Presets when constructing components. This creates a simple way to customise particular aspects of a component. Read more about Presets.

Iconography

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.