El portal hereda la rampa brand de packages/ui, cuyo 500 es
#3765c0. Es un azul de plantilla: nació con el tema base y nunca se cambió.
El marino de Mogos, #021B54, es otro color — más profundo, más tinta que cielo.
Al lado se nota; en el checkout, donde el cliente compara lo que ve con el correo que
recibió, se nota más.
Falta un quinto elemento que no es un color pero sí es la marca. En Mogos el
degradado es ADN, no adorno: tokens.css lo dice y prohíbe a la vez usarlo
como ruido de fondo. En un checkout eso se traduce en una regla clara.
El azul de plantilla no es lo único. Hay colores sueltos que no salen de ninguna variable: entraron a mano, uno por uno, y hoy conviven en la misma pantalla.
packages/ui/src/styles/color-variables.css:15components/zelle/zelle-payment-form.tsxcomponents/payment/payment-progress-bar.tsxapp/pay · app/page · app/success · app/errorcomponents/layout/payments-header.tsx:15-21isDarkBackground={true}) sobre bg-black/10, que está encima de un fondo casi blanco. Contraste real ≈ 1.2 : 1. En las cinco pantallas, la marca no se ve. Es el error más caro de la lista: la única señal de quién cobra.schemas/payment/token-schema.ts:51expiresAt viaja en la respuesta del token — y ninguna pantalla lo dice. El cliente que lo deja para mañana se topa con un error sin haber sido advertido.components/layout/MogosLogo.tsxMogosWordmark, del trabajo de shipping mark — que recolorea con currentColor y nunca se pixela.El portal carga Geist y Geist Mono. La marca son exactamente tres familias: Neue Haas Display para títulos y datos, Source Serif 4 para el texto que se lee de corrido, Oswald para los labels en caps. No hay monospace en el sistema — el papel de «metadata» lo hace Neue Haas con cifras tabulares, que es justo lo que un checkout necesita: montos que se alinean por la coma y no bailan al actualizarse.
La cabecera deja de ser un vidrio transparente sobre un fondo claro y pasa a ser una banda marino: la misma superficie oscura del manual, del correo y de la nota de entrega. Es lo que arregla el bug —el fondo por fin es oscuro— y de paso le da a la banda un segundo trabajo: decir qué se está pagando y hasta cuándo sirve el enlace.
- 1Wordmark vectorial blanco con el punto rojo
#C9313Cfijo. Nunca tecleado con una fuente: es la geometría real, la misma que la etiqueta de las cajas. - 2Sello de pago seguro en celeste, no en verde. El verde en esta pantalla significa una sola cosa —pagado— y no debe gastarse en un adorno.
- 3Segunda línea con la identidad del cobro: referencia y vencimiento. Los dos datos ya viajan en la respuesta del token y hoy no se muestran.
- 4Filo de 3px con el degradado de marca cerrando la banda. Es el mismo remate del membrete de los PDF y los correos: cose las superficies entre sí.
Mismo flujo, mismos hooks, mismos datos. Cambia el color, cambia la tipografía y cambian tres cosas de fondo: la barra de progreso dice qué significa cada tramo, el botón dice cuánto se va a cobrar, y el enlace dice cuándo caduca.
Completa tu pago
Selecciona el monto y el método de pago
Resumen del pago
Flete¿Cuánto deseas pagar?
El logotipo está ahí arriba — blanco, sobre casi blanco. Debajo, dos azules distintos y un verde compitiendo en tres centímetros; la barra no explica qué es cada tramo y el monto sale con punto decimal anglosajón.
Resumen del pago
Flete¿Cuánto quieres pagar?
La marca se ve. La barra dice qué es cada tramo con color y texto —no solo con color—, el monto va en Neue Haas con coma decimal, y el botón nombra el resultado: Pagar $620,00.
Los cuatro métodos van en monocromo. No es austeridad: es que la selección sea la única señal de color de la rejilla — hoy compiten cuatro logotipos a todo color con el borde azul del seleccionado, y el ojo no sabe cuál está elegido. Con las marcas apagadas, el celeste del seleccionado se lee de una.
Resumen del pago
FleteMétodo de pago
Morado, dorado, dos azules ajenos y el azul de plantilla del borde seleccionado: cinco marcas de color peleando por la misma rejilla.
¿Con qué quieres pagar?
Datos de la tarjeta
Los cuatro métodos en la tinta del sistema; el seleccionado se marca con celeste + borde marino + palomita. El resumen se encoge a una línea: el cliente ya decidió el monto, no necesita releerlo entero.
Los logotipos de Stripe, PayPal, Binance y Zelle vienen del backend (method.logoUrl).
Para que salgan monocromos hay dos caminos: subir versiones en un solo tono a los métodos
de pago del admin, o aplicar filter: grayscale(1) y bajar el filtro al seleccionar.
Lo primero es más limpio y no depende de CSS; lo segundo no requiere tocar datos.
Zelle es el método donde el cliente hace más trabajo: copiar tres datos, salir a su banco, volver y avisar. Las cajas de copiar merecen ser lo más claro de la pantalla — y ser del mismo color que todo lo demás. Se conserva la mecánica exacta (copiar, confirmar con el nombre del remitente); cambia el morado por celeste, y el estado copiado pasa a verde de sistema, que es lo único que en esta pantalla significa «hecho».
Pagar con Zelle
Envía el pago desde tu banco y notifícanos
El único morado de toda la plataforma vive acá — tres veces. Y el botón deshabilitado no explica qué falta para habilitarlo.
Paga con Zelle
Copia los tres datos, haz el envío desde tu banco y vuelve a avisarnos. Confirmamos apenas entre.
Tres pasos numerados, celeste del sistema, y el copiado en verde. La nota explica por qué el memo importa —hoy el cliente lo omite y el pago llega huérfano— y el botón dice el monto que declara haber enviado.
PayPal y Binance sacan al cliente del portal y lo devuelven. El regreso ya está resuelto en el
código —merchantTradeNo dispara una verificación con reintentos—, pero se muestra
con tarjetas grises y un amber-600 suelto. Aquí los tres estados del
regreso hablan el idioma del sistema, y ninguno deja al cliente sin próximo paso.
Paga con PayPal
Te llevamos a PayPal para autorizar el cobro y regresas aquí solo.
Si cierras PayPal sin pagar, vuelves a esta pantalla intacta.
Volviste de Binance
Los tres estados del regreso se muestran juntos para compararlos; en la pantalla real aparece uno a la vez. Ninguno es un callejón sin salida: verificando pide esperar, pendiente ofrece revisar y avisa por WhatsApp, fallido dice que no se cobró nada y devuelve a los métodos.
La pantalla de éxito es la que el cliente le muestra a alguien más —le manda la captura a su proveedor, a su contador, a su esposa—. Merece ser la más de Mogos de todas: el monto grande, el comprobante a un toque y el número de transacción legible.
¡Pago Exitoso!
Tu pago ha sido procesado correctamente
Recibirás un correo de confirmación en breve
La captura que el cliente reenvía no dice qué pagó ni a quién: no hay referencia, no hay saldo restante y el logotipo sigue sin verse.
Recibimos tu pago
Ya lo abonamos a tu flete. Te enviamos el comprobante por correo.
La captura se explica sola: quién cobró, qué flete, cuánto entró, cuánto queda y con qué tarjeta. El saldo restante es la información que hoy falta y que evita la siguiente pregunta por WhatsApp.
Error en el Pago
Hubo un problema al procesar tu pago. Por favor, intenta nuevamente.
Si el problema persiste, contacta a soporte
«Hubo un problema» no dice qué pasó, y card_declined crudo no le sirve a nadie. Tampoco dice lo único que calma: que no se cobró nada.
Tu banco rechazó la tarjeta
No se cobró nada. Suele pasar por límite diario o por compras internacionales bloqueadas.
El error dice qué pasó, que no se cobró, por qué suele pasar y tres salidas. El código crudo se conserva abajo, para soporte, sin protagonizar la pantalla.
Dos pantallas que casi nadie mira y que igual son la marca. La portada es lo que ve quien entra al dominio sin enlace: hoy es una tarjeta genérica con tres iconitos. El modo embed es el portal metido en un iframe del panel: no lleva membrete —el contenedor ya tiene marca— pero sí lleva el mismo color, la misma tipografía y las mismas cifras tabulares.
Aquí se pagan los envíos de Mogos
Esta página necesita el enlace de pago que te enviamos por WhatsApp o correo. Ábrelo desde ahí.
Cobrar el flete FL-2481
EmbedEn embed no hay membrete —sería marca sobre marca— pero el filo del degradado desaparece y el color no: mismas tarjetas, mismo marino, mismas cifras. El postMessage al padre y la lista de orígenes permitidos no se tocan.
Ningún hook cambia de forma, ningún endpoint nace y la base de datos no se toca. Lo que se reescribe es la piel — más cuatro arreglos que ya eran deuda: el logotipo invisible, el vencimiento mudo, el error sin salida y el saldo que falta al final.
app/theme-pagos.css (nuevo)--colors-brand-* vive en
packages/ui y lo comen admin, client y el portal del agente: repintarlo ahí
repinta cuatro aplicaciones de golpe. El portal redefine su propia rampa y sus superficies
en un archivo suyo; migrar el resto del monorepo queda como decisión aparte.app/layout.tsxcomponents/layout/payments-header.tsx--grad-hero, filo de 3px en --grad-marca y
segunda línea con referencia + vencimiento. Aquí muere el bug del logo: el fondo por fin
es oscuro y el blanco se lee.components/layout/MogosLogo.tsxMogosWordmark, del trabajo de shipping mark): recolorea con
currentColor, nunca se pixela y pesa menos que cualquiera de los PNG.components/payment/payment-progress-bar.tsx--grad-marca creciendo hacia el pago completo, con una costura de 2px marcando
hasta dónde ya estaba pagado. Debajo, la leyenda nombra cada tramo con texto y monto,
no solo con color. Es una barra y dos div: el cálculo de porcentajes que ya
existe no se toca.components/zelle/zelle-payment-form.tsxnotifyPayment no se toca.payment-summary.tsx · payment-amount-selector.tsxpayment-method-selector.tsxgrayscale por CSS (ver 05).app/success/page.tsxapp/error/page.tsxexpiresAt ya viaja en token-schema.ts y nadie lo muestra.
Basta pintarlo en el membrete para que el cliente sepa hasta cuándo sirve el enlace.color y shape; se dejan en su forma reconocible, que en un
checkout es un activo de confianza y no una inconsistencia.Si el marino se queda scopeado al portal o se promueve a packages/ui y repinta
admin, client y el portal del agente de una vez. La propuesta empieza scopeada: el portal
es la superficie más chica, la más visible para el cliente y la que menos rompe si algo sale mal.
Una vez validada ahí, la misma rampa migra al resto sin volver a discutirla.
El último clic también es la marca.
Mogos cuida el correo, la cotización, la etiqueta de la caja y la nota de entrega. Entre medio, la pantalla donde el cliente entrega el dinero se ve como un template de Next con un azul cualquiera y un logotipo que no se ve. Es la pantalla de mayor desconfianza del recorrido — y la única sin un solo color de la casa. Vestirla no cuesta un endpoint ni una migración: cuesta decidir que ahí también somos nosotros.