Cada carga. Cada centavo.
En un solo lugar.
Manual de identidad corporativa de HailuWay. La plataforma operativa SaaS para freight forwarders entre China y LatAm.
Plataforma de marca
Quiénes somos, qué buscamos y cómo nos comportamos.
Esencia
HailuWay ("Hai" = mar, "Lu" = tierra, "Way" = el camino correcto) es la plataforma operativa SaaS para agencias de logística y freight forwarders que importan desde China hacia Latinoamérica. Nacimos para que cada carga y cada centavo dejen de vivir en Excel y WhatsApp, y empiecen a vivir en una sola fuente de verdad.
Misión
Reemplazar el Excel, el WhatsApp y el caos operativo del freight forwarding por una sola plataforma donde cada carga, pago y cliente vive con trazabilidad en tiempo real.
Visión
Que ningún forwarder vuelva a perder una carga, un cobro ni un cliente por falta de información.
Valores
Trazabilidad Absoluta
La verdad operativa por encima de todo. Sin zonas grises.
Seguridad Blindada
Custodiamos datos, clientes y dinero con estándares bancarios.
Flujo Sin Fricción
Diseño e interacciones que no requieren manual de uso.
Cada Centavo Rastreable
Del yuan al peso, todo cargo y abono atado a una operación.
Arquetipo: El Sabio
"La verdad y el conocimiento liberan."
Analítica, precisa, objetiva, didáctica. Cree en datos sobre opiniones. Educa antes de vender. Reconoce lo que no sabe en lugar de inventar. Documenta exhaustivamente.
Marcas referencia: Google, IBM, The Economist, Stripe (en docs).
Posicionamiento
Frente a quién competimos, qué decimos y para quién lo decimos.
Statement
Para agencias de logística y freight forwarders que operan importaciones desde China hacia Latinoamérica y hoy gestionan su negocio en Excel y WhatsApp, HailuWay es la plataforma operativa SaaS que unifica la trazabilidad de cada carga y cada centavo en un solo sistema.
A diferencia de las planillas, los chats y los sistemas armados a mano, HailuWay ofrece una sola fuente de verdad para operadores, clientes finales y contabilidad, con la disciplina de un software bancario y la simplicidad de una app moderna.
Mensajes clave
01 · Carga y dinero, un solo sistema
Otros sistemas rastrean contenedores. Otros llevan cobros. HailuWay hace ambos y los une.
02 · La verdad operativa, sin WhatsApp
Estados, comentarios, archivos y pagos quedan dentro de la operación.
03 · Listo en días, no en meses
No instalas servidores ni contratas integradores. Abres cuenta y operas el mismo día.
04 · Hecho para China ↔ LatAm
Divisas, idiomas, horarios, documentación: el sistema ya entiende el corredor.
Buyer personas
Carlos
- Edad
- 35–55
- Ciudad
- Lima, Bogotá, Santiago, CDMX, Buenos Aires, Guayaquil
- Conocimiento
- Logística experta · Tech medio
- Dolor
- No sabe cuánto ganó hasta semanas después.
- Por qué compra
- Dormir tranquilo y delegar sin perder control.
"Yo confío en mi gente, pero necesito ver qué está pasando."
Andrea
- Edad
- 26–40
- Rol
- Coordinadora de operaciones
- Conocimiento
- BL, consolidación, aduanas · Tech alto
- Día a día
- 30–80 embarques simultáneos. 80% en WhatsApp.
- Por qué usa
- Cliente autoatendido, dejar de repetir updates.
"Si pudiera dejar de mandar el mismo update tres veces al día, recuperaría mi vida."
Identidad verbal
Cómo nombramos las cosas y cómo le hablamos al usuario.
Naming
| Forma | Uso |
|---|---|
| HailuWay | ✅ Correcto siempre. Marca canónica. |
Hailuway · HAILUWAY · Hailu Way | ❌ Incorrecto. |
hailuway.com | Dominio. |
@hailuway | Handle social oficial. |
| Cuenta | Cada tenant (agencia/forwarder). |
| Operación | Unidad de trabajo. |
Taglines
Tono de voz
Trato: tuteo siempre.
Personalidad: clara · precisa · didáctica · profesional pero accesible · seria con chispa puntual.
Emojis: sutiles, solo en marketing y notificaciones positivas (✅ ⚠️ 📦 💰).
✓ Sí decimos
- "Tu pago llegó. La operación #4821 está confirmada."
- "El BL fue rechazado por aduana. Revisa el HS Code."
- "Listo. Tu cuenta queda configurada en 3 pasos."
✕ No decimos
- "¡Bienvenido a la familia HailuWay! 🎉🚀✨"
- "Estimado usuario, sírvase iniciar sesión"
- "Oops, algo salió mal"
Glosario (20 términos)
| Término | Definición |
|---|---|
BL | Bill of Lading — conocimiento de embarque marítimo. |
AWB | Air Waybill — guía aérea. |
FCL | Full Container Load — contenedor completo. |
LCL | Less than Container Load — carga consolidada. |
| Consolidación | Agrupar cargas de varios clientes en un contenedor. |
| Naviera | Compañía marítima (Maersk, MSC, COSCO). |
| Forwarder | Quien gestiona el envío punta a punta. |
| Courier | Envío exprés puerta a puerta. |
| Aduana | Autoridad de fronteras. |
| Despachante | Quien gestiona trámites en aduana. |
ETD | Estimated Time of Departure. |
ETA | Estimated Time of Arrival. |
| Booking | Reserva de espacio en naviera o aerolínea. |
| Tracking | Seguimiento en tiempo real. |
| Cotización | Propuesta de precio al cliente. |
| Flete | Costo del transporte. |
| Drawback | Devolución de impuestos a la exportación. |
| Comisión / fee | Ganancia del forwarder por operación. |
| Cuenta | Tenant en HailuWay. |
| Operación | Unidad de trabajo (embarque + cobros + docs). |
Sistema de logo
"H" estilizada con flecha hacia la derecha. Asta izquierda = origen sólido. Flecha = movimiento, entrega y futuro (Way).
✓ Producido. Las 8 variantes oficiales del logo están disponibles como SVG en /brand/logos/. Descarga el set completo en el press kit.
Variantes (8) — preview real
Reglas técnicas
| Área de respeto | 1.5X (alto de la letra H) |
| Tamaño mínimo UI | 24 px de alto |
| Tamaño mínimo marketing | 40 px de alto |
| Tamaño mínimo impresión | 25 mm de ancho |
| Tamaño favicon | 16 × 16 px |
| Animación | Flecha se construye en 800ms ease-out |
✓ Sí
- Blanco sobre Navy.
- Navy o Cobalto sobre Ice White.
- Mantener 1.5X de área libre.
✕ No
- Distorsionar o rotar.
- Colores no aprobados.
- Drop-shadows al logo plano.
- Reemplazar tipografía del logo.
Sistema de color
Deep Tech: autoridad, velocidad y precisión.
Primarios
Escala Cobalto · 50–950
Escala Cyan · 50–950
Escala Slate (grises)
Semánticos
Gradientes
Aurora China-LatAm
linear-gradient(135deg, #1A1A1A, #1E3A8A, #00C950)Deep Tech
linear-gradient(180deg, #1A1A1A, #0A0A0A)Glow
linear-gradient(90deg, #00C950, #00A040)Sistema tipográfico
Plus Jakarta Sans + JetBrains Mono. Escala 1.25 (Major Third).
Familias
| Rol | Fuente | Fallback |
|---|---|---|
| UI y texto | Plus Jakarta Sans | system-ui, sans-serif |
| Display | Plus Jakarta Sans ExtraBold (800) | system-ui, sans-serif |
| Mono | JetBrains Mono | SF Mono, Consolas, monospace |
| CJK | Noto Sans SC | sans-serif |
Escala visual
Iconografía
Lucide como set principal, stroke 1.5px, tres tamaños estándar.
| Librería | lucide-react |
| Stroke width | 1.5px |
| Linecap / Linejoin | round / round |
| Tamaños | 16px inline · 20px botones · 24px headers |
Set custom (pendiente)
8–12 iconos custom para vocabulario logístico: Contenedor FCL · Contenedor LCL · BL · AWB · Naviera · Aduana · Courier · Drawback.
Spacing, grid y breakpoints
Base 4px, grid 12 columnas, breakpoints Tailwind. Móvil y escritorio con igual prioridad.
Escala de spacing
Breakpoints
| Token | Min width | Dispositivo |
|---|---|---|
sm | 640px | Móviles grandes |
md | 768px | Tablets verticales |
lg | 1024px | Tablets horizontales · laptops |
xl | 1280px | Desktops estándar |
2xl | 1536px | Monitores grandes |
Componentes UI
20 componentes documentados. Border-radius 6/10/16px, 3 niveles de sombra, glassmorphism generoso.
Botones
Badges
Alertas semánticas
Glassmorphism
Operación #4821
FCL Shenzhen → Callao. ETA 15 Jun. Cliente DTC Imports.
Dashboard (dark)
Data visualization
Apache ECharts. Paleta cualitativa de 6 colores diseñada para daltonismo.
Paleta de series
Tipos canónicos
- KPI Card
- Line
- Bar
- Stacked Bar
- Donut
- Tabla con sparkline
- Heatmap
- Sankey
- Mapa de rutas
- Gantt
- Funnel
Motion
Funcional y sutil. La animación guía, no decora.
Duraciones
instant | 100ms |
fast | 200ms |
base | 300ms |
slow | 500ms |
Easings
ease-out | Entrada |
ease-in | Salida |
ease-in-out | Movimiento |
Respeto a prefers-reduced-motion: animaciones >200ms se reducen a fade o se eliminan.
Fotografía e ilustración
Mockups limpios del producto, ilustración geométrica, mapas custom.
Fotografía
Mockups del producto en distintos dispositivos. Estética premium, corrección fría. Anti-stock.
Ilustración
Geométrica minimalista, paleta del sistema. Empty states, onboarding, blog.
Mapas
Mapamundi custom en Navy con líneas curvas cobalto/cyan conectando puertos China ↔ LatAm.
Activos digitales
Favicon, Open Graph, templates de email, firma del equipo.
| Activo | Especificación |
|---|---|
| Favicon set | favicon.ico + 16x16, 32x32 PNG + apple-touch 180x180 + icon-192/512 + manifest.json |
| Open Graph | Template dinámico 1200x630 · fondo Dark · logo blanco · título Plus Jakarta Sans ExtraBold 60px |
| HTML responsive 600px · header logo Ink · cuerpo Plus Jakarta Sans 16px · CTAs negros | |
| Firma | HTML estándar · Nombre + Cargo + logo + tagline oficial + hailuway.com + LinkedIn |
Reglas multi-tenant
HailuWay al frente. Los tenants son "Cuentas". White-label parcial en plan premium.
Logo del tenant
Plan estándar: HailuWay visible en navegación. Plan premium: la cuenta puede reemplazar el logo HailuWay en su navegación.
Color del tenant
Un único color de acento personalizable (botones primarios y links).
Powered by HailuWay
Footer discreto siempre presente en portal del cliente final, emails y PDFs.
Dominio
CNAME propio (app.dtdcargo.com) como meta. Subdominio (dtdcargo.hailuway.com) durante onboarding.
Accesibilidad
WCAG 2.2 AA en producto, sitio público y comunicaciones.
- Navegación por teclado completa
- Focus visible (anillo 2px cobalto, offset 2px)
- Alt text en imágenes informativas
- Labels asociados a inputs
- Contraste mínimo 4.5:1 texto, 3:1 UI
- Respeto a
prefers-reduced-motion - ARIA labels en componentes complejos
Internacionalización
Español día 1 · Inglés Q2 · Chino simplificado Q4 del primer año.
🇪🇸 Español
Neutro LatAm. Sin modismos regionales. Día 1.
🇺🇸 Inglés
en-US. Lanzamiento Q2.
🇨🇳 Chino simplificado
zh-CN. Lanzamiento Q4. Para proveedores y agentes en China.
Reglas técnicas
- Nunca concatenar strings — usar placeholders:
"Hola {nombre}" - Pluralización con ICU MessageFormat
- Formatters con locale para fechas, números y moneda
- Iconos sin texto embebido
- Layout con margen para idiomas largos (+30%)
Legal y press kit
Reglas de uso de marca para periodistas, partners e integradores.
| Razón social | En proceso de constitución. |
| Trademark | HailuWay® pendiente de registro. |
| Press kit público | hailuway.com/brand |
| Footer del sitio | Términos · Privacidad · Cookies · status.hailuway.com |
✓ Permitido
- Usar logo en posts respetando el manual
- Descargar assets del press kit
- Referenciar HailuWay en docs técnicos
✕ Prohibido
- Modificar el logo
- Sugerir endoso sin acuerdo
- Vender merchandising con la marca
- Usar el nombre como producto propio
Estado de assets
Actualizado al lanzar la versión 2.1. La mayoría del sistema ya está producido.
✓ Producidos · disponibles
- Logo SVG — 9 variantes en
/brand/logos/+ sistema con<symbol>reutilizable - Set de 10 iconos custom de logística (FCL, LCL, BL, AWB, naviera, aduana, courier, drawback, booking, tracking)
- Logo animado — build-up de flecha en 800ms (CSS keyframes, respeta
prefers-reduced-motion) - Favicon set completo — 16/32/48/180/192/512 + maskable +
site.webmanifestPWA - OG image — 1200×630 con gradiente Aurora generada por script
- 5 templates de email transaccional (welcome · reset · invoice · operation update · newsletter) con preview interactivo
- Firma de email del equipo — generador HTML interactivo + template raw
- Mapamundi estilizado — SVG con rutas China↔LatAm en la landing
- Press kit público — sección /#brand con downloads +
press-kit.zip(27 archivos) - Design tokens en CSS variables y JSON (formato W3C)
- Componente React para todos los iconos + logos
- Mockups iniciales — dashboard + social card OG
📋 Pendientes reales
- OG dinámico por ruta — actualmente hay uno estático (
/og-image.png). Falta función generadora que produzca uno único por cada blog post / landing. - Design tokens en Figma — los tokens existen en CSS/JSON. Falta importarlos a una librería Figma con Tokens Studio.
- Storybook con los 20 componentes UI — proyecto separado, varios días de trabajo.
- Mockups del producto adicionales — requieren capturas del SaaS real cuando esté más maduro.