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

-