Color
Os tokens de cor são compostos por 5 categorias de cor: Primary, Success, Warning, Danger e Neutral. Cada uma dessas categorias possui uma paleta ampliada de 12 tons, onde 8 deles têm usos atrelados a funções definidas.
Cada uma das funções está atrelada às funcionalidades dos componentes e usos aplicados a experiências comuns nos nossos produtos.
System suffix | Available | Function |
|---|---|---|
-background | Only for neutral colors. | It can be used for background and text on a negative background. |
-surface | - | It can be used to highlight non-clickable surfaces of low hierarchy. |
-surface-highlight | Only for primary, danger and neutral colors. | It can be used to highlight low hierarchy clickable surfaces. |
-interactive | Only for primary, danger and neutral colors. | It can be used in high hierarchy interactive elements. |
-interactive-hover | Only for primary, danger and neutral colors. | It can be used in interactive elements in mouse over state. |
-interactive-pressed | Only for primary, danger and neutral colors. | It can be used in interactive elements in a pressed state. |
-text-low | - | It can be used low hierarchy texts where contrast is not so necessary. |
-text-hight | - | It can be used high-ranking texts where contrast is needed. |
-disabled-surface | Only for neutral colors. | It can be used to highlight disabled surfaces. |
-disabled-text | Only for neutral colors. | It can be used to highlight disabled text. |
É a principal categoria de cores, por isso possui a maior hierarquia e está associada a elementos clicáveis e de alta importância na tela.
Reference | Token name | Token usage | Role |
|---|---|---|---|
#eef5ff | color-light-primary-surface | primary-surface | - |
#96c1fc | color-light-primary-surface-highlight | primary-surface-highlight | - |
#0059d5 | color-light-primary-interactive | primary-interactive | - |
#00429f | color-light-primary-interactive-hover | primary-interactive-hover | - |
#00347d | color-light-primary-interactive-pressed | primary-interactive-pressed | - |
#00255a | color-light-primary-text-low | primary-text-low | - |
#000b19 | color-light-primary-text-high | primary-text-high | - |
É um categoria de cores secundária, por isso possui menor hierarquia em relação a Primary, está associada a elementos interativos secundários ou de interface como, textos, bordas, ícones e outros componentes sem status ou que possuem caráter informativo.
Reference | Token name | Token usage | Role |
|---|---|---|---|
#ffffff | color-light-neutral-background | neutral-background | - |
#f6f6f6 | color-light-neutral-surface | neutral-surface | - |
#e7e7e7 | color-light-neutral-surface-disabled | neutral-surface-disabled | - |
#d1d1d1 | color-light-neutral-surface-highlight | neutral-surface-highlight | - |
#b0b0b0 | color-light-neutral-interactive | neutral-interactive | - |
#888888 | color-light-neutral-interactive-hover | neutral-interactive-hover | - |
#777777 | color-light-neutral-interactive-pressed | neutral-interactive-pressed | - |
#6d6d6d | color-light-neutral-text-disabled | neutral-text-disabled | - |
#5d5d5d | color-light-neutral-text-low | neutral-text-low | - |
#0a0a0a | color-light-neutral-text-high | neutral-text-high | - |
É utilizado para comunicar estados de sucesso ou que requerem destaque positivo, está associado a elementos de interface como, textos, inputs, bordas, ícones e outros componentes que necessitam comunicar esse tipo de status.
Reference | Token name | Token usage | Role |
|---|---|---|---|
#defef2 | color-light-success-surface | success-surface | - |
#7af7c7 | color-light-success-surface-highlight | success-surface-highlight | - |
#00c87b | color-light-success-interactive | success-interactive | - |
#00935b | color-light-success-interactive-hover | success-interactive-hover | - |
#007447 | color-light-success-interactive-pressed | success-interactive-pressed | - |
#005333 | color-light-success-text-low | success-text-low | - |
#001910 | color-light-success-text-high | success-text-high | - |
É utilizado para comunicar estados de risco ou que requerem atenção, está associada a elementos de interface como, textos, inputs, bordas, ícones e outros componentes que necessitam comunicar esse tipo de status.
Reference | Token name | Token usage | Role |
|---|---|---|---|
#fef2de | color-light-warning-surface | warning-surface | - |
#f7c77a | color-light-warning-surface-highlight | warning-surface-highlight | - |
#c87b00 | color-light-warning-interactive | warning-interactive | - |
#935b00 | color-light-warning-interactive-hover | warning-interactive-hover | - |
#744700 | color-light-warning-interactive-pressed | warning-interactive-pressed | - |
#533300 | color-light-warning-text-low | warning-text-low | - |
#191000 | color-light-warning-text-high | warning-text-high | - |
É utilizado para comunicar estados de perigo ou que requerem atenção, está associada a elementos interativos e de interface como, botões, textos, inputs, bordas, ícones e outros componentes que necessitam comunicar esse tipo de status.
Reference | Token name | Token usage | Role |
|---|---|---|---|
#fedede | color-light-danger-surface | danger-surface | - |
#f77a7c | color-light-danger-surface-highlight | danger-surface-highlight | - |
#c80003 | color-light-danger-interactive | danger-interactive | - |
#930002 | color-light-danger-interactive-hover | danger-interactive-hover | - |
#740002 | color-light-danger-interactive-pressed | danger-interactive-pressed | - |
#530001 | color-light-danger-text-low | danger-text-low | - |
#190000 | color-light-danger-text-high | danger-text-high | - |