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 | transparent |
backgroundCountryFlag | countryFlagBackground | transparent |
backgroundServiceLogo | none | transparent |
backgroundTooltip | none | #FFFFFF |
backgroundTooltipLargeMobile | none | #005AA3 |
backgroundSeparator | elevationFlatBorderColor | #E8EDF1 |
backgroundSwitch | none | #BAC7D5 |
backgroundSwitchChecked | none | #0172CB |
backgroundInput | formElementBackground | #FFFFFF |
backgroundInputDisabled | formElementDisabledBackground | #E8EDF1 |
backgroundModal | elevationFlatBackground | #FFFFFF |
backgroundTable | none | #FFFFFF |
backgroundTableEven | none | #F5F7F9 |
backgroundTableHover | none | #E8EDF1 |
backgroundTag | none | #F5F7F9 |
backgroundTagHover | none | #E5EAEF |
backgroundTagActive | none | #D6DEE6 |
backgroundTagSelected | none | #252A31 |
backgroundTagSelectedHover | none | #181B20 |
backgroundTagSelectedActive | none | #0B0C0F |
colorAlertIconCritical | none | #D21C1C |
colorAlertIconInfo | none | #0172CB |
colorAlertIconSuccess | none | #28A138 |
colorAlertIconWarning | none | #DF7B00 |
colorFormLabel | formElementLabelForeground | #252A31 |
colorFormLabelFilled | formElementLabelFilled | #4F5E71 |
colorIconCheckboxRadio | none | #00A58E |
colorIconCheckboxRadioDisabled | none | #BAC7D5 |
colorIconInput | iconTertiaryForeground | #BAC7D5 |
colorIconRadioButton | none | #00A58E |
colorIconRadioButtonDisabled | none | #4F5E71 |
colorInfoCheckBoxRadio | textSecondaryForeground | #4F5E71 |
colorPlaceholderInput | formElementForeground | #697D95 |
colorPlaceholderInputError | none | #D21C1C |
colorPlaceholderInputFile | none | #697D95 |
colorPlaceholderInputFileError | none | #D21C1C |
colorTextInput | formElementFilledForeground | #252A31 |
colorTextInputDisabled | formElementDisabledForeground | #4F5E71 |
colorTextInputPrefix | formElementPrefixForeground | #4F5E71 |
colorHeading | headingForeground | #252A31 |
colorHeadingInverted | headingForegroundInverted | #FFFFFF |
colorIconPrimary | iconPrimaryForeground | #252A31 |
colorIconSecondary | iconSecondaryForeground | #4F5E71 |
colorIconTertiary | iconTertiaryForeground | #BAC7D5 |
colorIconInfo | iconInfoForeground | #0172CB |
colorIconSuccess | iconSuccessForeground | #28A138 |
colorIconWarning | iconWarningForeground | #DF7B00 |
colorIconCritical | iconCriticalForeground | #D21C1C |
colorStopoverArrow | iconSecondaryForeground | #697D95 |
colorTextLinkPrimary | textLinkPrimaryForeground | #007A69 |
colorTextLinkPrimaryHover | textLinkPrimaryForegroundHover | #00A58E |
colorTextLinkSecondary | textLinkSecondaryForeground | #252A31 |
colorTextLinkSecondaryHover | textLinkSecondaryForegroundHover | #00A58E |
colorTextPrimary | textPrimaryForeground | #252A31 |
colorTextSecondary | textSecondaryForeground | #4F5E71 |
colorTextInfo | textInfoForeground | #0172CB |
colorTextSuccess | textSuccessForeground | #28A138 |
colorTextWarning | textWarningForeground | #DF7B00 |
colorTextCritical | textCriticalForeground | #D21C1C |
colorTextWhite | textWhiteForeground | #FFFFFF |
colorTextError | textCriticalForeground | #D21C1C |
colorTextAlertCritical | none | #970C0C |
colorTextAlertInfo | none | #005AA3 |
colorTextAlertSuccess | none | #2D7738 |
colorTextAlertWarning | none | #AD5700 |
colorTextAlertLink | none | #4F5E71 |
colorTextBadgeCritical | badgeCriticalForeground | #D21C1C |
colorTextBadgeDark | badgeDarkForeground | #FFFFFF |
colorTextBadgeInfo | badgeInfoForeground | #0172CB |
colorTextBadgeNeutral | badgeNeutralForeground | #4F5E71 |
colorTextBadgeSuccess | badgeSuccessForeground | #28A138 |
colorTextBadgeWarning | badgeWarningForeground | #DF7B00 |
colorTextBadgeWhite | badgeWhiteForeground | #252A31 |
colorTextButtonLinkCritical | buttonLinkCriticalForeground | #D21C1C |
colorTextButtonLinkCriticalHover | buttonLinkCriticalForegroundHover | #B91919 |
colorTextButtonLinkCriticalActive | buttonLinkCriticalForegroundActive | #9D1515 |
colorTextButtonLinkPrimary | buttonLinkPrimaryForeground | #00A58E |
colorTextButtonLinkPrimaryHover | buttonLinkPrimaryForegroundHover | #009580 |
colorTextButtonLinkPrimaryActive | buttonLinkPrimaryForegroundActive | #008472 |
colorTextButtonLinkSecondary | buttonLinkSecondaryForeground | #252A31 |
colorTextButtonLinkSecondaryHover | buttonLinkSecondaryForegroundHover | #181B20 |
colorTextButtonLinkSecondaryActive | buttonLinkSecondaryForegroundActive | #0B0C0F |
colorTextButtonLinkSecondaryCompactHover | none | #009580 |
colorTextButtonLinkSecondaryCompactActive | none | #008472 |
colorTextButtonCriticalSubtle | buttonCriticalSubtleForeground | #970C0C |
colorTextButtonCriticalSubtleHover | buttonCriticalSubtleForegroundHover | #890B0B |
colorTextButtonCriticalSubtleActive | buttonCriticalSubtleForegroundActive | #6D0909 |
colorTextButtonCritical | buttonCriticalForeground | #FFFFFF |
colorTextButtonCriticalHover | buttonCriticalForegroundHover | #FFFFFF |
colorTextButtonCriticalActive | buttonCriticalForegroundActive | #FFFFFF |
colorTextButtonCriticalBordered | none | #D21C1C |
colorTextButtonCriticalBorderedHover | none | #B91919 |
colorTextButtonCriticalBorderedActive | none | #9D1515 |
colorTextButtonFilled | none | #FFFFFF |
colorTextButtonFilledHover | none | #FFFFFF |
colorTextButtonFilledActive | none | #FFFFFF |
colorTextButtonInfo | buttonInfoForeground | #FFFFFF |
colorTextButtonInfoHover | buttonInfoForegroundHover | #FFFFFF |
colorTextButtonInfoActive | buttonInfoForegroundActive | #FFFFFF |
colorTextButtonInfoBordered | none | #0172CB |
colorTextButtonInfoBorderedHover | none | #0161AC |
colorTextButtonInfoBorderedActive | none | #01508E |
colorTextButtonPrimarySubtle | buttonPrimarySubtleForeground | #007A69 |
colorTextButtonPrimarySubtleHover | buttonPrimarySubtleForegroundHover | #007060 |
colorTextButtonPrimarySubtleActive | buttonPrimarySubtleForegroundActive | #006657 |
colorTextButtonPrimary | buttonPrimaryForeground | #FFFFFF |
colorTextButtonPrimaryHover | buttonPrimaryForegroundHover | #FFFFFF |
colorTextButtonPrimaryActive | buttonPrimaryForegroundActive | #FFFFFF |
colorTextButtonPrimaryBordered | none | #00A58E |
colorTextButtonPrimaryBorderedHover | none | #009580 |
colorTextButtonPrimaryBorderedActive | none | #008472 |
colorTextButtonSecondary | buttonSecondaryForeground | #252A31 |
colorTextButtonSecondaryHover | buttonSecondaryForegroundHover | #181B20 |
colorTextButtonSecondaryActive | buttonSecondaryForegroundActive | #0B0C0F |
colorTextButtonSecondaryBordered | none | #252A31 |
colorTextButtonSecondaryBorderedHover | none | #181B20 |
colorTextButtonSecondaryBorderedActive | none | #0B0C0F |
colorTextButtonSuccess | buttonSuccessForeground | #FFFFFF |
colorTextButtonSuccessHover | buttonSuccessForegroundHover | #FFFFFF |
colorTextButtonSuccessActive | buttonSuccessForegroundActive | #FFFFFF |
colorTextButtonSuccessBordered | none | #28A138 |
colorTextButtonSuccessBorderedHover | none | #238B31 |
colorTextButtonSuccessBorderedActive | none | #1D7228 |
colorTextButtonWarning | buttonWarningForeground | #FFFFFF |
colorTextButtonWarningHover | buttonWarningForegroundHover | #FFFFFF |
colorTextButtonWarningActive | buttonWarningForegroundActive | #FFFFFF |
colorTextButtonWarningBordered | none | #DF7B00 |
colorTextButtonWarningBorderedHover | none | #C96F00 |
colorTextButtonWarningBorderedActive | none | #B26200 |
colorTextButtonWhite | buttonWhiteForeground | #252A31 |
colorTextButtonWhiteHover | buttonWhiteForegroundHover | #181B20 |
colorTextButtonWhiteActive | buttonWhiteForegroundActive | #0B0C0F |
colorTextButtonWhiteBordered | none | #FFFFFF |
colorTextButtonWhiteBorderedHover | none | #FFFFFF |
colorTextButtonWhiteBorderedActive | none | #FFFFFF |
colorTextButtonFacebook | none | #FFFFFF |
colorTextButtonFacebookHover | none | #FFFFFF |
colorTextButtonFacebookActive | none | #FFFFFF |
colorTextButtonFacebookBordered | none | #3B5998 |
colorTextButtonFacebookBorderedHover | none | #385490 |
colorTextButtonFacebookBorderedActive | none | #354F88 |
colorTextButtonGoogle | none | #252A31 |
colorTextButtonGoogleHover | none | #181B20 |
colorTextButtonGoogleActive | none | #0B0C0F |
colorTextButtonGoogleBordered | none | #252A31 |
colorTextButtonGoogleBorderedHover | none | #181B20 |
colorTextButtonGoogleBorderedActive | none | #0B0C0F |
colorTextLoading | none | #BAC7D5 |
colorTextTable | none | #697D95 |
colorTextTag | none | #252A31 |
colorTextTagSelected | none | #BAC7D5 |
borderRadiusBadge | badgeBorderRadius | 12px |
marginBadgeIcon | none | 0 4px 0 0 |
marginButtonGroup | none | 0 1px 0 0 |
marginButtonIcon | none | 8px |
buttonSmallPadding | none | 0 12px |
buttonSmallBothIconsPadding | none | 0 8px |
buttonSmallLeftIconPadding | none | 0 12px 0 8px |
buttonSmallRightIconPadding | none | 0 8px 0 12px |
buttonNormalPadding | none | 0 16px |
buttonNormalBothIconsPadding | none | 0 12px |
buttonNormalLeftIconPadding | none | 0 16px 0 12px |
buttonNormalRightIconPadding | none | 0 12px 0 16px |
buttonLargePadding | none | 0 28px |
buttonLargeBothIconsPadding | none | 0 16px |
buttonLargeLeftIconPadding | none | 0 28px 0 16px |
buttonLargeRightIconPadding | none | 0 16px 0 28px |
boxShadowButtonFocus | none | 0 0 4px 1px rgba(1, 114, 203, 0.3) |
borderColorButtonPrimaryBordered | none | #00A58E |
borderColorButtonPrimaryBorderedHover | none | #009580 |
borderColorButtonPrimaryBorderedActive | none | #008472 |
borderColorButtonSecondaryBordered | none | #252A31 |
borderColorButtonSecondaryBorderedHover | none | #181B20 |
borderColorButtonSecondaryBorderedActive | none | #0B0C0F |
borderColorButtonFacebookBordered | none | #3B5998 |
borderColorButtonFacebookBorderedHover | none | #385490 |
borderColorButtonFacebookBorderedActive | none | #354F88 |
borderColorButtonGoogleBordered | none | #252A31 |
borderColorButtonGoogleBorderedHover | none | #181B20 |
borderColorButtonGoogleBorderedActive | none | #0B0C0F |
borderColorButtonInfoBordered | none | #0172CB |
borderColorButtonInfoBorderedHover | none | #0161AC |
borderColorButtonInfoBorderedActive | none | #01508E |
borderColorButtonSuccessBordered | none | #28A138 |
borderColorButtonSuccessBorderedHover | none | #238B31 |
borderColorButtonSuccessBorderedActive | none | #1D7228 |
borderColorButtonWarningBordered | none | #DF7B00 |
borderColorButtonWarningBorderedHover | none | #C96F00 |
borderColorButtonWarningBorderedActive | none | #B26200 |
borderColorButtonCriticalBordered | none | #D21C1C |
borderColorButtonCriticalBorderedHover | none | #B91919 |
borderColorButtonCriticalBorderedActive | none | #9D1515 |
borderColorButtonWhiteBordered | none | #FFFFFF |
borderColorButtonWhiteBorderedHover | none | #FFFFFF |
borderColorButtonWhiteBorderedActive | none | #FFFFFF |
borderColorCard | elevationFlatBorderColor | #E8EDF1 |
borderColorCheckboxRadio | formElementBorderColor | #BAC7D5 |
borderColorCheckboxRadioActive | formElementBorderColorFocus | #252A31 |
borderColorCheckboxRadioError | formElementBorderColorError | #D21C1C |
borderColorCheckboxRadioFocus | formElementBorderColorFocus | #0172CB |
borderColorCheckboxRadioHover | formElementBorderColorHover | #4F5E71 |
borderColorInput | formElementBorderColor | #BAC7D5 |
borderColorInputActive | formElementBorderColorFocus | #94A8BE |
borderColorInputError | formElementBorderColorError | #D21C1C |
borderColorInputErrorFocus | none | #D21C1C |
borderColorInputErrorHover | none | #B91919 |
borderColorInputFocus | formElementBorderColorFocus | #0172CB |
borderColorInputHover | formElementBorderColorHover | #A6B6C8 |
borderColorModal | elevationFlatBorderColor | #E8EDF1 |
borderColorTable | none | #E8EDF1 |
borderColorTableCell | none | #BAC7D5 |
borderColorTableHead | none | #BAC7D5 |
borderColorTag | none | #BAC7D5 |
borderColorTagFocus | none | #0172CB |
modifierScaleButtonActive | none | 0.95 |
modifierScaleCheckboxRadioActive | none | 0.95 |
fontSizeButtonSmall | buttonSmallFontSize | 13px |
fontSizeButtonNormal | buttonNormalFontSize | 15px |
fontSizeButtonLarge | buttonLargeFontSize | 16px |
fontSizeInputSmall | formElementNormalFontSize | 15px |
fontSizeInputNormal | formElementNormalFontSize | 15px |
fontSizeFormFeedback | none | 13px |
fontSizeFormLabel | none | 15px |
fontSizeMessage | none | 15px |
fontSizeHeadingDisplay | headingDisplayFontSize | 40px |
fontSizeHeadingDisplaySubtitle | headingDisplaySubtitleFontSize | 22px |
fontSizeHeadingTitle1 | headingTitle1FontSize | 28px |
fontSizeHeadingTitle2 | headingTitle2FontSize | 22px |
fontSizeHeadingTitle3 | headingTitle3FontSize | 18px |
fontSizeHeadingTitle4 | headingTitle4FontSize | 16px |
fontSizeHeadingTitle5 | headingTitle5FontSize | 15px |
fontSizeHeadingTitle6 | headingTitle6FontSize | 13px |
borderStyleCard | none | solid |
borderStyleInput | none | solid |
borderWidthCard | elevationFlatBorderSize | 1px |
borderWidthInput | none | 1px |
borderWidthInputFocus | none | 2px |
widthCarrierLogo | none | 32px |
widthIconSmall | iconSmallSize | 16px |
widthIconMedium | iconMediumSize | 20px |
widthIconLarge | iconLargeSize | 24px |
widthBadgeCircled | iconLargeSize | 24px |
widthCheckbox | iconSmallSize | 20px |
widthRadioButton | iconSmallSize | 20px |
widthStopoverArrow | none | 36px |
widthCountryFlag | iconLargeSize | 24px |
widthModalSmall | modalSmallWidth | 540px |
widthModalNormal | modalNormalWidth | 740px |
widthModalLarge | modalLargeWidth | 900px |
widthModalExtraLarge | modalExtraLargeWidth | 1280px |
heightCarrierLogo | none | 32px |
heightButtonSmall | formBoxSmallHeight | 32px |
heightButtonNormal | formBoxNormalHeight | 44px |
heightButtonLarge | formBoxLargeHeight | 52px |
heightInputSmall | formBoxSmallHeight | 32px |
heightInputNormal | formBoxNormalHeight | 44px |
heightInputLarge | formBoxLargeHeight | 52px |
heightIconSmall | iconSmallSize | 16px |
heightIconMedium | iconMediumSize | 20px |
heightIconLarge | iconLargeSize | 24px |
heightBadge | iconMediumSize | 20px |
heightCheckbox | iconSmallSize | 20px |
heightRadioButton | iconSmallSize | 20px |
heightStopoverArrow | none | 7px |
heightCountryFlag | none | auto |
heightServiceLogoSmall | none | 12px |
heightServiceLogoMedium | iconMediumSize | 24px |
heightServiceLogoLarge | none | 48px |
heightSeparator | none | 1px |
heightInputGroupSeparatorSmall | none | 16px |
heightInputGroupSeparatorNormal | iconMediumSize | 20px |
heightIllustrationSmall | illustrationExtraSmallHeight | 90px |
heightIllustrationMedium | illustrationMediumHeight | 200px |
marginTopFormFeedback | none | 2px |
opacityCheckboxDisabled | formElementDisabledOpacity | 0.5 |
opacityRadioButtonDisabled | formElementDisabledOpacity | 0.5 |
fontWeightHeadingDisplay | headingDisplayFontWeight | 700 |
fontWeightHeadingDisplaySubtitle | headingDisplaySubtitleFontWeight | 400 |
fontWeightHeadingTitle1 | headingTitle1FontWeight | 700 |
fontWeightHeadingTitle2 | headingTitle2FontWeight | 500 |
fontWeightHeadingTitle3 | headingTitle3FontWeight | 500 |
fontWeightHeadingTitle4 | headingTitle4FontWeight | 700 |
fontWeightHeadingTitle5 | headingTitle5FontWeight | 700 |
fontWeightHeadingTitle6 | headingTitle6FontWeight | 700 |
fontWeightTableHead | none | 700 |
fontWeightLinks | none | 500 |
lineHeightHeading | none | 1.2 |
lineHeightHeadingDisplay | headingDisplayLineHeight | 44px |
lineHeightHeadingDisplaySubtitle | headingDisplaySubtitleLineHeight | 28px |
lineHeightHeadingTitle1 | headingTitle1LineHeight | 32px |
lineHeightHeadingTitle2 | headingTitle2LineHeight | 28px |
lineHeightHeadingTitle3 | headingTitle3LineHeight | 24px |
lineHeightHeadingTitle4 | headingTitle4LineHeight | 20px |
lineHeightHeadingTitle5 | headingTitle5LineHeight | 20px |
lineHeightHeadingTitle6 | headingTitle6LineHeight | 16px |
marginBottomSelectSuffix | none | 2px |
paddingLeftSelectPrefix | none | 48px |
textDecorationTextLinkPrimary | none | underline |
textDecorationTextLinkPrimaryHover | none | none |
textDecorationTextLinkSecondary | none | underline |
textDecorationTextLinkSecondaryHover | none | none |
backgroundIllustration | none | transparent |
widthBreakpointMediumMobile | breakpointMediumMobile | 414 |
widthBreakpointLargeMobile | breakpointLargeMobile | 576 |
widthBreakpointTablet | breakpointTablet | 768 |
widthBreakpointDesktop | breakpointDesktop | 992 |
widthBreakpointLargeDesktop | breakpointLargeDesktop | 1200 |
backgroundBody | elevationSuppressedBackground | #F5F7F9 |
boxShadowAction | elevationActionBoxShadow | 0 0 2px 0 rgba(37, 42, 49, 0.16), 0 1px 4px 0 rgba(37, 42, 49, 0.12) |
boxShadowActionActive | elevationActionActiveBoxShadow | 0 1px 4px 0 rgba(37, 42, 49, 0.16), 0 4px 8px 0 rgba(37, 42, 49, 0.12) |
boxShadowFixed | elevationFixedBoxShadow | 0 0 2px 0 rgba(37, 42, 49, 0.16), 0 2px 4px 0 rgba(37, 42, 49, 0.12) |
boxShadowFixedReverse | elevationFixedReverseBoxShadow | 0 0 2px 0 rgba(37, 42, 49, 0.16), 0 -2px 4px 0 rgba(37, 42, 49, 0.12) |
boxShadowOverlay | elevationOverlayBoxShadow | 0 12px 24px -4px rgba(37, 42, 49, 0.24), 0 8px 60px 0 rgba(37, 42, 49, 0.32) |
boxShadowRaised | elevationRaisedBoxShadow | 0 4px 8px 0 rgba(37, 42, 49, 0.16), 0 8px 24px 0 rgba(37, 42, 49, 0.24) |
boxShadowRaisedReverse | elevationRaisedReverseBoxShadow | 0 -4px 8px 0 rgba(37, 42, 49, 0.16), 0 -8px 24px 0 rgba(37, 42, 49, 0.24) |
opacityOverlay | none | 0.8 |
lineHeightTextSmall | lineHeightSmall | 16px |
lineHeightTextNormal | lineHeightNormal | 20px |
lineHeightTextLarge | lineHeightLarge | 24px |
lineHeightTextExtraLarge | lineHeightExtraLarge | 24px |