Componentes y marca
Las piezas visuales del producto viven como clases .cw-* en globals.css. Úsalas antes de inventar una variante nueva con utilidades sueltas.
Botones
Pincha aquíAcción secundariaFantasma
| Clase | Para qué |
|---|---|
.cw-btn + .cw-btn-primary | CTA principal, naranja. |
.cw-btn + .cw-btn-secondary | Acción secundaria, azul. |
.cw-btn + .cw-btn-ghost | Fantasma, con borde de 2px. |
.cw-btn-ghost-brand | Modificador del fantasma sobre la cabecera azul del alumno en móvil (borde blanco translúcido). Solo aplica <md. |
.cw-btn-complete | Barra «Marcar como completada» (52px, todo el ancho): sin hacer = blanco con borde azul · hecha = fondo cw-success-50 con texto cw-success · guardando = al 60 %. |
Todos los botones miden mínimo 48px de alto y usan Poppins 700 a 16px.
Píldoras y etiquetas
PendienteEn revisiónRespondidoArchivado
| Clase | Para qué |
|---|---|
.cw-fb-badge (+ .is-pending / .is-review / .is-responded / .is-closed) | Píldora de estado de feedback. |
.cw-sticker | Etiqueta tipo pegatina, rotada -2°, en mayúsculas. |
.cw-progress + > span | Barra de progreso azul sobre fondo blue-100. |
Tarjetas, filas y estructura
| Clase | Para qué |
|---|---|
.cw-card | Card blanca con borde line y radio 16. |
.cw-lesson-row (+ .is-current) | Fila de lección dentro de un módulo. |
.cw-fb-row (+ .is-new) | Fila de un ticket de feedback. |
.cw-check (+ .is-current / .is-done) | Check circular del temario (22px): pendiente = borde · en curso = anillo naranja con punto · hecha = relleno azul. |
.cw-section-h | Cabecera de sección con dashline al lado. |
.cw-empty + .cw-empty-icon | Estado vacío centrado. |
.cw-video | Marco de vídeo 16:9 con acento naranja superior. |
Formularios
| Clase | Para qué |
|---|---|
.cw-input + .cw-input-group (+ label, .hint) | Input con label y pista; error con .is-error. |
Grabación de audio
| Clase | Para qué |
|---|---|
.cw-record-big | Botón circular naranja gigante para grabar (132×132). |
.cw-audio-waves | Contenedor de barras de onda azul. |
.cw-wave-bar + @keyframes cwWave | Barra animada de grabación activa. |
.cw-halo-pulse | Halo pulsante del grabador mientras graba. |
Marca de agua y líneas
| Clase | Para qué |
|---|---|
.cw-dashline / .cw-dashline-orange / .cw-dashline-vert | Línea discontinua de marca (horizontal y vertical). |
.cw-rich-text | Estilos del HTML renderizado (descripciones de lección). |
Animaciones de entrada
| Clase | Para qué |
|---|---|
.cw-rise | Entrada de tarjeta (rise + fade), solo transform/opacity. |
.cw-check-pop | Pop del check al marcarse hecho. |
.cw-drawer-overlay / .cw-drawer-content | Drawer móvil + scrim (temario en <md). |
Logotipo
Assets oficiales del brand kit, en public/brand/. Se renderizan con el componente BrandLogo.
Regla de marca: no distorsionar, rotar, recolorear, añadir sombras/contornos ni reordenar elementos. Solo las dos versiones sancionadas (Azul Charly y Blanco).
| Archivo | Qué es | Uso |
|---|---|---|
logo-completo-azul.svg | Wordmark completo, azul | Sobre fondo claro (sidebar expandido). Mín. 100px de ancho. |
logo-completo-blanco.svg | Wordmark, negativo | Sobre fondo oscuro/azul (pantallas de acceso). |
logo-cw-azul.svg | Monograma «cw», azul | Marca compacta (rail colapsado). Mín. 16px de ancho. |
logo-cw-blanco.svg | Monograma, negativo | Sobre fondo oscuro (reservado). |
No uses la vieja caja «CW» en la fuente del cuerpo: era una aproximación, no el logo real.
Iconos de app
En src/app/ (convenciones de App Router): icon.svg (monograma «cw», principal) · icon.png (favicon 64×64) · favicon.ico. Next inyecta los <link rel="icon"> solo.
La regla de oro
Cuando el sistema visual tenga que evolucionar (consolidar una escala, tokenizar un color nuevo, renombrar una variable…), se actualiza primero design-system.md y, a partir de ahí, se ajustan globals.css, los componentes y esta guía. Esa es la única ruta válida.