No es una impresión: está en el código. El postmark/_layout pinta la cabecera de
#222F59 — un azul que no existe en la paleta de Mogos, cuyo marino es #021B54.
Los siete PDF usan otro azul distinto, #3765C0. Es decir: los correos y los documentos ni
siquiera coinciden entre ellos.
| Rol | Hoy | Marca | Dónde |
|---|---|---|---|
| Primario | #222F59 · #3765C0 | #021B54 marino | cabeceras, botones, totales |
| Tinta | #101828 | #021B54 ink | 180 usos |
| Tinta suave | #475467 | #3A4A72 ink-soft | 184 usos |
| Metadata | #98A2B3 | #7B88A6 muted | notas al pie |
| Líneas | #E4E7EC · #D0D5DD | #D5DEEC line | tablas, separadores |
| Éxito | #17B26A | #2F7A4F success | pagos, entregas |
| Aviso | #92400E | #B6791A warning | recordatorios |
| Acento | #EEF2FF · #3538CD | #E4F5FB celeste-soft | cajas de total |
Segoe UI y Helvetica
Los correos declaran 'Segoe UI', Tahoma, Geneva, Verdana; los PDF, 'Helvetica Neue'. Ninguna de las tres tipografías de la marca —Neue Haas, Source Serif, Oswald— aparece en ningún lado.
Un PNG que ya no es el vigente
Correos y PDF cargan mapas de bits desde un CDN (mogoswhite.png, newmogoslogo_…png). El manual ya tiene el wordmark vectorizado del arte original, y no se está usando.
Este rediseño no puede romper un solo envío. Cada plantilla es un contrato entre el HTML y el código que lo rellena; si cambia el nombre de una variable, el correo sale con un hueco y nadie se entera hasta que un cliente lo reclama. Así que la regla es absoluta: se cambia cómo se ve, jamás qué se dice ni cómo se llama.
Solo presentación
- Colores, a los tokens de la marca
- Tipografía, jerarquía y espaciado
- El logo, al vector real
- Bordes, radios y sombras
- Estructura visual de tablas y cajas
Nada del contrato
- Las 122 variables de los correos
- Los bloques {{#each}}, {{#if}} y sus inversos
- Los alias ni los meta.json
- Los asuntos ni los textos
- El content.txt de cada plantilla
Extraer las variables antes y después y comparar los dos conjuntos: si la diferencia no es vacía, el cambio está mal. Es una línea de grep, y debería quedar como test en el repo para que ningún rediseño futuro las mueva sin querer.
Un solo archivo gobierna la cabecera y el pie de las 34 plantillas. Arreglarlo ahí arregla todo de golpe. A la izquierda lo que sale hoy; a la derecha, el mismo sobre con la marca — ambos a 600 px, que es el ancho real de la plantilla.
Hola Usuario Test, hemos generado una nueva cotización para ti.
¿Necesitas ayuda? Contáctanos
Tu cotización está lista
Hola Usuario Test, generamos una nueva cotización para ti. Abajo tienes el detalle.
¿Necesitas ayuda? Contáctanos
Mogos C.A. · J-500832109 · La Castellana, Caracas
© 2026 Mogos. Todos los derechos reservados.
Tres cambios estructurales: el emoji dentro del círculo desaparece y lo reemplaza una píldora de estado que sí dice de qué trata el correo; el contenido pasa a estar alineado a la izquierda —centrar párrafos largos los hace más lentos de leer—; y el pie recupera el RIF y la dirección fiscal, que hoy solo aparecen en los PDF.
En un correo no se puede usar el SVG del logo: Gmail y Outlook lo bloquean. La cabecera lleva un PNG del wordmark real a 2×, exportado del pack de marca — no el mapa de bits viejo del CDN. Las tipografías tampoco se pueden incrustar: la pila es 'Neue Haas Display', -apple-system, 'Segoe UI', Arial, que se ve con la de marca donde esté instalada y degrada con dignidad donde no. En el PDF no aplica ninguna de las dos restricciones — ver la sección 07.
Las 34 plantillas se componen de once piezas que se repiten. Diseñadas una vez, sirven para todas — y para las que vengan.
Titular en Neue Haas
Entradilla con el dato que importa en negrita, alineada a la izquierda y a 15 px.
| Concepto | Cant. | Precio |
|---|---|---|
| Fila de tabla | 1 | $120,00 |
Nota al pie, en gris metadata y 12,5 px.
Faltan tres que solo usan plantillas concretas y se ven en la sección 06: línea de tránsito (freight-transit-*), bloque de firma y rejilla de fotos (delivery-notification) y caja de credenciales (mogos-welcome).
Mismo contenido, mismas variables, mismos datos de prueba del meta.json real. Solo cambia cómo se ve.
Hola Usuario Test, hemos generado una nueva cotización para ti.
¿Necesitas ayuda? Contáctanos
Tu cotización está lista
Hola Usuario Test, generamos una nueva cotización para ti.
| Concepto | Cant. | Precio |
|---|---|---|
| Flete aéreo Miami — Caracas | 1 | $120,00 |
| Almacenaje 5 días | 5 | $3,50 |
Adjuntamos el PDF. Si tienes dudas sobre los conceptos, contáctanos.
¿Necesitas ayuda? Contáctanos
Mogos C.A. · J-500832109 · Caracas, Venezuela
La cotización es el caso fácil. Estas tres traen componentes propios, y son las que prueban que el sistema aguanta.
Tu carga llegó a Kingston, Jamaica
Hola Carlos Carrasquero, tu carga completó una escala más. Sigue su curso normal.
¿Necesitas ayuda? Contáctanos
La barra usa el degradado de marca — marino → celeste → lima. Es el único sitio del correo donde aparece, y por eso funciona: el degradado es un recurso de marca, no un relleno.
Bienvenido a Mogos
Tu cuenta ya está lista. Entra con estos datos y cambia la contraseña al llegar.
Por seguridad, la contraseña temporal caduca al primer inicio de sesión. ¿Dudas? soporte@mogosgroup.com
Te queda un saldo por cubrir
Hola Usuario Test, tu reserva tiene un monto pendiente.
Si ya realizaste el pago, ignora este mensaje. info@mogosgroup.com
Tu carga fue entregada
La entrega se completó y quedó firmada. Guarda este correo como comprobante.
Adjuntamos la nota de entrega firmada en PDF.
¿Necesitas ayuda? Contáctanos
Los PDF los genera Puppeteer en el servidor, y eso cambia todo: ahí sí se pueden incrustar las tipografías reales y usar el SVG del logo. Es la única superficie de Mogos donde la marca puede salir exacta. Hoy se desaprovecha con Helvetica y un PNG.
Chromium, no una bandeja de correo
Neue Haas incrustada en base64, Source Serif para los bloques de texto, Oswald para los rótulos, y el wordmark vectorial que imprime nítido a cualquier tamaño. Nada de esto es posible en un correo.
Una retícula para los siete
Banda marino con el logo y el tipo de documento · datos fiscales · partes · tabla · totales · paneles condicionales · pie con RIF y paginación. Cambia el contenido, nunca el esqueleto.
Quinta Orion, La Castellana
Chacao 1060, Caracas
info@mogosgroup.com
www.mogosgroup.com
delta@importadora.com
+58 412 555 1234
| Cant. | Descripción | Tipo | Tarifa | Total |
|---|---|---|---|---|
| 1 | Flete marítimo consolidado Yantian — La Guaira | Cargo | $1.240,00 | $1.240,00 |
| 5 | Almacenaje en origen | Cargo | $3,50 | $17,50 |
| 1 | Descuento promocional | Descuento | −$50,00 | −$50,00 |
12 jul 2026 · $400,00 · Transferencia · 19 jul 2026 · $300,00 · Zelle
Los datos bancarios pasan de una lista suelta de nueve líneas a una rejilla de dos columnas: misma información, la mitad de alto, y se escanea buscando el campo en vez de leyéndola entera.
| Concepto | Monto |
|---|---|
| Factura FAC-2026-0311 | $3.420,00 |
+86 755 8888 1234
Venezuela · +58 412 555 9876
| Bulto | Peso | Dimensiones | Valor |
|---|---|---|---|
| 1 de 3 | 18,4 kg | 60×40×35 cm | $420,00 |
Frágil · no apilar más de tres · mantener seco
Manifiesto de carga
El más denso: buque, BL, contenedor, y la tabla de bultos con totales de peso y volumen. La banda marino gana una fila de ruta origen → destino con las fechas de zarpe y arribo.
Factura de almacenaje
La única con impuestos y descuentos separados. Los totales usan la misma escalera — subtotal, descuento, impuesto, total— con el total en Neue Haas sobre línea marino.
Confirmación de orden
Lleva bloque de almacén de origen y estimados de zarpe y arribo. Es el documento que el cliente guarda como acuse, así que el número de orden va en la banda, grande.
Nota de entrega firmada
Cierra el ciclo: órdenes entregadas, bultos, quién recibió, y la firma incrustada. Tiene prueba dorada en el repo (delivery-note-html.golden.spec.ts), así que su rediseño hay que hacerlo actualizando el golden a propósito, no rompiéndolo.
delivery-note-signed es el único con test de regresión visual: golden.html y digests. Cualquier cambio de una coma hace fallar la suite. No es un obstáculo, es lo contrario — es el único documento donde el rediseño queda verificado automáticamente. Los otros seis no tienen red.
order-details-confirmed y withdrawal-scheduled no tienen config.toml ni template.html — solo contenido. Y delivery-note-signed existe dos veces: como correo y como PDF, con un template-pdf.html extra dentro de la carpeta de Postmark. Conviene ordenarlo, pero es una decisión aparte: este trabajo es solo visual.
| Paso | Qué se toca | Por qué en ese orden |
|---|---|---|
| 1 | postmark/_layout/ | Cabecera, pie y tokens. Un archivo que gobierna las 34 — el mayor efecto por el menor cambio. |
| 2 | Logo a PNG 2× del pack | Sustituir el mapa de bits del CDN por el render del wordmark real, en blanco sobre marino. |
| 3 | 5 plantillas piloto | new-quotation, mogos-welcome, payment-reminder, freight-transit-stop y delivery-notification: cubren las once piezas. |
| 4 | Las 29 restantes | Ya es aplicar la librería. Mecánico y revisable en lote. |
| 5 | pdf/*/template.html | Fuentes incrustadas y SVG. Empezar por quotation, que fija la retícula de los siete. |
| 6 | Golden de delivery-note | Actualizar la prueba dorada a propósito y dejar constancia del porqué en el commit. |
| 7 | Test de variables | Fijar el contrato: comparar el conjunto de variables antes y después y fallar si difiere. |
Postmark permite previsualizar con el TestRenderModel que cada meta.json ya trae — por eso las maquetas de este documento usan esos datos exactos y no contenido inventado. Los PDF se comprueban con apps/api/src/pdf/testing/pdf-inspect.ts, que también existe ya.
La marca no vive en el manual: vive donde el cliente la ve.
Un cliente de Mogos abre el panel unas cuantas veces al mes. Correos y facturas los recibe en cada envío, cada pago y cada entrega — y los reenvía a su contador, a su socio, a su banco. Son la superficie con más alcance que tiene la empresa, y hoy es la única que no se parece a la marca.
Ninguno funcional. No se toca una sola variable ni un solo texto.
El paso 1. Un archivo arregla la cabecera y el pie de los 34 correos.
Los PDF. Chromium permite fuentes reales y logo vectorial.
Si se aprovecha para ordenar los dos duplicados del inventario o se deja para después.