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 CSS variable Class name Value
XS interactive border radius --radius-i-xs rounded-moon-i-xs 4px
SM interactive border radius --radius-i-sm rounded-moon-i-sm 8px
MD interactive border radius --radius-i-md rounded-moon-i-md 12px
XS surface border radius --radius-s-xs rounded-moon-s-xs 4px
SM surface border radius --radius-s-sm rounded-moon-s-sm 8px
MD surface border radius --radius-s-md rounded-moon-s-md 12px
LG surface border radius --radius-s-lg rounded-moon-s-lg 16px
Box Shadow
Property CSS variable Class name Value
XS box shadow --shadow-xs shadow-moon-xs 0 4px 12px -6px rgb(0 0 0 / 0.06)
SM box shadow --shadow-sm shadow-moon-sm 0 6px 6px -6px rgb(0 0 0 / 0.16), 0 0 1px rgb(0 0 0 / 0.4)
MD box shadow --shadow-md shadow-moon-md 0 12px 12px -6px rgb(0 0 0 / 0.16), 0 0 1px rgb(0 0 0 / 0.4)
LG box shadow --shadow-lg shadow-moon-lg 0 8px 24px -6px rgb(0 0 0 / 0.16), 0 0 1px rgb(0 0 0 / 0.4)
XL box shadow --shadow-xl shadow-moon-xl 0 32px 32px -8px rgb(0 0 0 / 0.08), 0 0 32px -8px rgb(0 0 0 / 0.12), 0 0 1px rgb(0 0 0 / 0.2)
Property CSS variable Class name Value
Opacity --opacity-moon opacity-moon 0.6