brandbook v2.0 · privado
Acceso restringido
Este brandbook es de uso interno del equipo HailuWay y diseñadores autorizados. Ingresa la contraseña para continuar.
Contraseña incorrecta. Intenta de nuevo.
⚡ Brandbook v2.0 · Privado

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.

v2.0 2026-05-16 Equipo HailuWay
01 · MARCA

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

01

Trazabilidad Absoluta

La verdad operativa por encima de todo. Sin zonas grises.

✓ Comportamiento: cada carga, pago y conversación queda registrado con timestamp, autor y estado.
✕ Anti-ejemplo: "te lo confirmo por WhatsApp", updates sin evidencia.
02

Seguridad Blindada

Custodiamos datos, clientes y dinero con estándares bancarios.

✓ Comportamiento: RLS en cada tabla, cifrado, auditoría, separación entre cuentas.
✕ Anti-ejemplo: credenciales compartidas, exports de Excel con datos de clientes.
03

Flujo Sin Fricción

Diseño e interacciones que no requieren manual de uso.

✓ Comportamiento: acción más usada a un clic, atajos de teclado, errores con solución.
✕ Anti-ejemplo: modales anidados, tutoriales obligatorios, menús profundos.
04

Cada Centavo Rastreable

Del yuan al peso, todo cargo y abono atado a una operación.

✓ Comportamiento: diferencias cambiarias, comisiones y abonos visibles en la operación.
✕ Anti-ejemplo: "ese pago lo cobró Juan, pregúntale a él".

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).

02 · MARCA

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

C

Carlos

Dueño Operador · Decisor de compra
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."
A

Andrea

Operadora Senior · Usuario principal
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."
03 · MARCA

Identidad verbal

Cómo nombramos las cosas y cómo le hablamos al usuario.

Naming

FormaUso
HailuWay✅ Correcto siempre. Marca canónica.
Hailuway · HAILUWAY · Hailu Way❌ Incorrecto.
hailuway.comDominio.
@hailuwayHandle social oficial.
CuentaCada tenant (agencia/forwarder).
OperaciónUnidad de trabajo.

Taglines

Oficial
Cada carga. Cada centavo. En un solo lugar.
Logo, firma, footer.
Landing
Toda tu operación. Toda la verdad.
Hero, presentaciones.
Anuncios
La plataforma operativa del freight forwarder.
Ads, eventos, email mkt.

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 (✅ ⚠️ 📦 💰).

Ejemplo
Tu cliente acaba de ver el embarque. No tienes que avisarle nada.
✅ Carga #4821 entregada en Callao.
✓ 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érminoDefinición
BLBill of Lading — conocimiento de embarque marítimo.
AWBAir Waybill — guía aérea.
FCLFull Container Load — contenedor completo.
LCLLess than Container Load — carga consolidada.
ConsolidaciónAgrupar cargas de varios clientes en un contenedor.
NavieraCompañía marítima (Maersk, MSC, COSCO).
ForwarderQuien gestiona el envío punta a punta.
CourierEnvío exprés puerta a puerta.
AduanaAutoridad de fronteras.
DespachanteQuien gestiona trámites en aduana.
ETDEstimated Time of Departure.
ETAEstimated Time of Arrival.
BookingReserva de espacio en naviera o aerolínea.
TrackingSeguimiento en tiempo real.
CotizaciónPropuesta de precio al cliente.
FleteCosto del transporte.
DrawbackDevolución de impuestos a la exportación.
Comisión / feeGanancia del forwarder por operación.
CuentaTenant en HailuWay.
OperaciónUnidad de trabajo (embarque + cobros + docs).
05 · SISTEMA VISUAL

Sistema de color

Deep Tech: autoridad, velocidad y precisión.

Primarios

Primary
Deep Navy Blue
#0B1120
Action
Electric Cobalt
#2563EB
Accent
Tech Cyan
#06B6D4
BG Light
Ice White
#F8FAFC

Escala Cobalto · 50–950

50
#EFF6FF
100
#DBEAFE
200
#BFDBFE
300
#93C5FD
400
#60A5FA
500
#3B82F6
600
#2563EB
700
#1D4ED8
800
#1E40AF
900
#1E3A8A
950
#172554

Escala Cyan · 50–950

50
#ECFEFF
100
#CFFAFE
200
#A5F3FC
300
#67E8F9
400
#22D3EE
500
#06B6D4
600
#0891B2
700
#0E7490
800
#155E75
900
#164E63
950
#083344

Escala Slate (grises)

50
#F8FAFC
100
#F1F5F9
200
#E2E8F0
300
#CBD5E1
400
#94A3B8
500
#64748B
600
#475569
700
#334155
800
#1E293B
900
#0F172A
950
#020617

Semánticos

🟢 Success
#D1FAE5 · bg
#10B981 · base
#065F46 · text
🟡 Warning
#FEF3C7 · bg
#F59E0B · base
#92400E · text
🔴 Error
#FEE2E2 · bg
#EF4444 · base
#991B1B · text
🔵 Info
#DBEAFE · bg
#2563EB · base
#1E3A8A · text

Gradientes

Aurora China-LatAm

Hero, secciones premium
linear-gradient(135deg, #0B1120, #1E3A8A, #06B6D4)

Deep Tech

Botones primarios, CTAs
linear-gradient(180deg, #2563EB, #1D4ED8)

Glow

Badges, highlights
linear-gradient(90deg, #06B6D4, #0891B2)
06 · SISTEMA VISUAL

Sistema tipográfico

Inter + JetBrains Mono + Noto Sans SC. Escala 1.25 (Major Third).

Familias

RolFuenteFallback
UI y textoIntersystem-ui, sans-serif
DisplayInter ExtraBold (800)system-ui, sans-serif
MonoJetBrains MonoSF Mono, Consolas, monospace
CJKNoto Sans SCsans-serif

Escala visual

text-7xl · 72px · ExtraBold
Cada carga.
text-5xl · 48px · ExtraBold
Cada centavo.
text-3xl · 30px · Bold
En un solo lugar.
text-2xl · 24px · Bold
Operación #4821
text-xl · 20px · SemiBold
DTC Imports · Shenzhen → Callao
text-base · 16px · Regular
El contenedor FCL fue cargado en Shenzhen el 8 de junio. ETA 15 de junio en Callao.
text-sm · 14px · Regular
Actualizado hace 12 minutos por María González.
text-xs · 12px · SemiBold
EN TRÁNSITO MARÍTIMO
JetBrains Mono · 14px
MSCU-481-2305 · $12,340.50 USD · 2,400 kg
07 · SISTEMA VISUAL

Iconografía

Lucide como set principal, stroke 1.5px, tres tamaños estándar.

Libreríalucide-react
Stroke width1.5px
Linecap / Linejoinround / round
Tamaños16px 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.

08 · SISTEMA VISUAL

Spacing, grid y breakpoints

Base 4px, grid 12 columnas, breakpoints Tailwind. Móvil y escritorio con igual prioridad.

Escala de spacing

1·4
2·8
3·12
4·16
5·20
6·24
8·32
10·40
12·48
16·64
24·96

Breakpoints

TokenMin widthDispositivo
sm640pxMóviles grandes
md768pxTablets verticales
lg1024pxTablets horizontales · laptops
xl1280pxDesktops estándar
2xl1536pxMonitores grandes
09 · PRODUCTO

Componentes UI

20 componentes documentados. Border-radius 6/10/16px, 3 niveles de sombra, glassmorphism generoso.

Botones

Badges

En tránsito Retraso 48h Doc rechazado Booking confirmado

Alertas semánticas

✓ Pago confirmado. El cliente DTC Imports pagó la operación #4821 ($12,340).
⏱ Retraso en zarpe. El buque MSC ALANIS sale 48h después de lo previsto.
✕ Documento rechazado. El BL de la operación #4798 fue rechazado por aduana.
ℹ Nueva tarifa. COSCO actualizó tarifas Shanghai-Callao.

Glassmorphism

Operación #4821

FCL Shenzhen → Callao. ETA 15 Jun. Cliente DTC Imports.

Dashboard (dark)

Operaciones activas
142
↑ 12% MoM
Cobros pendientes
$87,420
↓ 4% MoM
En tránsito FCL
38
↑ 8 cont.
Margen
18.4%
↑ 1.2 pp
10 · PRODUCTO

Data visualization

Apache ECharts. Paleta cualitativa de 6 colores diseñada para daltonismo.

Paleta de series

Serie 1
Cobalto
#2563EB
Serie 2
Cyan
#06B6D4
Serie 3
Violeta
#7C3AED
Serie 4
Ámbar
#F59E0B
Serie 5
Verde
#10B981
Serie 6
Rosa
#EC4899

Tipos canónicos

  • KPI Card
  • Line
  • Bar
  • Stacked Bar
  • Donut
  • Tabla con sparkline
  • Heatmap
  • Sankey
  • Mapa de rutas
  • Gantt
  • Funnel
11 · PRODUCTO

Motion

Funcional y sutil. La animación guía, no decora.

Duraciones

instant100ms
fast200ms
base300ms
slow500ms

Easings

ease-outEntrada
ease-inSalida
ease-in-outMovimiento

Respeto a prefers-reduced-motion: animaciones >200ms se reducen a fade o se eliminan.

12 · PRODUCTO

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.

13 · APLICACIÓN

Activos digitales

Favicon, Open Graph, templates de email, firma del equipo.

ActivoEspecificación
Favicon setfavicon.ico + 16x16, 32x32 PNG + apple-touch 180x180 + icon-192/512 + manifest.json
Open GraphTemplate dinámico 1200x630 · fondo Aurora · logo blanco · título Inter ExtraBold 60px
EmailHTML responsive 600px · header logo Navy · cuerpo Inter 16px · CTAs Deep Tech
FirmaHTML estándar · Nombre + Cargo + logo + tagline oficial + hailuway.com + LinkedIn
14 · APLICACIÓN

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.

15 · APLICACIÓN

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
Daltonismo: nunca usar solo color para comunicar estado. Acompañar siempre con ícono o texto.
16 · APLICACIÓN

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%)
18 · ESTADO

Pendientes de producción

Activos definidos pero aún no producidos.

📋 Por producir

  • Logo SVG (8 variantes oficiales)
  • Set de iconos custom de logística
  • Logo animado (build-up 800ms)
  • Favicon set completo + manifest
  • OG dinámico
  • Templates de email (5)
  • Firma de email del equipo
  • Mapamundi estilizado
  • Mockups del producto
  • Press kit público
  • Design tokens en Figma
  • Storybook