Design Tokens

Design tokens are the “subatomic” foundation of a design system. They are the values needed to build a design system, like color, space, typography, etc., represented as data.

Design token-types

- Global tokens - Global tokens values, represented by context-agnostic names - #343434 -> Gray-100

- Alias tokens - name related to specific context, making context easier to identify. - Gray-100 -> bg-color

- Component-specific tokens - representation of value associated with a component - bg-color > primary-button-cta-color