Sistema de diseño
Tokens en styles.css. Claro por defecto; oscuro con data-theme="dark" en <html>.
Color
Paper--paper
Fondo de página
Surface--surface
Superficies elevadas
Ink--ink
Texto y trazo del logo
Slate--slate
Texto secundario
Mist--mist
Bordes y divisores
Dragon--dragon
Botones, dragón, estrella. No para texto pequeño.
Ember--ember
Enlaces y texto rojo
Tipografía
Unbounded (titulares, ancha y redonda como el logo) y Onest (texto). Escala 1.333.
Titular h1
Sección h2
Elemento h3
Lead: entradilla de sección en Onest 1.333rem, color slate.
Cuerpo: Onest 17px con interlineado 1.6 y líneas de máximo 62 caracteres para leer sin cansarse.
Botones
Mismo sistema que EduSIA y ArkiSIA: radio de 10 px, alto mínimo de 48 px, negrita y anillo de foco de 3 px. Una sola acción primary por vista; el botón nombra la acción.
.btn-primary acción principal · .btn-secondary acciones secundarias · .btn-tertiary enlaces de acción · .btn-danger borrar o destructivo.
Logo
Usa logo-light.png sobre fondos claros y logo-dark.png sobre oscuros. Íconos sueltos: icon-light.png e icon-dark.png.
El dragón
Es el único elemento animado sin que la persona lo pida. De perfil, como el logo, nada en ∞ alrededor de la estrella dentro del carril derecho; el scroll lo acelera y lo empuja. En las vueltas rota para no quedar nunca patas arriba. En móvil va detrás del texto al 25 %. Con movimiento reducido activado no aparece. Código: dragon.js.