Color
El color distingue nuestra marca y refuerza experiencias consistentes en todos los productos. Utilice el color para señalar la estructura, resaltar o enfatizar información o elementos importantes y mostrar diferentes estados.
Pautas generales
Contamos con diferentes tonalidades para cada color definido en Andheuris. Para la mayoría de nuestros colores ,se deberán aplicar los puntos siguientes:
- Cada color tiene unas pautas específicas en cuanto a su significado. Respetamos estas pautas para mantener la coherencia en todo el producto.
- Por lo general, es seguro combinar los tonos claros y oscuros de cualquier color. El texto en el tono oscuro debe poder leerse sobre el fondo claro de su color.
- No se debe utilizar ninguna sombra oscura como fondo.
- Cada color que no sea oscuro tiene dos tonos adicionales definidos:
:activey:hover. Estos tonos adicionales solo deben usarse en casos muy específicos .
Colores de fondo y primer plano
Utilizamos dos colores principales para los fondos:
#FFFFFF
rgba(255, 255, 255, 1)
paletteWhite
#F5F7F9
rgba(245, 247, 249, 1)
paletteCloudLight
Y cuatro colores para crear fondos de estado:
#F5F7F9
rgba(245, 247, 249, 1)
paletteBlueLight
#EAF5EA
rgba(245, 247, 249, 1)
palleteGreenLight
#FEF2E6
rgba(245, 247, 249, 1)
palleteOrangeLight
Estos se utilizan principalmente para fondos de cualquier nivel de elevación o componente. Estos colores son accesibles con colores de primer plano oscuros, por lo que recomendamos usar tonos claros para fondos y tonos oscuros para primeros planos . También puede usar colores complementarios y menores de nuestra paleta, lo que debería brindarle suficientes colores con los que trabajar.
Colores que se pueden utilizar
Aquí tienes el botón del producto. Los colores procesables se utilizan en componentes que incluyen una acción (como avanzar en el flujo). Esto significa que Botón , Botón de enlace , y Enlace de texto componentes. Para el color procesable, utilizamos nuestro componente principal
Paleta de Andheuris
La paleta de colores contiene todos los colores que utilizamos en nuestros diseños. Estos colores también se utilizan de forma predeterminada en las soluciones de marca blanca para nuestros socios y se pueden modificar para adaptarlos a los colores de su marca.
Como habrás notado, nuestra paleta de colores básica es bastante simple: solo unos pocos tonos. Si necesitas varias capas para la interfaz de usuario, puedes usar los tonos adicionales. Si solo usas los tonos básicos, la interfaz de usuario resultaría pesada. Usa los tonos adicionales para que la interfaz de usuario tenga más capas y sea más sutil. También son útiles para estados de interacción específicos, como pasar el cursor por encima y enfocar. No uses estos tonos adicionales por sí solos. Usa el tono básico como color principal y usa los tonos adicionales solo cuando sea necesario para crear más profundidad o interacciones.
Producto
#e7effc
rgb(219, 230, 251, 1)
paletteProductLight
#0c5be4
rgb(12, 91, 228, 1)
paletteProductNormal
##0944ab
rgb(9, 68, 171, 1)
paletteProductDark
Pautas del producto
Cuando se utilizan solo para acciones principales en botones o enlaces de texto, las acciones tienden a destacarse de la interfaz.
Los tamaños de fuente más grandes y los pesos de fuente más pesados ayudan a resaltar.
No utilice ningún color de producto para el estado de enfoque de los elementos del formulario
Para intentar mantener la interfaz de usuario lo más clara posible, utilice solo colores de nube o tonos claros para los fondos.
Cloud o nube
#F5F7F9
rgba(245, 247, 249, 1)
paletteCloudLight
#E8EDF1
rgba(232, 237, 241, 1)
paletteCloudNormal
#BAC7D5
rgba(186, 199, 213, 1)
paletteCloudDark
Tinta o Ink
Los colores de tinta se utilizan generalmente para tipografía e iconos.
#697D95
rgba(105, 125, 149, 1)
paletteInkLight
#4F5E71
rgba(79, 94, 113, 1)
paletteInkNormal
#252A31
rgba(37, 42, 49, 1)
paletteInkDark
Mejor aún, confíe en el valor de colorTextoPrimario (#252A31) ya que admite adecuadamente la temática.
Nos gusta que nuestra interfaz sea clara y esto realmente alteraría las prioridades visuales.
Colores de estado
Verde
#EAF5EA
rgba(234, 245, 234, 1)
paletteGreenLight
#0A932B
rgba(10, 147, 43, 1)
paletteGreenNormal
#2D7738
rgba(45, 119, 56, 1)
paletteGreenDark
Naranja
#FEF2E6
rgba(254, 242, 230, 1)
paletteOrangeLight
#CF6C00
rgba(207, 108, 0, 1)
paletteOrangeNormal
#A75400
rgba(167, 84, 0, 1)
paletteOrangeDark
Rojo
#FAEAEA
rgba(250, 234, 234, 1)
paletteRedLight
#D21C1C
rgba(210, 28, 28, 1)
paletteRedNormal
#970C0C
rgba(151, 12, 12, 1)
paletteRedDark