Breaking down design tokens for Colors, Type, Spacing, and Motion

Design tokens are possibly the next big thing in tech-based design. Some companies are doing a good job, but others are still struggling to grasp it. Unfortunately, the ones working with design systems and system tokens are companies that decided to replicate or get inspired by Figma-based UI Kit and not an actual design system at play. One significant difference between a UI kit and an existing design system is that the design-ops teams ruthlessly trim down a design system. It’s not easy to do so, and a lot of governance battles and brainstorming discussions get made in trimming down DS foundational components. But it is well worth the effort.

On the other hand, UI kits don’t aim to do any of it. Instead, a curious mind often designs it, that is, exploring all variants, creating a follow a generalistic approach rather than a narrowed down rule-based approach. Hence the difference between the two.

In this article, I will explain an approach for a trimmed-down version of the design system. One that can fit most of the startups and big companies out there. I will discuss Colors, Typography, Spacing, and Motion tokens for the scope.

As a general approach when carving design systems or their corresponding tokens, try to specify a reason for any new foundational/atomic parameter to exist from the start. It will help to keep you disciplined and razor-focused on constantly questioning the atomic components from a WHY do we need it? approach.

Colors

We will need to break down colors into different types before starting. So again, don’t think about the colors, but think about the various reasons we need colors for the DS.

1. Primary — The color will get used as your brand color. For significant actions and accent-colored components, the color will get utilized intensely.
2. Neutrals — These will be your greys, blacks, and white variants.
3. Tertiary — To improve the usability of the interfaces, we’ll need to have a small range of green and reds in the palette.

Let’s use the material color generator to use as our example. But we won’t be using all the colors listed in the chart. You can refer to the color palette on Material UI’s website. So I will be sticking to generic color names like blue-100.

https://materialui.co/colors/

In the following example, we can assume blue-600 as the primary color and work on the palette around this shade.

Another valuable website for mapping your ideal color palette 👇

🔷 Blue (3x)

blue-100 // palette.primary.light

Token naming:
$color-background-dropdown-item-filter-match
$color-background-item-selected
$color-background-status-info

Since blue-100 is lighter, it can get used as background shades for text or object selection. In addition, it can act as the background color of an informational item.

blue-300 (exception)

Blue-300 will act as the background color of enabled elements in the disabled state. Like a checked toggle in a disabled state, for example.

Token naming:
$color-background-toggle-checked-disabled

blue-600 // palette.primary.main

Blue-600 must be checked for accessibility since it will act as our primary color for buttons, essential form components like radio, checkbox, and toggles in checked states. As an accent brand color, we can use it in other elements like notifications, borders, focus states, selections, user guide pins, text color, active breadcrumb links, and icons.

Token naming:
$color-background-button-primary-default
$color-background-control-checked
$color-background-notification-blue
$color-border-button-normal-default
$color-border-item-focused
$color-border-item-selected
$color-border-status-info
$color-text-accent
$color-text-button-normal-default
$color-text-dropdown-item-filter-match
$color-text-link-default
$color-text-status-info

blue-800 // palette.primary.dark

Being on the darker side of the spectrum, blue-800 can act as the primary color of actionable components in active and hover states. The components can include buttons, link texts, and icons.

Token naming:
$color-background-button-primary-active
$color-background-button-primary-hover
$color-border-button-normal-hover
$color-text-button-normal-active
$color-text-button-normal-hover
$color-text-link-hover

🟢 Green (2x) + 🔺 Red (2x)

We’ll be using green and its shades everywhere for success state.

green-100 // palette.success.light + red-100 // palette.error.light

Use green-100 as the background color of an item in the success state. For example, success alerts. Similarly, red-100 is the background color of an item in an error state.

Token naming:
$color-background-status-success
--
$color-background-status-error

green-600 // palette.success.main + red-600 // palette.error.main

green-600 can be the background, borders, and main color for text and icons in the success state. Similarly, we can use red-600 in warning and error states of alerts, text, and icons.

Token naming:
$color-background-notification-green
$color-border-status-success
$color-text-status-success
--
$color-background-notification-red
$color-border-status-error
$color-text-status-error
$color-text-status-warning

🌐 Grey+White (9x)

grey-100

We’ll continue to follow the pattern and use grey-100 for hover elements.

Token naming:
$color-text-interactive-inverted-hover
$color-text-notification-default
$color-background-dropdown-item-hover

grey-200

Grey-200 can get used for disabled elements and dividers.

Token naming:
$color-background-button-primary-disabled
$color-background-input-disabled
$color-border-button-primary-disabled
$color-border-divider-default

grey-300

Grey-300 can get used as the background color of the disabled form control. For example, background fill of a disabled radio button and checkbox or the dismiss icon button in a flashbar.

Token naming:
$color-background-control-disabled
$color-text-home-header-secondary
$color-text-interactive-inverted-default

grey-400

Grey-400 can get used for the border color of disabled state components like a standard button in a disabled state. Further, we can utilize the color for text values in disabled components.

Token naming:
$color-border-button-normal-disabled
$color-border-input-default
$color-text-input-disabled
$color-text-interactive-disabled

grey-500

Grey-500 can get used as the default border color of form controls like radio buttons, checkboxes, and dropdown items.

Token naming:
$color-border-control-default
$color-border-dropdown-item-hover
$color-border-status-warning
$color-text-counter

grey-550

Grey-550 (#5f6b7a), being slightly darker and more accessible than Grey-500, can get used in the text of empty states (inactive, loading text, & icons) and as a secondary text color in form fields and controls like in the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, and toggles.

Token naming:
$color-text-empty
$color-text-form-secondary
$color-text-input-placeholder
$color-text-status-inactive

grey-600

Grey-600 can get used as the color of the text secondary to base text everywhere, like in page and container descriptions.

Token naming:
$color-text-body-secondary
$color-text-group-label
$color-text-heading-secondary
$color-text-interactive-default

grey-900

Grey-900 will be the default color of text, labels, icons, headings, non-form elements, and body content.

Token naming:
$color-background-home-header
$color-text-body-default
$color-text-dropdown-item-highlighted
$color-text-form-default
$color-text-heading-default
$color-text-interactive-hover
$color-text-label

White

Being a pure #FFF shade, white will get used everywhere as the default background unless specified.

Token naming:
$color-background-container-content
$color-background-container-header
$color-background-control-default
$color-background-dropdown-item-default
$color-background-input-default
$color-background-layout-main
$color-background-status-warning
$color-foreground-control-default
$color-foreground-control-disabled
$color-text-button-primary-active
$color-text-button-primary-default
$color-text-button-primary-hover
$color-text-home-header-default