Referencia Paper — RELE
| Campo | Valor |
|---|
| File ID | 01KZJNCCMJ1FDHHPZZ923RWDWY |
| URL | https://app.paper.design/file/01KZJNCCMJ1FDHHPZZ923RWDWY |
| Nombre | RELE — Daily UX 2026-08-09 |
| Producto | Panel lecturas kWh multi-rol RESIDENT + ADVISOR (L2) |
| Artboards | ~22 (+ labels de banda) |
| Bandas | §1 UX · §2 Design + Public · §3 App · §4 Mobile · §5 States |
| Idioma UI | es-ES |
| Media | assets/hero.jpg (contador / entorno doméstico energía) |
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 marketing, Login |
| 3 | APP | Flujos autenticados desktop | Lecturas list + stats, Nueva lectura, Detalle |
| 4 | MOBILE | Móvil residente / asesor en visita | List / create mobile |
| 5 | STATES | Resiliencia UI | Empty lecturas, Error red |
Layout canvas (referencia): origen (0,0) · gaps ~80px · bandas Y orientativas: UX ~100 / Design ~2180 / App ~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 RELE, eslogan, fecha 2026-08-09, L2 energía, roles, navy + sea |
| 3-0 | UX-01 Stakeholders | Mapa interés/influencia: residente, asesor, familia, comercializadora (bajo), regulador (fuera v1) |
| 4-0 | UX-02 Personas | Elena Marín (RESIDENT) · Toni Gil (ADVISOR) — goals, pains, quote |
| 5-0 | UX-03 JTBD | Job principal + funcional/emocional/social + MoSCoW / stories Must |
| 6-0 | UX-04 Journey | 5 fases residente: descubre → entra → registra lectura → espera revisión → ve nota |
| 7-0 | UX-05 Blueprint | Frontstage panel · backstage asesor · sistemas Neon/JWT · fallos red/estado |
| 8-0 | UX-06 IA | Sitemap público/auth; navegación y permisos por rol |
| 9-0 | UX-07 Datos | ERD: User, Home, Reading + enums Role, ReadingStatus |
§2 — DESIGN + PUBLIC
| Label | Nombre | Contenido |
|---|
| A-0 | §2 DESIGN + PUBLIC | Etiqueta de banda |
| B-0 | 00 Design System | Color fog/navy/sea/coral, tipo Sora+Nunito Sans, botones, badges estado, cards |
| C-0 | 01 Home | Nav, hero + media, 3 pasos, CTAs rol, footer demo |
| D-0 | 02 Login | Split navy/form; email/password; hint demo |
§3 — APP (desktop)
| Label | Nombre | Contenido |
|---|
| E-0 | §3 APP | Etiqueta de banda |
| F-0 | 03 Lecturas | Lista + stats (total, abiertas, kWh Σ); badge rol; CTA nueva (RESIDENT) |
| G-0 | 04 Nueva lectura | Form period / kWh / coste / notas |
| H-0 | 05 Detalle | Código RE-…, kWh, coste, estado, notas, acciones ADVISOR |
§4 — MOBILE
| Label | Nombre | Contenido |
|---|
| I-0 | §4 MOBILE | Etiqueta de banda |
| J-0 | 06 Mobile list / new | Vista ~390px; touch targets ≥44px |
§5 — STATES
| Label | Nombre | Contenido |
|---|
| K-0 | §5 STATES | Etiqueta de banda |
| L-0 | 07 Empty | Sin lecturas; CTA registrar (RESIDENT) |
| M-0 | 08 Error | Fallo de carga / red; reintento |
3. Checklist de densidad (anti thin-frames)
| Criterio | §1 UX | §2 DS/Public | §3–4 App | §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 RE-… | Empty realista |
| Media / iconografía | Cover | Hero | Badges | Alertas |
4. Mapeo Paper → Angular
| Artboard | Ruta app | Componente |
|---|
| C-0 Home | / | HomePage |
| D-0 Login | /login | LoginPage |
| F-0 Lecturas | /lecturas | ReadingsPage |
| G-0 Nueva | /lecturas/nueva | ReadingNewPage |
| H-0 Detalle | /lecturas/:id | ReadingDetailPage |
| J-0 Mobile | mismas rutas, viewport estrecho | responsive |
| L-0 Empty | /lecturas (0 items) | empty state en lista |
| M-0 Error | lecturas | mensajes error en página |
5. Tokens de diseño en Paper
| Token | Valor | Uso |
|---|
| Fog / bg | #EEF1F4 | Fondo de página |
| Surface | #FFFFFF | Cards, header |
| Navy / ink | #0C2340 | Primary dark, texto fuerte, CTAs navy |
| Navy soft | #D8E4F0 | Fondos suaves / secciones |
| Navy strong | #071628 | Hover / énfasis |
| Sea | #2F8F8C | Acento marca, CTAs primarios mar |
| Sea soft | #D4EDEC | Badges REVIEWED, nota asesor |
| Sea strong | #247370 | Hover sea |
| Coral | #E07A5F | Alertas, FLAGGED, abiertas |
| Coral soft | #F8E4DD | Fondos error / flag |
| Muted | #5A6B7D | Texto secundario |
| Border | #D0D8E0 | Bordes cards |
| Display | Sora | Títulos |
| UI | Nunito Sans | Cuerpo y UI |
6. Notas de handoff visual
- Badges de estado: DRAFT muted · SUBMITTED navy soft · REVIEWED sea · FLAGGED coral.
- Login split: panel izquierdo navy con claim; form a la derecha sobre fog/surface.
- Stats strip: TOTAL | ABIERTAS (coral) | kWh Σ (sea soft).
- Código de lectura siempre monospaced o tracking-wide en sea:
RE-MMDD-XXX.
