Tokens

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! 🎉
Colours usage

Base

PropertyKeyValue
spacebase.space16
fontSizebase.fontSize16
lineHeightbase.lineHeight20

Border

PropertyKeyValue
borderWidthborderWidth1
borderStyleborderStylesolid
borderbase.borderborder 1px solid

Box Shadow

PropertyKeyValue
boxShadowboxShadow0px 2.4px 7.2px rgba(0, 0, 0, 0.18), 0px 12.8px 28.8px rgba(0, 0, 0, 0.22)

Breakpoints

PropertyKeyValue
smallbreakpoint.small500
mediumbreakpoint.medium800
largebreakpoint.large1080
xlargebreakpoint.xlarge1200

Font

PropertyKeyValue
fontFacefontFaceReturns CSS @font-face declaration.
fontFamilyfontFamilyAverta Std, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif
fontSizefontSize.body14
fontWeightfontWeight.normal400
fontWeightfontWeight.semibold500

Opacity

PropertyKeyValue
disabledopacity.disabled0.35

Radius

PropertyKeyValue
smallradius.small4
defaultradius.default8
largestradius.largest100

Space

PropertyKeyValue
xsmallspace.xsmall4
smallspace.small8
defaultspace.default16
mediumspace.medium24
largespace.large32
xlargespace.xlarge40

Transition

PropertyKeyValue
slowtransitionDuration.slow0.4
defaulttransitionDuration.default0.2

z-index

PropertyKeyValue
carouselControlzIndex.carouselControl5
dialogzIndex.dialog10000
togglezIndex.toggle1