Design Tokens

What are Design Tokens?

Design tokens are the smallest indivisible units of a design system. They are named entities with immutable values that embody visual design attributes and serve as the foundation for UI development.

How Do Design Tokens Streamline Process?

Design tokens are another tool for designers and developers to more effectively collaborate and maintain consistency across UI solutions. They help all contributors to “speak the same language”, minimizing confusion and elemental translation. For example, using the token Color Blue 700 is a term that is understood by both designers and developers, whereas #1273e6 or rgb(18, 115, 230) may need additional translation for implementation.

Use of tokens also creates an efficient solution to the “find and replace” time-waster that occurs any time an attribute is redefined. If a decision is made to give Color Blue 700 a different value, a single update to the token definition will propagate the change across the entire design, minimizing the risk of mistakes or missed code replacements.

Use Matchbox Design Tokens in Development

Tokens from Matchbox are available in three formats: CSS, Scss, and JavaScript.

CSS

Matchbox provides CSS custom properties which you can access in vanilla CSS.

@import '~@sparkpost/design-tokens/dist/index.custom-properties.css';

.my-element {
 background: var(--color-blue-700);
 box-shadow: var(--box-shadow-400);
}

CSS Classes

Matchbox provides a CSS utility library which you can use in your HTML.

View the README to get started.

<div class="background-blue-700 px-200">
  <p class="font-size-200 line-height-200 color-white">Paragraph</p>
</div>

Scss

Matchbox provides Sass functions to retrieve token values.

@import '~@sparkpost/design-tokens/tokens.scss';

.my-element {
 background: color(blue, 700);
 box-shadow: box-shadow(400);
}

JavaScript

Tokens are also available to JavaScript-based applications in JSON format.

import { tokens } from '@sparkpost/design-tokens';

function Component() {
 return (
   <div
     style={{
       background: tokens.color_blue_700,
       boxShadow: tokens.boxShadow_400
     }}
   />
 );
}

Where to use Design Tokens

Matchbox uses design tokens for color, typography, spacing, and elevation. For a complete list of all tokens and their corresponding API code, visit the Token Reference List.