Create Design Tokens for Colors, Font Sizes, and Whitespace Using styled-components

The first thing we need to do when we start a new project is to define all fonts, font sizes, colors, and spacing values, we’re going to use; because we want to make sure that our user interface is consistent across the project. These values are called design tokens or a theme, and they are the single source of truth for our “design decisions”.

In this lesson we’ll create a theme file (theme.js) with constants for colors, fonts, font sizes, spacing, border radii, etc., so these values are available to our components.

In a real project, we’ll need to talk to our designer, and probably do a design audit first, but for simplicity, we’ll pretend that we’ve done that before, and already know all the values.

There are many ways to define design tokens, like Sass or CSS variables, JSON file or a plain JavaScript object. We’re going to use a JavaScript object following a so-called Theme Spec, which defines the shape of the theme. Theme Spec is used by tools like styled-system, which we’re going to use to create primitive components in the following lessons.

We’ll use following libraries:

• styled-components

You can either use this lesson’s Git repository or install them manually in your project:

npm install styled-components

Useful links and documentation:

• Theme Specification