Guía de estilo

El sistema visual del Campus de Charly's Way: colores, tipografía, tamaños, espacios, bordes y componentes. Es la referencia única para quien diseña o construye cualquier pantalla del Campus, para que todo se vea como una sola cosa.

La fuente de verdad técnica vive en el repositorio (design-system.md + globals.css). Esta sección la explica en limpio, con las muestras de color y los tamaños reales. Si algo cambia en el código, se actualiza primero el sistema y luego esta guía.

Cómo leer esta guía

Cada token tiene un nombre. Úsalo siempre por su nombre, nunca pegues un color o un tamaño «a ojo»:

• Variable CSS — var(--color-cw-blue), para hojas de estilo.
• Utilidad de Tailwind — bg-cw-blue, text-cw-dark, border-cw-line, en el JSX.

Si un token no existe, se añade primero al sistema y luego se usa. No se inventan colores, fuentes ni tamaños sueltos.

Las secciones

• Colores — la paleta completa (marca, neutros, semántica, estados) con sus muestras y sus reglas de contraste.
• Tipografía — las dos familias (Lato y Poppins), pesos y las escalas de tamaño por público (alumno, staff y móvil).
• Espaciado y radios — alturas táctiles, escala de espacios, radios, bordes, sombras y movimiento.
• Componentes y marca — las piezas .cw-* listas para usar, el logo y los iconos de app.

Principios que mandan sobre todo

El Campus del alumno se diseña para un público de 50 a 70 años, no técnico. Estas reglas ganan a cualquier preferencia estética:

• 🌞 Fondo claro siempre. Nada de modo oscuro, glassmorphism oscuro ni degradados complejos.
• 🔠 Texto grande. Mínimo 16px en móvil y 18px en escritorio para el texto de lectura.
• 👆 Botones grandes y obvios. Altura mínima de 48px (el mínimo táctil es 44px).
• 🏷️ Iconos siempre con texto. Nunca solo un icono (salvo excepciones acotadas, como la campana y el avatar de la cabecera).
• 🎯 Contraste alto. Mínimo WCAG AA en todo el texto.
• 💬 Lenguaje cercano y claro, frases cortas, solo en español. «Pincha aquí», nunca «Desliza».

Las vistas de tutor, gestor y administración apuntan a un operador de software (25-35 años): ahí se prioriza densidad (texto algo más pequeño, más información por pantalla). Las vistas del alumno siguen las reglas de arriba sin excepción.