Selected categories
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 | Replacement | Value |
|---|---|---|
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 |