Introduction

Design tokens are the building blocks of your of the design-system to describe the visual appearance of your application. They can describe the colors, spacing, typography, elevation, icons, and other elements part of the design-system.

Design tokens were introduced in 2016 by Jina Bolton and Jon Levine at their Salesforce Lightning Design System talk.

The design-tokens package contains a collection of design tokens components.

yarn add @component-controls/design-tokens --dev

design-tokens comes with multiple design-tokens components that can be used out of the box to document your design system.

The designs of the design-tokens package components are based on some of the industry-best design systems, as noted in each component's documentation. However, they are not guaranteed to be 100% identical and they are not endorsed in any way by their original creators.

A handy list of design-systems can be found on designsystemsrepo.com.

A collection of components that will display a single color or a palette of colors. The color input can be a HEX, RGB, or HSL string value.