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!

Backgrounds colors

Backgrounds are colors assigned to any container element, We classify a container as an element with textual content.

Some examples of background colors can be:

The color of a Card

The color of a Text Field

The color of a Button (NOT ITS LABEL)

The color of a Tooltip

The color of a Tag

Examples of backgrounds

Identifying a background color

Background colors will always have background at the start of their name

Background colors will have background at the start of the name

Background color Palette

Interactive color

Interactive elements are those that can cause a reaction when clicked, such as Buttons or Segmented Controls.

Although links are considered an interactive element, they don’t possess a background color, only a foreground color.

Interactive elements and their states

Primary

background / interactive / primary

#2143a2

default

The background color of primary actions in the default state.

#19327a

hover

The background color of primary actions in the hover state.

#102251

active

The background color of primary actions in the active state.

Secondary

background / interactive / secondary

#e7e9f9

#465066

default

The background color of secondary actions in the default state.

#d5def7

#485675

hover

The background color of secondary actions in the hover state.

#adbff0

#364a72

active

The background color of secondary actions in the active state.

Tertiary

background / interactive / tertiary

rgba(0,0,0,0)

default

The background color of tertiary actions in the default state.

#19327a

hover

The background color of tertiary actions in the hover state.

#102251

active

The background color of tertiary actions in the active state.

Ghost

background / interactive / ghost

rgba(0,0,0,0)

default

The background color of dismissal actions in the default state.

#d5def7

#485675

hover

The background color of dismissal actions in the hover state.

#adbff0

#364a72

active

The background color of dismissal actions in the active state.

Subtle

background / interactive / subtle

#ffffff

#131315

default

The background color of subtle dismissal actions, like close buttons on modals; in the default state.

#d5def7

#485675

hover

The background color of subtle dismissal actions, like close buttons on modals; in the hover state.

#adbff0

#364a72

active

The background color of subtle dismissal actions, like close buttons on modals; in the active state.

Danger

background / interactive / danger

#e22245

#881429

default

The background color of danger actions in the default state.

#881429

#e22245

hover

The background color of danger actions in the hover state.

#440a15

active

The background color of danger actions in the active state.

Containers colors

Pages vs elevated surfaces

Pages are the bottom-most layer of an interface, and surfaces displayed on top of it, like Cards, Widgets, or Modals, are considered Elevated surfaces.

Since elevated surfaces are often interactive, we have colors for each state and a color for the background of their header if needed.

Surface/edge color pairing

We highly recommend pairing a surface edge color according to the surface background colors, for example, if a card is using background/container/elevated/hover the edge of the surface should use border/container/edges/hover to match.

Read more about edge colors here.

Pages and elevated surfaces

Page

background / container / page

#ffffff

#2a2a2e

default

The default background color for a page.

#f5f6fa

#1e1e21

tonal_subtle

A more subtle background color for a page, ideal for highlight surfaces that are over the background, for example, a dashboard with different panels.

#ebedf5

#131315

tonal_medium

The background color to highlight elements in the background, for example, the row of a table.

#d5def7

#485675

tonal_high

The background color to highlight elements in the background, for example, the alternated row of a table.

Elevated

background / container / elevated

#ffffff

#2a2a2e

default

The background color for the default state of an elevated surface like modals, popovers, cards, etc.

#e7e9f9

#465066

hover

The background color for the hover state of an elevated surface like modals, popovers, cards, etc.

#adbff0

#485675

active

The background color for the active state of an elevated surface like modals, popovers, cards, etc.

#f3a7b5

#440a15

error

The color of surfaces that are in an error state.

#f5f6fa

#3e4044

header

#d5def7

#485675

active_subtle

High-contrast

As the name suggests, high contrast is used on elements that are needed to pop up in a sea of information, like a tooltip in a crowded dashboard.

A high contrast tooltip in a dashboard

background / container / high_constrast

#2a2a2e

#ffffff

default

The background color for the default state of a surface that needs to pop up in pages with a lot of content, like tooltips on dashboards.

#081129

#d5def7

hover

The background color for the hover state of a surface that needs to pop up in pages with a lot of content, like tooltips on dashboards.

#0c193d

#adbff0

active

The background color for the active state of a surface that needs to pop up in pages with a lot of content, like tooltips on dashboards.

Chat bubbles

We offer some chat bubble colors for specific chat users.

We highly recommend pairing these background colors with high-emphasis foreground colors for the text inside.

Depending on the author of the chat message, the bubble can have different colors.

background / container / chat_bubble

#f5f6fa

agent

This color is used as the background color of chat bubbles that come from the agent.

#e6f4fa

costumer

This color is used as the background color of chat bubbles that come from a costumer.

#ffece8

bot

This color is used as the background color of chat bubbles that come from a bot.

#fff4dc

public

This color is used as the background color of chat bubbles that are sent to a public channel.

#eee3ff

digital_consultation

This color is used as the background color of chat bubbles that come from a digital consultation.

AI Features

We have two types of background gradients.

Tonal subtle — For elements that contain a decent body of text, like Cards.

Tonal medium — For elements that contain a few words, like Tags.

AI feature elements are displayed with gradient backgrounds.

Text highlight

We also have a color for highlight a part of the text, useful when the high emphasis color won’t cut it.

This highlight can also be used over chat bubbles.

Use text highlight to denote a small part of a large body of text.

Form colors

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

Text-based inputs

We call the container of the input a track.

The background of a text-based input(track).

background / form_control / text_input

#ffffff

#1e1e21

track

The default background color for inputs.

Click-based inputs

Click-based inputs can also possess a track, such as the track on a Toggle component.

Click-based inputs can also posses a track.

background / form_control / click_input

#c1c6d4

#848891

track

The color used for the tracks of click-based components,like the container of the toggle or the track of the slider.

System colors

Any element that transmits processes or system information to the user is considered a system element, like In-Line alerts, Tags, and Badges.

Feedback

We have 4 main types of feedback: informative, success, error, and warning.

Background/Border feedback color pairing

We highly recommend pairing a system/feedback border color according to the feedback background colors, for example, if an alert is using background/system/success/tonal_subtle the edge of the surface should use border/system/success to match.

Feedback colors on an alert.

#f3a7b5

#440a15

tonal_medium

The default background color for smaller error elements like badges that need a slightly more saturated color that tonal_subtle because of their size.

#f9d3da

#2d070e

tonal_subtle

The default background color for error elements like alerts.

#fce9b2

#6c5619

tonal_medium

The default background color for smaller warning elements like badges that need a slightly more saturated color that tonal_subtle because of their size.

#fef4d8

#3d300c

tonal_subtle

The default background color for warning elements like alerts.

#9de1cd

#044834

tonal_medium

The default background color for smaller success elements like badges that need a slightly more saturated color that tonal_subtle because of their size.

#cef0e6

#02241a

tonal_subtle

The default background color for success elements like alerts.

#dfe3ec

#263b73

tonal_medium

The default background color for smaller info elements like badges that need a slightly more saturated color that tonal_subtle because of their size.

#f0f1f5

#141c34

tonal_subtle

The default background color for info elements like alerts.

#d5def7

#102251

tonal_medium

Although this tokens has the same value as tonal_subtle, it is needed to match the structure of the other statuses.

#d5def7

#102251

tonal_subtle

The default background color for neutral feedback elements like alerts.

Agent Status

Status colors for agents are used on Avatars mostly.

Avatar is the component that take the most advantage of status colors.

background / system / status

#09b581

available

#e22245

busy

#f8c73e

away

#2143a2

#2954cb

on_queue

#848891

offline

#b74ba4

out_of_office

#ff451a

notification

#9de1cd

available_reduced

#f4a7b5

busy_reduced

#fce9b2

away_reduced

#a6b4da

on_queue_reduced

#cecfd3

offline_reduced

#e2b7db

out_of_office_reduced

#9de1cd

#1d624f

available_reduced

#f4a7b5

#742737

busy_reduced

#fce9b2

#7c6934

away_reduced

#a6b4da

#2a3b6d

on_queue_reduced

#cecfd3

#4e5056

offline_reduced

#e2b7db

#62375d

out_of_office_reduced

Progress and loading

Since most of our loading components are shapes, we classify their colors as backgrounds.

Our loading spinners use background colors.

background / system / progress_and_loading

#d5def7

#465066

default

The color to indicate that this progress has not been achieved.

#2143a2

#5476d5

progressed

The color to indicate that this progress in a component.

Custom accents

Custom accents are used to identify categories, like Tags.

Tags using custom accents

background / system / custom_accents / subtle

#9faac6

#152550

accent_1

A custom accent used mostly for tags.

#b2b7c4

#3e4044

accent_2

A custom accent used mostly for tags.

#cceee6

#193b33

accent_3

A custom accent used mostly for tags.

#81cbe5

#003447

accent_4

A custom accent used mostly for tags.

#c6dd98

#303b19

accent_5

A custom accent used mostly for tags.

#9ac1e8

#1a2e41

accent_6

A custom accent used mostly for tags.

#cdacff

#34234d

accent_7

A custom accent used mostly for tags.

#ef9ee1

#451c3e

accent_8

A custom accent used mostly for tags.

#ff9dad

#4d1c24

accent_9

A custom accent used mostly for tags.

#ffb5a3

#661c0a

accent_10

#ffdd96

#4d3b18

accent_11

A custom accent used mostly for tags.

#9fd6ea

#04445c

accent_12

A custom accent used in search component

background / system / custom_accents / bold

#263b73

#3d538f

accent_1

A custom accent used mostly for tags.

#596ea6

#6a6d75

accent_2

A custom accent used mostly for tags.

#54c6ab

#327767

accent_3

A custom accent used mostly for tags.

#056385

accent_4

A custom accent used mostly for tags.

#607732

accent_5

A custom accent used mostly for tags.

#467aae

#233d57

accent_6

A custom accent used mostly for tags.

#8a5ecc

#674699

accent_7

A custom accent used mostly for tags.

#89387b

accent_8

A custom accent used mostly for tags.

#ff5c77

#993747

accent_9

A custom accent used mostly for tags.

#992910

accent_10

A custom accent used mostly for tags.

#ffc650

#664f20

accent_11

A custom accent used mostly for tags.

#81cbe5

#117fa7

accent_12

A custom accent used in search component

#5798d9

#345b82

accent_13

Something looks broken on this site?

Report it to the Design System team here!

Palette

Backgrounds colors

Identifying a background color

Background color Palette

Interactive color

Primary

Secondary

Tertiary

Ghost

Subtle

Danger

Containers colors

Pages vs elevated surfaces

Surface/edge color pairing

Page

Elevated

High-contrast

Chat bubbles

AI Features

Text highlight

Form colors

Text-based inputs

Click-based inputs

System colors

Feedback

Background/Border feedback color pairing

Agent Status

Progress and loading

Custom accents

Something looks broken on this site?

Resources

Support