Tokens

Design tokens are all the values needed to construct and maintain a design system — spacing, colour, typography, object styles, animation, etc.

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

They're used in place of hard-coded values 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, colour themes, and more.

How to create your custom theme based and use it for your product.

• Create your product theme template file.
• Check the guide for colours.
• Replace colour values one by one.
• Change the values to your product ones.
• Publish your changes.
• Share tokens with your product front-end developers.
• Enjoy your new theme! 🎉