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 | - |