Alert tokens
Selected variants
Name | Variant | Value |
|---|---|---|
alertBackgroundCritical | background | #FAEAEA |
alertBackgroundInfo | background | #E8F4FD |
alertBackgroundSuccess | background | #EAF5EA |
alertBackgroundWarning | background | #FEF2E6 |
alertIconCritical | icon | #D21C1C |
alertIconInfo | icon | #0172CB |
alertIconSuccess | icon | #28A138 |
alertIconWarning | icon | #DF7B00 |
alertColorTextCritical | colorText | #970C0C |
alertColorTextInfo | colorText | #005AA3 |
alertColorTextSuccess | colorText | #2D7738 |
alertColorTextWarning | colorText | #AD5700 |
alertColorTextLink | colorText | #4F5E71 |
Badge tokens
Selected variants
Name | Variant | Value |
|---|---|---|
badgeBorderRadius | borderRadius | 12px |
badgeBundleBasicBackground | bundleBasic | linear-gradient(to top right, #E13E3B 0%, #E87E09 100%) |
badgeBundleBasicForeground | bundleBasic | #FFFFFF |
badgeBundleMediumBackground | bundleMedium | linear-gradient(to top right, #3719AB 0%, #8539DB 100%) |
badgeBundleMediumForeground | bundleMedium | #FFFFFF |
badgeBundleTopBackground | bundleTop | linear-gradient(to top right, #2D2D2E 0%, #696E73 100%) |
badgeBundleTopForeground | bundleTop | #FFFFFF |
badgeCriticalBackground | critical | #D21C1C |
badgeCriticalForeground | critical | #FFFFFF |
badgeCriticalSubtleBackground | criticalSubtle | #FAEAEA |
badgeCriticalSubtleForeground | criticalSubtle | #970C0C |
badgeDarkBackground | dark | #252A31 |
badgeDarkForeground | dark | #FFFFFF |
badgeInfoBackground | info | #0172CB |
badgeInfoForeground | info | #FFFFFF |
badgeInfoSubtleBackground | infoSubtle | #E8F4FD |
badgeInfoSubtleForeground | infoSubtle | #005AA3 |
badgeNeutralBackground | neutral | #F5F7F9 |
badgeNeutralForeground | neutral | #252A31 |
badgeSuccessBackground | success | #28A138 |
badgeSuccessForeground | success | #FFFFFF |
badgeSuccessSubtleBackground | successSubtle | #EAF5EA |
badgeSuccessSubtleForeground | successSubtle | #2D7738 |
badgeWarningBackground | warning | #DF7B00 |
badgeWarningForeground | warning | #FFFFFF |
badgeWarningSubtleBackground | warningSubtle | #FEF2E6 |
badgeWarningSubtleForeground | warningSubtle | #AD5700 |
badgeWhiteBackground | white | #FFFFFF |
badgeWhiteForeground | white | #252A31 |
ButtonLink tokens
Selected variants
Name | Variant | Value |
|---|---|---|
buttonLinkCriticalBackground | critical | transparent |
buttonLinkCriticalBackgroundHover | critical | #F8E2E2 |
buttonLinkCriticalBackgroundActive | critical | #F3CECE |
buttonLinkCriticalForeground | critical | #D21C1C |
buttonLinkCriticalForegroundHover | critical | #B91919 |
buttonLinkCriticalForegroundActive | critical | #9D1515 |
buttonLinkPrimaryBackground | primary | transparent |
buttonLinkPrimaryBackgroundHover | primary | #D6F0EC |
buttonLinkPrimaryBackgroundActive | primary | #BFE8E2 |
buttonLinkPrimaryForeground | primary | #00A58E |
buttonLinkPrimaryForegroundHover | primary | #007060 |
buttonLinkPrimaryForegroundActive | primary | #006657 |
buttonLinkSecondaryBackground | secondary | transparent |
buttonLinkSecondaryBackgroundHover | secondary | #E5EAEF |
buttonLinkSecondaryBackgroundActive | secondary | #D6DEE6 |
buttonLinkSecondaryForeground | secondary | #252A31 |
buttonLinkSecondaryForegroundHover | secondary | #181B20 |
buttonLinkSecondaryForegroundActive | secondary | #0B0C0F |
Button tokens
Selected variants
Name | Variant | Value |
|---|---|---|
buttonBundleBasicBackground | bundleBasic | linear-gradient(to top right, #E13E3B 0%, #E87E09 100%) |
buttonBundleBasicBackgroundHover | bundleBasic | linear-gradient(to top right, #BD2825 0%, #D67000 100%) |
buttonBundleBasicBackgroundActive | bundleBasic | linear-gradient(to top right, #9F1816 0%, #C36802 100%) |
buttonBundleMediumBackground | bundleMedium | linear-gradient(to top right, #3719AB 0%, #8539DB 100%) |
buttonBundleMediumBackgroundHover | bundleMedium | linear-gradient(to top right, #2D1393 0%, #7343AA 100%) |
buttonBundleMediumBackgroundActive | bundleMedium | linear-gradient(to top right, #250F79 0%, #5A3485 100%) |
buttonBundleTopBackground | bundleTop | linear-gradient(to top right, #2D2D2E 0%, #696E73 100%) |
buttonBundleTopBackgroundHover | bundleTop | linear-gradient(to top right, #171718 0%, #51575C 100%) |
buttonBundleTopBackgroundActive | bundleTop | linear-gradient(to top right, #101011 0%, #51575C) |
buttonCriticalSubtleBackground | criticalSubtle | #FAEAEA |
buttonCriticalSubtleBackgroundHover | criticalSubtle | #F8E2E2 |
buttonCriticalSubtleBackgroundActive | criticalSubtle | #F3CECE |
buttonCriticalSubtleForeground | criticalSubtle | #970C0C |
buttonCriticalSubtleForegroundHover | criticalSubtle | #890B0B |
buttonCriticalSubtleForegroundActive | criticalSubtle | #6D0909 |
buttonCriticalBackground | critical | #D21C1C |
buttonCriticalBackgroundHover | critical | #B91919 |
buttonCriticalBackgroundActive | critical | #9D1515 |
buttonCriticalForeground | critical | #FFFFFF |
buttonCriticalForegroundHover | critical | #FFFFFF |
buttonCriticalForegroundActive | critical | #FFFFFF |
buttonSmallFontSize | small | 13px |
buttonSmallPadding | small | 0 12px |
buttonSmallBothIconsPadding | small | 0 8px |
buttonSmallLeftIconPadding | small | 0 12px 0 8px |
buttonSmallRightIconPadding | small | 0 8px 0 12px |
buttonNormalFontSize | normal | 15px |
buttonNormalPadding | normal | 0 16px |
buttonNormalBothIconsPadding | normal | 0 12px |
buttonNormalLeftIconPadding | normal | 0 16px 0 12px |
buttonNormalRightIconPadding | normal | 0 12px 0 16px |
buttonLargeFontSize | large | 16px |
buttonLargePadding | large | 0 28px |
buttonLargeBothIconsPadding | large | 0 16px |
buttonLargeLeftIconPadding | large | 0 28px 0 16px |
buttonLargeRightIconPadding | large | 0 16px 0 28px |
buttonInfoBackground | info | #0172CB |
buttonInfoBackgroundHover | info | #0161AC |
buttonInfoBackgroundActive | info | #01508E |
buttonInfoForeground | info | #FFFFFF |
buttonInfoForegroundHover | info | #FFFFFF |
buttonInfoForegroundActive | info | #FFFFFF |
buttonWithoutTextPadding | withoutText | 0 |
buttonPaddingXSmall | padding | 8px |
buttonPaddingSmall | padding | 12px |
buttonPaddingNormal | padding | 16px |
buttonPaddingLarge | padding | 28px |
buttonPrimarySubtleBackground | primarySubtle | #E1F4F3 |
buttonPrimarySubtleBackgroundHover | primarySubtle | #D6F0EC |
buttonPrimarySubtleBackgroundActive | primarySubtle | #BFE8E2 |
buttonPrimarySubtleForeground | primarySubtle | #007A69 |
buttonPrimarySubtleForegroundHover | primarySubtle | #007060 |
buttonPrimarySubtleForegroundActive | primarySubtle | #006657 |
buttonPrimaryBackground | primary | #00A58E |
buttonPrimaryBackgroundHover | primary | #009580 |
buttonPrimaryBackgroundActive | primary | #008472 |
buttonPrimaryForeground | primary | #FFFFFF |
buttonPrimaryForegroundHover | primary | #FFFFFF |
buttonPrimaryForegroundActive | primary | #FFFFFF |
buttonPrimaryBorderColorFocus | primary | #00A58E80 |
buttonSecondaryBackground | secondary | #E8EDF1 |
buttonSecondaryBackgroundHover | secondary | #DCE3E9 |
buttonSecondaryBackgroundActive | secondary | #CAD4DE |
buttonSecondaryForeground | secondary | #252A31 |
buttonSecondaryForegroundHover | secondary | #181B20 |
buttonSecondaryForegroundActive | secondary | #0B0C0F |
buttonSuccessBackground | success | #28A138 |
buttonSuccessBackgroundHover | success | #238B31 |
buttonSuccessBackgroundActive | success | #1D7228 |
buttonSuccessForeground | success | #FFFFFF |
buttonSuccessForegroundHover | success | #FFFFFF |
buttonSuccessForegroundActive | success | #FFFFFF |
buttonWarningBackground | warning | #DF7B00 |
buttonWarningBackgroundHover | warning | #C96F00 |
buttonWarningBackgroundActive | warning | #B26200 |
buttonWarningForeground | warning | #FFFFFF |
buttonWarningForegroundHover | warning | #FFFFFF |
buttonWarningForegroundActive | warning | #FFFFFF |
buttonWhiteBackground | white | #FFFFFF |
buttonWhiteBackgroundHover | white | #F5F7F9 |
buttonWhiteBackgroundActive | white | #E5EAEF |
buttonWhiteForeground | white | #252A31 |
buttonWhiteForegroundHover | white | #181B20 |
buttonWhiteForegroundActive | white | #0B0C0F |
buttonWhiteBorderColorFocus | white | #E7ECF180 |
BorderColor tokens
Selected variants
Name | Variant | Value |
|---|---|---|
borderColorButtonPrimaryBordered | buttonPrimary | #00A58E |
borderColorButtonPrimaryBorderedHover | buttonPrimary | #009580 |
borderColorButtonPrimaryBorderedActive | buttonPrimary | #008472 |
borderColorButtonSecondaryBordered | buttonSecondary | #252A31 |
borderColorButtonSecondaryBorderedHover | buttonSecondary | #181B20 |
borderColorButtonSecondaryBorderedActive | buttonSecondary | #0B0C0F |
borderColorButtonFacebookBordered | buttonFacebook | #3B5998 |
borderColorButtonFacebookBorderedHover | buttonFacebook | #385490 |
borderColorButtonFacebookBorderedActive | buttonFacebook | #354F88 |
borderColorButtonGoogleBordered | buttonGoogle | #252A31 |
borderColorButtonGoogleBorderedHover | buttonGoogle | #181B20 |
borderColorButtonGoogleBorderedActive | buttonGoogle | #0B0C0F |
borderColorButtonInfoBordered | buttonInfo | #0172CB |
borderColorButtonInfoBorderedHover | buttonInfo | #0161AC |
borderColorButtonInfoBorderedActive | buttonInfo | #01508E |
borderColorButtonSuccessBordered | buttonSuccess | #28A138 |
borderColorButtonSuccessBorderedHover | buttonSuccess | #238B31 |
borderColorButtonSuccessBorderedActive | buttonSuccess | #1D7228 |
borderColorButtonWarningBordered | buttonWarning | #DF7B00 |
borderColorButtonWarningBorderedHover | buttonWarning | #C96F00 |
borderColorButtonWarningBorderedActive | buttonWarning | #B26200 |
borderColorButtonCriticalBordered | buttonCritical | #D21C1C |
borderColorButtonCriticalBorderedHover | buttonCritical | #B91919 |
borderColorButtonCriticalBorderedActive | buttonCritical | #9D1515 |
borderColorButtonWhiteBordered | buttonWhite | #FFFFFF |
borderColorButtonWhiteBorderedHover | buttonWhite | #FFFFFF |
borderColorButtonWhiteBorderedActive | buttonWhite | #FFFFFF |
borderColorCard | card | #E8EDF1 |
borderColorCheckboxRadio | checkboxRadio | #BAC7D5 |
borderColorCheckboxRadioActive | checkboxRadioActive | #252A31 |
borderColorCheckboxRadioError | checkboxRadioError | #D21C1C |
borderColorCheckboxRadioFocus | checkboxRadioFocus | #0172CB |
borderColorCheckboxRadioHover | checkboxRadioHover | #4F5E71 |
borderColorInput | input | #BAC7D5 |
borderColorInputActive | inputActive | #94A8BE |
borderColorInputError | inputError | #D21C1C |
borderColorInputErrorFocus | inputErrorFocus | #D21C1C |
borderColorInputErrorHover | inputErrorHover | #B91919 |
borderColorInputFocus | inputFocus | #0172CB |
borderColorInputHover | inputHover | #A6B6C8 |
borderColorModal | modal | #E8EDF1 |
borderColorTable | table | #E8EDF1 |
borderColorTableCell | tableCell | #BAC7D5 |
borderColorTableHead | tableHead | #BAC7D5 |
borderColorTag | tag | #BAC7D5 |
borderColorTagFocus | tagFocus | #0172CB |
CountryFlag tokens
Selected variants
Name | Variant | Value |
|---|---|---|
countryFlagShadow | shadow | inset 0 0 0 1px rgba(37, 42, 49, 0.1) |
countryFlagBackground | background | transparent |
countryFlagSmallHeight | small | 9px |
countryFlagSmallWidth | small | 16px |
countryFlagMediumHeight | medium | 13px |
countryFlagMediumWidth | medium | 24px |
Dialog tokens
Selected variants
Name | Variant | Value |
|---|---|---|
dialogBorderRadiusDesktop | borderRadius | 9px |
dialogBorderRadiusMobile | borderRadius | 12px |
dialogWidth | width | 540px |
Drawer tokens
Selected variants
Name | Variant | Value |
|---|---|---|
drawerOverlayBackground | overlay | #252A3180 |
FormBox tokens
Selected variants
Name | Variant | Value |
|---|---|---|
formBoxSmallHeight | small | 32px |
formBoxNormalHeight | normal | 44px |
formBoxLargeHeight | large | 52px |
FormElement tokens
Selected variants
Name | Variant | Value |
|---|---|---|
formElementBackground | background | #FFFFFF |
formElementDisabledBackground | disabled | #E8EDF1 |
formElementDisabledForeground | disabled | #4F5E71 |