Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, 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.
They're used in place of hard-coded values in order to ensure flexibility and unity across all multi-product experiences.
Design tokens are directly integrated into our component libraries. They cover the various options of platform scales, color themes, and more.
How to create your own custom theme based and use it for your product.
|Interactive radius XS||rounded-moon-i-xs||4px|
|Interactive radius SM||rounded-moon-i-sm||8px|
|Interactive radius MD||rounded-moon-i-md||12px|
|Surface radius XS||rounded-moon-s-xs||4px|
|Surface radius SM||rounded-moon-s-sm||8px|
|Surface radius MD||rounded-moon-s-md||12px|
|Surface radius LG||rounded-moon-s-lg||16px|