Color

La paleta que une diseño y accesibilidad

El color es mucho más que una elección estética en un sistema de diseño; es un lenguaje visual que transmite identidad, emociones y valores de marca. En el ecosistema digital de Repsol, nuestra paleta de colores no solo representa quiénes somos, sino que también guía la experiencia del usuario, asegurando claridad, accesibilidad y coherencia en todos nuestros productos.

Las marcas se construyen a través de asociaciones visuales, y el color es uno de los elementos más poderosos en este proceso. Nos permite ser reconocibles al instante, generar confianza y reforzar nuestra identidad en cada punto de contacto digital. Además, en entornos digitales, donde la legibilidad y el contraste son clave, la aplicación correcta del color garantiza interfaces accesibles y fáciles de usar para todos.

Definir y usar el color de manera estratégica no solo mantiene la coherencia de marca, sino que también crea experiencias digitales más intuitivas y eficientes.

‍

Sistema de color

El sistema de colores de Repsol está estructurado en dos niveles, un primer nivel de colores globales, y un segundo nivel de colores específicos.
‍


Los colores globales consisten en una adaptación al entorno digital de los colores de marca de Repsol, generando una serie de colores y sus escalas de gradación. En esta paleta, los colores se nombran por su nombre y su intensidad, y se generan seis tonos por cada color.
‍


Los colores específicos son los estilos que se aplican a elementos de diseño, utilizan los colores de la paleta global para darles un uso específico acotados a un contexto concreto. De este modo, en lugar de utilizar un color determinado (rojo y verde, por ejemplo), utilizamos el color apropiado a su contexto (color de error y color de éxito, por ejemplo).
‍


Para evitar confusiones, la paleta de color global no se publica, y aunque se puede consultar en diseño y en desarrollo, sus tokens no están disponibles para aplicar directamente en diseños.

Estructura de tokens

Los tokens de estilo son la base sobre la que se construye la identidad visual de nuestros productos digitales. Son como notas en una partitura, pequeños elementos que almacenan colores, tipografías, espaciados y otros estilos esenciales, asegurando que diseño y desarrollo trabajen siempre en armonía.

¿Por qué utilizamos tokens específicos?

• Consistencia visual: Aseguran que todos los productos mantengan el mismo estilo, evitando variaciones innecesarias.
• Eficiencia y rapidez: Facilitan el trabajo de diseño y desarrollo, reduciendo el tiempo dedicado a ajustes manuales.
• Escalabilidad: Permiten hacer cambios globales en colores, tipografías o espaciados con una sola modificación.
• Mejor comunicación entre equipos: Diseño y desarrollo usan un mismo lenguaje, evitando malentendidos y errores.
• Adaptabilidad y mantenimiento: Facilitan la evolución del sistema, permitiendo ajustes sin afectar la coherencia del diseño.

‍

Paleta específica de contenidos

En Energy, partimos de un sistema de tokens de color para construir una paleta específica que se aplica a los distintos elementos de interfaz, desde botones y fondos hasta textos e indicadores de estado. Esta paleta no solo garantiza que el diseño mantenga la identidad visual de Repsol, sino que también optimiza la accesibilidad y la usabilidad en entornos digitales.