Background Colors
-
color-background-base-default -
var(--color-background-base-default)
-
#101923 -
color-palette-brightblue-900 -
Background color of base elements, like the app or popup menus
-
color-background-base-header -
var(--color-background-base-header)
-
#172635 -
color-palette-darkblue-900 -
Background color for the header of base elements
-
color-background-base-hover -
var(--color-background-base-hover)
-
#142435 -
color-palette-brightblue-850 -
Background color of base elements, like popup menus, when they are hovered over
-
color-background-base-selected -
var(--color-background-base-selected)
-
#1c3f5e -
color-palette-darkblue-700 -
Background color of base elements, like popup menus, when they are selected
-
color-background-surface-default -
var(--color-background-surface-default)
-
#1b2d3e -
color-palette-darkblue-800 -
Background color of surface elements, like panels or dialogs
-
color-background-surface-header -
var(--color-background-surface-header)
-
#172635 -
color-palette-darkblue-900 -
Background color for the header of surface elements, including dialogs and table headers
-
color-background-surface-hover -
var(--color-background-surface-hover)
-
#1c3851 -
color-palette-brightblue-800 -
Background color of surface elements, like cards or table rows, when they are hovered over
-
color-background-surface-selected -
var(--color-background-surface-selected)
-
#1c3f5e -
color-palette-darkblue-700 -
Background color of surface elements, like cards or table rows, when they are selected
-
color-background-interactive-default -
var(--color-background-interactive-default)
-
#4dacff -
color-palette-brightblue-500 -
Primary color used for the backgrounds of interactive elements
-
color-background-interactive-hover -
var(--color-background-interactive-hover)
-
#92cbff -
color-palette-brightblue-400 -
Hover color used for the backgrounds of interactive elements
-
color-background-interactive-muted -
var(--color-background-interactive-muted)
-
#2b659b -
color-palette-brightblue-700 -
Muted version of the primary color used for the background of interactive elements that don't need to be as strong as the primary color
-
color-background-transparent -
var(--color-background-transparent)
-
#00000000 -
color-palette-neutral-1000a00 -
Transparent color used for backgrounds.
Text Colors
Aa
-
color-text-primary -
var(--color-text-primary)
-
#ffffff -
color-palette-neutral-000 -
Primary color used for text within the application
Aa
-
color-text-secondary -
var(--color-text-secondary)
-
#d4d8dd -
color-palette-grey-300 -
Color used for text when less emphasis is needed
Aa
-
color-text-placeholder -
var(--color-text-placeholder)
-
#a4abb6 -
color-palette-grey-500 -
Text color used for placeholder text in input and form fields
Aa
-
color-text-inverse -
var(--color-text-inverse)
-
#080c11 -
color-palette-darkblue-950 -
Color used for text on reversed backgrounds
Aa
-
color-text-interactive-default -
var(--color-text-interactive-default)
-
#4dacff -
color-palette-brightblue-500 -
Primary color used for interactive text elements
Aa
-
color-text-interactive-hover -
var(--color-text-interactive-hover)
-
#92cbff -
color-palette-brightblue-400 -
Hover color used for interactive text elements
Aa
-
color-text-white -
var(--color-text-white)
-
#ffffff -
color-palette-neutral-000 -
Text that is white across all themes. Used for classification and status banners that do not change color in various themes
Aa
-
color-text-black -
var(--color-text-black)
-
#000000 -
color-palette-neutral-1000 -
Text that is black across all themes. Used for classification and status banners that do not change color in various themes
Aa
-
color-text-error -
var(--color-text-error)
-
#ff3838 -
color-palette-red-500 -
Text color used for form error messages
Border Colors
-
color-border-interactive-default -
var(--color-border-interactive-default)
-
#4dacff -
color-palette-brightblue-500 -
Primary color used for the border of interactive elements
-
color-border-interactive-hover -
var(--color-border-interactive-hover)
-
#92cbff -
color-palette-brightblue-400 -
Hover color used for the border of interactive elements
-
color-border-interactive-muted -
var(--color-border-interactive-muted)
-
#2b659b -
color-palette-brightblue-700 -
Muted version of the primary color used for the border of interactive elements that don't need to be as strong as the primary color
-
color-border-error -
var(--color-border-error)
-
#ff3838 -
color-palette-red-500 -
Border color used for form error borders
Status Colors
-
color-status-critical -
var(--color-status-critical)
-
#ff3838 -
color-palette-red-500 -
Color used to indicate items with a Critical status. Critical, severe, alert, form error, emergency, urgent
-
color-status-serious -
var(--color-status-serious)
-
#ffb302 -
color-palette-orange-500 -
Color used to indicate items with a Serious status. Serious, distress, error, needs attention
-
color-status-caution -
var(--color-status-caution)
-
#fce83a -
color-palette-yellow-500 -
Color used to indicate items with a Caution status. Caution, warning, unstable, unsatisfactory, watch
-
color-status-normal -
var(--color-status-normal)
-
#56f000 -
color-palette-green-500 -
Color used to indicate items with a Normal status. Normal, on, ok, fine, go, satisfactory, success
-
color-status-standby -
var(--color-status-standby)
-
#2dccff -
color-palette-cyan-600 -
Color used to indicate items with a Standby status. Standby, available, enabled
-
color-status-off -
var(--color-status-off)
-
#a4abb6 -
color-palette-grey-500 -
Color used to indicate items with an Off status. Off, unavailable, disabled
Classification Colors
-
color-classification-topsecretsci -
var(--color-classification-topsecretsci)
-
#fce83a -
color-palette-yellow-500 -
Color used to indicate the Top Secret//SCI classification
-
color-classification-topsecret -
var(--color-classification-topsecret)
-
#ff8c00 -
color-palette-orange-700 -
Color used to indicate the Top Secret classification
-
color-classification-secret -
var(--color-classification-secret)
-
#c8102e -
color-palette-red-700 -
Color used to indicate the Secret classification
-
color-classification-confidential -
var(--color-classification-confidential)
-
#0033a0 -
color-palette-blue-800 -
Color used to indicate the Confidential classification
-
color-classification-cui -
var(--color-classification-cui)
-
#502b85 -
color-palette-violet-800 -
Color used to indicate the CUI classification
-
color-classification-unclassified -
var(--color-classification-unclassified)
-
#007a33 -
color-palette-green-800 -
Color used to indicate the Unclassified classification
Opacity
-
opacity-disabled -
var(--opacity-disabled)
-
40% -
opacity-40 -
Opacity used to indicate the disabled state
Data Visualization
-
color-data-visualization-1 -
var(--color-data-visualization-1)
-
#00c7cb -
color-palette-teal-500
-
color-data-visualization-2 -
var(--color-data-visualization-2)
-
#938bdb -
color-palette-purple-400
-
color-data-visualization-3 -
var(--color-data-visualization-3)
-
#4dacff -
color-palette-brightblue-500
-
color-data-visualization-4 -
var(--color-data-visualization-4)
-
#70dde0 -
color-palette-teal-300
-
color-data-visualization-5 -
var(--color-data-visualization-5)
-
#c9c5ed -
color-palette-purple-200
-
color-data-visualization-6 -
var(--color-data-visualization-6)
-
#92cbff -
color-palette-brightblue-400
-
color-data-visualization-7 -
var(--color-data-visualization-7)
-
#a1e9eb -
color-palette-teal-200
-
color-data-visualization-8 -
var(--color-data-visualization-8)
-
#b7dcff -
color-palette-brightblue-300
Focus
-
color-border-focus-default -
var(--color-border-focus-default)
-
#da9ce7 -
color-palette-pink-200 -
Color of a focused element's outline
-
border-width-focus-default -
var(--border-width-focus-default)
-
1px -
border-width-xs -
Thickness of a focused element's outline
-
spacing-focus-default -
var(--spacing-focus-default)
-
0.125rem -
spacing-050 -
Space between a focused element's outline and edge
Shadow Overlay
-
shadow-overlay -
var(--shadow-overlay)
-
0px 4px 4px 1px rgba(0, 0, 0, 0.45) -
color-palette-neutral-1000 -
Drop shadow for overlays like Dialogs and overlay panels