Contexto

Lo más importante al personalizar la app del kiosco es elegir los colores adecuados para tu marca. Es probable que algunos colores afecten al aspecto de la app más que otros. Por lo tanto, algunos de ellos, como el color indicador de error, el color de los iconos, etc., pueden permanecer en su valor predeterminado. Te recomendamos cambiar el color principal y el color principal de los botones.

Requisitos:

• Todos los colores deben proporcionarse en formato de código de color hexadecimal, por ejemplo (#ff6600).

Colores generales

Principal

Este es el color principal de la marca. Es el más prominente en todo el kiosco. Se utiliza para destacar acciones y eventos importantes que el usuario puede seleccionar, así como elementos relevantes que se deben resaltar. Este debe contrastar lo suficiente, de modo que los elementos de texto en ese color se puedan leer fácilmente.

1. Selector de categoría
2. Icono de recompensas y ofertas
3. Marca de verificación
4. Selección de tarjetas de combo
5. Enlace
6. Ilustración

Blancos y negros

Actualmente no se utilizan en el sistema. No cambies los valores predeterminados, ya que se pueden usar en el futuro tal y como están.

Colores de fondo

Background Front y Background Back

El color de fondo se utiliza en todo el kiosco. Background Back es el color de fondo principal, y el color Background Front se utiliza en los elementos que se sitúan por encima del plano principal, como los modales y las tarjetas. En algunas pantallas, todo el fondo es de color Background Front.

1. Background Front
2. Background Back

Estados

Color indicador de error

Muestra la acción negativa en la interfaz. Los elementos en este color tienen como fin llamar la atención cuando el usuario debe realizar una acción inmediata. Este color suele aparecer en los errores del sistema en el flujo de pedidos.

1. Ilustración del error
2. Error en la selección de artículos

Iconos

Color indicador de icono activo e inactivo

El color indicador de icono activo se utiliza en los iconos que activan alguna acción, como “Edit” (Editar) y “Delete” (Eliminar). El color indicador de icono inactivo se usa en el recuento de artículos del menú y en la pantalla de resumen.

1. Icono activo
2. Icono inactivo

Colores varios

Color de las líneas

Este es el color de las líneas divisorias utilizadas en la interfaz. El color de las líneas se utiliza en cada línea en todo el sistema. Todos los colores de las líneas se generan reduciendo la opacidad de un color determinado. Por ello, debe ser muy oscuro, de modo que sea visible incluso con un 6 % de opacidad. Recomendamos el negro.

1. Opacidad de la línea 6 %
2. Opacidad de la línea 15 %
3. Opacidad de la línea 30 %
4. Opacidad de la línea 40 %

Color indicador de alimentos vegetarianos

Se utiliza en el icono en línea que destaca los artículos vegetarianos y veganos del menú.