Global design tokens


Border radius tokens
Name
Value
borderRadiusCircle
50%
borderRadiusSmall
2px
borderRadiusNormal
3px
borderRadiusLarge
6px
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
badgeWarningBackground
#DF7B00
backgroundBadgeWarningSubtle
badgeWarningSubtleBackground
#FEF2E6
backgroundBadgeWhite
badgeWhiteBackground
#FFFFFF
backgroundButtonLinkCritical
buttonLinkCriticalBackground
transparent
backgroundButtonLinkCriticalHover
buttonLinkCriticalBackgroundHover
#F8E2E2
backgroundButtonLinkCriticalActive
buttonLinkCriticalBackgroundActive
#F3CECE
backgroundButtonLinkPrimary
buttonLinkPrimaryBackground
transparent
backgroundButtonLinkPrimaryHover
buttonLinkPrimaryBackgroundHover
#D6F0EC
backgroundButtonLinkPrimaryActive
buttonLinkPrimaryBackgroundActive
#BFE8E2
backgroundButtonLinkSecondary
buttonLinkSecondaryBackground
transparent
backgroundButtonLinkSecondaryHover
buttonLinkSecondaryBackgroundHover
#E5EAEF
backgroundButtonLinkSecondaryActive
buttonLinkSecondaryBackgroundActive
#D6DEE6
backgroundButtonBundleBasic
buttonBundleBasicBackground
linear-gradient(to top right, #E13E3B 0%, #E87E09 100%)
backgroundButtonBundleBasicHover
buttonBundleBasicBackgroundHover
linear-gradient(to top right, #BD2825 0%, #D67000 100%)
backgroundButtonBundleBasicActive
buttonBundleBasicBackgroundActive
linear-gradient(to top right, #9F1816 0%, #C36802 100%)
backgroundButtonBundleMedium
buttonBundleMediumBackground
linear-gradient(to top right, #3719AB 0%, #8539DB 100%)
backgroundButtonBundleMediumHover
buttonBundleMediumBackgroundHover
linear-gradient(to top right, #2D1393 0%, #7343AA 100%)
backgroundButtonBundleMediumActive
buttonBundleMediumBackgroundActive
linear-gradient(to top right, #250F79 0%, #5A3485 100%)
backgroundButtonBundleTop
buttonBundleTopBackground
linear-gradient(to top right, #2D2D2E 0%, #696E73 100%)
backgroundButtonBundleTopHover
buttonBundleTopBackgroundHover
linear-gradient(to top right, #171718 0%, #51575C 100%)
backgroundButtonBundleTopActive
buttonBundleTopBackgroundActive
linear-gradient(to top right, #101011 0%, #51575C)
backgroundButtonCriticalSubtle
buttonCriticalSubtleBackground
#FAEAEA
backgroundButtonCriticalSubtleHover
buttonCriticalSubtleBackgroundHover
#F8E2E2
backgroundButtonCriticalSubtleActive
buttonCriticalSubtleBackgroundActive
#F3CECE
backgroundButtonCriticalSubtleFocus
none
#FAEAEA
backgroundButtonCritical
buttonCriticalBackground
#D21C1C
backgroundButtonCriticalHover
buttonCriticalBackgroundHover
#B91919
backgroundButtonCriticalActive
buttonCriticalBackgroundActive
#9D1515
backgroundButtonBordered
none
transparent
backgroundButtonBorderedHover
none
#F5F7F9
backgroundButtonBorderedActive
none
#F5F7F9
backgroundButtonInfo
buttonInfoBackground
#0172CB
backgroundButtonInfoHover
buttonInfoBackgroundHover
#0161AC
backgroundButtonInfoActive
buttonInfoBackgroundActive
#01508E
backgroundButtonPrimarySubtle
buttonPrimarySubtleBackground
#E1F4F3
backgroundButtonPrimarySubtleHover
buttonPrimarySubtleBackgroundHover
#D6F0EC
backgroundButtonPrimarySubtleActive
buttonPrimarySubtleBackgroundActive
#BFE8E2
backgroundButtonPrimarySubtleFocus
buttonPrimarySubtleBackground
#E1F4F3
backgroundButtonPrimary
buttonPrimaryBackground
#00A58E
backgroundButtonPrimaryHover
buttonPrimaryBackgroundHover
#009580
backgroundButtonPrimaryActive
buttonPrimaryBackgroundActive
#008472
backgroundButtonSecondary
buttonSecondaryBackground
#E8EDF1
backgroundButtonSecondaryHover
buttonSecondaryBackgroundHover
#DCE3E9
backgroundButtonSecondaryActive
buttonSecondaryBackgroundActive
#CAD4DE
backgroundButtonSuccess
buttonSuccessBackground
#28A138
backgroundButtonSuccessHover
buttonSuccessBackgroundHover
#238B31
backgroundButtonSuccessActive
buttonSuccessBackgroundActive
#1D7228
backgroundButtonWarning
buttonWarningBackground
#DF7B00
backgroundButtonWarningHover
buttonWarningBackgroundHover
#C96F00
backgroundButtonWarningActive
buttonWarningBackgroundActive
#B26200
backgroundButtonWhite
buttonWhiteBackground
#FFFFFF
backgroundButtonWhiteHover
buttonWhiteBackgroundHover
#F5F7F9
backgroundButtonWhiteActive
buttonWhiteBackgroundActive
#E5EAEF
backgroundButtonWhiteBordered
none
transparent
backgroundButtonWhiteBorderedHover
none
#FFFFFF33
backgroundButtonWhiteBorderedActive
none
#FFFFFF33
backgroundButtonFacebook
none
#3B5998
backgroundButtonFacebookHover
none
#385490
backgroundButtonFacebookActive
none
#354F88
backgroundButtonGoogle
none
#F5F7F9
backgroundButtonGoogleHover
none
#E5EAEF
backgroundButtonGoogleActive
none
#D6DEE6
backgroundCard
elevationFlatBackground
#FFFFFF
backgroundCarrierLogo
none