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 |