Tarjeta estándar
La barra carmesí del borde izquierdo aparece al pasar el cursor: señala foco sin agregar color permanente.
Sistema de diseño
Esta página lee los mismos tokens que el sitio y calcula los contrastes en tiempo real.
Si alguien cambia un color en tokens.css, aquí se ve inmediatamente si
rompió la accesibilidad.
Paleta
Tres colores de marca extraídos de la plantilla original. El resto de la rampa se deriva de ellos, únicamente para estados y superficies — nunca para introducir un color nuevo.
Marca
Rampa navy · autoridad e infraestructura
Rampa carmesí · acción y urgencia
Neutros y texto
Contraste verificado
Calculado con la fórmula WCAG 2.1. AA exige 4.5:1 para texto normal y 3:1 para texto grande (≥24px o ≥19px en negrita). AAA exige 7:1.
La regla que gobierna todo el sitio
El carmesí sobre navy no llega ni a 2:1. Por eso el acento nunca es texto sobre fondo
oscuro: en secciones invertidas se usa
--accent-on-dark, y el carmesí puro
queda reservado para fondos, bordes y superficies.
Tipografía
Instrument Sans para titulares (grotesca de altura x alta, muy legible en tamaños grandes) e Inter para texto corrido, diseñada específicamente para pantalla. JetBrains Mono para datos técnicos. Todas con respaldo del sistema.
Aa Bb Cc Ññ
0123456789 · áéíóúü ¿? ¡! — «» S/. %
Escala fluida
--fs-displayConvergencia--fs-h1Titular principal--fs-h2Título de sección--fs-h3Título de tarjeta--fs-leadBajada introductoria de sección--fs-bodyTexto corrido, el caballo de batalla del sitio--fs-smTexto secundario y metadatos--fs-microEtiqueta en versalitas
Nitidez: la decisión técnica
Sobre blanco → renderizado del sistema
No se fuerza -webkit-font-smoothing. El suavizado subpíxel del sistema
operativo produce trazos más definidos con texto oscuro sobre fondo claro. Forzar
antialiased adelgaza la letra y se percibe borrosa.
Sobre navy → escala de grises
El blanco sobre oscuro se engrosa ópticamente y genera halo. Ahí sí se activa
antialiased, mediante las clases .on-dark y
.section--invert. Nunca de forma global.
Espacio y forma
Escala de 4 px. Todo margen, relleno y separación sale de aquí; no existen valores sueltos.
Radios y sombras
--r-sm · --sh-xs--r-md · --sh-sm--r-lg · --sh-md--r-xl · --sh-lg
Las sombras nunca son negro puro: llevan tinte navy rgba(12,48,100,…),
lo que las integra con la paleta en lugar de ensuciar el blanco.
Componentes
Botones
Chips y badges
Validado
Para su caso
Tarjetas
Coincidencia adaptativa
Estado que aplica el motor cuando la solución responde al perfil inferido del visitante.
Hundida
Para paneles laterales y bloques de apoyo, donde la tarjeta no debe competir con el contenido principal.
Formularios
Retroalimentación
Nota informativaBorde navy: contexto neutro, sin urgencia.
Nota de atenciónBorde carmesí: algo que el lector no debería pasar por alto.
Estado vacío
Siempre ofrece una salida, nunca solo informa del vacío.
Reglas no negociables
✓ El fondo por defecto es blanco
El navy entra como sección invertida puntual, para marcar ritmo. Un sitio mayoritariamente oscuro con esta paleta pierde la nitidez que se busca.
✗ Degradados de marca en el texto
Nada de texto con degradado navy→carmesí: destruye el contraste medible y no supera ninguna auditoría.
✓ Un solo acento por vista
El carmesí marca la acción principal. Si todo es rojo, nada es urgente.
✗ Carmesí como texto corrido sobre navy
3.05:1: alcanza para texto grande, no para texto normal. Sobre oscuro se usa --accent-on-dark.
✓ Foco siempre visible
Anillo de 3 px con desplazamiento. Se navega el sitio completo con teclado.
✗ Animación sin escape
Todo movimiento se anula bajo prefers-reduced-motion. Sin excepciones.