Colors
Colors play an important role in text readability, element identification and interactions. They are also responsible for making a connection with our brand.
Text readability
All interface texts must meet minimum contrast criteria. WCAG requires an AA level of contrast, equivalent to 4.5:1 between regular and background text, and 3:1 for larger text.
Primary colors
The primary colors are the colors that predominate in the elements, bringing greater prominence on the screens.
| Token | Hex |
|---|
Neutral colors
Neutral colors are used in elements that do not need to be highlighted.
| Token | Hex |
|---|
Functional colors
They are used as visual support to communicate and deliver better and more meaningful feedback.
Danger
The danger functional color should be used in critical situations that require your full attention, such as data that can be deleted, system exit, disconnection, loss of information, among others.
| Token | Hex |
|---|
Success
The success functional color should be used in positive and correct feedback and actions.
| Token | Hex |
|---|
Warning
The warning functional color should be used in attention situations, however the action result is not critical. In this case, there is no loss of information or the action can be reversed.
| Token | Hex |
|---|
Highlight
The highlight functional color should be used for supporting information, elements or actions such as help and support. It must not be used for any other type of feedback, with the exception of the Avatar component.
| Token | Hex |
|---|
Support colors
Support colors should be used in charts, legends, and data visualization.
| Token | Hex |
|---|
Tokens name
Not all color palettes have the same amount of tokens. The variations depend on the intended applications for each color. Avoid using different colors for an element's default and hover state.
| Naming | Description |
|---|---|
inverse and on-color | Colors with greater contrast for applications in icons or texts on dark or colored backgrounds. |
interactive | Neutral colors, with higher contrast for interactive elements |
high-emphasis | Color tone for more prominent elements |
low-emphasis | Color tone for less prominent elements |
surface | Fill colors for elements above the page background (except icons, text and borders) |