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! 🎉
Tokens

Border Radius

PropertyKeyValue
noneborderRadius.none0
twoxsmallborderRadius.twoxsmall2px
xsmallborderRadius.xsmall4px
smallborderRadius.small6px
mediumborderRadius.medium8px
largeborderRadius.large12px
xlargeborderRadius.xlarge16px
twoxlargeborderRadius.twoxlarge24px
fullborderRadius.full9999px
interactiveborderRadius.interactive9999px

Breakpoint

PropertyKeyValue
smallbreakpoint.small640px
mediumbreakpoint.medium768px
largebreakpoint.large1024px
xlargebreakpoint.xlarge1280px
twoxlargebreakpoint.twoxlarge1536px

Border

PropertyKeyValue
defaultborder.default1px solid
interactiveborder.interactive2px solid
width.defaultborder.width.default1px
width.interactiveborder.width.interactive2px
styleborder.stylesolid

Space

PropertyKeyValue
threexsmallspace.threexsmall4px
twoxsmallspace.twoxsmall8px
xsmallspace.xsmall12px
smallspace.small16px
mediumspace.medium24px
largespace.large32px
xlargespace.xlarge40px
twoxlargespace.twoxlarge48px
threexlargespace.threexlarge56px

Transition

PropertyKeyValue
slowtransition.slow0.4s ease-in-out
defaulttransition.default0.2s ease-in-out

zIndex

PropertyKeyValue
carouselControlzIndex.carouselControl5
dialogzIndex.dialog10000
togglezIndex.toggle1

Box Shadow

PropertyKeyValue
smallboxShadow.small0 6px 6px -6px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.4)
mediumboxShadow.medium0 12px 12px -6px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.4)
largeboxShadow.large0 8px 24px -6px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.4)
xlargeboxShadow.xlarge0 32px 32px -8px rgba(0, 0, 0, 0.08), 0 0 32px -8px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.2)

Font

PropertyKeyValue
facefont.faceReturns CSS @font-face declaration
familyfont.familyAverta Std, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif
sizefont.size16px
weight.normalfont.weight.normal400
weight.semiboldfont.weight.semibold500
lineHeightfont.lineHeight24px

Opacity

PropertyKeyValue
opacityopacity0.32

Button

PropertyKeyValue
primarybutton.primaryTo be done
secondarybutton.secondaryTo be done
tertiarybutton.tertiaryTo be done

p link

PropertyKeyValue
fontWeighttextLink.fontWeight500
color.defaultbutton.color.defaultpiccolo
color.hoverbutton.color.hoverhit
color.visitedbutton.color.visitedhit

Hover

PropertyKeyValue
primaryhover.primarybulma, 12%
secondaryhover.secondarypiccolo, 12%

Focus

PropertyKeyValue
focusfocus0 0 0 4px piccolo, 20%

Transform

PropertyKeyValue
transformtransformscale(0.9)

Size

PropertyKeyValue
twoxsmallsize.twoxsmall16px
xsmallsize.xsmall24px
smallsize.small32px
mediumsize.medium40px
largesize.large48px
xlargesize.xlarge56px
twoxlargesize.twoxlarge64px