DESY

Sistema de Diseño del Gobierno de Aragón.

Color

Paletas de colores accesibles para elementos que pueden ser primarios, de interacción, de soporte, para cabeceras, contenidos, fondo o para gráficas. El correcto uso del color ayudará al usuario a navegar, interpretar e interactuar de forma óptima con tu interfaz.

Dónde usamos los colores

primary-light
Botones o filtros seleccionados
primary-base
Botones y enlaces
primary-dark
Botones y enlaces en hover
neutral-base
Separadores
neutral-dark
Texto secundario y bordes
black
Texto principal y bordes
white
Cuerpo de la página
neutral-lighter
Menú de cabecera, pie de página y tarjetas
neutral-light
Ítem deshabilitado
heading-base
Banda de cabecera
heading-dark
Ornamentos de cabecera
warning-light
Píldoras
warning-base
Elemento enfocado
warning-dark
Bordes
success-light
Píldoras
success-base
success-dark
Bordes e iconos
info-light
info-base
info-dark
alert-light
Píldoras
alert-base
Botones y texto de error
alert-dark
Botones en hover, bordes, enlaces e iconos

Elementos de interacción y fondos

Correcto

Utiliza el color correspondiente según la semántica del botón o elemento de interacción.

El fondo debe ser siempre blanco.

Incorrecto

No utilices colores que no correspondan en botones, perderán el sentido y no se percibirán como tales.

El fondo no puede ser de otro color que no pertenezca a la familia Fondo. Puede dar problemas de accesibilidad y legibilidad.

Incorrecto

No utilices otros pesos ni colores de letra que los definidos anteriormente, incumplirás accesibilidad.

Ejemplo 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in.

Más
Correcto

En tarjetas o bloques que deben destacar, utiliza el color Fondo: neutral-lighter.

Ejemplo 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in.

Más
Incorrecto

No utilices otros colores como fondo para destacar tarjetas, incumplirás accesibilidad y empeorará la legibilidad.

Colores de estado

Píldora de estado

Título del ítem

Píldora de estado

Título del ítem

Título de estado

Título de estado

Correcto

Utiliza elementos de estado para marcar la situación del item. Los títulos en texto siempre deben ser de color contenido: black.

Como alternativa también puedes utilizar texto sobre masas del color correspondiente.

Píldora de estado

Título del ítem

Píldora de estado

Título del ítem

Título de estado

Título de estado

Incorrecto

No escribas con colores de soporte.

Respeta la accesibilidad en el contraste entre el texto y la masa de color.