Text Colors | Value | Examples | Usage
--- | --- | --- | ---
`colorTextButtonBrand` | `rgb(255, 255, 255)` | The quick brown fox jumps over the lazy dog. | Primary buttons that have a dark blue background.
`colorTextButtonBrandHover` | `rgb(255, 255, 255)` | The quick brown fox jumps over the lazy dog. |
`colorTextButtonBrandActive` | `rgb(255, 255, 255)` | The quick brown fox jumps over the lazy dog. |
`colorTextButtonBrandDisabled` | `rgb(255, 255, 255)` | The quick brown fox jumps over the lazy dog. |
`colorTextButtonDefault` | `rgb(78, 138, 190)` | The quick brown fox jumps over the lazy dog. | Default buttons have a light blue-gray background.
`colorTextButtonDefaultHover` | `rgb(78, 138, 190)` | The quick brown fox jumps over the lazy dog. |
`colorTextButtonDefaultActive` | `rgb(78, 138, 190)` | The quick brown fox jumps over the lazy dog. |
`colorTextButtonDefaultDisabled` | `rgb(78, 138, 190)` | The quick brown fox jumps over the lazy dog. |
`colorTextActionLabel` | `rgb(78, 138, 190)` | The quick brown fox jumps over the lazy dog. | Action label text color
`colorTextActionLabelActive` | `rgb(78, 138, 190)` | The quick brown fox jumps over the lazy dog. | Action label active text color
`colorTextBrowser` | `rgb(34, 34, 34)` | The quick brown fox jumps over the lazy dog. | Top bar icon color
`colorTextDefault` | `rgb(34, 34, 34)` | The quick brown fox jumps over the lazy dog. | Body text color
`colorTextError` | `rgb(194, 57, 52)` | The quick brown fox jumps over the lazy dog. | Error text for inputs and error misc
`colorTextInputDisabled` | `rgb(85, 85, 85)` | The quick brown fox jumps over the lazy dog. | Input disabled text
`colorTextInverse` | `rgb(255, 255, 255)` | The quick brown fox jumps over the lazy dog. | Inverse text color for dark backgrounds
`colorTextInverseActive` | `rgb(255, 255, 255)` | The quick brown fox jumps over the lazy dog. | Active state on a standalone link on a dark background.
`colorTextInverseHover` | `rgb(255, 255, 255)` | The quick brown fox jumps over the lazy dog. | Hover state on a standalone link on a dark background.
`colorTextLink` | `rgb(48, 116, 175)` | The quick brown fox jumps over the lazy dog. |
`colorTextLinkActive` | `rgb(48, 116, 175)` | The quick brown fox jumps over the lazy dog. | Active link text
`colorTextLinkDisabled` | `rgb(119, 119, 119)` | The quick brown fox jumps over the lazy dog. | Disabled link text
`colorTextLinkFocus` | `rgb(48, 116, 175)` | The quick brown fox jumps over the lazy dog. | Focus link text
`colorTextLinkHover` | `rgb(48, 116, 175)` | The quick brown fox jumps over the lazy dog. | Hover link text
`colorTextWarning` | `rgb(152, 96, 0)` | The quick brown fox jumps over the lazy dog. | Color for texts or icons that are related to warnings.
`colorTextWeak` | `rgb(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 Colors | Value | Examples | Usage
`colorBackground` | `rgb(255, 255, 255)` |  |
`colorBackgroundAlt` | `rgb(245, 245, 245)` |  |
`colorBackgroundAlt2` | `rgb(238, 238, 238)` |  |
`colorBackgroundAltInverse` | `rgb(56, 91, 107)` |  |
`colorBackgroundOverlayInverse` | `rgba(34, 34, 34, 0.6)` |  |
`colorBackgroundOverlayContainer` | `rgb(136, 136, 136)` |  |
`colorBackgroundRowHover` | `rgb(245, 245, 245)` |  |
`colorBackgroundRowActive` | `rgb(245, 245, 245)` |  |
`colorBackgroundRowSelected` | `rgb(217, 234, 245)` |  |
`colorBackgroundInverse` | `rgb(56, 91, 107)` |  |
`colorBackgroundAnchor` | `rgb(245, 245, 245)` |  |
`colorBackgroundBrowser` | `rgb(255, 255, 255)` |  |
`colorBackgroundHighlight` | `rgb(185, 223, 241)` |  |
`colorBackgroundModal` | `rgb(255, 255, 255)` |  |
`colorBackgroundInput` | `rgb(255, 255, 255)` |  |
`colorBackgroundInputActive` | `rgb(255, 255, 255)` |  |
`colorBackgroundInputDisabled` | `rgb(249, 249, 249)` |  |
`colorBackgroundInputSearch` | `rgb(255, 255, 255)` |  |
`colorBackgroundPill` | `rgb(238, 238, 238)` |  |
`colorBackgroundError` | `rgb(252, 236, 237)` |  |
`colorBackgroundSuccess` | `rgb(233, 252, 222)` |  |
`colorBackgroundWarning` | `rgb(255, 241, 225)` |  |
Gradients | Value | Examples | Usage
`colorBrand` | `linear-gradient(to bottom, #66afe9, #4E8ABE)` |  |
`colorBrandDark` | `linear-gradient(to bottom, #4E8ABE, #3074af)` |  |
`colorBackgroundButtonBrand` | `linear-gradient(to bottom, #66afe9, #4E8ABE)` |  |
`colorBackgroundButtonBrandActive` | `linear-gradient(to bottom, #4E8ABE, #3074af)` |  |
`colorBackgroundButtonBrandHover` | `linear-gradient(to bottom, #66afe9, #4E8ABE)` |  |
`colorBackgroundButtonBrandDisabled` | `linear-gradient(to bottom, #66afe9, #4E8ABE)` |  |
`colorBackgroundButtonDefault` | `linear-gradient(to bottom, #FFFFFF, #D9EAF5)` |  |
`colorBackgroundButtonDefaultHover` | `linear-gradient(to bottom, #EDF5FA, #D9EAF5)` |  |
`colorBackgroundModalBrand` | `linear-gradient(to bottom, #66afe9, #4E8ABE)` |  |
`colorBackgroundButtonDefaultFocus` | `linear-gradient(to bottom, #FFFFFF, #D9EAF5)` |  |
`colorBackgroundButtonDefaultDisabled` | `linear-gradient(to bottom, #FFFFFF, #D9EAF5)` |  |
`colorBackgroundButtonIcon` | `linear-gradient(to bottom, #FFFFFF, #D9EAF5)` |  |
`colorBackgroundButtonIconHover` | `linear-gradient(to bottom, #EDF5FA, #D9EAF5)` |  |
`colorBackgroundButtonIconFocus` | `linear-gradient(to bottom, #FFFFFF, #D9EAF5)` |  |
`colorBackgroundButtonIconActive` | `linear-gradient(to bottom, #EDF5FA, #D9EAF5)` |  |
`colorBackgroundButtonIconDisabled` | `linear-gradient(to bottom, #FFFFFF, #D9EAF5)` |  |
Border Colors | Value | Examples | Usage
`colorBorder` | `rgb(221, 221, 221)` |  |
`colorBorderError` | `rgb(238, 103, 103)` |  |
`colorBorderSuccess` | `rgb(75, 202, 129)` |  |
`colorBorderWarning` | `rgb(255, 181, 94)` |  |
`colorBorderTabSelected` | `rgb(221, 221, 221)` |  |
`colorBorderSeparator` | `rgb(221, 221, 221)` |  |
`colorBorderRowSelected` | `rgb(204, 204, 204)` |  |
`colorBorderRowSelectedHover` | `rgb(204, 204, 204)` |  |
`colorBorderSelection` | `rgb(204, 204, 204)` |  |
`colorBorderSelectionHover` | `rgb(204, 204, 204)` |  |
`colorBorderSelectionActive` | `rgb(204, 204, 204)` |  |
`colorBorderButtonBrand` | `rgb(255, 255, 255)` |  |
`colorBorderButtonBrandDisabled` | `rgb(255, 255, 255)` |  |
`colorBorderButtonDefault` | `rgb(170, 170, 170)` |  |
`colorBorderInput` | `rgb(204, 204, 204)` |  |
`colorBorderInputFocus` | `rgb(102, 175, 233)` |  |
`colorBorderInputDisabled` | `rgb(204, 204, 204)` |  |
Fonts | Value | Examples | Usage
`fontFamily` | `Arial, sans-serif` | Aa |
`fontFamilyBody` | `Arial, sans-serif` | Aa |
`fontFamilyAlt` | `Georgia, Times New Roman, Times, serif` | Aa |
`fontFamilyMono` | `Menlo, Monaco, Consolas, 'Courier New', monospace` | Aa |
Font Weights | Value | Examples | Usage
`fontWeightLight` | `300` | Aa | Use for large headings only. Has no affect when used with Arial.
`fontWeightRegular` | `400` | Aa | Most body copy.
`fontWeightBold` | `700` | Aa | Used sparingly for emphasized text within regular body copy.
Font Sizes | Value | Examples | Usage
`fontSizeXSmall` | `10px` | The quick brown fox jumps over the lazy dog. |
`fontSizeSmall` | `12px` | The quick brown fox jumps over the lazy dog. |
`fontSizeMedium` | `16px` | The quick brown fox jumps over the lazy dog. |
`fontSizeLarge` | `20px` | The quick brown fox jumps over the lazy dog. |
`fontSizeXLarge` | `24px` | The quick brown fox jumps over the lazy dog. |
`fontSizeXxLarge` | `32px` | The quick brown fox jumps over the lazy dog. |
`fontSizeBase` | `11px` | The quick brown fox jumps over the lazy dog. | Default body text size that may be used for reset.
`fontSizeBaseMedium` | `14px` | The quick brown fox jumps over the lazy dog. |
Spacing | Value | Examples | Usage
`borderWidthThin` | `1px` |  |
`borderWidthThick` | `2px` |  |
`spacingXxxSmall` | `2px` |  |
`spacingXxSmall` | `4px` |  |
`spacingXSmall` | `8px` |  |
`spacingSmall` | `12px` |  |
`spacingMedium` | `16px` |  |
`spacingLarge` | `24px` |  |
`spacingXLarge` | `32px` |  |
Radius | Value | Examples | Usage
`borderRadiusSmall` | `.125rem` |  |
`borderRadiusMedium` | `.25rem` |  | Icons in lists, record home icon, unbound input elements
`borderRadiusLarge` | `.5rem` |  |
`borderRadiusPill` | `15rem` |  |
`borderRadiusCircle` | `50%` |  | Circle for global use, action icon bgd shape