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 |
elevationNavBarBoxShadow | 0 2px 12px 0 rgba(27, 50, 73, 0.08) |
elevationLevel1BoxShadow | 0 2px 6px 0 rgba(79, 94, 113, 0.08), 0 0 2px 0 rgba(79, 94, 113, 0.12), 0 0 1px 0 rgba(41, 47, 55, 0.3) |
elevationLevel2BoxShadow | 0 8px 24px -5px rgba(79, 94, 113, 0.1), 0 5px 16px -3px rgba(79, 94, 113, 0.12), 0 1px 4px 0 rgba(79, 94, 113, 0.12), 0 0 1px 0 rgba(41, 47, 55, 0.3) |
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(79, 94, 113, 0.12), 0 -2px 6px 0 rgba(79, 94, 113, 0.12), 0 0 1px 0 rgba(41, 47, 55, 0.15) |
elevationLevel3BoxShadow | 0 2px 16px 0 rgba(79, 94, 113, 0.04), 0 34px 20px 0 rgba(79, 94, 113, 0.05), 0 15px 15px 0 rgba(79, 94, 113, 0.1), 0 5px 16px 0 rgba(79, 94, 113, 0.15), 0 2px 6px -1px rgba(79, 94, 113, 0.14), 0 -1px 2px -1px rgba(79, 94, 113, 0.15) |
elevationLevel3ReverseBoxShadow | 0 -2px 16px 0 rgba(79, 94, 113, 0.04), 0 -34px 20px 0 rgba(79, 94, 113, 0.05), 0 -15px 15px 0 rgba(79, 94, 113, 0.1), 0 -5px 16px 0 rgba(79, 94, 113, 0.15), 0 -2px 6px -1px rgba(79, 94, 113, 0.14), 0 1px 2px -1px rgba(79, 94, 113, 0.15) |
elevationLevel4BoxShadow | 0 60px 40px 0 rgba(79, 94, 113, 0.05), 0 40px 30px 0 rgba(79, 94, 113, 0.08), 0 24px 24px 0 rgba(79, 94, 113, 0.14), 0 5px 16px 0 rgba(79, 94, 113, 0.15), 0 2px 6px -1px rgba(79, 94, 113, 0.14), 0 -1px 2px -1px rgba(79, 94, 113, 0.15) |
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 | #048724 |
paletteGreenNormalHover | #047620 |
paletteGreenNormalActive | #03631B |
paletteGreenDark | #296B33 |
paletteGreenDarkHover | #21592A |
paletteGreenDarkActive | #1C4A23 |
paletteGreenDarker | #163B1C |
paletteInkDark | #252A31 |
paletteInkDarkHover | #181B20 |
paletteInkDarkActive | #0B0C0F |
paletteInkLight | #657890 |
paletteInkLightHover | #58697E |
paletteInkLightActive | #4E5C6F |
paletteInkNormal | #4F5E71 |
paletteInkNormalHover | #3E4E63 |
paletteInkNormalActive | #324256 |
paletteOrangeLight | #FEF2E6 |
paletteOrangeLightHover | #FCECDA |
paletteOrangeLightActive | #FAE2C6 |
paletteOrangeNormal | #B36200 |
paletteOrangeNormalHover | #995400 |
paletteOrangeNormalActive | #804600 |
paletteOrangeDark | #8A4500 |
paletteOrangeDarkHover | #703800 |
paletteOrangeDarkActive | #572C00 |
paletteOrangeDarker | #4D2600 |
paletteProductLight | #E1F4F3 |
paletteProductLightHover | #D6F0EC |
paletteProductLightActive | #BFE8E2 |
paletteProductNormal | #008F7B |
paletteProductNormalHover | #007565 |
paletteProductNormalActive | #006153 |
paletteProductDark | #007061 |
paletteProductDarkHover | #005C4F |
paletteProductDarkActive | #004239 |
paletteProductDarker | #003D35 |
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 |