Background Colors
-
color-background-base-default -
var(--color-background-base-default)
-
#eaeef4 -
color-palette-grey-200 -
Background color of base elements, like the app or popup menus
-
color-background-base-header -
var(--color-background-base-header)
-
#f5f6f9 -
color-palette-grey-100 -
Background color for the header of base elements
-
color-background-base-hover -
var(--color-background-base-hover)
-
#98bdd3 -
color-palette-darkblue-200 -
Background color of base elements, like popup menus, when they are hovered over
-
color-background-base-selected -
var(--color-background-base-selected)
-
#cee9fc -
color-palette-brightblue-200 -
Background color of base elements, like popup menus, when they are selected
-
color-background-surface-default -
var(--color-background-surface-default)
-
#ffffff -
color-palette-neutral-000 -
Background color of surface elements, like panels or dialogs
-
color-background-surface-header -
var(--color-background-surface-header)
-
#f5f6f9 -
color-palette-grey-100 -
Background color for the header of surface elements, including dialogs and table headers
-
color-background-surface-hover -
var(--color-background-surface-hover)
-
#daeeff -
color-palette-brightblue-100 -
Background color of surface elements, like cards or table rows, when they are hovered over
-
color-background-surface-selected -
var(--color-background-surface-selected)
-
#cee9fc -
color-palette-brightblue-200 -
Background color of surface elements, like cards or table rows, when they are selected
-
color-background-interactive-default -
var(--color-background-interactive-default)
-
#005a8f -
color-palette-darkblue-500 -
Primary color used for the backgrounds of interactive elements
-
color-background-interactive-hover -
var(--color-background-interactive-hover)
-
#1c3f5e -
color-palette-darkblue-700 -
Hover color used for the backgrounds of interactive elements
-
color-background-interactive-muted -
var(--color-background-interactive-muted)
-
#2f7aa7 -
color-palette-darkblue-400 -
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
Text Colors
Aa
-
color-text-primary -
var(--color-text-primary)
-
#292a2d -
color-palette-grey-900 -
Primary color used for text within the application
Aa
-
color-text-secondary -
var(--color-text-secondary)
-
#51555b -
color-palette-grey-700 -
Color used for text when less emphasis is needed
Aa
-
color-text-placeholder -
var(--color-text-placeholder)
-
#7b8089 -
color-palette-grey-600 -
Text color used for placeholder text in input and form fields
Aa
-
color-text-inverse -
var(--color-text-inverse)
-
#ffffff -
color-palette-neutral-000 -
Color used for text on reversed backgrounds
Aa
-
color-text-interactive-default -
var(--color-text-interactive-default)
-
#005a8f -
color-palette-darkblue-500 -
Primary color used for interactive text elements
Aa
-
color-text-interactive-hover -
var(--color-text-interactive-hover)
-
#1c3f5e -
color-palette-darkblue-700 -
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)
-
#c8102e -
color-palette-red-700 -
Text color used for form error messages
Border Colors
-
color-border-interactive-default -
var(--color-border-interactive-default)
-
#005a8f -
color-palette-darkblue-500 -
Primary color used for the border of interactive elements
-
color-border-interactive-hover -
var(--color-border-interactive-hover)
-
#1c3f5e -
color-palette-darkblue-700 -
Hover color used for the border of interactive elements
-
color-border-interactive-muted -
var(--color-border-interactive-muted)
-
#2f7aa7 -
color-palette-darkblue-400 -
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)
-
#c8102e -
color-palette-red-700 -
Border color used for form error borders
-
color-border-focus-default -
var(--color-border-focus-default)
-
#b534ce -
color-palette-pink-400 -
Color of a focused element's outline
Status Colors
-
color-status-critical -
var(--color-status-critical)
-
#ff2a04 -
color-palette-red-600 -
Fill color of the Critical status symbol on a light background
-
color-status-serious -
var(--color-status-serious)
-
#ffaf3d -
color-palette-orange-600 -
Fill color of the Serious status symbol on a light background
-
color-status-caution -
var(--color-status-caution)
-
#fad800 -
color-palette-yellow-600 -
Fill color of the Caution status symbol on a light background
-
color-status-normal -
var(--color-status-normal)
-
#00e200 -
color-palette-green-600 -
Fill color of the Normal status symbol on a light background
-
color-status-standby -
var(--color-status-standby)
-
#64d9ff -
color-palette-cyan-500 -
Fill color of the Standby status symbol on a light background
-
color-status-off -
var(--color-status-off)
-
#7b8089 -
color-palette-grey-600 -
Fill color of the Off status symbol on a light background
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
Data Visualization
-
color-data-visualization-1 -
var(--color-data-visualization-1)
-
#035051 -
color-palette-teal-800
-
color-data-visualization-2 -
var(--color-data-visualization-2)
-
#6058a8 -
color-palette-purple-600
-
color-data-visualization-3 -
var(--color-data-visualization-3)
-
#1c3851 -
color-palette-brightblue-800
-
color-data-visualization-4 -
var(--color-data-visualization-4)
-
#00777a -
color-palette-teal-700
-
color-data-visualization-5 -
var(--color-data-visualization-5)
-
#786dd3 -
color-palette-purple-500
-
color-data-visualization-6 -
var(--color-data-visualization-6)
-
#2b659b -
color-palette-brightblue-700
-
color-data-visualization-7 -
var(--color-data-visualization-7)
-
#009fa3 -
color-palette-teal-600
-
color-data-visualization-8 -
var(--color-data-visualization-8)
-
#3a87cf -
color-palette-brightblue-600