Color

Los tokens de color se componen de 5 categorías: Primary, Success, Warning, Danger y Neutral. Cada una de ellas posee una paleta ampliada de 12 tonos, de los cuales 8 están vinculados a funciones definidas.

Cada una de las funciones de color está asociada a la funcionalidad de los componentes y usos aplicados a experiencias comunes de nuestros productos.

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.

Es la principal categoría de color, por eso posee la mayor jerarquía y está asociada a elementos interactivos de alta importancia en la pantalla.

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

-

Es una categoría de color secundaria. Por eso posee menor jerarquía en relación a la Primary. Está asociada a elementos interactivos secundarios o de interface como: textos, bordes, iconos y otros componentes sin estado o de caracter 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

-

Es usado para comunicar estados de éxito o que requieren un destaque positivo. Está asociado a elementos de la interface como: textos, inputs, bordes, iconos y otros componentes que necesitan comunicar ese tipo de estado.

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

-

Es utilizado para comunicar estados de riesgo o que requieren atención. Está asociado a elementos de interface como: textos, inputs bordes, iconos y otros componentes que necesitan comunicar ese tipo de estado.

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

-