Estilos Índice de páginas
Color
Paletas de colores accesibles que ayudarán a la persona a navegar, interpretar e interactuar de forma óptima con tu interfaz.
Índice de apartados de esta página
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 al rol de fondo. Puede dar problemas de accesibilidad y legibilidad.
-
Incorrecto
No utilices otros pesos ni colores de letra que los definidos anteriormente, incumplirás accesibilidad.
-
Correcto
Ejemplo 1
MásLorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in.
En tarjetas o bloques que deben destacar, utiliza el color de fondo:
neutral-lighter. -
Incorrecto
Ejemplo 2
MásLorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in.
No utilices otros colores como fondo para destacar tarjetas, incumplirás accesibilidad y empeorará la legibilidad.
Colores de estado #
-
CorrectoPíldora de estado
Título del ítem
Píldora de estadoTítulo del ítem
Título de estado
Título de estado
Utiliza elementos de estado para marcar la situación del item. Los títulos en texto siempre deben ser de color de contenido:
black.Como alternativa también puedes utilizar texto sobre masas del color correspondiente.
-
IncorrectoPíldora de estado
Título del ítem
Píldora de estadoTítulo del ítem
Título de estado
Título de estado
No escribas con colores de soporte.
Respeta la accesibilidad en el contraste entre el texto y la masa de color.