Principal sobre azul
Uso institucional preferente en fondos navy, headers, portadas y materiales de alto impacto.
Sistema de logo
Refinamiento visual, no rediseño.
La esencia del logo original se conserva. La intervención oficial mejora construcción técnica, nitidez, proporciones, espaciado y sistema de uso institucional.
Secundaria sobre blanco
Uso en documentos, administración, formularios, directorios y superficies claras.
Isotipo independiente
Uso solo cuando el espacio es reducido: favicon, avatar, sello o marca auxiliar.
Versión compacta
Uso en barras laterales, mobile, chips institucionales y firmas digitales.
Hacer / evitar
Reglas visuales que un agente debe obedecer.
Estas muestras reducen ambigüedad para herramientas generativas: usar el activo oficial, mantener proporciones y evitar efectos decorativos.
Usar el SVG oficial
El logo se usa como activo completo, con aire alrededor y sin reconstrucción manual.
No deformar
No estirar, condensar, rotar ni cambiar la relación entre isotipo y texto.
No aplicar efectos
No agregar sombras, contornos, brillos, degradados ni filtros decorativos.
Reglas de uso
- No reconstruir el logo con texto editable o letras sueltas.
- No deformar, condensar, estirar, rotar ni cambiar la relación isotipo/texto.
- No usar archivos pixelados cuando exista SVG o versión vectorial.
- No aplicar sombras, contornos, degradados ni efectos decorativos al logo.
- Mantener aire alrededor: mínimo la altura del isotipo como zona de seguridad.
- Usar azul profundo como campo institucional principal y blanco como versión secundaria.
Mejoras oficiales
- Redibujo vectorial para eliminar pixelación y ganar nitidez.
- Proporción entre isotipo, separador y texto ASAC más estable.
- Espaciado refinado para formatos grandes y aplicaciones reducidas.
- Azul profundo como color principal para confianza y formalidad.
- Sistema de uso con versiones principal, secundaria, isotipo y compacta.
- Aplicable en presentaciones, documentos, redes, sitio web y materiales corporativos.
Color
Azul institucional con acento naranja.
El azul profundo sostiene confianza institucional. El naranja se reserva para llamadas a la acción, señales, énfasis y pequeños estados destacados.
Azul institucional
#042264Accent 500
#fa8219Page surface
#f7f9fcSunken surface
#f1f4f8Design tokens
Valores base para UI y agentes.
El archivo completo está disponible como JSON y CSS. Esta tabla resume los valores que más deben respetar los agentes.
| Categoría | Token | Valor | Uso |
|---|---|---|---|
| Color | --asac-color-ink-900 | #042264 | Institucional primario |
| Color | --asac-color-accent-500 | #fa8219 | CTA y acento |
| Surface | --asac-color-surface-page | #f7f9fc | Fondo de página |
| Radius | --asac-radius-md | 10px | Controles y paneles |
| Radius | --asac-radius-lg | 14px | Paneles destacados |
| Spacing | --asac-space-6 | 24px | Separación interna común |
| Spacing | --asac-space-10 | 64px | Separación de secciones |
CSS tokens
:root {
--asac-color-primary: #042264;
--asac-color-action: #fa8219;
--asac-color-surface-page: #f7f9fc;
--asac-radius-md: 10px;
--asac-space-6: 24px;
}
AI manifest
{
"brand": "ASAC",
"tone": ["institucional", "B2B", "logístico"],
"requiredAssets": ["officialLogoSvg"],
"forbidden": ["logoEffects", "distortion", "genericStock"]
}
Componentes UI
Patrones sobrios para pantallas públicas y operativas.
La marca funciona mejor con controles claros, estados visibles, tablas legibles y componentes densos sin ornamentación excesiva.
Acciones
Estados
Miembro activo
Expo Logística
Publicado
Alertas
Usar avisos breves, con borde naranja y texto directo. Evitar bloques decorativos o mensajes ambiguos.
| Patrón | Uso recomendado | Evitar |
|---|---|---|
| Tablas | Directorio, licitaciones, miembros, reportes. | Cards repetitivas cuando la comparación importa. |
| Filtros | Búsqueda, categorías, estados, fechas. | Controles escondidos o filtros sin estado visible. |
| Botones | Un primario naranja por bloque y secundarios neutros. | Varios CTAs compitiendo con el mismo peso. |
Voz de marca
Institucional, directa y orientada a comercio exterior.
El tono debe transmitir respaldo gremial, rigor técnico y utilidad práctica para empresas de logística, carga y comercio.
Escribir como ASAC
- Usar “tú” consistente en textos dirigidos a usuarios.
- Priorizar claridad legal, operativa e institucional.
- Nombrar logística, carga, aduanas, transporte, miembros y comercio exterior cuando aplique.
- Ser formal sin sonar distante: frases breves, verbos claros y beneficio concreto.
Evitar
- Lenguaje excesivamente promocional o de consumo masivo.
- Jerga vacía, promesas absolutas o claims difíciles de probar.
- Voseo si el resto de la experiencia usa “tú”.
- Tono juguetón, informal o ajeno al sector B2B.
Mejor: “Conecta tu empresa con una red logística institucional y representativa del sector carga.”
Evitar: “Subí tu negocio al siguiente nivel con una experiencia increíble y sin límites.”
Imágenes
Mostrar el sector real, no abstracciones genéricas.
Para páginas públicas, priorizar fotos reales de eventos ASAC, logística, carga, aduanas, comercio, transporte, capacitación y miembros.
Usar actividad real, eventos, paneles, capacitación y operaciones logísticas.
- Preferir imágenes con contexto reconocible del sector.
- Mantener overlays navy cuando el texto va sobre fotografía.
- Cuidar rostros, permisos y uso institucional.
Evitar fondos abstractos cuando una imagen real comunica mejor.
- No usar fotografías oscuras o borrosas si el usuario debe inspeccionar contenido.
- No usar escenas stock ajenas a El Salvador, miembros o comercio exterior regional.
- No tapar información clave con texto o tarjetas pesadas.
Prompt para agentes
Instrucción corta reutilizable.
Prompt base para herramientas de diseño generativo, builders visuales o agentes de frontend.
Prompt recomendado
Diseña para ASAC, la Asociación Salvadoreña de Agencias de Carga y Transitarios. Trata la marca como una institución B2B de logística y comercio exterior: confiable, formal, técnica, sobria y de alta confianza. Usa solo el logo oficial: https://asac.com.sv/images/asac-logo.svg. No reconstruyas, distorsiones, estires, rotes, recolorees ni apliques efectos decorativos al logo. Colores base: navy institucional #042264, naranja de acción #fa8219, superficie de página #f7f9fc, superficies elevadas #ffffff y superficies suaves #f1f4f8. Para páginas públicas, usa imágenes reales de ASAC, logística, comercio, eventos o miembros. Para admin y herramientas operativas, prioriza interfaces densas, escaneables, sobrias, con filtros, tablas, estados y acciones claras. Evita gradientes decorativos, brillos, efectos gratuitos, paletas ajenas, estilo consumidor/playful y pantallas operativas con aspecto de landing page.