Design tokens

Design tokens are all the values needed to construct and maintain a design system — spacing, colors, typography, shadows, z-index, border radius, object styles, animation, etc.

These can represent anything defined by design: a color as a HEX value, an opacity as a number, an animation ease as Bezier coordinates.

Design tokens are directly integrated into our component libraries. They cover the various options of platform scales, color themes, and more.

Token Types

Tokens can be anything that can be represented as a value. We currently support seven token types. Color, Typography , Spacing, Sizings, Shadows, Z-index, Border radius, Media queries . These tokens make up our entire system foundation.