Lo que sale hoy de la app
01 · AntesLa tarjeta actual (membership-card.tsx) comete los tres pecados a la vez, y el PNG del API (render-card.tsx) los replica en cada chat de WhatsApp:
- El wordmark tecleado — «mogos» escrito con la fuente display: el misuse ✗07 del manual, el que
check-logo.mjscaza en el estudio pero nadie cazaba en el producto. - El azul equivocado — la inicial y los rótulos van en
brand-700(#3765C0, el azul del producto) y las tintas en grises genéricos: ni un color del manual. - El QR sin marca — negro por defecto de la librería, sobre crema, sin placa ni ley de tamaño.
El pase: hueso, marino y el punto rojo
02 · PantallaEl concepto de boarding pass se queda — la membresía como pase de abordar es buen storytelling para quien importa. Lo que cambia es la ejecución: el wordmark es el vector real en ambos paneles, el panel principal va en blanco con tinta marino y rótulos Oswald, y la inicial del agente cierra con el punto rojo — la firma de la marca, no un azul ajeno. Los corredores son chips marino con la flecha en celeste. Abajo a la derecha, el monograma como sello discreto.
El talón deja el navy plano por el marino verdadero con la aurora quieta — la misma superficie del riel del portal. El código vive sobre celeste en cifras tabulares, y el QR sobre placa hueso con radio concéntrico: módulos en tinta marino, nivel H, quiet zone de dos módulos dentro de la placa.
El pase en pantalla (/compartir y el inline del home). La perforación separa lo que se lee (miembro) de lo que se actúa (escanear). Contrastes medidos: marino sobre hueso 15.5:1 · celeste-chip 11.7:1 · QR marino sobre hueso 15.5:1.
La imagen que viaja: diseñada al ancho del chat
03 · WhatsAppEl PNG que renderiza el API (/cards/r/<code>.png) no se ve a 640px: WhatsApp lo muestra como unfurl de ~330-420px. A ese ancho, el pase completo se vuelve ruido — así que la imagen que viaja es la versión chat-first del mismo pase: vertical, jerarquía recortada a lo que convierte. Wordmark arriba, el nombre de quien invita (la confianza es de persona a persona), el QR grande al centro, el código en celeste listo para dictarse, y la url por si el QR no se puede escanear en pantalla propia.
La maqueta va a escala real — 330px dentro de una burbuja de chat — porque la legibilidad al tamaño verdadero es el criterio, no la belleza del mockup ampliado.
A 330px el QR mide 148px — 4px por módulo con nivel H: escaneable desde otra pantalla sin acercarse. El «Te invita a importar con Mogos» hace el trabajo del mensaje aunque el texto del chat se pierda. El pie firma con el punto rojo y el tagline.
La ley del QR, heredada del shipping mark
04 · LeyLos módulos van en --marino sobre placa clara: 15.5:1 sobre hueso — un lector exige ~3:1, así que escanea igual que el negro y se ve de la casa. En superficies oscuras el QR jamás se invierte: siempre placa clara.
Corrección H (30%): la matriz de register?code= da 37×37. La quiet zone son 2 módulos DENTRO de la placa (viewBox -2 -2 41 41) — el padding visual no cuenta como quiet zone.
En el unfurl (330px) el QR mide 148px → 4px/módulo, sobre el mínimo práctico de 3px. En el pase, 118px → 3.2px/módulo, suficiente en pantalla. El PNG del API se renderiza @2x para que WhatsApp no lo degrade.
Implementación
05 · Cierre| Pieza | Qué cambia |
|---|---|
membership-card.tsx | El componente compartido (pantalla, packages/ui/src/components/agent/): wordmark y monograma pasan a los vectores de MogosLogo/assets, tintas a tokens --mogos-* (fuera brand-700 y grises), QR con color: var(--mogos-marino) vía las opciones de la lib, placa hueso con quiet zone. |
render-card.tsx | El PNG del API (apps/api/src/cards/): layout chat-first vertical de la sección 03, mismo contrato de tokens, render @2x del ancho de unfurl. El endpoint /cards/r/<code>.png no cambia. |
| Ley del QR | Nivel H + quiet zone 2 módulos + módulos marino en ambos renders. La lib qrcode ya soporta color.dark — es configuración, no código nuevo. |
| Cero migraciones | Sin endpoints nuevos, sin cambios de datos: los mismos props (firstName, lastInitial, code, corridors, memberSince) alimentan ambos renders. |