Referencia Paper — SURCO
| Campo | Valor |
|---|
| File ID | 01KZDGF3509TA4WDZTTQJW1V45 |
| URL | https://app.paper.design/file/01KZDGF3509TA4WDZTTQJW1V45 |
| Nombre | SURCO — Daily UX 2026-08-07 |
| Producto | Cuaderno digital parcelas + tareas multi-rol (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 (parcelas al atardecer) |
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/tablet | Tasks list, Task detail, New task |
| 4 | MOBILE | Operación en cabina / móvil de campo | Tasks mobile |
| 5 | STATES | Resiliencia UI | Empty, Error |
Layout canvas (referencia): origen (0,0) · gaps ~80px · bandas Y orientativas: UX ~100 / Design ~2180 / App ~3980 / States ~5280.
2. Inventario de artboards
§1 — UX PROCESS
| Label | Nombre | Contenido |
|---|
| 1-0 | §1 UX PROCESS | Etiqueta de banda |
| 2-0 | UX-00 Cover | Portada SURCO, eslogan, fecha 2026-08-07, L2 agro, roles, dark leaf |
| 3-0 | UX-01 Stakeholders | Mapa interés/influencia: agricultora, técnico, familia, asesoría, normativa |
| 4-0 | UX-02 Personas | Inés Roura (FARMER) · Pol Vidal (TECHNICIAN) — goals, pains, quote |
| 5-0 | UX-03 JTBD | Job principal + funcional/emocional/social + MoSCoW / stories Must |
| 6-0 | UX-04 Journey | 5 fases farmer: planifica → asigna → Pol ejecuta → cierra DONE |
| 7-0 | UX-05 Blueprint | Frontstage app · backstage finca · sistemas · fallos red/estado |
| 8-0 | UX-06 IA | Sitemap público/auth/roles; navegación y permisos |
| 9-0 | UX-07 Datos | ERD: User, Parcel, FieldTask + enums Role, TaskStatus |
§2 — DESIGN + PUBLIC
| Label | Nombre | Contenido |
|---|
| A-0 | §2 DESIGN + PUBLIC | Etiqueta de banda |
| B-0 | 00 Design System | Color bone/leaf/straw, tipo Literata+Manrope, botones, badges estado, cards |
| C-0 | 01 Home | Nav, hero + media, cómo funciona (3 pasos), CTAs rol, footer demo |
| D-0 | 02 Login | Split dark/form; email/password; contexto cuaderno de campo |
§3 — APP (desktop)
| Label | Nombre | Contenido |
|---|
| E-0 | §3 APP | Etiqueta de banda |
| F-0 | 03 Tasks Farmer | Lista + stats summary; badge rol; CTA + Tarea |
| G-0 | 04 Task Detail | Código SU-…, parcela, notas, chips estado, acciones de transición |
| H-0 | 05 New Task | Form: título, parcela, cultivo, dueAt, notas, email técnico opcional |
§4 — MOBILE
| Label | Nombre | Contenido |
|---|
| I-0 | §4 MOBILE | Etiqueta de banda |
| J-0 | 06 Mobile Tasks | Vista ~390px técnico en campo; touch targets ≥44px |
§5 — STATES
| Label | Nombre | Contenido |
|---|
| K-0 | §5 STATES | Etiqueta de banda |
| L-0 | 07 Empty | Sin tareas; CTA crear (solo FARMER) |
| M-0 | 08 Error | Fallo de carga / red; mensaje accionable + 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 SU-… | 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 Tasks | /app/tasks | TasksPage |
| G-0 Detail | /app/tasks/:id | TaskDetailPage |
| H-0 New | /app/tasks/new | TaskNewPage |
| J-0 Mobile | mismas rutas, viewport estrecho | responsive |
| L-0 Empty | /app/tasks (0 items) | empty state en lista |
| M-0 Error | lista / detalle | mensajes error en páginas |
5. Tokens de diseño en Paper
| Token | Valor | Uso |
|---|
| Bone / bg | #F4F0E6 | Fondo de página |
| Leaf | #3D5C3A | Primary, CTAs, marca |
| Leaf deep | #1B3A2A | Ink de acento / footer / covers dark |
| Leaf mid | #2A4A32 | Hover / strong |
| Soft leaf | #E8EFE4 | Fondos suaves / badges |
| Straw | #C4A35A | Eyebrows, acentos de cultivo |
| Border | #D9D2C4 | Bordes de card y inputs |
| Display | Literata | H1–H2, logo wordmark |
| UI | Manrope | Body, labels, botones |
Nota implementación: tailwind.config.js de la app usa valores muy cercanos (#F3F0E8, #3A5A40, #C4A574) para legibilidad en pantalla; la fuente de verdad de marca del caso es la tabla superior.
6. Enlaces
