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 |
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 |
formElementDisabledOpacity | disabled | 0.5 |
formElementBorderColorDisabled | borderColorDisabled | transparent |
formElementBorderColor | borderColor | #BAC7D5 |
formElementBorderColorHover | borderColorHover | #A6B6C8 |
formElementBorderColorActive | borderColorActive | #94A8BE |
formElementBorderColorFocus | borderColorFocus | #0172CB |
formElementBorderColorError | borderColorError | #D21C1C |
formElementBorderColorErrorHover | borderColorErrorHover | #B91919 |
formElementBoxShadow | boxShadow | inset 0 0 0 1px rgba(186, 199, 213, 1) |
formElementBoxShadowError | boxShadowError | inset 0 0 0 1px rgba(210, 28, 28, 1) |
formElementBoxShadowErrorHover | boxShadowErrorHover | inset 0 0 0 1px rgba(185, 25, 25, 1) |
formElementBoxShadowHover | boxShadowHover | inset 0 0 0 1px rgba(166, 182, 200, 1) |
formElementFocusBoxShadow | focus | inset 0 0 0 1px rgba(1, 114, 203, 1), inset 0 0 0 3px rgba(1, 114, 203, 0.15) |
formElementErrorFocusBoxShadow | errorFocus | inset 0 0 0 1px rgba(210, 28, 28, 1), inset 0 0 0 3px rgba(210, 28, 28, 0.15) |
formElementNormalFontSize | normal | 15px |
formElementNormalPadding | normal | 0 12px |
formElementForeground | foreground | #697D95 |
formElementFilledForeground | filled | #252A31 |
formElementLabelForeground | label | #252A31 |
formElementLabelFilledForeground | label | #4F5E71 |
formElementPrefixForeground | prefix | #4F5E71 |
formElementSmallPadding | small | 0 12px |
Heading tokens
Selected variants
Name | Variant | Value |
|---|---|---|
headingDisplayFontSize | display | 40px |
headingDisplayFontWeight | display | 700 |
headingDisplayLineHeight | display | 44px |
headingDisplaySubtitleFontSize | displaySubtitle | 22px |
headingDisplaySubtitleFontWeight | displaySubtitle | 400 |
headingDisplaySubtitleLineHeight | displaySubtitle | 28px |
headingTitle0FontSize | title0 | 28px |
headingTitle0FontWeight | title0 | 700 |
headingTitle0LineHeight | title0 | 36px |
headingTitle1FontSize | title1 | 24px |
headingTitle1FontWeight | title1 | 700 |
headingTitle1LineHeight | title1 | 32px |
headingTitle2FontSize | title2 | 20px |
headingTitle2FontWeight | title2 | 700 |
headingTitle2LineHeight | title2 | 28px |
headingTitle3FontSize | title3 | 18px |
headingTitle3FontWeight | title3 | 700 |
headingTitle3LineHeight | title3 | 24px |
headingTitle4FontSize | title4 | 16px |
headingTitle4FontWeight | title4 | 700 |
headingTitle4LineHeight | title4 | 22px |
headingTitle5FontSize | title5 | 15px |
headingTitle5FontWeight | title5 | 700 |
headingTitle5LineHeight | title5 | 20px |
headingTitle6FontSize | title6 | 13px |
headingTitle6FontWeight | title6 | 700 |
headingTitle6LineHeight | title6 | 18px |
headingForeground | foreground | #252A31 |
headingForegroundInverted | foregroundInverted | #FFFFFF |
Icon tokens
Selected variants
Name | Variant | Value |
|---|---|---|
iconPrimaryForeground | primary | #252A31 |
iconSecondaryForeground | secondary | #4F5E71 |
iconTertiaryForeground | tertiary | #BAC7D5 |
iconInfoForeground | info | #0172CB |
iconSuccessForeground | success | #28A138 |
iconWarningForeground | warning | #DF7B00 |
iconCriticalForeground | critical | #D21C1C |
iconSmallSize | small | 16px |
iconMediumSize | medium | 20px |
iconLargeSize | large | 24px |
iconExtraLargeSize | extraLarge | 32px |
Illustration tokens
Selected variants
Name | Variant | Value |
|---|---|---|
illustrationExtraSmallHeight | extraSmall | 90px |
illustrationSmallHeight | small | 120px |
illustrationMediumHeight | medium | 200px |
illustrationLargeHeight | large | 280px |
illustrationDisplayHeight | display | 460px |
Loading tokens
Selected variants
Name | Variant | Value |
|---|---|---|
loadingForeground | foreground | #BAC7D5 |
Modal tokens
Selected variants
Name | Variant | Value |
|---|---|---|
modalBorderRadiusMobile | borderRadiusMobile | 12px |
modalBorderRadius | borderRadius | 12px |
modalExtraSmallWidth | extraSmall | 360px |
modalSmallWidth | small | 540px |
modalNormalWidth | normal | 740px |
modalLargeWidth | large | 900px |
modalExtraLargeWidth | extraLarge | 1280px |
SocialButton tokens
Selected variants
Name | Variant | Value |
|---|---|---|
socialButtonAppleBackground | apple | #4F5E71 |
socialButtonAppleBackgroundHover | apple | #3E4E63 |
socialButtonAppleBackgroundActive | apple | #324256 |
socialButtonAppleForeground | apple | #FFFFFF |
socialButtonAppleForegroundHover | apple | #FFFFFF |
socialButtonAppleForegroundActive | apple | #FFFFFF |
socialButtonAppleBorderColorFocus | apple | #697D9580 |
socialButtonAppleIconForeground | apple | #FFFFFF |
socialButtonFacebookBackground | facebook | #3B5998 |
socialButtonFacebookBackgroundHover | facebook | #385490 |
socialButtonFacebookBackgroundActive | facebook | #354F88 |
socialButtonFacebookForeground | facebook | #FFFFFF |
socialButtonFacebookForegroundHover | facebook | #FFFFFF |
socialButtonFacebookForegroundActive | facebook | #FFFFFF |
socialButtonFacebookIconForeground | facebook | #3B5998 |
socialButtonGoogleBackground | google | #F5F7F9 |
socialButtonGoogleBackgroundHover | google | #E5EAEF |
socialButtonGoogleBackgroundActive | google | #D6DEE6 |
socialButtonGoogleForeground | google | #252A31 |
socialButtonGoogleForegroundHover | google | #181B20 |
socialButtonGoogleForegroundActive | google | #0B0C0F |
socialButtonGoogleIconForeground | google | currentColor |
socialButtonTwitterBackground | twitter | #BAC7D5 |
socialButtonTwitterBackgroundHover | twitter | #DCE3E9 |
socialButtonTwitterBackgroundActive | twitter | #CAD4DE |
socialButtonTwitterForeground | twitter | #4F5E71 |
socialButtonTwitterForegroundHover | twitter | #4F5E71 |
socialButtonTwitterForegroundActive | twitter | #4F5E71 |
socialButtonTwitterBorderColorFocus | twitter | #697D9580 |
socialButtonTwitterIconForeground | twitter | #00ACEE |
Tab tokens
Selected variants
Name | Variant | Value |
|---|---|---|
tabBundleBasicForeground | bundleBasic | linear-gradient(80.91deg, #E13E3B 0%, #E87E09 100%) |
tabBundleBasicBackground | bundleBasic | #FFFFFF |
tabBundleBasicBackgroundHover | bundleBasic | rgba(215, 51, 28, 0.08) |
tabBundleBasicBackgroundActive | bundleBasic | rgba(215, 51, 28, 0.12) |
tabBundleMediumForeground | bundleMedium | linear-gradient(80.91deg, #3719AB 0%, #8539DB 100%) |
tabBundleMediumBackground | bundleMedium | #FFFFFF |
tabBundleMediumBackgroundHover | bundleMedium | rgba(59, 30, 176, 0.08) |
tabBundleMediumBackgroundActive | bundleMedium | rgba(59, 30, 176, 0.12) |
tabBundleTopBackground | bundleTop | #FFFFFF |
tabBundleTopBackgroundHover | bundleTop | #F1F4F7 |
tabBundleTopForeground | bundleTop | linear-gradient(80.91deg, #2D2D2E 0%, #696E73 100%) |
Tag tokens
Selected variants
Name | Variant | Value |
|---|---|---|
tagColoredBackground | colored | #E8F4FD |
tagColoredBackgroundHover | colored | #DEF0FC |
tagColoredBackgroundActive | colored | #C7E4FA |
tagColoredForeground | colored | #004680 |
tagNeutralBackground | neutral | #E8EDF1 |
tagNeutralBackgroundHover | neutral | #DCE3E9 |
tagNeutralBackgroundActive | neutral | #CAD4DE |
tagNeutralForeground | neutral | #252A31 |
TextLink tokens
Selected variants
Name | Variant | Value |
|---|---|---|
textLinkPrimaryForeground | primary | #007A69 |
textLinkPrimaryForegroundHover | primary | #007060 |
textLinkPrimaryForegroundActive | primary | #006657 |
textLinkSecondaryForeground | secondary | #252A31 |
textLinkSecondaryForegroundHover | secondary | #007060 |
textLinkSecondaryForegroundActive | secondary | #006657 |
textLinkSuccessForeground | success | #2D7738 |
textLinkSuccessForegroundHover | success | #276831 |
textLinkSuccessForegroundActive | success | #235C2B |
textLinkInfoForeground | info | #005AA3 |
textLinkInfoForegroundHover | info | #004F8F |
textLinkInfoForegroundActive | info | #004680 |
textLinkWarningForeground | warning | #AD5700 |
textLinkWarningForegroundHover | warning | #A75400 |
textLinkWarningForegroundActive | warning | #803F00 |
textLinkCriticalForeground | critical | #970C0C |
textLinkCriticalForegroundHover | critical | #890B0B |
textLinkCriticalForegroundActive | critical | #760909 |
textLinkWhiteForeground | white | #FFFFFF |
textLinkWhiteForegroundHover | white | #E1F4F3 |
textLinkWhiteForegroundActive | white | #E1F4F3 |
Text tokens
Selected variants
Name | Variant | Value |
|---|---|---|
textPrimaryBackground | primary | #252A311A |
textPrimaryForeground | primary | #252A31 |
textSecondaryBackground | secondary | #4F5E711A |
textSecondaryForeground | secondary | #4F5E71 |
textInfoBackground | info | #0172CB1A |
textInfoForeground | info | #0172CB |
textSuccessBackground | success | #28A1381A |
textSuccessForeground | success | #28A138 |
textWarningBackground | warning | #DF7B001A |
textWarningForeground | warning | #DF7B00 |
textCriticalBackground | critical | #D21C1C1A |
textCriticalForeground | critical | #D21C1C |
textWhiteBackground | white | #FFFFFF1A |
textWhiteForeground | white | #FFFFFF |