Sistema de diseño completo para Leer Jugando — paleta de colores, tipografía, espaciado, responsive y convenciones visuales.
Definir las convenciones visuales de la aplicación para mantener consistencia entre la zona infantil y la zona parental. Toda la UI debe sentirse divertida, colorida y segura.
| Zona | Ruta | Fuente | Tono |
|---|---|---|---|
| Infantil | /kids/* | font-kids (Fredoka One / Balsamiq Sans) | Vibrante, masivo, redondeado |
| Parental | /parent/* | font-parent (Nunito / Inter) | Limpio, legible, profesional |
| Pública | /, /login, /register | font-parent | Informativo, acogedor |
| Token | Hex | Uso |
|---|---|---|
primary | #FFD166 | Acciones, CTAs, botones principales |
secondary | #118AB2 | Fondos, navegación, cuentos |
success | #06D6A0 | Respuestas correctas, validaciones OK |
error | #EF476F | Respuestas incorrectas, alertas |
dark | #073B4C | Texto principal |
bg-kids | #E8F8F5 | Fondo zona infantil |
→ Ver referencia: tailwind-config.ts
Zona Infantil:
3rem (48px) — títulos de juegos2.5rem (40px) — subtítulos1.5rem (24px) — instruccionesZona Parental:
2rem (32px)1.5rem (24px)1rem (16px)0.875rem (14px)4px, 8px, 16px, 24px, 32px, 48px, 64px| Elemento | Valor |
|---|---|
| Botones | rounded-2xl (16px) o rounded-full |
| Cards | rounded-3xl (24px) |
| Inputs | rounded-xl (12px) |
| Avatares | rounded-full |
Nunca usar esquinas afiladas. Sombras suaves y coloridas (evitar grises puros).
| Breakpoint | Rango | Enfoque |
|---|---|---|
| Mobile | < 768px | Stack vertical simplificado |
| Tablet | 768–1024px | Entorno óptimo de juego (landscape) |
| Desktop | > 1024px | Centrado con max-width |
| Estado | Zona Niño | Zona Padre |
|---|---|---|
| Loading | Mascota animada corriendo | Skeleton + spinner |
| Empty | Siluetas grises con ? | Mensaje + CTA |
| Error | Mascota triste + reintentar | Alert descriptivo |
| Éxito | Confeti + sonido | Check verde + toast |
64×64px