Rediseño de Monai · 3 propuestas
Tres pieles para
la misma estructura.
Las tres comparten espaciado, escala tipográfica, grilla y componentes: cambian el color, la forma y la postura. Eso significa que elegir una no reabre el trabajo de layout — es un archivo de tokens distinto sobre el mismo sistema.
/Users/delavegadiego/Personal/monai ni a
basement-mcp: ambas rutas viven en tu laptop y esta sesión corre en otra máquina.
Todo lo que aparece abajo como «estado actual» está reconstruido desde tu descripción
(tres modos: fácil / medio / avanzado, Angular 21 con Angular Material 21, tema claro y oscuro,
modo pantalla completa, driver.js para las guías) y está marcado como pendiente de verificar.
Subime el repo comprimido o la salida de tree src/ y esta sección se completa con valores reales
en vez de supuestos.
Qué cambia respecto de hoy
Diagnóstico funcional: qué existe, qué se rediseña y qué es nuevo.
| Área | Hoy (a verificar) | En el rediseño | Estado |
|---|---|---|---|
| Modos de uso | Tres modos: fácil, medio y avanzado. Sin confirmar cómo se eligen ni qué apagan exactamente. | El modo es un atributo en <html data-mode>: las pantallas y campos se prenden por CSS, sin ramas de plantilla. |
Rediseñado |
| Navegación | Angular Material 21, presumiblemente sidenav + toolbar. | Menú lateral fijo en ≥1024 px, barra inferior de 5 destinos en móvil, ambos desde una sola declaración de rutas. | Rediseñado |
| Tema claro/oscuro | Ya existe el selector. | Se mantiene, más la opción «seguir al sistema» y persistencia por dispositivo. | Se conserva |
| Pantalla completa | Ya existe. | Se mantiene y ahora además compacta el cromo: oculta el lateral y libera el ancho para la grilla del mes. | Se conserva |
| Guía paso a paso | driver.js ya integrado. | Misma API. Cada pantalla declara sus steps y el ícono de ayuda de la barra los lanza; ?tour=1 los abre desde un enlace. |
Se conserva |
| Hábitos | No existe. | Dominio completo: grilla hábitos × días con checks de 44 px, rangos día/semana/mes, rachas, calendario editable, patrón semanal y cruce con el gasto. | Nuevo |
Las tres propuestas
Cada bloque está renderizado con sus propios tokens, en claro y en oscuro. Es el componente real, no una captura.
Tokens de color
Todo en oklch(): subir o bajar luminosidad no cambia el matiz, así el modo oscuro no se ensucia.
| Token | Rol | Ledger | Nocturno | Papel |
|---|
Tipografía, forma y ritmo
Compartidos por las tres pieles, salvo el radio, que es parte de la postura de cada una.
Escala tipográfica
Display: Poppins → Montserrat → ui-rounded → sistema.
Cuerpo: Open Sans → sistema. Números: monoespaciada con tabular-nums.
Cero fuentes remotas: si Poppins no está instalada, cae al stack del sistema sin salto de layout.
Radios
Ledger 6–28 px · Nocturno 8–32 px · Papel 2–6 px.
Espaciado
Escala de 4: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64.
Inventario de componentes
Trece componentes cubren las nueve pantallas. Cada uno mapea a un componente standalone de Angular.
| Componente | Clase CSS | Equivalente Material 21 | Dónde aparece |
|---|
Qué recomiendo
Ledger, con Nocturno como modo oscuro de identidad propia.
Monai es una app de números que se abre todos los días y que ahora además tiene una grilla densa. Ledger es la que mejor aguanta densidad sin cansar: neutros fríos, un solo acento índigo, números monoespaciados y bordes finos en lugar de sombras. Es también la más barata de portar, porque su paleta se corresponde casi uno a uno con los roles de Material 3.
Nocturno vale la pena como modo oscuro de la marca en vez de un ledger oscurecido: el azul profundo con cian eléctrico le da carácter en pantalla completa de noche, que es cuando la gente hace las cuentas. Papel queda como la apuesta editorial: hermosa para leer reportes, pero pierde señal cromática en la grilla de hábitos, donde el color es el dato.