14. High-Fidelity Mockups (Pantallas Finales y Estados Interactivos)
Fase: 04 — Modelado del Sistema
Entregable: 14 de 15
Proyecto: NoteVault (PC Windows, macOS, Linux, Android, iOS / iPhone)
Estado: Formalizado y Certificado
1. Especificación Visual de Alta Fidelidad y Estados Interactivos
NoteVault adopta una estética técnica de alta gama (Dark Slate Premium) con tipografía geométrica moderna, contrastes cuidadosamente calibrados y microinteracciones fluidas:
1.1 Tokens de Diseño Aplicados
- Fondo de Superficie Base (
bg-surface): HSL222, 16%, 11%(#161922) — Elimina el cansancio visual durante sesiones nocturnas de estudio prolongadas. - Superficie de Elevación (
bg-elevated): HSL222, 16%, 15%(#202430) — Tarjetas, modales y barras laterales. - Bordes Delicados (
border-subtle): HSL222, 14%, 22%(#313746) con 1px de grosor continuo. - Color de Acento Principal (
accent-indigo): HSL243, 75%, 59%(#4f46e5) — Botones primarios y estados activos. - Color de Éxito / Enfoque (
mint): HSL160, 84%, 39%(#10b981) — Checkboxes de hábitos cumplidos y Pomodoro completado. - Tipografía Base:
Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serifcon renderizado subpixel suavizado.
1.2 Matriz de Estados Interactivos por Componente
| Componente | Estado Reposo (Default) | Estado Cursor Encima (Hover) | Estado Foco (Focus Keyboard) | Estado Activo / Seleccionado |
|---|---|---|---|---|
| Pestaña de Nota | Fondo transparente, texto atenuado (#94a3b8). |
Fondo #202430, botón de cierre × visible. |
Anillo de foco índigo de 2px con offset de 1px. | Fondo #161922, pestaña destacada con borde superior índigo. |
| Checkbox de Hábito | Círculo hueco con borde gris de 1.5px. | Borde menta brillante, animación sutil de escala (1.05x). | Indicador de foco circular para accesibilidad. | Fondo menta relleno con ícono blanco de verificación. |
| Tarjeta Kanban | Elevación sutil, borde tenue. | Sombra de elevación (drop-shadow), cursor de arrastre (grab). | Contorno índigo visible. | Opacidad 80% durante arrastre (grabbing). |
| Botón Pomodoro | Fondo índigo mate, texto blanco semibold. | Fondo índigo brillante (#4338ca), brillo suave. |
Anillo de contraste accesible WCAG 2.1 AA. | Estado decremental activo con ticker numérico monospace. |
2. Marco Conceptual: Pantalla de Alta Fidelidad
1. **Entidad principal e independiente.**
2. **Es la entidad líder del conjunto de datos:** posee un identificador global único (`mockup_screen_id`: `MOK-DESKTOP-EDITOR-SPLIT`), invocado por la guía de estilo y las pruebas de regresión visual.
3. **Existe por sí misma en el catálogo de diseño sin depender de la implementación final en código**, y es la única responsable de fijar las proporciones visuales, paleta de colores y microanimaciones de la vista.
4. **Punto de entrada y límite de consistencia:** Condiciona las pruebas automatizadas de regresión visual con Playwright/Percy para prevenir discrepancias visuales.