Selected categories
Border radius tokens
Name | Value |
|---|---|
borderRadius50 | 2px |
borderRadius100 | 4px |
borderRadius150 | 6px |
borderRadius200 | 8px |
borderRadius300 | 12px |
borderRadius400 | 16px |
borderRadiusNone | 0 |
borderRadiusFull | 9999px |
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 |
elevationLevel1BoxShadow | 0 0 2px 0 rgba(37, 42, 49, 0.16), 0 1px 4px 0 rgba(37, 42, 49, 0.12) |
elevationLevel2BoxShadow | 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) |
elevationLevel3BoxShadow | 0 4px 8px 0 rgba(37, 42, 49, 0.16), 0 8px 24px 0 rgba(37, 42, 49, 0.24) |
elevationLevel3ReverseBoxShadow | 0 -4px 8px 0 rgba(37, 42, 49, 0.16), 0 -8px 24px 0 rgba(37, 42, 49, 0.24) |
elevationLevel4BoxShadow | 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 | #0070C8 |
paletteBlueNormalHover | #0161AC |
paletteBlueNormalActive | #01508E |
paletteBlueDark | #005AA3 |
paletteBlueDarkHover | #004F8F |
paletteBlueDarkActive | #003E70 |
paletteBlueDarker | #003866 |
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 | #0A932B |
paletteGreenNormalHover | #238B31 |
paletteGreenNormalActive | #1D7228 |
paletteGreenDark | #2D7738 |
paletteGreenDarkHover | #276831 |
paletteGreenDarkActive | #1F5126 |
paletteGreenDarker | #1C4A23 |
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 | #CF6C00 |
paletteOrangeNormalHover | #B86000 |
paletteOrangeNormalActive | #AD5700 |
paletteOrangeDark | #A75400 |
paletteOrangeDarkHover | #954A00 |
paletteOrangeDarkActive | #803F00 |
paletteOrangeDarker | #663200 |
paletteProductLight | #E1F4F3 |
paletteProductLightHover | #D6F0EC |
paletteProductLightActive | #BFE8E2 |
paletteProductNormal | #00A58E |
paletteProductNormalHover | #009580 |
paletteProductNormalActive | #008472 |
paletteProductDark | #007A69 |
paletteProductDarkHover | #007060 |
paletteProductDarkActive | #006657 |
paletteProductDarker | #004D41 |
paletteRedLight | #FAEAEA |
paletteRedLightHover | #F8E2E2 |
paletteRedLightActive | #F3CECE |
paletteRedNormal | #D21C1C |
paletteRedNormalHover | #B91919 |
paletteRedNormalActive | #9D1515 |
paletteRedDark | #970C0C |
paletteRedDarkHover | #890B0B |
paletteRedDarkActive | #6D0909 |
paletteRedDarker | #630808 |
paletteSocialFacebook | #3B5998 |
paletteSocialFacebookHover | #385490 |
paletteSocialFacebookActive | #354F88 |
paletteWhite | #FFFFFF |
paletteWhiteNormal | #FFFFFF |
paletteWhiteHover | #F1F4F7 |
paletteWhiteActive | #E7ECF1 |
Spacing tokens
Name | Value |
|---|---|
space50 | 2px |
space100 | 4px |
space150 | 6px |
space200 | 8px |
space300 | 12px |
space400 | 16px |
space500 | 20px |
space600 | 24px |
space700 | 28px |
space800 | 32px |
space1000 | 40px |
space1200 | 48px |
space1300 | 52px |
space1600 | 64px |
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 |