Sistema de diseño
Color
La proporción de color es importante en el diseño de un producto digital. La identidad de marca Repsol en Oxygen promueve una gran presencia de superficies blancas. Titulares o alguna superficies naranja, y la mayoría de elementos interactivos en turquesa.
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.
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.
¿Por qué utilizamos tokens específicos?
- Mantener una nomenclatura específica nos permite asociar los colores que queramos a los diferentes contextos en los que los aplicamos, consiguiendo flexibilidad para tematizar o sustituir colores de marca.
- Aplicar nombres específicos a los estilos en función del contexto en el que se deben utilizar ayuda a los usuarios del sistema a saber fácilmente para qué sirve cada uno de los colores y dónde puede utilizarlo.
- Definir contextos de uso de colores nos ayuda a garantizar la accesibilidad de forma masiva, ya que definimos colores de fondo, de contenido y testamos su legibilidad ántes de que llegue al diseño final.
Estructura de tokens
Además de la paleta específica para diseño, ten en cuenta que contamos con paletas de color adicionales para otros entornos, como pueden ser las paletas específicas para visualización de datos, o las paletas para herramientas especiales como PowerBI. Cada paleta tiene su documentación de uso de color y un contexto de uso determinado.
Paleta específica
Esta es nuestra paleta de colores para el diseño de productos digitales.
Content
El uso de estos tokens de contenido está pensado para cumplir la AA de accesibilidad en cuanto a constrastes.
Token
Uso
Hexadecimal
Content High
Contenidos de mayor jerarquía: Títulos, entradillas...
#464646 (Grey 70)
Content Medium
Contenidos complementarios: Descripciones, helpers...
#727272 (Grey 60)
Content Disabled
Contenidos desabilitados
#AAAAAA (Grey 50)
Content Highlight
Contenidos destacados no clicables
#FF6200 (Orange 70)
Content Inverse
Contenidos sobre fondos de color o fotografías
#FFFFFF (Basic White)
Background
Token
Uso
Hexadecimal
Background 1
Fondos en cards y elementos situados sobre otros fondos de color
#FFFFFF (Basic White)
Background 2
Background de página
#F8F8F8 (Grey 10)
Background Orange
Fondos naranjas destacados
#FF6200 (Orange 70)
Background Turquoise
Fondos turquesas destacados
#016A7F (Turquoise 80)
Background state
Tonos de color específicos para estados de interacción.
Token
Uso
Hexadecimal
Background Light Hover
Efecto hover sutil
#F8F8F8 (Grey 10)
Background Light Active
Marca el estado activo de menús
#F2F2F2 (Grey 20)
Background Dark Hover
Efecto hover más acentuado
#AAAAAA (Grey 50)
Background Dark Active
Marca el estado activo acentuado
#727272 (Grey 60)
Background Disabled
Estado desactivado
#DDDDDD (Grey 30)
Border
Token
Uso
Hexadecimal
Border 1
Tono para utilizar en positivo, sobre fondos claros
#DDDDDD (Grey 30)
Border Hover
Para acentuar el hover
#AAAAAA (Grey 50)
Semantic
Colores con significado que envían mensajes a nuestros usurios.
Token
Uso
Hexadecimal
Semantic Highlight
Para destacar elementos clicables
#016A7F (Turquoise 80)
Semantic Highlight Static
Para resaltar elementos no clicables
#FF8200 (Orange 60)
Semantic Error
Errores, peligro y alertas
#E4002B (Red 60)
Semantic Warning
Alerta y precaución
#FFC800 (Yellow 50)
Semantic Notification
Informaciones genéricas
#1F97FF (Light Blue 60)
Semantic Success
Éxito, seguridad y correcto
#00A074 (Green Light 60)
Semantic Background
Colores con significado aplicados a los fondos.
Token
Uso
Hexadecimal
Semantic Background Highlight
Para destacar elementos clicables
#C0EBF2 (Turquoise 10)
Semantic Background Highlight Static
Para resaltar elementos no clicables
#FFF0E0 (Orange 10)
Semantic Background Error
Errores, peligro y alertas
#FCE5E9 (Red 10)
Semantic Background Warning
Alerta y precaución
#FFF7DB (Yellow 10)
Semantic Background Notification
Informaciones genéricas
#DEF0FF (Light Blue 10)
Semantic Background Success
Éxito, seguridad y correcto
#D9F1EA (Green Light 10)
Semantic state
Cuando aplicamos el Semantic Highlight en los elementos clicables, tiene que haber un comportamiento de tokens que indique el estado de interacción. Para ello tenemos estos tokens de estado.
Token
Uso
Hexadecimal
Semantic Highlight Hover
Efecto hover del color semántico clicable
#00404D (Turquoise 100)
Semantic Highlight Active
Para acentuar el estado activo de un elemento clicable
#00ADC3 (Turquoise 30)
Semantic Background state
Cuando aplicamos el Semantic Background Highlight en los elementos clicables, tiene que haber un comportamiento de tokens que indique el estado de interacción. Para ello tenemos estos tokens de estado.
Token
Uso
Hexadecimal
Semantic Background Highlight Hover
Efecto hover del color semántico clicable
#92D9E2 (Turquoise 20)
Semantic Background Highlight Active
Para acentuar el estado activo de un elemento clicable
#C0EBF2 (Turquoise 10)
Semantic Border
Colores con significado aplicados a los bordes.
Token
Uso
Hexadecimal
Semantic Border Highlight
Para destacar elementos clicables
#00ADC3 (Turquoise 60)
Semantic Border Highlight Static
Para resaltar elementos no clicables
#FF8200 (Orange 60)
Semantic Border Error
Errores, peligro y alertas
#F495A6 (Red 30)
Semantic Border Warning
Alerta y precaución
#FFC800 (Yellow 50)
Semantic Border Notification
Informaciones genéricas
#9CD1FF (Light Blue 30)
Semantic Border Success
Éxito, seguridad y correcto
#8DD4C1 (Green Light 30)
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
