Palette

Color influences how users feel about a product, make decisions and interpret messages.

Our colors support Theming and Dark Mode!
Check out our Theming documentation!

Foreground colors

Foregrounds are colors assigned to any content element that conveys information to the user.

Some examples of foreground colors can be:

The color of an icon

The color of a link

The color of a label on a Button

The color of a header, paragraph, input label, or any text

The color of a checkbox or radio button

Examples of foreground elements.

Identifying a foreground color

Foreground colors will always have foreground at the start of their name.

Foreground color Palette

Text: Headings, paragraphs, links, and caption colors

Our text colors are divided into 3 different emphases: high, mid, and low.

Our emphasis levels.

High emphasis

We use the high emphasis color on elements like:

Headers

Bold text

Input labels

Menu items

Important information

Mid emphasis

We use the mid emphasis color on elements like:

Paragraphs

Complimentary descriptions

Low emphasis

We use the low emphasis color on elements like:

Footnotes

Image captions

#2a2a2e

#ffffff

high_emphasis

The default color for high emphasis content on surfaces, like headings, subheadings, quotes or bold text.

#4f5157

#b2b7c4

mid_emphasis

The default color for medium emphasis content on surfaces, like normal paragraphs.

#6a6d75

#c1c6d4

low_emphasis

The default color for low emphasis content on surfaces, like captions or fine print.

Links

Links, as interactive elements, have a hover and active state colors, but also an extra visited state for links that the user has already visited.

Links have hover, active and visited states.

foreground / interactive / link

#2143a2

#829ce5

default

The default color of links.

#102251

#d5def7

active

The active color of links.

#19327a

#adbff0

hover

The hover color of links.

#3d538f

#808db2

visited

The color of links when they were already visited.

High-contrast

As mentioned on the background palette, high-contrast colors are meant to be used on busy screens like dashboards, and high-contrast foreground colors are intended to be paired with High-contrast background colors.

High-contrast also poses three levels of emphasis.

High-contrast foreground colors are meant to be paired with High-contras background colors.

foreground / container / high_contrast

#ffffff

#1e1e21

high_emphasis

The default color for high emphasis content on high contrast surfaces, like headings, subheadings, quotes or bold text.

#dce1ed

#3e4044

mid_emphasis

The default color for medium emphasis content on high contrast surfaces, like normal paragraphs.

#c1c6d4

#4f5157

low_emphasis

The default color for low emphasis content on high contrast surfaces, like captions or fine print.

Brand

Brand colors are meant to be used on Genesys logos, NEVER as background because that will cause an issue with contrast.

Brand colors are meant to be used on Genesys logos.

#ff451a

brand

The brand color, mostly used for logos on surfaces.

Read more about our branding guidelines below.

Branding

Branding guidelines and resources from Marketing.

AI Features

We have a special gradient for displaying icons that represent AI features.

Icons that represent AI features need to use the special AI accent gradient.

Interactive colors

Foreground interactive colors are meant to be paired with interactive background colors.

For example, if you have a primary action that uses a background/interactive/primary/default, the label should use foreground/interactive/primary/default.

It is important to always pair the correct background color with the correct foreground color.

Primary

foreground / interactive / primary

#ffffff

default

The color for foreground elements that are over a primary/default background.

#ffffff

active

The color for foreground elements that are over a primary/hover background.

#ffffff

hover

The color for foreground elements that are over a primary/active background.

Secondary

foreground / interactive / secondary

#2143a2

#ffffff

default

The color for foreground elements that are over a secondary/default background.

#102251

#ffffff

active

The color for foreground elements that are over a secondary/active background.

#19327a

#ffffff

hover

The color for foreground elements that are over a secondary/hover background.

Tertiary

foreground / interactive / tertiary

#2143a2

#adbff0

default

The color for foreground elements that are over a tertiary/default background.

#ffffff

active

The color for foreground elements that are over a tertiary/active background.

#ffffff

#d5def7

hover

The color for foreground elements that are over a tertiary/hover background.

Ghost

foreground / interactive / ghost

#2143a2

#adbff0

default

The color for foreground elements that are over a ghost/default background.

#102251

#ffffff

active

The color for foreground elements that are over a ghost/active background.

#19327a

#d5def7

hover

The color for foreground elements that are over a ghost/hover background.

Subtle

foreground / interactive / subtle

#4f5157

#b2b7c4

default

The color for foreground elements that are over a subtle/default background.

#2a2a2e

#ffffff

active

The color for foreground elements that are over a subtle/active background.

#3e4044

#cad1e1

hover

The color for foreground elements that are over a subtle/hover background.

Danger

foreground / interactive / danger

#ffffff

default

The color for foreground elements that are over a danger/default background.

#ffffff

active

The color for foreground elements that are over a danger/active background.

#ffffff

hover

The color for foreground elements that are over a danger/hover background.

Indicator

foreground / interactive / indicator

#5476d5

default

this is used to the selected indicator for the data table headers

Form colors

Learn more about text-based inputs and click-based here!

Text-based inputs

We have colors for placeholders, populated values, and icons.

foreground / form_control / text_input

#6a6d75

#c1c6d4

placeholder

The default color of placeholder content on an input.

#2a2a2e

#ffffff

populated

The default color of populated content on an input.

#6a6d75

#c1c6d4

icon

The default color of icons on an input.

Click-based inputs

Since most click-based inputs use icons, we also have a selection of states for them.

Click-based inputs have foreground colors that represent their states.

foreground / form_control / click_input

#a3a8b5

#848891

enabled

The color we use for foreground elements on click-based inputs when they are enabled but not selected.

#2143a2

#5476d5

selected

The color we use for foreground elements on click-based inputs when they are selected.

#19327a

#829ce5

hover

The color we use for foreground elements on click-based inputs when they are on the hover state.

#102251

#adbff0

active

The color we use for foreground elements on click-based inputs when they are on the active state.

#b51b37

#e84e6a

error

Label

foreground / form_control / label

#2a2a2e

#ffffff

default

The color for the content of input labels.

#b51b37

#e84e6a

required_accent

The color we used for the required indicator.

#4f5157

#b2b7c4

optional_accent

The color we used for optional indicator in labels

#4f5157

#b2b7c4

tooltip

The color we used for tooltip in labels

Helper text

foreground / form_control / help_text

#6a6d75

#c1c6d4

default

The color we used for the default helper text.

#b51b37

#e84e6a

error

The color we used for the error helper text.

System colors

Feedback

Feedback accents are meant to be used to illustrate the status on text, for example, a warning icon, or an error message.

Feedback accents are mostly used on status icons.

foreground / system / info

#2a2a2e

#ffffff

high_emphasis

The default color for high emphasis content on info backgrounds, like headings, subheadings, quotes or bold text or links.

#3d538f

#596ea6

accent

The color for content on info backgrounds that we want to highlight, like the info icon on an alert.

foreground / system / success

#2a2a2e

#ffffff

high_emphasis

The default color for high emphasis content on success backgrounds, like headings, subheadings, quotes or bold text or links.

#056d4d

#09b581

accent

The color for content on success backgrounds that we want to highlight, like the info icon on an alert.

foreground / system / warning

#2a2a2e

#ffffff

high_emphasis

The default color for high emphasis content on warning backgrounds, like headings, subheadings, quotes or bold text or links.

#9a7b25

#f8c73e

accent

The color for content on warning backgrounds that we want to highlight, like the info icon on an alert.

foreground / system / error

#2a2a2e

#ffffff

high_emphasis

The default color for high emphasis content on error backgrounds, like headings, subheadings, quotes or bold text or links.

#b51b37

#e84e6a

accent

The color for content on error backgrounds that we want to highlight, like the info icon on an alert.

Custom accents

System Custom accents light and dark are meant to be used over background custom accents; it is left to the designer's criteria for which one to pair, but we recommend always aiming for a 3:1 contrast ratio.

foreground/system light and dark are meant to be used on background custom accents.

foreground / system / custom_accents

#ffffff

light

The recommended color for contetn that is on a custom accent background that doesn't pass the contrast check with the dark color.

#2a2a2e

#ffffff

dark

The recommended color for contetn that is on a custom accent background that doesn't pass the contrast check with the light color.

Something looks broken on this site?

Report it to the Design System team here!

Palette

Foreground colors

Identifying a foreground color

Foreground color Palette

Text: Headings, paragraphs, links, and caption colors

High emphasis

Mid emphasis

Low emphasis

Links

High-contrast

Brand

AI Features

Interactive colors

Primary

Secondary

Tertiary

Ghost

Subtle

Danger

Indicator

Form colors

Text-based inputs

Click-based inputs

Label

Helper text

System colors

Feedback

Custom accents

Something looks broken on this site?

Resources

Support