Maristas UI Kit v1.1.6+1

Colores

La marca es el azul institucional. Los estados (éxito, atención, error, información) son independientes de la marca y nunca se usan como acento decorativo.

Marca
--maristas-brand#0b3a6f
Botón principal, pestaña activa, progreso
--maristas-brand-strong#082b54
Hover del botón principal
--maristas-brand-soft#e7eefb
Fondos suaves, fila seleccionada
--maristas-accent#2f6fed
Foco de teclado, enlaces, indicador de nuevo
Neutros
--maristas-ink#172033
Texto principal
--maristas-muted#6a7489
Texto secundario y etiquetas
--maristas-line#e6e9f1
Bordes y divisores
--maristas-soft#f4f6fb
Fondo de página y bloques
--maristas-surface#ffffff
Tarjetas y campos
Estados (color fuerte y fondo suave)
--maristas-success#12805c · #e3f5ee
Éxito, enviado, aprobado
--maristas-warning#a96a00 · #fdf1d8
Atención, pendiente
--maristas-danger#c93a3a · #fce8e8
Error, bloqueo, baja
--maristas-info#1f6aa8 · #e3f0fb
Información, respuesta nueva
Contraste de texto sobre fondo

Pares aprobados para texto normal (mínimo 4.5:1).

Ink sobre superficie Muted sobre superficie Blanco sobre marca Marca sobre marca suave Éxito sobre éxito suave Error sobre error suave
Sí Usa el azul de marca para la acción principal y los elementos activos. Usa un color de estado solo cuando comunica un estado.
No No uses verde o rojo como decoración, ni dos colores de estado juntos para una misma información. El color nunca es la única señal: acompáñalo con texto o ícono.
Maristas UI Kit
Filtros