Color

§Sistema de color de dos capas

Hay dos tipos de combinaciones de colores que se utilizan en la biblioteca: privadas y semánticas. Estas dos combinaciones de colores, o paletas, varían en estructura y propósito. La paleta privada asigna valores RGBA a todos los tonos y matices de color de todos los temas, mientras que la paleta semántica usa colores privados como valores y los aplica a elementos específicos de la interfaz de usuario.

§Colores privados

Son las capas de color base de un sistema de diseño. No están diseñados para usarse directamente dentro de los componentes. En su lugar, sirven como valores para las variables semánticas que ya se utilizan en los componentes. Los valores de las variables privadas son colores RGBA/RGB.

Esta paleta incluye todos los tonos de cada color para cada tema, con y sin canal alfa, con el prefijo Sólido.

§Colores con un canal alfa

Los colores alfa solo están disponibles para índices de 500 o menos. Se mezclan con el color de fondo, lo que permite una mejor legibilidad y contraste. Se sugiere que los utilice:

1. para colores claros (de 50 a 300)
2. En proyectos relacionados con la tipografía en los que el texto se puede mostrar sobre fondos de cualquier color porque el uso de un canal alfa evita la pérdida de contraste.

§Colores lisos

Utilice colores sólidos cuando dos objetos puedan superponerse y desee evitar que los colores se mezclen en lugar de superponerse. Los colores sólidos se seleccionan en función del fondo principal del tema. Dado que los colores sólidos se pueden mostrar sobre capas de base de cualquier color, su uso debe considerarse cuidadosamente.

Las sombras se deben regenerar siempre que se cambie el color de fondo principal o secundario para mantener la coherencia visual entre los colores sólidos y los colores del canal alfa.

§Cómo crear tonos

El tono se crea desde la mitad de la escala, que en nuestro caso es un color con un índice de 550. Es el color primario que genera tonos menos saturados y más saturados. Las excepciones son el blanco y negro, que se encuentran en el extremo de la escala y permiten la creación de más tonos y valores con un canal alfa.

Los colores con un índice de 50 a 500 se crean reduciendo la opacidad del color base (550). Los colores con un canal alfa solo se encuentran en este rango, a diferencia de los colores sólidos, que pueden tener valores en toda la escala.

Los colores con un índice de 600 a 1000 se crean mezclándolos con un color de fondo que contrasta con el color principal del tema seleccionado. Por ejemplo, el color de fondo principal de un tema claro es el blanco y el color de contraste es el fondo de un tema oscuro. Por lo tanto, este fondo contrastante se mezclará con el color para crear tonos más oscuros.

En un tema oscuro, el fondo principal es oscuro y el fondo contrastante es el fondo de un tema claro, que es blanco. Por lo tanto, el blanco se mezclará con el color para crear tonos de alto índice.

Un script le permite generar rápidamente una paleta de colores para la transferencia de desarrollo.

§Colores semánticos

Las variables de este grupo de colores se clasifican en grupos, que posteriormente se utilizan dentro de los componentes según sus significados. Sus valores se configuran para cada tema mediante variables privadas. Algunas variables semánticas a veces se pueden usar como valores para otras, pero esto debe hacerse con cuidado para evitar la recursión.

§Categorías basadas en tipos

En Figma, las variables se organizan en grupos para facilitar la navegación, como se indica a continuación. Mientras que, en el código, la estructura es más sencilla. La marca no se coloca en una categoría separada y solo hay un grupo de variables base. Figma y el código son equivalentes en términos de nombres de variables, estructura y significado, excepto cuando el nombre está optimizado para facilitar la lectura o la comprensión.

1. Creación de marca

   Una colección de variables específicas de la marca de todas las categorías. Se trata de colores básicos que permiten aplicar rápidamente un estilo y ver el resultado. Este grupo es exclusivo de Figma. No está incluido en el código y los colores se clasifican en grupos propios.

2. Texto

   Un grupo de variables para el color del texto y los iconos. Dado que el texto y los iconos suelen mostrarse juntos, tiene sentido mantener su coherencia visual.

3. Base

   Un grupo de colores para calcos subyacentes, rellenos y fondos

4. Semántica básica

   Colores subyacentes con colores Info, Positivo, Advertencia, Peligro y Varios. Hay valores para los estados Normal y Hover. Puede funcionar para algunos tipos de infografías, pero no para todas. Este grupo es exclusivo de Figma. En código, forma parte del grupo Base.

5. Flotador base

   Colores subyacentes de los elementos que flotan sobre el fondo principal de la página. Este grupo es exclusivo de Figma. En código, forma parte del grupo Base.

6. Línea

   Colores de trazos, líneas, divisores, marcos y cualquier otro elemento delgado.

7. Efectos

   Colores utilizados para oscurecer el texto, aplicar sombras, etc.

8. Miscelánea

   Grupo de colores técnicos que se utilizan para las barras de desplazamiento, los ejes de los gráficos y los fondos de información sobre herramientas de los gráficos.

Puedes encontrar más información sobre cada variable en la descripción del estilo de color de Figma o en el libro de cuentos.

§Categorías basadas en el significado

Las variables de cada grupo pueden tener sus propios significados, que están determinados por los principios de aplicación de un grupo. Para los textos, por ejemplo, tiene sentido usar categorías como principal y adicional. Sin embargo, no se pueden aplicar a ningún otro tipo de contenido.

Los siguientes son ejemplos de significados compartidos por diferentes categorías:

• éxito
• peligroso
• aviso
• neutral
• etc.

§Variables y estilos de color

Puedes trabajar con valores de color mediante la interfaz de variables locales de Figma. Para ir allí, abre el archivo con la biblioteca, asegúrate de que no haya nada seleccionado en la página (puedes hacerlo haciendo clic en el fondo vacío del lienzo) y selecciona Variables locales en el panel derecho.

Si bien las variables aún no están en fase beta, el sistema de diseño sigue utilizando estilos de color para definir directamente el color de un objeto. Tenga en cuenta que el valor del estilo de color está representado por la variable correspondiente. Lo que significa:

1. Para cambiar el color de un estilo de color, es necesario cambiar el color de la variable correspondiente.

2. Los estilos de color heredan las propiedades de las variables, especialmente la compatibilidad con los temas de color. Como resultado, un objeto con un estilo de color aplicado puede cambiar el tema usando solo la funcionalidad de Figma.

   

§Temas

Gravity-UI admite cuatro temas: versiones claras, oscuras y contrastantes de cada uno. El estándar actual de la industria requiere al menos dos: luz y oscuridad. Dado lo diversas que pueden ser las preferencias de los usuarios, a veces es difícil elegir la mejor.

Los temas con mayor contraste se crearon para abordar la falta de contraste en los temas normales, que puede deberse a funciones del equipo, como la calibración del monitor, el brillo ajustado, el tipo de matriz y la reproducción cromática (especialmente en la televisión) o a la iluminación de la habitación. Actualmente, estos temas no ofrecen una solución para abordar los problemas de accesibilidad.