Color style sets used as color style values of any UI elements that will be used across designs, code, tools, and platforms for any applications under company's brand strategy.
| Token | Role | Value | Palette |
|---|---|---|---|
$color-background | Default background color for the whole app. | #FFFFFF | |
$color-background-alt | Second default background color | #F8F9FA | |
$color-background-light | Light variant of COLOR_BACKGROUND | #FFFFFF | |
$color-background-dark | Dark variant of COLOR_BACKGROUND. | #FDFDFE | |
$color-background-backdrop | The color of the mask overlay that appears when you enter a modal state | rgba(255, 255, 255, 0.75) #FFFFFFBF | |
$color-background-backdrop-tint | The color of the mask overlay that provides user feedback on interaction. | #F8F9FA | |
$color-background-hover | Hover state color for background | #E9ECEF | |
$color-background-active | Active state color for background | #CED4DA | |
$color-background-selected | Selected color for background | #E9ECEF | |
$color-background-alt-inverse | Alternative background color for dark portions of the app. | #43285D | |
$color-background-alt-inverse-hover | Hover state color for Alternative background color for dark portions of the app. | #38214F | |
$color-background-brand | OMH brand color Background dark theme Feature background color | #43285D | |
$color-background-brand-hover | Hover state color for OMH brand color Background dark theme Feature background color | #38214F | |
$color-background-destructive | Color for UI elements related to destructive actions. | #DA1E28 | |
$color-background-destructive-hover | Hover color for UI elements related to destructive actions. | #BA0517 | |
$color-background-destructive-active | Active color for UI elements related to destructive actions. | #8e030f | |
$color-background-warning | Color for UI elements related to warnings. | #F4A71C | |
$color-background-warning-hover | Hover color for UI elements related to warnings. | #FE9339 | |
$color-background-warning-active | Active color for UI elements related to warnings. | #FE9339 | |
$color-background-error | Color for UI elements related to errors. | #DA1E28 | |
$color-background-error-hover | Hover Color for UI elements related to errors. | #BA0517 | |
$color-background-error-active | Color for UI elements related to errors. | #8e030f | |
$color-background-highlight | Background color for highlighting UI elements. | #faffbd | |
$color-background-highlight-search | Background color for highlighting text in search results. | #fff03f | |
$color-background-image-overlay | Color of mask overlay that sits on top of an image when text is present. | rgba(0, 0, 0, 0.6) | |
$color-background-info | Background color for UI elements related to providing neutral information (not error, success, or warning). | #ADB5BD | |
$color-background-input-disabled | Disabled input | #F8F9FA | |
$color-background-scrollbar | The background color of an internal scrollbar. | #F8F9FA | |
$color-background-scrollbar-track | $color-background-scrollbar-track | #DEE2E6 | |
$color-background-selection | Background color for text selected with a mouse. | #d8e6fe | |
$color-background-selection-dark | Background color for text selected with a mouse. | #0078D7 | |
$color-background-success | Color for UI elements that have to do with success. | #2e844a | |
$color-background-success-hover | Hover color for UI elements that have to do with success. | #2C5234 | |
$color-background-success-active | Active color for UI elements that have to do with success. | #2C5234 | |
$color-background-notification-new | Background color for a new notification list item. | #E9ECEF | |
$color-background-offline | Color for UI elements related to the offline state. | #6C757D |
| Token | Role | Value | Palette |
|---|---|---|---|
$color-text-default | Body text color | #0E0E0E | |
$color-text-default-alt | Alt Body text color | #181818 | |
$color-text-action-label | Action label text color | #343A40 | |
$color-text-action-label-active | Action label active text color | #212529 | |
$color-text-brand | OMH brand color. | #43285D | |
$color-text-inverse | Text color found on any primary brand color Text color found on any primary brand color | #FFFFFF | |
$color-text-inverse-weak | Weak inverse text color for dark backgrounds | #F8F9FA | |
$color-text-icon-default | Default icon color. | #495057 | |
$color-text-icon-default-disabled | Default icon color - disabled state | #DEE2E6 | |
$color-text-icon-default-hint | Icon color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over. | #CED4DA | |
$color-text-icon-inverse | Icon color on dark background | #FFFFFF | |
$color-text-label | Text color for field labels. | #495057 | |
$color-text-placeholder | Input placeholder text. | #6C757D | |
$color-text-helper | Tertiary text; Help text | #495057 | |
$color-text-input-disabled | Input disabled text | #CED4DA |
| Token | Role | Value | Palette |
|---|---|---|---|
$color-link-default | Primary or brand link color (508-AA) | #007AC2 | |
$color-link-default-hover | Hover State for primary or brand link | #0f62fe | |
$color-link-default-focus | Focus state for primary or brand link | #0f62fe | |
$color-link-default-active | Active state for primary or brand link | #032d60 | |
$color-link-default-disabled | Disabled state for primary or brand link | #032d60 | |
$color-link-alt | Alt primary link color (508-AAA) | #0176d3 | |
$color-link-inverse | Link color on dark background | #78a9ff | |
$color-link-inverse-hover | Hover Link color on dark background | #BDD0FE | |
$color-link-inverse-focus | Focus Link color on dark background | #BDD0FE | |
$color-link-inverse-active | Active Link color on dark background | #1274E3 | |
$color-link-default-visited | Color for visited links | #8a3ffc | |
$color-link-inverse-alt | Alt Link color on dark background | #FFFFFF | |
$color-link-inverse-alt-hover | Hover state for Alt Link color on dark background | #F8F9FA |
| Token | Role | Value | Palette |
|---|---|---|---|
$color-border-default | Default border color for UI elements and components. | #E9ECEF | |
$color-border-dark | Dark border color for dark background of UI elements and components. | #ADB5BD | |
$color-border-brand | Border with brand color | #43285D | |
$color-button-border-default | Default Border color for button | #DEE2E6 | |
$color-card-border | Border color for card UI | #E9ECEF | |
$color-border-input | Border color for card UI | #E9ECEF | |
$color-border-selection | Border color for card UI | #128EC3 |