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.

  • 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! 🎉
Border Radius
Property Class name Value
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
Border Style
Property Class name Value
Default border 1px solid
Interactive border-2 2px solid