Component design tokens

Alert tokens
Name
VariantValue
alertBackgroundCritical
background
#FAEAEA
alertBackgroundInfo
background
#E8F4FD
alertBackgroundSuccess
background
#EAF5EA
alertBackgroundWarning
background
#FEF2E6
alertIconCritical
icon
#D21C1C
alertIconInfo
icon
#0070C8
alertIconSuccess
icon
#0A932B
alertIconWarning
icon
#CF6C00
alertColorTextCritical
colorText
#970C0C
alertColorTextInfo
colorText
#005AA3
alertColorTextSuccess
colorText
#2D7738
alertColorTextWarning
colorText
#A75400
alertColorTextLink
colorText
#4F5E71
Badge tokens
Name
VariantValue
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
#0070C8
badgeInfoForeground
info
#FFFFFF
badgeInfoSubtleBackground
infoSubtle
#E8F4FD
badgeInfoSubtleForeground
infoSubtle
#005AA3
badgeNeutralBackground
neutral
#F5F7F9
badgeNeutralForeground
neutral
#252A31
badgeSuccessBackground
success
#0A932B
badgeSuccessForeground
success
#FFFFFF
badgeSuccessSubtleBackground
successSubtle
#EAF5EA
badgeSuccessSubtleForeground
successSubtle
#2D7738
badgeWarningBackground
warning
#CF6C00
badgeWarningForeground
warning
#FFFFFF
badgeWarningSubtleBackground
warningSubtle
#FEF2E6
badgeWarningSubtleForeground
warningSubtle
#A75400
badgeWhiteBackground
white
#FFFFFF
badgeWhiteForeground
white
#252A31
ButtonLink tokens
Name
VariantValue
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
Name
VariantValue
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
#0070C8
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
#0A932B
buttonSuccessBackgroundHover
success
#238B31
buttonSuccessBackgroundActive
success
#1D7228
buttonSuccessForeground
success
#FFFFFF
buttonSuccessForegroundHover
success
#FFFFFF
buttonSuccessForegroundActive
success
#FFFFFF
buttonWarningBackground
warning
#CF6C00
buttonWarningBackgroundHover
warning
#B86000
buttonWarningBackgroundActive
warning
#AD5700
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
Name
VariantValue
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
Name
VariantValue
dialogBorderRadiusDesktop
borderRadius
9px
dialogBorderRadiusMobile
borderRadius
12px
dialogWidth
width
540px
Drawer tokens
Name
VariantValue
drawerOverlayBackground
overlay
#252A3180
FormBox tokens
Name
VariantValue
formBoxSmallHeight
small
32px
formBoxNormalHeight
normal
44px
formBoxLargeHeight
large
52px
FormElement tokens
Name
VariantValue
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
#0070C8
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(0, 112, 200, 1), inset 0 0 0 3px rgba(0, 112, 200, 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
Name
VariantValue
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
Name
VariantValue
iconPrimaryForeground
primary
#252A31
iconSecondaryForeground
secondary
#4F5E71
iconTertiaryForeground
tertiary
#BAC7D5
iconInfoForeground
info
#0070C8
iconSuccessForeground
success
#0A932B
iconWarningForeground
warning
#CF6C00
iconCriticalForeground
critical
#D21C1C
iconSmallSize
small
16px
iconMediumSize
medium
20px
iconLargeSize
large
24px
iconExtraLargeSize
extraLarge
32px
Illustration tokens
Name
VariantValue
illustrationExtraSmallHeight
extraSmall
90px
illustrationSmallHeight
small
120px
illustrationMediumHeight
medium
200px
illustrationLargeHeight
large
280px
illustrationDisplayHeight
display
460px
Loading tokens
Name
VariantValue
loadingForeground
foreground
#BAC7D5
Modal tokens
Name
VariantValue
modalBorderRadiusMobile
borderRadiusMobile
12px
modalBorderRadius
borderRadius
12px
modalExtraSmallWidth
extraSmall
360px
modalSmallWidth
small
540px
modalNormalWidth
normal
740px
modalLargeWidth
large
900px
modalExtraLargeWidth
extraLarge
1280px
SocialButton tokens
Name
VariantValue
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
Name
VariantValue
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
Name
VariantValue
tagColoredBackground
colored
#E8F4FD
tagColoredBackgroundHover
colored
#DEF0FC
tagColoredBackgroundActive
colored
#C7E4FA
tagColoredForeground
colored
#003866
tagNeutralBackground
neutral
#E8EDF1
tagNeutralBackgroundHover
neutral
#DCE3E9
tagNeutralBackgroundActive
neutral
#CAD4DE
tagNeutralForeground
neutral
#252A31
TextLink tokens
Name
VariantValue
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
#1C4A23
textLinkInfoForeground
info
#005AA3
textLinkInfoForegroundHover
info
#004F8F
textLinkInfoForegroundActive
info
#003866
textLinkWarningForeground
warning
#A75400
textLinkWarningForegroundHover
warning
#954A00
textLinkWarningForegroundActive
warning
#663200
textLinkCriticalForeground
critical
#970C0C
textLinkCriticalForegroundHover
critical
#890B0B
textLinkCriticalForegroundActive
critical
#630808
textLinkWhiteForeground
white
#FFFFFF
textLinkWhiteForegroundHover
white
#E1F4F3
textLinkWhiteForegroundActive
white
#E1F4F3
Text tokens
Name
VariantValue
textPrimaryBackground
primary
#252A311A
textPrimaryForeground
primary
#252A31
textSecondaryBackground
secondary
#4F5E711A
textSecondaryForeground
secondary
#4F5E71
textInfoBackground
info
#0070C81A
textInfoForeground
info
#0070C8
textSuccessBackground
success
#0A932B1A
textSuccessForeground
success
#0A932B
textWarningBackground
warning
#CF6C001A
textWarningForeground
warning
#CF6C00
textCriticalBackground
critical
#D21C1C1A
textCriticalForeground
critical
#D21C1C
textWhiteBackground
white
#FFFFFF1A
textWhiteForeground
white
#FFFFFF