In Digital Assistant there are 11 different color classes plus several variations which you can assign to all kinds of elements including <div>s, <p>s or <span>s.

Best practices

Convey meaning with color

Use colors with a purpose, for example links should look different from texts. Success messages should be green. Important vs. non-important content should have differently colored icons.

Use color with meaning


Pick a theme and stick with it. Audit your Card designs to make sure the layout and color usage will remain expected and consistent. Cascade backgrounds from dark to light to reinforce information hierarchy.

Text Colors

Main colors

Add these to any class and the text inside your element will have that color.

Light variations

Every main color also comes with a lighter variation.

Theme colors

Theme colors can be used for accenting a headline or subheading to match your corporate design standards.

See Customize colors to learn how to change these.

Event colors

Some colors are typically used for certain purposes, like green for success messages or red for errors. Instead of using just green or red you could use the below classes which allow you to better convey the meaning of a message.

Text shades

Sometimes using an accent color or a subtle shade of grey for secondary text can help make your Card look visually lighter and help guide the user to the most important information on the Card.

Background colors

Background main colors

If you don't want the text, but the background to be a color use the below classes. Texts will be colored in white automatically.

Light background variations

Similar to light text colors, there also lighter shades of the background colors.

You can also customize the colors variables to match the color scheme of your organization.