Spacing Value Examples Usage
spacingInlineXxxs 4px
spacingInlineXxs 8px
spacingInlineXxsExtra 12px
spacingInlineXs 16px
spacingInlineSm 24px
spacingInlineMd 32px
spacingInlineLg 40px
spacingInlineXl 48px
spacingInlineXxl 64px
spacingInlineXxxl 80px
spacingInsetXxs 4px
spacingInsetXs 8px
spacingInsetSm 16px
spacingInsetMd 24px
spacingInsetLg 32px
spacingInsetXl 40px
spacingStackXxxs 4px
spacingStackXxs 8px
spacingStackXxsExtra 12px
spacingStackXs 16px
spacingStackSm 24px
spacingStackMd 32px
spacingStackLg 40px
spacingStackXl 48px
spacingStackXxl 64px
spacingStackXxxl 80px
spacingSquishXs 4px 8px
spacingSquishSm 8px 16px
spacingSquishMd 16px 24px
spacingSquishLg 16px 32px
Font Weights Value Examples Usage
fontWeightLight 300
The quick brown fox jumps over the lazy dog.
fontWeightRegular 400
The quick brown fox jumps over the lazy dog.
fontWeightMedium 600
The quick brown fox jumps over the lazy dog.
fontWeightBold 700
The quick brown fox jumps over the lazy dog.
fontWeightExtrabold 800
The quick brown fox jumps over the lazy dog.
Font Sizes Value Examples Usage
fontSizeXxxs 12px
The quick brown fox jumps over the lazy dog.
fontSizeXxs 14px
The quick brown fox jumps over the lazy dog.
fontSizeXs 16px
The quick brown fox jumps over the lazy dog.
fontSizeSm 20px
The quick brown fox jumps over the lazy dog.
fontSizeMd 24px
The quick brown fox jumps over the lazy dog.
fontSizeLg 32px
The quick brown fox jumps over the lazy dog.
fontSizeXl 40px
The quick brown fox jumps over the lazy dog.
fontSizeXxl 48px
The quick brown fox jumps over the lazy dog.
fontSizeXxxl 64px
The quick brown fox jumps over the lazy dog.
fontSizeDisplay 80px
The quick brown fox jumps over the lazy dog.
fontSizeGiant 96px
The quick brown fox jumps over the lazy dog.
Font Families Value Examples Usage
fontFamilyBase Nunito Sans
The quick brown fox jumps over the lazy dog.
fontFamilyHighlight Avenir
The quick brown fox jumps over the lazy dog.
Radius Value Examples Usage
borderWidthNone 0
borderWidthHairline 1px
borderWidthThin 2px
borderWidthThick 4px
borderWidthHeavy 8px
borderRadiusNone 0
borderRadiusTiny 4px
borderRadiusSm 8px
borderRadiusMd 12px
borderRadiusLg 16px
borderRadiusPill 56px
borderRadiusCircular 50%
Background Colors Value Examples Usage
colorBrandPrimaryPure rgb(0, 37, 224)
colorBrandPrimaryUp rgb(184, 195, 255)
colorBrandPrimaryDown rgb(88, 114, 245)
colorBrandPrimaryDeep rgb(14, 36, 143)
colorHighlightPure rgb(255, 114, 110)
colorHighlightUp rgb(255, 184, 178)
colorHighlightDown rgb(240, 88, 77)
colorHighlightDeep rgb(229, 62, 50)
colorComplementaryPure rgb(19, 189, 189)
colorComplementaryUp rgb(176, 245, 245)
colorComplementaryDown rgb(106, 229, 229)
colorComplementaryDeep rgb(28, 153, 153)
colorInterfaceLightPure rgb(255, 255, 255)
colorInterfaceLightUp rgb(243, 245, 254)
colorInterfaceLightDown rgb(224, 226, 238)
colorInterfaceLightDeep rgb(206, 209, 225)
colorInterfaceDarkPure rgb(12, 13, 20)
colorInterfaceDarkUp rgb(170, 173, 192)
colorInterfaceDarkDown rgb(103, 105, 122)
colorInterfaceDarkDeep rgb(57, 59, 71)
colorStatusPositivePure rgb(61, 204, 100)
colorStatusPositiveUp rgb(242, 253, 245)
colorStatusPositiveDown rgb(122, 220, 148)
colorStatusPositiveDeep rgb(45, 169, 79)
colorStatusWarningPure rgb(255, 163, 71)
colorStatusWarningUp rgb(255, 247, 240)
colorStatusWarningDown rgb(255, 189, 122)
colorStatusWarningDeep rgb(255, 138, 20)
colorStatusNegativePure rgb(245, 69, 110)
colorStatusNegativeUp rgb(255, 241, 244)
colorStatusNegativeDown rgb(242, 117, 146)
colorStatusNegativeDeep rgb(211, 20, 65)
Box Shadows Value Examples Usage
shadowLevel1 0 4px 8px rgba(12, 13, 20, 0.08)
shadowLevel2 0 8px 16px rgba(12, 13, 20, 0.08)
shadowLevel2Bottom 0 -8px 16px rgba(12, 13, 20, 0.08)
shadowLevel3 0 16px 32px rgba(12, 13, 20, 0.08)
shadowLevel4 0 16px 48px rgba(12, 13, 20, 0.08)