Design Tokens

Matchbox provides a library of tokens and guidelines that define the SparkPost product. These guidelines create a consistent and unified design language for any of SparkPost's frontend properties.


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

Tokens from Matchbox are available in a few formats – CSS, Scss, and JavaScript.

You will need to configure your environment to resolve CSS files from node_modules:

@import '~@sparkpost/design-tokens/dist/index.custom-properties.css';
.my-element {
background: var(--color-blue-700);
box-shadow: var(--box-shadow-200);
}

Or, you can also install the CSS variables directly via CDN:

<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/@sparkpost/design-tokens@1.0.0/dist/index.custom-properties.css"
/>

Install via NPM. You will need to configuring your environment to resolve Scss files from node_modules:

@import '~@sparkpost/design-tokens/tokens.scss';
.my-element {
background: color(blue, 700);
box-shadow: box-shadow(400);
// Two Sass utility functions are also provided:
font-size: rem(24); // Converts a pixel value to rems
line-height: em(30); // Converts a pixel value to ems;
}

Install via NPM. When using tokens in javascript, a meta object is provided with additional token usage information:

import { tokens, meta } from '@sparkpost/design-tokens';
function Component() {
return (
<div
style={{
background: tokens.color_blue_700,
boxShadow: tokens.boxShadow_400
}}
/>
);
}

Resources: