skip to content

Design tokens

We use design tokens to capture our design decisions around foundations like colours, spacing and typography, making them easier to maintain and use across Springer Nature's products and services.

What are design tokens?

We use design tokens in place of 'hard coded' values to store and distribute styles.

For example, instead of using hex colour codes, we use tokens that reference those hex codes.

When we change a colour, we update the tokens and share that change to all the places that are using it.

Component tokens define how we use a style in specific components.

Diagram showing a three-level token hierarchy: the literal token color-cerulean-700 stores the color value #025E8D; the alias token status-information-foreground gives that value semantic meaning; and component tokens status-message-info-icon-color and badge-info-color apply it to specific components. Examples show the shared color used in an information-message icon and a “Technical checks” badge.

Token types

Our design tokens have 3 layers.

Literal tokens represent the values we use, the what.

Alias tokens include why or how we use a token.

Component tokens define how we use a style in specific components.

  1. Hex code: #17758C
  2. Literal token: $t-l-color-cerulean-700
  3. Alias token: $t-a-status-information-foreground
  4. Component tokens:
    • c-badge-info-color
    • c-status-message-info-icon-color
  5. Components:
    • Status message
    • Badge

Go to the design tokens page in the sandbox

Help improve this page

If you have a question, idea, or suggestion to improve this component or guidance, post in the Ask Elements Teams channel.