Referencia Paper — VOLTA
| Campo | Valor |
|---|
| File ID | 01KZG2VRQFF2QF0PRDB10D4AG7 |
| URL | https://app.paper.design/file/01KZG2VRQFF2QF0PRDB10D4AG7 |
| Nombre | VOLTA — Daily UX 2026-08-08 |
| Producto | Web club + solicitud de plaza + panel coach JWT (L1) |
| Artboards | ~22 (+ labels de banda) |
| Bandas | §1 UX · §2 Design + Public · §3 Coach · §4 Mobile · §5 States |
| Idioma UI | es-ES |
| Media | assets/hero.jpg (cancha / club de barrio) |
1. Mapa de canvas (bandas jerárquicas)
| § | Banda | Propósito | Artboards clave |
|---|
| 1 | UX PROCESS | Investigación y modelo de servicio (densidad visual) | Cover, Stakeholders, Personas, JTBD, Journey, Blueprint, IA, Datos |
| 2 | DESIGN + PUBLIC | Sistema visual y cara pública | Design System, Home, Join form, Success |
| 3 | COACH | Flujos autenticados desktop/tablet | Login, Inbox, Request detail |
| 4 | MOBILE | Móvil visitante y coach en vestuario | Join / Inbox mobile |
| 5 | STATES | Resiliencia UI | Empty inbox, Error red |
Layout canvas (referencia): origen (0,0) · gaps ~80px · bandas Y orientativas: UX ~100 / Design ~2180 / Coach ~3980 / Mobile ~4880 / States ~5680.
2. Inventario de artboards
§1 — UX PROCESS
| Label | Nombre | Contenido |
|---|
| 1-0 | §1 UX PROCESS | Etiqueta de banda |
| 2-0 | UX-00 Cover | Portada VOLTA, eslogan, fecha 2026-08-08, L1 fitness, roles, dark ink + lime |
| 3-0 | UX-01 Stakeholders | Mapa interés/influencia: socio potencial, coach, familia, sede, ayuntamiento (bajo) |
| 4-0 | UX-02 Personas | Marc Solé (visitante) · Nora Beltrán (COACH) — goals, pains, quote |
| 5-0 | UX-03 JTBD | Job principal + funcional/emocional/social + MoSCoW / stories Must |
| 6-0 | UX-04 Journey | 5 fases visitante: descubre → elige clase → pide plaza → espera contacto → confirma |
| 7-0 | UX-05 Blueprint | Frontstage web · backstage coach · sistemas · fallos red/estado |
| 8-0 | UX-06 IA | Sitemap público/auth; navegación y permisos |
| 9-0 | UX-07 Datos | ERD: User, ClassRequest + enums Role, RequestStatus, ClassType |
§2 — DESIGN + PUBLIC
| Label | Nombre | Contenido |
|---|
| A-0 | §2 DESIGN + PUBLIC | Etiqueta de banda |
| B-0 | 00 Design System | Color chalk/ink/lime, tipo Syne+Work Sans, botones, badges estado, cards |
| C-0 | 01 Home | Nav, hero + media, clases, horarios teaser, CTAs, footer demo |
| D-0 | 02 Join | Form solicitud: nombre, email, teléfono, tipo, día, franja, notas |
| E-0 | 03 Success | Confirmación + código VO-… + próximos pasos |
§3 — COACH (desktop)
| Label | Nombre | Contenido |
|---|
| F-0 | §3 COACH | Etiqueta de banda |
| G-0 | 04 Login | Split dark/form; email/password; contexto panel coach |
| H-0 | 05 Inbox | Lista + stats summary; badge COACH; filtros visuales por estado |
| I-0 | 06 Detail | Código VO-…, contacto, clase, preferencias, chips estado, acciones |
§4 — MOBILE
| Label | Nombre | Contenido |
|---|
| J-0 | §4 MOBILE | Etiqueta de banda |
| K-0 | 07 Mobile Join / Inbox | Vista ~390px; touch targets ≥44px |
§5 — STATES
| Label | Nombre | Contenido |
|---|
| L-0 | §5 STATES | Etiqueta de banda |
| M-0 | 08 Empty | Inbox sin solicitudes; copy orientativo |
| N-0 | 09 Error | Fallo de carga / red; mensaje accionable + reintento |
3. Checklist de densidad (anti thin-frames)
| Criterio | §1 UX | §2 DS/Public | §3–4 Coach | §5 States |
|---|
| Jerarquía tipográfica visible | Sí | Sí | Sí | Sí |
| Microcopy real (no lorem) | Sí | Sí | Sí | Sí |
| Tokens de color aplicados | — | Sí | Sí | Sí |
| Datos de seed creíbles | Personas | Demo emails | Códigos VO-… | Empty realista |
| Media / iconografía | Cover | Hero | Badges | Alertas |
4. Mapeo Paper → Angular
| Artboard | Ruta app | Componente |
|---|
| C-0 Home | / | HomePage |
| D-0 Join | /apuntarme | JoinPage |
| E-0 Success | /ok | SuccessPage |
| G-0 Login | /login | LoginPage |
| H-0 Inbox | /inbox | InboxPage |
| I-0 Detail | /inbox/:id | RequestDetailPage |
| K-0 Mobile | mismas rutas, viewport estrecho | responsive |
| M-0 Empty | /inbox (0 items) | empty state en lista |
| N-0 Error | inbox / detalle | mensajes error en páginas |
5. Tokens de diseño en Paper
| Token | Valor | Uso |
|---|
| Chalk / bg | #F7F7F2 | Fondo de página |
| Surface | #FFFFFF | Cards, header |
| Ink | #0B0B0B | Primary dark, CTAs, texto fuerte |
| Lime | #C6F23A | Acento marca, highlights, CTAs lime |
| Lime soft | #EAF8B8 | Fondos suaves / badges |
| Lime strong | #A8D420 | Hover lime |
| Muted | #5C5C58 | Texto secundario |
| Border | #E2E2DC | Bordes de card y inputs |
| Display | Syne | H1–H2, logo wordmark |
| UI | Work Sans | Body, labels, botones |
Nota implementación: tailwind.config.js de la app usa los mismos hex de marca; primary mapea a ink para CTAs dark; lime para acentos.
6. Enlaces
