La puerta ya tiene marca; el otro lado todavía no. Esta pieza lleva la aurora al home del client — la bienvenida, Mis envíos, los pagos pendientes y el calendario de próximas salidas — y a través de él fija el retinte de los componentes principales: botones, campos, selects, tabs, píldoras, chips e iconos. Restilizar, no cambiar: los componentes shadcn conservan estructura, props y comportamiento. Ninguna funcionalidad se toca.
El home real (app/(app)/account/page.tsx) compone cuatro bloques:
la cabecera de PageFrame, MyShipments con sus KPI-filtros y su
carrusel, PendingPayments y DeparturesCalendar. Esta pieza los
dibuja tal cual son — mismos bloques, mismos estados, mismo copy de
es.json — con la tinta de la marca en lugar de la de la plantilla.
Hoy ese home habla dos idiomas ajenos: el azul del producto #3765c0
(el KPI activo, el barco de cada card, la ETA) y el gris de Tailwind
(gray-50 a gray-600 por todas partes, red-500 /
blue-500 en el calendario). Ninguno de los dos es Mogos. El shell —
sidebar, topbar, tabs móviles y FAB — ya quedó resuelto en
aurora-familia y acá se hereda idéntico.
La respuesta a «la marca trabaja con un solo color» empieza en la bienvenida: una banda aurora de día — celeste-soft hacia lima-soft, con dos glows en deriva lenta y el punto rojo cerrando el saludo — con tinta marino en los dos extremos (14.57:1 y 15.35:1, AAA). Es el gesto del header de los correos traducido al producto. El degradado de marca queda en tres apariciones exactas: la barra activa del sidebar, el FAB móvil y esta banda. Nada más.
Debajo, los tres bloques del home con el retinte: KPI-chips que marcan su activo con el
par del sidebar (superficie celeste, tinta marino), cards de envío sobre
--hueso con la ETA en display marino, pagos con el monto exacto en
tabular-nums, y el calendario codificando corredores con la paleta —
China en rojo, USA en el azul info del sistema.
/account: banda de bienvenida, Mis envíos con filtro activo, Pagos pendientes y Próximas salidas. Shell heredado de familia.
Manda el MobileShell de familia: top bar con la campana, cuatro pestañas y
el FAB degradado. La banda de bienvenida pierde los botones — en móvil crear es el FAB,
ese es su trabajo — y los KPI-chips pasan a scroll horizontal. El calendario queda
debajo del pliegue: se llega scrolleando, exactamente como hoy.
Los componentes que el home usa, congelados estado por estado. La gramática de campo es
la de aurora-familia — radio 11 px, padding 11/13, foco
--celeste-deep con halo de 3 px — porque el sistema ya la había decidido:
solo faltaba sacarla de auth. Botones en píldora, como los de la puerta.
--marino-soft al hover. El foco es el anillo --celeste-deep, visible también con teclado.aria-busy — igual que hoy hace «Pagar».--line; al hover el borde toma marino y la superficie --paper.--celeste-soft, tinta marino (14.57:1). Al hover sube a celeste pleno.--rojo solo con texto corto (5.4:1, AA).--paper; el trigger activo, blanco con --shadow-sm y tinta marino. Las de perfil y notificaciones.--muted, chevron en --ink-soft. El de «Recordatorio» del dialog de salidas.--shadow-md; el ítem elegido en --celeste-soft con check marino — el par de «activo» del sistema.--line; el foco es --celeste-deep con halo de 3 px al 18 %. Idéntico a auth.--rojo, halo al 14 %, mensaje en --rojo-deep debajo. Deshabilitado sobre --hueso.--celeste-deep, tinta marino — no primary-50. Cifras en tabular-nums.rojo-soft/rojo-deep (5.53:1), USA en celeste-soft/--state-info (5.68:1). Todas AA medidas.--muted en reposo, marino en activo, color de corredor o de estado solo donde codifica — text-brand-500 desaparece.
Clic en un día con salidas y se abre el detalle: la DepartureCard con su
tinte de corredor — la superficie al 6 %, derivada del mismo par rojo/azul de los
puntos —, el select de recordatorio con la gramática de campo, y el pie con secundario
+ primario. Mismo dialog, misma mecánica, otra tinta.
tabular-nums.
La tabla que hace ejecutable el retinte: cada valor de plantilla que hoy vive en el home
y qué token lo sustituye. Es la lista de cambios de goal-phases — visual,
uno a uno, sin tocar una sola prop.
| Hoy en el código | Retinte | Dónde |
|---|---|---|
border-primary-600 bg-primary-50 | --celeste-soft + borde --celeste-deep, tinta marino | KPI activo |
text-brand-500 / text-brand-700 | --marino | barco/avión y ETA de ShipmentCard |
bg-gray-50 | --hueso | fondo de cards y fila seleccionada |
text-gray-600 / text-gray-500 | --ink-soft · --muted solo en versalitas | texto secundario, leyendas |
border-gray-200 | --line / --line-soft | bordes de cards y KPI |
bg-red-500 · red-500/10 | --rojo · rgba(201,49,60,.10) | corredor China: punto y celda |
bg-blue-500 · blue-500/10 | --state-info · rgba(30,91,191,.10) | corredor USA: punto y celda |
bg-red-50 / bg-blue-50 | tinte de corredor al 6 % (derivado declarado) | superficie de DepartureCard |
badge success/warning/error de plantilla | soft + -deep del sistema (5.03–5.81:1) | todas las píldoras |
| sombras grises de shadcn | --shadow-sm/md tintadas a marino | tabs activas, menús, dialogs |
| radio 10 px del producto | cards 14 · campos 11 · botones píldora | todo el home |
Todos los pares nuevos del retinte, medidos sobre la superficie real donde aparecen.
Los dos -deep de warning y success vienen heredados de familia, donde ya se
midieron y corrigieron.
| Par | Ratio | Dónde |
|---|---|---|
marino sobre --celeste-soft | 14.57:1 | banda, KPI activo, terciario, píldora «En tránsito» |
marino sobre --lima-soft | 15.35:1 | extremo lima de la banda de bienvenida |
--state-info sobre blanco | 6.36:1 | punto y leyenda del corredor USA |
--state-info sobre --celeste-soft | 5.68:1 | píldora «Desde USA» |
--rojo-deep sobre --rojo-soft | 5.53:1 | píldoras «Vencido» y «Desde China» |
--ink-soft sobre --hueso | 8.29:1 | texto secundario sobre el fondo de la app |
--state-warning-deep sobre su soft | 5.03:1 | píldoras «Parcial» y «Cierre próximo» |
--state-success-deep sobre su soft | 5.81:1 | píldora «Abierto» |
La pieza dibuja con Neue Haas porque esa es la meta del sistema; el producto corre en Geist. La migración tipográfica es un proyecto propio con su presupuesto de QA — el retinte de color no depende de ella y puede aterrizar antes.
El producto tiene dos variantes de botón casi idénticas. La pieza las dibuja iguales a propósito y deja la consolidación anotada — es decisión de código, no de tinta.
2 · aurora-notificaciones: la campana, el dropdown, el centro y el sheet móvil. 3 · aurora-cuenta: perfil, direcciones y el «Más» móvil. 4 · aurora-landing: la pública. Cada una con su spec y su gate.
Filtros, fetch, gates de perfil, portales de pago, rutas, props, esquemas — la
mecánica completa del home. Y nunca se remapean --primary,
--primary-foreground ni --ring: la capa
--mogos-* añade, no sustituye.