Global design tokens

Border radius tokens
Name
Value
borderRadiusSmall
2px
borderRadiusNormal
3px
borderRadiusLarge
6px
borderRadiusFull
9999px
Breakpoint tokens
Name
Value
breakpointMediumMobile
414
breakpointLargeMobile
576
breakpointTablet
768
breakpointDesktop
992
breakpointLargeDesktop
1200
Duration tokens
Name
Value
durationFast
0.15s
durationNormal
0.3s
durationSlow
0.4s
Elevation tokens
Name
Value
elevationSuppressedBackground
#F5F7F9
elevationFlatBackground
#FFFFFF
elevationFlatBorderColor
#E8EDF1
elevationFlatBorderSize
1px
elevationActionBackground
#FFFFFF
elevationActionBoxShadow
0 0 2px 0 rgba(37, 42, 49, 0.16), 0 1px 4px 0 rgba(37, 42, 49, 0.12)
elevationActionActiveBackground
#FFFFFF
elevationActionActiveBoxShadow
0 1px 4px 0 rgba(37, 42, 49, 0.16), 0 4px 8px 0 rgba(37, 42, 49, 0.12)
elevationFixedBackground
#FFFFFF
elevationFixedBoxShadow
0 0 2px 0 rgba(37, 42, 49, 0.16), 0 2px 4px 0 rgba(37, 42, 49, 0.12)
elevationFixedReverseBackground
#FFFFFF
elevationFixedReverseBoxShadow
0 0 2px 0 rgba(37, 42, 49, 0.16), 0 -2px 4px 0 rgba(37, 42, 49, 0.12)
elevationRaisedBackground
#FFFFFF
elevationRaisedBoxShadow
0 4px 8px 0 rgba(37, 42, 49, 0.16), 0 8px 24px 0 rgba(37, 42, 49, 0.24)
elevationRaisedReverseBackground
#FFFFFF
elevationRaisedReverseBoxShadow
0 -4px 8px 0 rgba(37, 42, 49, 0.16), 0 -8px 24px 0 rgba(37, 42, 49, 0.24)
elevationOverlayBackground
#FFFFFF
elevationOverlayBoxShadow
0 12px 24px -4px rgba(37, 42, 49, 0.24), 0 8px 60px 0 rgba(37, 42, 49, 0.32)
Palette tokens
Name
Value
paletteBlueLight
#E8F4FD
paletteBlueLightHover
#DEF0FC
paletteBlueLightActive
#C7E4FA
paletteBlueNormal
#0172CB
paletteBlueNormalHover
#0161AC
paletteBlueNormalActive
#01508E
paletteBlueDark
#005AA3
paletteBlueDarkHover
#004F8F
paletteBlueDarkActive
#003E70
paletteBlueDarker
#004680
paletteBundleBasic
#D7331C
paletteBundleMedium
#3B1EB0
paletteCloudLight
#F5F7F9
paletteCloudLightHover
#E5EAEF
paletteCloudLightActive
#D6DEE6
paletteCloudNormal
#E8EDF1
paletteCloudNormalHover
#DCE3E9
paletteCloudNormalActive
#CAD4DE
paletteCloudDark
#BAC7D5
paletteCloudDarkHover
#A6B6C8
paletteCloudDarkActive
#94A8BE
paletteGreenLight
#EAF5EA
paletteGreenLightHover
#E1EFE2
paletteGreenLightActive
#CDE4CF
paletteGreenNormal
#28A138
paletteGreenNormalHover
#238B31
paletteGreenNormalActive
#1D7228
paletteGreenDark
#2D7738
paletteGreenDarkHover
#276831
paletteGreenDarkActive
#1F5126
paletteGreenDarker
#235C2B
paletteInkDark
#252A31
paletteInkDarkHover
#181B20
paletteInkDarkActive
#0B0C0F
paletteInkLight
#697D95
paletteInkLightHover
#5D738E
paletteInkLightActive
#4A617C
paletteInkNormal
#4F5E71
paletteInkNormalHover
#3E4E63
paletteInkNormalActive
#324256
paletteOrangeLight
#FEF2E6
paletteOrangeLightHover
#FCECDA
paletteOrangeLightActive
#FAE2C6
paletteOrangeNormal
#DF7B00
paletteOrangeNormalHover
#C96F00
paletteOrangeNormalActive
#B26200
paletteOrangeDark
#AD5700
paletteOrangeDarkHover
#A75400
paletteOrangeDarkActive
#954A00
paletteOrangeDarker
#803F00
paletteProductLight
#E1F4F3
paletteProductLightHover
#D6F0EC
paletteProductLightActive
#BFE8E2
paletteProductNormal
#00A58E
paletteProductNormalHover
#009580
paletteProductNormalActive
#008472
paletteProductDark
#007A69
paletteProductDarkHover
#007060
paletteProductDarkActive
#006657
paletteProductDarker
#005C4E
paletteRedLight
#FAEAEA
paletteRedLightHover
#F8E2E2
paletteRedLightActive
#F3CECE
paletteRedNormal
#D21C1C
paletteRedNormalHover
#B91919
paletteRedNormalActive
#9D1515
paletteRedDark
#970C0C
paletteRedDarkHover
#890B0B
paletteRedDarkActive
#6D0909
paletteRedDarker
#760909
paletteSocialFacebook
#3B5998
paletteSocialFacebookHover
#385490
paletteSocialFacebookActive
#354F88
paletteWhite
#FFFFFF
paletteWhiteNormal
#FFFFFF
paletteWhiteHover
#F1F4F7
paletteWhiteActive
#E7ECF1
Spacing tokens
Name
Value
spaceXXXSmall
2px
spaceXXSmall
4px
spaceXSmall
8px
spaceSmall
12px
spaceMedium
16px
spaceLarge
24px
spaceXLarge
32px
spaceXXLarge
40px
spaceXXXLarge
52px
Typography tokens
Name
Value
fontFamily
'Roboto', -apple-system, '.SFNSText-Regular', 'San Francisco', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif
fontSizeTextSmall
13px
fontSizeTextNormal
15px
fontSizeTextLarge
16px
fontSizeTextExtraLarge
18px
lineHeightText
1.4
lineHeightSmall
16px
lineHeightNormal
20px
lineHeightLarge
24px
lineHeightExtraLarge
24px
fontWeightNormal
400
fontWeightMedium
500
fontWeightBold
700
Z-index tokens
Name
Value
zIndexDefault
1
zIndexSticky
100
zIndexNavigationBar
700
zIndexModalOverlay
800
zIndexDrawer
815
zIndexModal
825
zIndexOnTheTop
900
Deprecated tokens
Name
ReplacementValue
paddingAlert
none
16px
paddingAlertWithIcon
none
12px
paddingBadge
none
0 8px
paddingButtonLarge
buttonLargePadding
0 28px
paddingButtonLargeWithIcons
buttonLargeBothIconsPadding
0 16px
paddingButtonLargeWithLeftIcon
buttonLargeLeftIconPadding
0 28px 0 16px
paddingButtonLargeWithRightIcon
buttonLargeRightIconPadding
0 16px 0 28px
paddingButtonNormal
buttonNormalPadding
0 16px
paddingButtonNormalWithIcons
buttonNormalBothIconsPadding
0 12px
paddingButtonNormalWithLeftIcon
buttonNormalLeftIconPadding
0 16px 0 12px
paddingButtonNormalWithRightIcon
buttonNormalRightIconPadding
0 12px 0 16px
paddingButtonWithoutText
buttonWithoutTextPadding
0
paddingButtonSmall
buttonSmallPadding
0 12px
paddingButtonSmallWithIcons
buttonSmallBothIconsPadding
0 8px
paddingButtonSmallWithLeftIcon
buttonSmallLeftIconPadding
0 12px 0 8px
paddingButtonSmallWithRightIcon
buttonSmallRightIconPadding
0 8px 0 12px
paddingInputSmall
formElementSmallPadding
0 12px
paddingInputNormal
formElementNormalPadding
0 12px
paddingInputFile
none
0 0 0 6px
paddingLoading
none
12px
paddingTable
none
12px 16px
paddingTableCompact
none
8px 12px
paddingTag
none
6px 8px
paddingTagRemovable
none
6px 6px 6px 8px
paddingTagRemovableWithIcon
none
6px
paddingTagWithIcon
none
6px 8px 6px 6px
paddingTextareaSmall
none
8px 12px
paddingTextareaNormal
none
12px
backgroundAlertCritical
none
#FAEAEA
backgroundAlertInfo
none
#E8F4FD
backgroundAlertSuccess
none
#EAF5EA
backgroundAlertWarning
none
#FEF2E6
backgroundBadgeCritical
badgeCriticalBackground
#D21C1C
backgroundBadgeCriticalSubtle
badgeCriticalSubtleBackground
#FAEAEA
backgroundBadgeDark
badgeDarkBackground
#252A31
backgroundBadgeInfo
badgeInfoBackground
#0172CB
backgroundBadgeInfoSubtle
badgeInfoSubtleBackground
#E8F4FD
backgroundBadgeNeutral
badgeNeutralBackground
#F5F7F9
backgroundBadgeSuccess
badgeSuccessBackground
#28A138
backgroundBadgeSuccessSubtle
badgeSuccessSubtleBackground
#EAF5EA
backgroundBadgeWarning