Contexto

Uno de los factores más importantes a la hora de consolidar una marca es elegir los colores adecuados. Es probable que algunos colores afecten al aspecto de la app web más que otros. Por ello, algunos de los colores, como “luma”, “información” e “iconos”, pueden permanecer en su valor predeterminado. Te recomendamos cambiar el color principal y el color principal, secundario y terciario de los botones.

Ten en cuenta que todos los colores deben proporcionarse en formato de código de color hexadecimal, como #ff6600.

Colores generales

Principal

Este es el color principal de la marca. Es el color con mayor prominencia en la app y 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. Usamos este color para los siguientes elementos en la app web:

1. Enlaces
2. Botón activos de cantidad
3. Marcas de verificación
4. Selección de idioma
5. Botones de alternancia

Blanco

Se utiliza el color blanco como una propiedad resistente en elementos en los que los colores de la marca no son apropiados. El color blanco de la interfaz se puede sustituir por otros tonos de blanco. Si eliges otra tonalidad de blanco, es importante que el nuevo color sea claro para que muestre suficiente contraste con los elementos de fondo. Recomendamos no cambiar este color. Lo usamos para los siguientes elementos en la app web:

1. Icono de marca de verificación en el componente de marca de verificación
2. Número en el contador
3. Texto dentro de la información sobre herramientas

Negro

Se utiliza el color negro como una propiedad resistente en elementos en los que los colores de la marca no son apropiados.

El color negro de la interfaz se puede sustituir por otros tonos de negro. Si eliges otra tonalidad de negro, es importante que el nuevo color sea oscuro para que muestre suficiente contraste con los elementos de fondo. Recomendamos no cambiar este color. Lo usamos para los siguientes elementos en la app web:

1. Fondo de la información sobre herramientas

Colores de fondo

El color de fondo se utiliza en todo el sitio web. 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. Asimismo, el color del pie de página se utiliza en el pie de página del sitio web:

1. Background Front
2. Background Back
3. Color de fondo del pie de página

Colores indicadores de estado

Los colores indicadores de estado se utilizan para mostrar los estados que indican que una tarea se realizó correctamente o fracasó en tu app web. Suelen ser rojo y verde, respectivamente. Sin embargo, se puede usar un color alternativo.

1. Color indicador de error

1. Color indicador de tarea correcta

Color de los iconos

El color de icono inactivo se aplica a los iconos que se utilizan a modo de orientación o para indicar un estado de inactividad, mientras que el color de icono activo se aplica a todos los iconos que se utilizan para activar alguna acción. 

1. Color indicador de icono activo
2. Color indicador de icono inactivo

Colores varios

Los colores varios sirven como colores de soporte para diferentes elementos en tu marca. 

Color indicador de alimentos vegetarianos

El color indicador de alimentos vegetarianos se utiliza en los iconos que representan comidas vegetarianas y veganas:

Luma

Este color afecta a algunas áreas del fondo o superficies de componentes interactivos y sus estados. Todos los colores “luma” se generan reduciendo la opacidad de este color. Por ello, debe ser muy oscuro, de modo que sea visible incluso con un 6 % de opacidad.Recomendamos no cambiar este color.

1. Fondo de la sección de venta dirigida (10 %)
   
2. Desplazamiento sobre ofertas y recompensas (20 % y 10 %)
   
3. Botón de cantidad desactivado (20 %)
   
4. Snackbars
   

Fondo y texto con alto contraste

Son propiedades del color que contribuyen a la accesibilidad. Se aplican a fondos sobre los que se posicionan textos claros u oscuros y al texto en sí. Estos colores se activan cuando un usuario activa el botón de alto contraste en el pie de página. Recomendamos no cambiar este color.

Información

El color de información se utiliza en los elementos de la interfaz que muestran información adicional, como el fondo de las cantidades de artículos que se ve a continuación: