Text ColorsValueExamplesUsage
colorTextButtonBrandrgb(255, 255, 255)The quick brown fox jumps over the lazy dog.Primary buttons that have a dark blue background.
colorTextButtonBrandHoverrgb(255, 255, 255)The quick brown fox jumps over the lazy dog.
colorTextButtonBrandActivergb(255, 255, 255)The quick brown fox jumps over the lazy dog.
colorTextButtonBrandDisabledrgb(255, 255, 255)The quick brown fox jumps over the lazy dog.
colorTextButtonDefaultrgb(78, 138, 190)The quick brown fox jumps over the lazy dog.Default buttons have a light blue-gray background.
colorTextButtonDefaultHoverrgb(78, 138, 190)The quick brown fox jumps over the lazy dog.
colorTextButtonDefaultActivergb(78, 138, 190)The quick brown fox jumps over the lazy dog.
colorTextButtonDefaultDisabledrgb(78, 138, 190)The quick brown fox jumps over the lazy dog.
colorTextActionLabelrgb(78, 138, 190)The quick brown fox jumps over the lazy dog.Action label text color
colorTextActionLabelActivergb(78, 138, 190)The quick brown fox jumps over the lazy dog.Action label active text color
colorTextBrowserrgb(34, 34, 34)The quick brown fox jumps over the lazy dog.Top bar icon color
colorTextDefaultrgb(34, 34, 34)The quick brown fox jumps over the lazy dog.Body text color
colorTextErrorrgb(194, 57, 52)The quick brown fox jumps over the lazy dog.Error text for inputs and error misc
colorTextInputDisabledrgb(85, 85, 85)The quick brown fox jumps over the lazy dog.Input disabled text
colorTextInversergb(255, 255, 255)The quick brown fox jumps over the lazy dog.Inverse text color for dark backgrounds
colorTextInverseActivergb(255, 255, 255)The quick brown fox jumps over the lazy dog.Active state on a standalone link on a dark background.
colorTextInverseHoverrgb(255, 255, 255)The quick brown fox jumps over the lazy dog.Hover state on a standalone link on a dark background.
colorTextLinkrgb(48, 116, 175)The quick brown fox jumps over the lazy dog.
colorTextLinkActivergb(48, 116, 175)The quick brown fox jumps over the lazy dog.Active link text
colorTextLinkDisabledrgb(119, 119, 119)The quick brown fox jumps over the lazy dog.Disabled link text
colorTextLinkFocusrgb(48, 116, 175)The quick brown fox jumps over the lazy dog.Focus link text
colorTextLinkHoverrgb(48, 116, 175)The quick brown fox jumps over the lazy dog.Hover link text
colorTextWarningrgb(152, 96, 0)The quick brown fox jumps over the lazy dog.Color for texts or icons that are related to warnings.
colorTextWeakrgb(117, 117, 117)The quick brown fox jumps over the lazy dog.Color for text that is purposefully de-emphasized to create visual hierarchy.
Background ColorsValueExamplesUsage
colorBackgroundrgb(255, 255, 255)
colorBackgroundAltrgb(245, 245, 245)
colorBackgroundAlt2rgb(238, 238, 238)
colorBackgroundAltInversergb(56, 91, 107)
colorBackgroundOverlayInversergba(34, 34, 34, 0.6)
colorBackgroundOverlayContainerrgb(136, 136, 136)
colorBackgroundRowHoverrgb(245, 245, 245)
colorBackgroundRowActivergb(245, 245, 245)
colorBackgroundRowSelectedrgb(217, 234, 245)
colorBackgroundInversergb(56, 91, 107)
colorBackgroundAnchorrgb(245, 245, 245)
colorBackgroundBrowserrgb(255, 255, 255)
colorBackgroundHighlightrgb(185, 223, 241)
colorBackgroundModalrgb(255, 255, 255)
colorBackgroundInputrgb(255, 255, 255)
colorBackgroundInputActivergb(255, 255, 255)
colorBackgroundInputDisabledrgb(249, 249, 249)
colorBackgroundInputSearchrgb(255, 255, 255)
colorBackgroundPillrgb(238, 238, 238)
colorBackgroundErrorrgb(252, 236, 237)
colorBackgroundSuccessrgb(233, 252, 222)
colorBackgroundWarningrgb(255, 241, 225)
GradientsValueExamplesUsage
colorBrandlinear-gradient(to bottom, #66afe9, #4E8ABE)
colorBrandDarklinear-gradient(to bottom, #4E8ABE, #3074af)
colorBackgroundButtonBrandlinear-gradient(to bottom, #66afe9, #4E8ABE)
colorBackgroundButtonBrandActivelinear-gradient(to bottom, #4E8ABE, #3074af)
colorBackgroundButtonBrandHoverlinear-gradient(to bottom, #66afe9, #4E8ABE)
colorBackgroundButtonBrandDisabledlinear-gradient(to bottom, #66afe9, #4E8ABE)
colorBackgroundButtonDefaultlinear-gradient(to bottom, #FFFFFF, #D9EAF5)
colorBackgroundButtonDefaultHoverlinear-gradient(to bottom, #EDF5FA, #D9EAF5)
colorBackgroundModalBrandlinear-gradient(to bottom, #66afe9, #4E8ABE)
colorBackgroundButtonDefaultFocuslinear-gradient(to bottom, #FFFFFF, #D9EAF5)
colorBackgroundButtonDefaultDisabledlinear-gradient(to bottom, #FFFFFF, #D9EAF5)
colorBackgroundButtonIconlinear-gradient(to bottom, #FFFFFF, #D9EAF5)
colorBackgroundButtonIconHoverlinear-gradient(to bottom, #EDF5FA, #D9EAF5)
colorBackgroundButtonIconFocuslinear-gradient(to bottom, #FFFFFF, #D9EAF5)
colorBackgroundButtonIconActivelinear-gradient(to bottom, #EDF5FA, #D9EAF5)
colorBackgroundButtonIconDisabledlinear-gradient(to bottom, #FFFFFF, #D9EAF5)
Border ColorsValueExamplesUsage
colorBorderrgb(221, 221, 221)
colorBorderErrorrgb(238, 103, 103)
colorBorderSuccessrgb(75, 202, 129)
colorBorderWarningrgb(255, 181, 94)
colorBorderTabSelectedrgb(221, 221, 221)
colorBorderSeparatorrgb(221, 221, 221)
colorBorderRowSelectedrgb(204, 204, 204)
colorBorderRowSelectedHoverrgb(204, 204, 204)
colorBorderSelectionrgb(204, 204, 204)
colorBorderSelectionHoverrgb(204, 204, 204)
colorBorderSelectionActivergb(204, 204, 204)
colorBorderButtonBrandrgb(255, 255, 255)
colorBorderButtonBrandDisabledrgb(255, 255, 255)
colorBorderButtonDefaultrgb(170, 170, 170)
colorBorderInputrgb(204, 204, 204)
colorBorderInputFocusrgb(102, 175, 233)
colorBorderInputDisabledrgb(204, 204, 204)
FontsValueExamplesUsage
fontFamilyArial, sans-serif
Aa
fontFamilyBodyArial, sans-serif
Aa
fontFamilyAltGeorgia, Times New Roman, Times, serif
Aa
fontFamilyMonoMenlo, Monaco, Consolas, 'Courier New', monospace
Aa
Font WeightsValueExamplesUsage
fontWeightLight300
Aa
Use for large headings only. Has no affect when used with Arial.
fontWeightRegular400
Aa
Most body copy.
fontWeightBold700
Aa
Used sparingly for emphasized text within regular body copy.
Font SizesValueExamplesUsage
fontSizeXSmall10px
The quick brown fox jumps over the lazy dog.
fontSizeSmall12px
The quick brown fox jumps over the lazy dog.
fontSizeMedium16px
The quick brown fox jumps over the lazy dog.
fontSizeLarge20px
The quick brown fox jumps over the lazy dog.
fontSizeXLarge24px
The quick brown fox jumps over the lazy dog.
fontSizeXxLarge32px
The quick brown fox jumps over the lazy dog.
fontSizeBase11px
The quick brown fox jumps over the lazy dog.
Default body text size that may be used for reset.
fontSizeBaseMedium14px
The quick brown fox jumps over the lazy dog.
SpacingValueExamplesUsage
borderWidthThin1px
borderWidthThick2px
spacingXxxSmall2px
spacingXxSmall4px
spacingXSmall8px
spacingSmall12px
spacingMedium16px
spacingLarge24px
spacingXLarge32px
RadiusValueExamplesUsage
borderRadiusSmall.125rem
borderRadiusMedium.25rem
Icons in lists, record home icon, unbound input elements
borderRadiusLarge.5rem
borderRadiusPill15rem
borderRadiusCircle50%
Circle for global use, action icon bgd shape