Check out our Theming documentation!
Applying colors
Below you’ll find a couple of guides on how to apply colors on our different platforms.
Applying Spark colors in Figma
A quick guide on how to apply Spark colors to layers in Figma.
Using Spark colors on CSS
A quick guide on how to apply Spark colors to properties on CSS files.
Background & foreground color pairing
As mentioned in our palette section, background colors are meant to be used for container elements, like the background of cards, NEVER for content elements like icons, text, or borders.
Our colors have been tested to ensure a minimum contrast ratio of 3.1:1, so using background colors on content elements such as text or using foreground colors for the background of pages can and will affect this.
Avoid using a background color on text and a foreground color as a background.
Use foreground colors on content like icons or text, and background color in containers.
Common background/foreground pairings
Below, you’ll find some common color pairings we use across interfaces.
Text color and emphasis
Our text colors are divided into 3 different emphases: high, mid, and low. And a special link color for links.
Below you can find more info about each.
High emphasis — Used for headings, quotes, and general important information.
Mid emphasis — Used for paragraphs, descriptions, and large bodies of text.
Low emphasis — Used for captions and footnotes.
Link — Used for links.
Our emphasis levels
Learn more about emphasis colors below.
Interactive states
Interactive elements should always use the correct color pairing for each state, for example, if a card is in the hover state, the background and the border should reflect that.
Page and surface colors
We have classified surfaces into two types:
Page — The bottom layer of an interface, which can be the main section of a page or a Side Panel.
Elevated Surfaces — Containers that sit on top of the page layer, like Widgets, or Cards.
Pages and elevated surfaces
Learn more about surface colors in the link below.
Icon colors
Although our icons come with a base icon color applied, icons can have a myriad of different colors depending on the context and purpose of the icon, you can find guidelines on best practices for applying color to icons below.
Icons as a visual aid next to text
Icons can be paired next to a text to make the content of a page easier for a user to scan.
When an icon is next to a heading we recommend the icon be the same emphasis color as the text is next to.
Icons as indicators
System/process indicators
We have specific color accents designated to illustrate system or process status.
For example, we have error colors that can be applied to an icon to reinforce the message.
Agent indicators
We also have status colors that reflect the status of an agent.
You’ll notice that these are background colors, that’s because agent icons are usually on top of badges that actually have the status color as shown below.
Icons as interactive elements
Icons can also be used to display user actions.
Although we highly recommend using icon-only buttons that already have the correct colors applied, if you need to create an interactive icon from scratch you can use our interactive foreground colors, always remember that interactive elements should always have hover, active, and focus states so they are as accessible as possible.
Icons in form fields
We have a special color for icons in form fields.
Icons to represent AI Features
See the section below on AI accents for more info on AI colors.
AI color accents
At Genesys, we use a specific gradient to denote AI features within our products.
This gradient can be found as a background for elements like Badges or Cards.
Or as a foreground to use on AI icons.
Learn more about AI feature gradients in the links below.