Rediseño de Monai · piel activa + 3 referencias
Nocturno,
con los colores del MCP.
La piel activa de las 10 pantallas es Nocturno: dark-first, canvas azul profundo y
un cian eléctrico de acción. Pasa el gate porque no inventa un solo color — cada valor
se deriva por color-mix de las semillas que devolvió el MCP. Lo único que es
decisión de diseño y no de color son los radios, más generosos que en basement.
get_color_token y los de modo oscuro se derivan por color-mix
sobre esas mismas semillas, porque el MCP todavía no expone escala oscura.
Lo que sigue sin verificar es el repositorio monai: los 3 modos
(fácil / medio / avanzado) y la columna «cómo está hoy» están reconstruidos desde tu descripción,
no leídos del código. Subime el repo comprimido y esa parte se cierra.
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 | Nocturno | basement | Ledger | 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
Dirección elegida por vos, colores dictados por el MCP.
Nocturno era la propuesta que más se alejaba de basement, y sin embargo es la que mejor se deja derivar: su identidad nunca estuvo en un hex puntual sino en la postura — canvas oscuro, contraste alto, radios generosos, un acento eléctrico contra superficies profundas. Eso se puede armar con el azul y el teal del MCP sin pedirle permiso a nadie.
Los dos acentos firma salen de cruzar semillas: el cian de acción es azul × teal, y el violeta de hábitos es azul × rojo de error. Suena raro derivar un acento de un color de error, pero es sólo aritmética de color sobre dos valores que el MCP ya bendijo — y resuelve el problema real, que el dominio de hábitos necesitaba un tono que no se confundiera con el verde de «ingreso» ni con el cian de acción.
El modo oscuro es el modo fuerte. El claro funciona y está resuelto, pero Nocturno se diseñó para la pantalla completa de noche, que es cuando la gente hace las cuentas.