La pieza publicada defiende de frente que el panel no cambie: «El panel no cambia de una ruta a otra — ese es el punto». Como argumento de consistencia se sostiene leído. Puesto uno al lado del otro, se cae.
El 46 % del viewport, cinco veces de diez. A la primera es marca; a la quinta es papel tapiz. Nada de lo que está ahí depende de en qué ruta estás, así que nada de lo que está ahí te ayuda a estar donde estás.
El segundo hueco es la paleta. tokens.css define el adn como
«4 colores vivos + degradados + movimiento… moderno, fresco». Esto es lo
que de verdad llega a las diez pantallas de auth:
Formulario a la izquierda, imagen a la derecha es la estructura de Clerk, Auth0 y Supabase. Está impecable, pero no hay nada en la estructura que sea de Mogos: si le cambias el logo, es cualquier SaaS.
/forgot-password paso 1 son una etiqueta, un campo y un botón. La misma
plantilla sirve a un formulario de ocho campos y a uno de uno, así que el corto hereda
el marco del largo y deja el fondo lleno de blanco muerto.
Los tres barridos de 26 s, 37 s y 44 s corren sobre un panel casi negro y en 660 px de ancho. El rango de luminancia es tan estrecho que el ojo no los registra: el trabajo está hecho y no se ve.
Segunda opción
Invertir la figura. La marca deja de ser un panel y pasa a ser el lienzo: marino en los 1440 px, y el formulario en una tarjeta blanca que flota encima. No cambia ni un token — es el mismo degradado, los mismos dos glows y el mismo barrido, con 1440 px para moverse en vez de 660. Ahí sí se ve.
Lo que resuelve de paso es el vacío. Como la tarjeta se dimensiona por su contenido y va
centrada, un formulario de un campo queda rodeado de marca en vez de dejar un
hueco abajo. La misma superficie sirve a /register y a
/forgot-password sin que ninguna de las dos se vea mal.
Recomendada
Rotar el split 90°. Arriba, una banda con el degradado de marca de verdad
— --grad-marca, marino → celeste → lima, que hoy solo existe en una regla de
46×3 px y en el FAB del móvil. Debajo, sobre blanco, un riel de cuatro
paradas: correo, código, contraseña, listo.
La diferencia con A no es estética, es de función. En A el espacio de marca sigue siendo
decoración, solo que mejor aprovechada. Acá deja de decorar y pasa a informar:
el usuario ve en qué paso está y cuántos faltan, que es exactamente lo que hoy no sabe
cuando /forgot-password lo manda a tres pantallas seguidas sin avisarle que
son tres. Y la metáfora es el negocio: un trayecto con paradas, Cantón → La Guaira.
El costo, dicho de frente, son dos cosas. La banda y el riel se comen ~210 px fijos de
alto, así que /register acá pide scroll antes que en las otras tres. Y B
no resuelve el vacío del formulario corto: el riel llena el hueco de
arriba, pero debajo del botón sigue sobrando blanco. Esa la gana A, y se ve comparando
esta escena con la de /verify-otp de la sección anterior.
Alternativa
El panel se queda, cambia de lado y —lo único que importa— deja de repetir el tagline. En su lugar lleva una línea propia de esa ruta en display de 36 px, y debajo un dato duro de la operación. Mata el papel tapiz de raíz, porque el panel pasa a tener contenido en vez de imagen.
El costo es de copy, no de código: hay que escribir y aprobar diez líneas nuevas, y la
spec de la fase dice explícitamente que «la pieza no inventa una sola frase» —
todo sale literal de es.json. Esta dirección rompe esa regla a propósito, así
que solo tiene sentido si el cliente quiere escribirlas.
Alternativa
La única que trae de vuelta el lado claro de la paleta. El barco que hoy
es marca de agua se convierte en la retícula real del layout: módulos en
--celeste-soft y --lima-soft sobre --hueso, como una
pila de contenedores vista de frente, y el formulario en una tarjeta blanca encima.
Es la más fresca de las cuatro y la que más se parece al adn escrito en
tokens.css. También es la más lejos del shell que ya corre: AuroraShell
asume superficie oscura, así que acá hay que tocar el componente de verdad, no solo su
composición. Y hay una trampa a vigilar: la retícula compite con el formulario por la
atención si los módulos suben de saturación.
Las cuatro usan los mismos tokens y las mismas primitivas de campo, así que ninguna es «más de marca» por su tinta. Se diferencian en una sola cosa: qué hace el espacio que hoy no hace nada.
| Dirección | Qué hace con el espacio | Qué resuelve | Qué cuesta |
|---|---|---|---|
| A · Aurora completa | Lo llena de marca, pero en grande: el movimiento por fin se percibe. | Papel tapiz · vacío del formulario corto · movimiento invisible | Poco. Reusa AuroraShell casi tal cual: cambia la composición, no el componente. |
| B · Carril | Lo convierte en información: en qué paso estás y cuántos faltan. | Papel tapiz · movimiento invisible · el usuario perdido en flujos de 3 pasos · la fractura desktop/móvil · no toca el vacío: ahí gana A | Medio. Banda y riel se comen ~210 px fijos y aprietan el formulario largo. |
| C · Manifiesto | Le da voz: una línea propia por ruta en vez del tagline repetido. | Papel tapiz, de raíz · no toca el vacío ni el móvil | Copy. Diez frases nuevas que aprobar, contra la regla de la fase de no inventar ninguna. |
| D · Contenedor | Lo vuelve superficie clara: celeste y lima como fondo, no como acento. | La paleta a un cuarto · papel tapiz | Alto. AuroraShell asume superficie oscura; hay que tocar el componente y repensar la placa. |
B, con A como plan de respaldo. B es la única que convierte el espacio
muerto en información en vez de en otra imagen, y de paso arregla dos cosas que ninguna
otra toca: que /forgot-password y /complete-profile te muevan
entre pantallas sin decirte cuántas faltan, y que el móvil hoy tenga que diseñarse como
un caso aparte. La metáfora del trayecto además es la marca sin tener que escribirla.
Si el presupuesto de esta fase no aguanta tocar el shell, A da el mayor salto de vibra por el menor trabajo: es una recomposición, no un componente nuevo.
C y D quedan dibujadas porque las ideas son buenas y pueden volver: la línea propia por ruta de C se puede injertar en B sin cambiar el layout, y la retícula clara de D es la respuesta si algún día se decide que auth no tiene por qué ser de noche.
Las cajas de OTP separadas, la checklist de contraseña en vivo, las medidas de campo
(6 / 14 / 11 px), la regla de la placa —solo en /activate—, y las dos
correcciones de contraste (--state-warning-deep y
--state-success-deep). Todo eso está bien resuelto en la pieza publicada y
se hereda tal cual. Esto es una discusión de estructura, no de retinte.