Centro de marca ESGARI | Logotipos, color, tipografía y plantillas
esgari.com/brand

Centro de marca ESGARI

Todo lo que necesitas para representar a ESGARI correctamente: logotipos, color, tipografía, banco de imágenes y plantillas. Descarga directa, sin pedir permiso, sin adivinar.

Descargar logotipos No sé qué necesito
2003Inicio de operaciones
22Años de operación
2Pantones oficiales
13Capítulos del manual
Empieza aquí

¿De qué área eres?

Te llevamos directo a lo que tu área usa todos los días, con las tres reglas que importan.

01Esencia

Quiénes somos antes de ser un logotipo

Desde 2003, en ESGARI transformamos la logística en una palanca de crecimiento para empresas que necesitan operar con velocidad, visibilidad y control entre México y Estados Unidos.

Misión

Diseñar soluciones logísticas integradas que respondan con precisión a las necesidades reales de cada cliente, conectando estrategia, servicio y ejecución para generar valor medible.

Visión

Ser el socio logístico que las empresas eligen cuando su operación no puede fallar, consolidándonos como referente del sector por innovación, confiabilidad y resultados.

Promesa

Moving your supply chain.

El lema se escribe siempre en inglés, en minúsculas y sin punto final cuando acompaña al logotipo.

Valores ESGARI conectados a la operación
Pensamos la operación con visión integral: estrategia, ejecución y servicio.
Rasgos de marca
Corporativa Premium Limpia Tecnológica Confiable Mexicana con proyección internacional

La marca no debe verse pesada, oscura ni agresiva. Nunca dashboard genérico, sitio futurista oscuro, landing morada ni plantilla industrial gris.

03Color

Paleta oficial

Da clic en cualquier color para copiar su código. El azul manda, el rojo acentúa, el verde solo vive en sostenibilidad y certificaciones.

contrato de marca: pantone 2746 c / 485 c · nunca gradientes morados, neón ni cyan/fucsia

04Tipografía

Montserrat, en toda la marca

Escribe tu texto y muévelo de tamaño para ver cómo se comporta antes de mandarlo a diseño.

Moving your supply chain

Display

Montserrat 800–900. Títulos hero y de sección. Interletraje cerrado, −0.015em.

Texto

Montserrat 400–500. Párrafos de 0.95 a 1.125 rem, interlínea 1.7.

Etiqueta técnica

JetBrains Mono 400–700. Solo para datos, códigos y metadatos.

05Iconografía

Sellos y certificaciones

Los sellos se usan tal cual, sin recortar ni recolorear. Descarga el archivo, no lo tomes de una captura.

C-TPATC-TPATPNG · descargar OEAOEAPNG · descargar ISO 9001ISO 9001PNG · descargar ANTPANTPPNG · descargar ESRESRPNG · descargar SEDEXSEDEXPNG · descargar Transporte LimpioTransporte LimpioPNG · descargar SEMARNATSEMARNATPNG · descargar Sello ESGSello ESGSVG · descargar Compromiso ESGARICompromiso ESGARISVG · descargar
06Banco de imágenes

Fotografía autorizada

Filtra por tema, abre para ver en grande y descarga en un clic. Toda imagen fuera de este banco necesita autorización de Marketing. Cada ficha descarga la versión en alta resolución.

Las unidades ESGARI Green son eléctricas y van rotuladas en un turquesa propio, que no está en la paleta de este manual. El código oficial de ese color está __ (pendiente) de definir con Marketing.

Sierra áridaFlota↓
Sierra boscosaFlota↓
Puente en el desiertoFlota↓
Campo al atardecerFlota↓
Desierto al amanecerFlota↓
Frente en terraceríaFlota↓
Rabón en patioFlota↓
Puente de concretoFlota↓
Puente en la sierraFlota↓
Carretera del desiertoFlota↓
Carretera entre agavesFlota↓
Centro de distribuciónFlota↓
Acceso a puertoFlota↓
Convoy entre agavesFlota↓
Terminal ManzanilloFlota↓
Carga de contenedorFlota↓
Patio de contenedoresFlota↓
Transporte mundialMarca↓
México al mundoMarca↓
Conexión al mundoMarca↓
Valores ESGARIMarca↓
Banner homeMarca↓
Cerebro logísticoTecnología↓
Humanos y tecnologíaTecnología↓
Seguridad y monitoreoTecnología↓
Última millaOperación↓
Cross-dockingOperación↓
Logística dedicadaOperación↓
Helicóptero BellOperación↓
Industria automotrizIndustrias↓
Industria aeroespacialIndustrias↓
Industria tequileraIndustrias↓
RetailIndustrias↓
Flota eléctrica en el hubSostenibilidad↓
Carga eléctricaSostenibilidad↓
Puente urbanoSostenibilidad↓
Avenida arboladaSostenibilidad↓
Calle residencialSostenibilidad↓
Calle con palmerasSostenibilidad↓
Operador con tabletaSostenibilidad↓
Operador en plazaSostenibilidad↓
Equipo en el hubSostenibilidad↓
SostenibilidadSostenibilidad↓
07Usos y errores

Correcto e incorrecto, lado a lado

Los cinco errores que más aparecen en piezas reales. Compara y sal de la duda.

Logotipo sobre fotografíalogo
✓ Correcto

Aplica el logotipo en blanco sobre un velo azul institucional al 45 % o más, en una zona limpia de la imagen.

✕ Incorrecto

Colocar el logotipo a color directo sobre la foto, o encima de la parte con más detalle.

Proporcioneslogo
✓ Correcto

Escala siempre desde una esquina, manteniendo la proporción original del archivo SVG.

✕ Incorrecto

Estirar, comprimir, rotar o inclinar el logotipo para que quepa en un espacio.

Color de acentocolor
✓ Correcto

El rojo acentúa: un CTA, una línea activa, un ícono clave. El azul sostiene la pieza.

✕ Incorrecto

Fondos rojos de página completa o bloques donde el rojo compite con el azul.

Gradientescolor
✓ Correcto

Solo el azul institucional #2A2F70 → #1E1B4B y el rojo #DE271E → #B91C1C, a 135°.

✕ Incorrecto

Gradientes morados, neón, cyan/fucsia o multicolor corporativo.

Tipografía en piezastipografía
✓ Correcto

Montserrat para todo. Títulos en 800–900, texto en 400–500.

✕ Incorrecto

Sustituir por Inter, Roboto o Arial porque «no estaba instalada».

08Tono de voz

Cómo escribe ESGARI

Claro, concreto y con datos. Hablamos de operación, no de aspiraciones.

Sí decimos
  • «Coordinación transfronteriza con trazabilidad y control documental en cada tramo.»
  • «Entrega final con visibilidad total.»
  • «Operación exclusiva diseñada alrededor de tus objetivos.»
No decimos
  • «Somos los mejores del mercado.» Sin dato, no va.
  • «Revolucionamos la logística.» Prometemos ejecución, no revoluciones.
  • Emojis en comunicación corporativa o comercial.
Reglas de escritura
  • ESGARI siempre en mayúsculas.
  • Cifras con separador de miles en español de México.
  • Nombres de servicio en minúsculas: última milla, cross-docking.
  • Las marcas registradas del ecosistema se escriben tal cual quedaron registradas.
09Unidades de negocio

Arquitectura de marca

ESGARI es la marca madre. Los servicios y las unidades se nombran bajo ella, nunca en paralelo.

Tractocamión ESGARI Logística dedicada

Recursos exclusivos para asegurar estabilidad operativa y alto nivel de servicio.
Caja de 53 pies ESGARI Importación y exportación

Coordinación transfronteriza con trazabilidad y control documental en cada tramo.
Camioneta de 3.5 toneladas ESGARI Última milla

Entrega final con visibilidad total para fortalecer experiencia y promesa de marca.
Helicóptero Bell ESGARI Helicópteros ESGARI

Movilidad aérea a la medida. Se nombra siempre con el respaldo ESGARI por delante.
10Papelería

Papelería y señalización

Formatos institucionales listos para imprimir. Requieren clave de ESGARI.

Zona interna Estos archivos requieren clave de ESGARI

Papelería y plantillas son de uso interno. Pide la clave a Marketing; al ingresarla se desbloquean las dos secciones mientras dure tu sesión.

11Plantillas

Plantillas por canal

Cada plantilla ya trae color, tipografía y márgenes correctos. Empieza aquí en lugar de un documento en blanco.

Zona interna Estos archivos requieren clave de ESGARI

Papelería y plantillas son de uso interno. Pide la clave a Marketing; al ingresarla se desbloquean las dos secciones mientras dure tu sesión.

12Producto digital

Sistema de producto digital

Los mismos fundamentos, componentes y patrones para el sitio, los portales y las aplicaciones. Si un componente no está en esta página, no existe en el producto.

12.1 · Escala tipográfica

Montserrat en todos los pesos. La escala es la misma en web y en app; en app baja un paso, nunca dos.

Moving your supply chainHeroclamp(36–60px) / 900 / −.02em
Portafolio de serviciosSecciónclamp(26–38px) / 800 / −.015em
Logística dedicadaTarjeta20px / 700 / 1.3
Coordinación transfronteriza con trazabilidad.Cuerpo16px / 400 / 1.7
Nota al pie y ayuda contextual.Cuerpo chico13px / 400 / 1.65
Cumplimiento 24/7Etiqueta11px / 700 / .06em / caja alta
96%Dato27px mono / 700

12.2 · Color con función

En producto el color no decora: informa. Cada token tiene un solo trabajo. Da clic para copiar el código.

12.3 · Catálogo de componentes

Da clic en cualquier componente para ver sus medidas exactas y copiar el CSS.

Acciones
Entrada de datos
Contenedores
Estado y retroalimentación
Navegación

12.4 · Estados, retícula y elevación

Los cinco estados
Enviarreposo Enviarhover Enviarfoco visible Enviando…en vuelo Enviardeshabilitado

Todo control interactivo tiene los cinco. Si a un componente le falta el foco visible, no está terminado.

Retícula y cortes
Contenedor 1200–1280 px Margen lateral 20–24 px Corte tablet ≤ 980 px Corte móvil ≤ 760 px Área táctil mínima 44 × 44 px

En ≤ 760 px las rejillas de 2, 3 y 4 columnas colapsan a una y el menú pasa a hamburguesa.

Radios, sombras y espaciado
pill 999 · input 12 · card 16 · panel 22 · hero 24 4 8 12 16 20 24 28 34 44 56 78 soft · 0 10px 40px -10px rgba(46,44,114,.08) lift · 0 24px 48px -34px rgba(46,44,114,.55) panel · 0 26px 60px -50px rgba(46,44,114,.5)

Sombras frías y difusas. Nunca negro duro ni sombras cortas de 2 px.

12.5 · Movimiento

El movimiento confirma una acción o explica un cambio de estado. Nada se mueve por decoración.

150msHover y foco. Respuesta inmediata al cursor.
200msCambios de estado, paneles y chips.
280msBarra de navegación, modales y cambio de pantalla.
easeUna sola curva en todo el sistema. Sin rebotes.

Se anima: opacidad, desplazamiento corto, color y sombra. No se anima: tipografía, logotipo, tamaño de tarjeta ni nada que mueva el texto que alguien está leyendo. Respetamos prefers-reduced-motion.

12.6 · Accesibilidad mínima

Contraste

4.5:1 en texto normal, 3:1 en títulos grandes. El slate #475569 es el gris más claro permitido para texto.

Estado sin color

Todo estado lleva texto o ícono además del color. Un punto verde solo no comunica nada.

Teclado

Todo se opera con tabulador. El foco se ve con un halo azul de 3 px y nunca se elimina.

Toque

44 × 44 px como mínimo, con 8 px de separación entre destinos.

12.7 · Recursos para descargar

Tokens y plantillas listos para pegar en el proyecto. Se actualizan aquí y en ningún otro lado.

CSS↓Tokens en CSSVariables de color, tipografía, radios, sombras y espaciado listas para :root. JSON↓Tokens en JSONEl mismo sistema para apps móviles y herramientas de diseño. JS↓Configuración de TailwindColores, fuentes, radios, sombras y cortes de pantalla del sistema. HTML↓Firma de correoTabla lista para pegar en el cliente de correo. Solo cambia los campos. HTML↓Plantilla de correo600 px de ancho, un solo CTA, cabecera azul y pie navy.
13Aplicaciones

El ecosistema digital

Todas las herramientas del ecosistema comparten un solo sistema visual: el mismo color de estado, la misma tarjeta, el mismo botón. Las pantallas de esta sección son ilustrativas: muestran cómo se aplica el sistema, no una herramienta en particular.

13.1 · Piezas del ecosistema

Cada pieza se define por su función y su público, no por su nombre comercial. El nombre se asigna después, y siempre bajo la marca madre.

ParaguasEcosistema

El entorno donde se conectan todas las herramientas, la automatización y la asistencia. Da el marco visual a todo lo demás.

Concepto, no descarga
ClienteApp de visibilidad

Seguimiento de embarques en tiempo real, programación, métricos y pagos. Es la cara móvil del servicio.

iOS · Android
ClientePortal de solicitud

El cliente pide el servicio paso a paso: origen, destino, tipo de unidad y fecha. Elimina intermediarios.

Web escritorio
Socio comercialPortal de socios

Facturación, aclaraciones y comunicación directa. El socio opera con la misma identidad visual que la operación propia.

Web escritorio
ClienteAsistente

Conversación para consultar estatus y datos sin navegar menús. Vive dentro de las otras herramientas.

Dentro de la app
InternoMonitoreo interno

Tablero de semáforos y escalamiento. No se presenta al cliente: es la mesa que sostiene el servicio.

Web escritorio

13.2 · Pantalla móvil de referencia

Cabecera navy, contenido sobre lienzo claro con esquina de 26 px, una sola acción principal y barra inferior de cuatro destinos.

Mis embarquesCliente · Planta GDL AL
En tránsitoProgramadosEntregados
EMB-20418 Manzanillo → Guadalajara ETA 14:20 · en tiempo
EMB-20422 Monterrey → Querétaro ETA 16:10 · demora en aduana
EMB-20430 Laredo → Saltillo ETA 18:45 · en tiempo
Solicitar servicio
Inicio Embarques Métricos Cuenta
Qué muestra la pantalla
  • Una sola acción principal, siempre en rojo y al pie del contenido.
  • El semáforo va acompañado de texto: el color solo no comunica.
  • Cuatro destinos como máximo en la barra inferior, con etiqueta visible.
  • El isotipo en blanco es la única versión válida sobre la cabecera navy.

13.3 · Pantalla web de referencia

Contenedor de 1280 px, cabecera con una acción, tabla de 44 px por fila y estado siempre con texto.

portal.esgari.com/embarques
Embarques de la semana Solicitar servicio
FolioRutaETAEstado
EMB-20418Manzanillo → GDL14:20En tiempo
EMB-20422Monterrey → QRO16:10Demora
EMB-20430Laredo → Saltillo18:45En tiempo

13.4 · Ícono de aplicación

Las tres versiones válidas
Ícono sobre azul institucional Ícono sobre navy Ícono claro
  • Solo el isotipo, centrado y sin lema.
  • Fondo azul institucional o navy; nunca degradado.
  • El símbolo ocupa el 58 % del lienzo; el resto es aire.
  • El redondeo lo pone el sistema operativo: entrega el cuadrado completo.
Pantalla de arranque
Pantalla de arranque de la aplicación

Fondo navy, logotipo completo en blanco al 60 % del ancho, centrado. Sin animación de entrada, sin lema adicional, sin versión ni año.

Cómo se nombran
  • Todas las herramientas llevan el prefijo de la marca madre y se escriben en inglés, para homologar y facilitar el registro.
  • Dentro de la aplicación el nombre se acorta; fuera de ella siempre va completo y con el prefijo.
  • Una marca que ya existe y tiene historia se conserva: entra al ecosistema, no se sustituye.
  • El ecosistema es el paraguas, no un producto que se descargue por separado.

13.5 · Semáforo de servicio

Un color, un significado, en toda la plataforma. El mismo código en la app, en el portal y en el monitoreo interno.

Verde · #047857

En tiempo y sin intervención. No genera notificación ni escalamiento.

Ámbar · #B45309

Riesgo detectado. Escalamiento anticipado: se avisa antes de que el cliente lo note.

Rojo · #DE271E

Incidencia activa. Ya hay alguien operando detrás del sistema y el estado lo dice.

El rojo del semáforo y el rojo de acción comparten familia pero no función: si en una pantalla hay estado rojo, el botón principal pasa a azul institucional para no competir.

13.6 · Estados de pantalla

Toda pantalla tiene cinco versiones. Diseñar solo la versión llena es entregar la mitad del trabajo.

Primera vezDice qué va a pasar

Explica en una línea qué verá el usuario cuando haya datos, y ofrece la acción que los genera.

VacíoNunca «sin datos»

Título concreto, una línea de contexto y el botón que resuelve. Ícono neutro de 44 px.

CargandoBloques, no ruedas

Esqueletos con la forma del contenido que viene. Un spinner solo se usa por debajo de un segundo.

ErrorQué pasó y qué sigue

Mensaje en rojo #B91C1C, causa en lenguaje simple y un botón para reintentar. Nunca códigos técnicos.

Sin conexiónLo último que se supo

Se muestra el dato en caché con la marca de tiempo y un aviso ámbar. La app no se queda en blanco.

13.7 · Notificaciones

Una notificación es una interrupción: solo se manda si el usuario tiene que hacer algo o si el estado del servicio cambió.

Embarque entregadoManzanillo → GDL, 11:05. Evidencia disponible.
Demora en aduanaMonterrey → Querétaro, 40 min. Nuevo ETA 16:10.
Solicitud por autorizarVence hoy a las 18:00.
FormatoHecho, dato, siguiente paso

Título de máximo seis palabras. El cuerpo lleva el dato concreto y, si aplica, el nuevo compromiso.

FrecuenciaCambio de estado, no avance

Se notifica al salir, al cambiar de semáforo y al entregar. El avance porcentual vive en la app, no en el buzón.

TonoSin signos de admiración

Ni urgencia artificial ni disculpas largas. El dato y la acción bastan.

13.8 · Roles y acceso

Lo que cada quien ve depende de su rol. El diseño no oculta con estilos: si un rol no tiene permiso, el elemento no se renderiza.

Ejecutivo del clienteMétricos completos, gasto, tendencias, histórico y autorización de solicitudes.Todo
Operativo de plantaSolicitar y programar servicio, y ver el estatus de sus propios embarques.Su planta
Socio comercialSus viajes asignados, facturación y aclaraciones. No ve datos de otros socios.Su operación
OperadorSu viaje del día, evidencias por capturar y contacto de la torre.Su viaje
InternoSemáforos de toda la operación, escalamiento y captura de respaldo.Global