Design tokens

The Elements design system uses design tokens to make our design foundations, things like colours, spacing and typography, easier to maintain and use in Springer Nature’s digital products.

What are design tokens?

Design tokens are used in place of hard coded values to store and distribute foundational styles.

For example, instead of using the hex colour code #f58220, we use a design token called "t-a-palette-information-orange", which would refer to that hex code.

This means that if we ever wanted to make a change to the exact orange we use, we can update it in our main tokens file, and easily share that change out to all the places that are using it.

The big benefit of design tokens is that they can be used in multiple different platforms.

For us at Springer Nature, this means we can use tokens across our web platforms and transpile them into the form of Sass variables, Sass maps, CSS Custom Properties, JavaScript Arrays, and so on, as needed.

Eventually, we can also use tokens in a design tool, like Sketch or Figma. This keeps prototyping styles aligned with Elements and our websites.