Component design tokens

Alert tokens
Name
VariantValue
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
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
#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
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
#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
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