Colors

Palette

The following is the complete color palette with named colors and their corresponding hex codes:

When using these colors in SAIL, note that you should expect them to change based on the client's branding.

Label	Default Color	Notes
Accent	Blue 3	Used to highlight key interface elements. Avoid grayscale colors (black, white, and gray) that are similar to colors used for interface elements and green/red that are similar to colors used to indicate positive/negative values.
Default Background	#FAFAFC	Used for the page background color.
Dark Background	Blue 5	Used to differentiate a page in dark mode, e.g. in portal backgrounds or reports.
Light Background	#E7F1FF	Used for secondary page backgrounds or content areas that need visual separation from the default background.
Navigation Bar	Blue 5	Used for the background color of the site header behind the corporate logo and site tabs. Select a color with sufficient contrast against the text color.
Loading Bar	Blue 3	Appears at the top of the site and gives users an idea of how long it will take the system to load a page or process an action. Usually set to the accent color. Select a color with sufficient contrast against the navigation bar color to ensure that users notice it.
Selected Highlight	#FFFFFF	Identifies the selected tab on sites. Select a color with sufficient contrast against the navigation bar color so that users can easily tell which tab is highlighted.
Email Header	Blue 5
Email Accent	Blue 3

Refer to Pattern Library > Cards for more guidance on card styling.

Label	Default Styling	Notes
Card Shape	Semi-Rounded	Valid values: "SQUARED", "SEMI_ROUNDED", "ROUNDED".
Card Shadows	False	Determines if card shadows are shown. Valid values: true, false. Should be false if card is against a white background.
Card Borders	True	Determines if card borders are shown. Valid values: true, false. Should be true if card is against a white background.
Card Border Color	#EDEEFA	Used for the card border color.
Card Background	#FFFFFF	Used for the card background color.
Card Decorative Bar (Active)	Blue 3	Used for clickable or active cards.
Card Decorative Bar (Informational)	Blue 3	Used for static reference cards.

Label	Default Color	Notes
Stamp Primary Foreground	#FFFFFF	Used for the icon and/or text color.
Stamp Primary Background	#6C6C75	Used for the background color.
Stamp Secondary Foreground	#2E2E35	Used for the icon and/or text color in upcoming wizard steps.
Stamp Secondary Background	#EDEDF2	Used for the background color in upcoming wizard steps.
Stamp Accent Foreground	#FFFFFF	Used for the icon and/or text color in completed or active wizard steps.
Stamp Accent Background	Blue 3	Used for the background color in completed or active wizard steps.

Label	Default Color	Notes
Neutral Foreground	#2E2E35	Used for the tag text color.
Neutral Background	#EDEDF2	Used for the tag background color.
Dividers	#DCDCE5

Used for message banners, colored tags, reference cards and icons.

Label	Default Color
Primary Text	Gray 5
Secondary Text	Gray 4

Label	Default Colors	Notes
Primary Accent	Blue 3	Used for progress bars, gauges or charts with only one color assigned.
Event History (Monotone)	#DCDCE5	Default for stamps in an event history component. Used when event history component is embedded within a crowded interface.
Event History (Soft Theme)	#E9EDFC Orange 1 Green 1 Purple 1 Yellow 1 #FFE7E7 Teal 1	Used for stamps in an event history component only when event history component is on its own interface. Avoid using multiple colors if on a crowded interface.
Scaled Charts	#08088D Blue 3 Teal 3 Green 3 Yellow 3 Orange 3 Red 4	Used for charts where color is used to convey numeric meaning in a sequential order.
Categorical Charts (Standard)	Blue 3 Purple 3 Orange 3 Teal 3 Yellow 3	Used for charts where color is used to differentiate between objects with non-numeric meaning. The standard palette is optimized to be more visually distinct for users with color vision deficiencies and can be used for charts that require up to 5 colors.
Categorical Charts (Expanded)	Blue 3 Purple 3 Orange 3 Teal 2 #AFBFF8 Purple 4 Teal 3 Orange 2	Used for charts where color is used to differentiate between objects with non-numeric meaning. The expanded palette provides additional colors for charts that require more than 5 colors.
Reference Lines	#2E2E35 #6C6C75