Color
El color distingue la marca y refuerza experiencias consistentes en todos los diseños.Fundamentos
Anatomía del color
El sistema de colores está diseñado para proporcionar flexibilidad y consistencia a través de múltiples contextos y modos de visualización. Nuestro sistema incluye colores primitivos, semánticos y tokens específicos para diferentes estados y contextos.
Colores saturados
Los colores saturados pueden infundir significado a una experiencia, resaltar la interfaz de usuario o crear asociaciones con una interfaz de usuario de colores similares. Cada color incluye una escala completa de 10 tonos desde los más claros hasta los más oscuros.
Colores neutros
Los colores neutros se aplican a la mayoría de los fondos, textos y formas de nuestras experiencias. No suelen tener un significado asociado, aunque pueden sugerir estados de discapacidad.
Hay neutrales dedicados tanto para el modo claro como para el oscuro, incluyendo versiones alfa (con transparencia) para crear efectos de superposición y elevación.
Colores alfa
Los colores alfa tienen distintos niveles de transparencia u opacidad. La transparencia ayuda a que la interfaz de usuario se adapte a diferentes colores de fondo y elevaciones.
Si no utiliza tokens de diseño, consulte las paletas de colores para ver códigos hexadecimales y valores RGBa.
Aplicación de color con tokens de diseño
En la mayoría de diseños, los colores se aplican mediante tokens de diseño. Esto significa que, en lugar de elegir un tono o valor específico, se elige un token de diseño para aplicar los colores.
Para ver la lista completa de tokens de diseño de color y sus valores, consulta nuestra lista de referencia de tokens de diseño. Cada token incluye una descripción para ayudarte a asegurarte de usar el correcto.
Todos los tokens de diseño de color comienzan con la palabra “color”, seguida de la propiedad a la que se aplica, como un texto, un fondo, un borde o un icono.
Después del nombre de la propiedad, el token puede tener uno o más modificadores que representan las diferentes partes de nuestro sistema de color: roles de color, niveles de énfasis y estados de interacción.
Roles de color
Los roles de color describen la intención detrás del color. Por ejemplo, se aplican a los botones para diferenciar entre acciones principales, secundarias, de advertencia o peligrosas.
| Rol | Descripción |
|---|---|
brand |
Usar para acciones principales o elementos que comunican la marca. |
neutral |
Usar para texto predeterminado y elementos de interfaz secundarios, como botones secundarios o elementos de navegación. |
information |
Usar para interfaz informativa, como un icono de información, o interfaz que comunica que algo está en progreso. |
success |
Usar para comunicar un resultado favorable, como un mensaje de éxito. |
warning |
Usar para interfaz que comunica precaución para prevenir que ocurra un error o equivocación. |
danger |
Usar para interfaz que comunica peligro o estados de error graves. |
Niveles de énfasis
El énfasis determina el grado de contraste que un color tiene con la superficie predeterminada. El énfasis puede variar desde el más sutil hasta el más intenso. Los colores más intensos contrastan más con la superficie predeterminada, lo que añade más atención que los colores sutiles.
Utilice tokens inversos sobre fondos en negrita
Los tokens inversos están diseñados para mostrarse en fondos en negrita. Existen tokens inversos para texto, bordes e íconos en fondos en negrita.
Para los fondos de advertencia en negrita, que son de color amarillo, existen los tokens especiales warning.inverse diseñados para cumplir con los requisitos de contraste WCAG AA.
Estados de interacción
Los estados comunican el estado de un elemento interactivo.
Utilice tokens colocados sobre un elemento, presionados, seleccionados, enfocados o deshabilitados para crear cambios visuales relacionados con los estados de interacción.
Iconos al pasar el cursor y presionarlos
No hay tokens específicos para iconos al pasar el cursor y presionarlos. En su lugar, recomendamos usar un fondo neutro sutil para indicar cambios de estado.
Accesibilidad en color
Cumplimos con las relaciones de contraste estándar WCAG AA:
- Debe pasar un contraste de 3:1: cualquier interfaz de usuario esencial para comprender la experiencia y el texto de
24pxo más (WCAG 1.4.11) - Debe pasar 4.5:1: Texto menor a
24px(WCAG 1.4.3)
Consulte nuestra guía de accesibilidad de color para obtener más información.
Diseño en modo oscuro
Los tokens de diseño admiten actualmente dos temas de color: claro y oscuro. Cada token de diseño de color se asigna a un valor diferente para cada tema, por lo que su apariencia varía según el tema utilizado.
- Para aprender los conceptos básicos de tokens y temas, vaya a tokens de diseño.
- Para obtener información detallada sobre la asignación de colores claros a oscuros, consulte la sección “Selección de colores para el modo oscuro”. Tenga en cuenta que, si utiliza tokens de diseño, no debería ser necesario asignar sus propios valores.
Acentos
Los colores de acento ayudan a diferenciar elementos de la interfaz, como notas adhesivas, selectores de color e íconos de proyectos.
Los colores de acento ayudan a diferenciar elementos similares de la interfaz de usuario. Los acentos no transmiten ningún significado específico a los usuarios, a diferencia de los colores de éxito, advertencia u otras funciones.
Utilice colores de acento donde los usuarios eligen un color para su contenido o en experiencias donde el color ayuda a categorizar el contenido.
Opciones de color
Hay 10 colores de acento disponibles: azul, verde azulado, verde, lima, amarillo, naranja, rojo, morado, magenta y gris.
Aplicación de colores de acento
Cada color de acento tiene tokens de diseño específicos que se pueden aplicar a fondos, texto, bordes e iconos. La lista completa de fichas está disponible en la lista de referencia de fichas de diseño.
Si no está seguro de si debe utilizar un token de acento, considere si el color se puede cambiar por otro sin cambiar la experiencia o el significado detrás de él.
Niveles de énfasis de acento
Los tokens de acento vienen en múltiples tonos, que pueden proporcionar diferentes niveles de énfasis para la jerarquía visual o usarse para brindar más opciones de color para el contenido generado por el usuario.
Tokens de acento de fondo
Los símbolos de acento de fondo tienen cuatro niveles de énfasis que van desde el más sutil al más audaz.
Tokens de acento de texto
Los tokens de acento de texto tienen dos niveles de énfasis: predeterminado y más negrita.
Tokens de acento de icono
Los tokens de acento de ícono tienen dos niveles de énfasis: predeterminado y más audaz.
Accesibilidad del color de acento
Al combinar textos acentuados o colores de íconos con fondos, asegúrese de que cumplan con los requisitos mínimos de contraste.
- Combine texto o íconos con acentos predeterminados o más audaces con fondos con acentos cada vez más sutiles.
- Combine textos o íconos con acentos más llamativos con fondos con acentos sutiles
- Combine texto o íconos invertidos con fondos con acentos más llamativos
Si va a combinar tokens de texto o íconos fuera de estas recomendaciones, asegúrese de que cumplan con los requisitos mínimos de contraste con el fondo.
Mejores prácticas
Evite el amarillo
El amarillo presenta un desafío único para la accesibilidad y puede parecer más marrón. Considere usar un color de acento diferente en su lugar, como el naranja.
Utilice bordes para lograr más contraste alrededor de fondos sutiles
Combine fondos con acentos más sutiles con bordes acentuados si su experiencia necesita superar el contraste 3:1.
Los fondos con acentos más intensos cumplen estos requisitos por sí solos. Para la visualización de datos, utilice tokens de gráficos apropiados.
Evite mezclar diferentes colores de acento
Mantenga la armonía visual combinando elementos del primer plano y del fondo con colores de la misma familia.
Visualización de datos
El color puede facilitar la comprensión de gráficos y otras visualizaciones de datos.
La visualización de datos es la representación de información en formato pictórico o gráfico, como tablas, gráficos, mapas y diagramas. Estos recursos visuales facilitan la comunicación de datos complejos, facilitando la comprensión.
Debido a que el color puede afectar nuestra percepción de la información, el uso apropiado del color es fundamental para que una visualización de datos sea exitosa.
Aplicación de color a las visualizaciones de datos
El color en las experiencias de productos de Gstock se aplica mediante tokens de diseño. Para la visualización de datos, se dispone de tokens de color para gráficos que garantizan el contraste de color adecuado.
Utilice tokens de gráfico para líneas, barras u otras interfaces que representen los datos. Para elementos de la interfaz del gráfico, como ejes y texto, utilice tokens de borde y texto.
| Elemento | Token |
|---|---|
| 1. Título | color.text. |
| 2. Marcar etiqueta | color.text.subtle |
| 3. Umbral o línea de referencia | color.chart.neutral |
| 4. Leyenda | color.text |
| 5. Línea de cuadrícula | color.border |
| 6. Marca | color.chart.brand |
Tipos de colores de gráficos
- Gráficos de un solo color
- Categórico (no implementado)
- Estado y gravedad (no implementado)
- Gráficos personalizados (no implementado)
Actualmente no se admiten colores de gráficos secuenciales y divergentes.
Gráficos de un solo color
Para visualizaciones de datos que requieren un solo color, use color.chart.brand como opción predeterminada. Esto garantiza que toda la visualización de datos represente el lenguaje visual de nuestra marca.
Si los datos representan el estado o la gravedad, utilice tokens de color apropiados para ese contexto.
Para resaltar un dato de un conjunto de datos, utilice color.chart.neutral para la información menos importante para que los datos importantes puedan destacarse.
| Token | Descripción |
|---|---|
color.chart.brand |
Color principal para la visualización de datos. Úselo cuando solo se requiera un color. |
color.chart.neutral |
Color secundario para la visualización de datos. Úselo para los datos menos importantes cuando desee que otros datos destaquen. |
Categórico
Utilice colores de gráficos categóricos cuando necesite diferenciar dos o más categorías de datos no relacionadas entre sí.
Siga la misma secuencia que los números en los nombres de los tokens. Esto garantiza que cada color se distinga visualmente de sus vecinos en todas las deficiencias de color. Si no se puede controlar el orden de visualización (por ejemplo, en gráficos de líneas), proporcione [indicadores visuales adicionales].
| Simbólico | Descripción |
|---|---|
| color.chart.categorical.1 | Solo para visualización de datos. Siga la secuencia numerada. |
| color.chart.categorical.2 | Solo para visualización de datos. Siga la secuencia numerada. |
| color.chart.categorical.3 | Solo para visualización de datos. Siga la secuencia numerada. |
| color.chart.categorical.4 | Solo para visualización de datos. Siga la secuencia numerada. |
| color.chart.categorical.5 | Solo para visualización de datos. Siga la secuencia numerada. |
| color.chart.categorical.6 | Solo para visualización de datos. Siga la secuencia numerada. |
| color.chart.categorical.7 | Solo para visualización de datos. Siga la secuencia numerada. |
| color.chart.categorical.8 | Solo para visualización de datos. Siga la secuencia numerada. |
Estado y gravedad
Estos colores de gráfico utilizan asociaciones de color establecidas para el estado y la gravedad, como en curso, en riesgo o alta prioridad. Úsalos cuando quieras reforzar el significado mediante el color en tu visualización de datos.
Si existe más de un conjunto de datos para una asociación de color dada, utilice negrita para representar el valor más extremo. Por ejemplo, Prioridad alta y Prioridad máxima usan tokens de peligro, pero Prioridad máxima usa color.chart.danger.bold.
Es importante tener en cuenta que los colores de estado y gravedad pueden ser difíciles de distinguir para los usuarios con deficiencias de color. Por ello, utilice otros [indicadores visuales] o considere los [colores categóricos] como una mejor opción.
| Simbólico | Descripción |
|---|---|
color.chart.success color.chart.success.bold |
Para la visualización de datos que comunica información positiva, como “en camino” o “listo”. |
color.chart.warning color.chart.warning.bold |
Para la visualización de datos que comunican precaución, como “en riesgo” o “prioridad media”. |
color.chart.danger color.chart.danger.bold |
Para la visualización de datos que comunican información negativa o crítica, como “fuera de curso” o “alta prioridad”. |
color.chart.information color.chart.information.bold |
Para la visualización de datos que comunica estados de baja prioridad o en progreso. |
color.chart.discovery color.chart.discovery.bold |
Para la visualización de datos comunicando “nuevos” estados. |
color.chart.neutral |
Para la visualización de datos que comunican estados de tareas pendientes. |
Gráficos personalizados
Hay disponible un conjunto genérico de tokens de colores de gráficos para respaldar las experiencias de visualización de datos donde los usuarios finales pueden elegir sus propios colores.
También se pueden utilizar para crear esquemas de colores categóricos personalizados, aunque se recomiendan nuestros tokens categóricos predefinidos para una mejor accesibilidad y consistencia.
Estas fichas están disponibles en todos los tonos con tres niveles de énfasis. Consulta todas las fichas de gráficos personalizados en nuestra lista de referencia de fichas de diseño o consulta las muestras del selector de color .
Paletas de color
Nuestra paleta de colores es una selección de colores que trabajan juntos para crear consistencia en los productos.
Selección de colores para el modo oscuro
Los colores neutros están configurados para facilitar la conversión de un tema claro a uno oscuro. Si usa nuestros tokens de diseño para aplicar colores, esta asignación se realiza automáticamente.
Hay una rampa neutra clara y una rampa neutra oscura equivalente. Neutral100 en la rampa neutra clara debería ser equivalente a DarkNeutral100 en la rampa neutra oscura.
Los colores saturados también se pueden convertir fácilmente de un tema claro a uno oscuro mediante simetría. Actualmente tenemos 10 muestras configuradas en cada paleta. Si las muestras se dividen por la mitad, cada mitad se convierte en un espejo.
Por ejemplo, si el color de un botón es 700 en el tema claro, será 400 en el tema oscuro. Si el fondo del mensaje de una sección es 100 en el tema claro, será 1000 en el tema oscuro. Los tokens de diseño gestionarán estas conversiones.
Usar simetría es un excelente punto de partida y abarca la mayoría de los casos de uso. Sin embargo, puede que no funcione en todos los casos, por lo que la asignación de colores se puede ajustar según corresponda.