Sistema visual del sitio web de Expertobags
Versión 1.0 · Noviembre 2025
Sistema visual y UI Kit
Este documento define de manera precisa cómo se aplicarán color, tipografía, iconografía y componentes UI
en el nuevo sitio web de Expertobags. Sirve tanto para alinear al cliente como para guiar el desarrollo en WordPress + Elementor.
01 · Color
Paleta cromática oficial
El rojo del logo se usa solo como acento. El peso visual se apoya en blancos y grises,
construyendo una apariencia industrial, limpia y moderna.
Primario · Acento#FC180F
Rojo corporativo
Botones, iconos, detalles de énfasis
#FC180F
Primario · Texto#060606
Negro profundo
Titulares, acentos tipográficos
#060606
Base · Fondo#FFFFFF
Blanco
Fondo principal de páginas y tarjetas
#FFFFFF
Gris muy claro
Fondos de secciones amplias
#F7F8FA
Gris medio
Texto secundario, bordes suaves
#A7A7A7
Gris oscuro
Secciones densas, footer, bloques técnicos
#2A2A2A
02 · Tipografía
Jerarquías y usos
Poppins se usa en todo el ecosistema digital, con distintos pesos para lograr jerarquía clara
sin perder la sensación industrial y contemporánea.
H1 · Hero
Maxisacos para industrias que no pueden detenerse
Poppins 700 · 40px · color #060606
H2 · Sección
Soluciones principales
Poppins 600 · 28px · color #060606
H3 · Tarjeta
Maxisacos y eslingas
Poppins 600 · 20px · color #2A2A2A
Body · Principal
Desde 2012 diseñamos y fabricamos maxisacos certificados que aseguran la continuidad
operativa de nuestros clientes en minería, agroindustria, alimentos y más.
Poppins 400 · 14px · color #444444 · interlineado 1.6
Caption
Texto auxiliar para etiquetas, estados y ayudas contextuales.
Poppins 400 · 12px · color #777777
03 · Iconografía
Línea fina · Monocromática roja
Íconos planos, de una sola línea, color rojo corporativo. Contribuyen a la lectura rápida sin competir con la información.
Resistencia
Certificación
Logística
Exportación
Alimentos
Química
04 · Componentes UI
Botones, formularios y patrones básicos
Sistema base de interacción para replicar en Elementor: botones, campos de formulario
y patrones que se repetirán en todo el sitio.
BotonesPrimary · Secondary · Ghost
El botón principal siempre lleva al flujo de cotización.
Campos de formularioCotización rápida
Inputs rectos, limpios, con foco en borde rojo.
05 · Layouts clave
Hero, productos e industrias
Ejemplos visuales de cómo se verán las secciones principales del sitio: hero de inicio,
grilla de productos y listado de industrias atendidas.
Hero de inicioVersión web
Soluciones de embalaje diseñadas para resistir
Maxisacos industriales y agrícolas a medida, 100% reciclables y con certificaciones
que garantizan la seguridad de su operación.
Libre de FtalatosCertificación UN–OMIMicrobiológica USACH
+12 años abasteciendo industrias
Tarjetas de productoSección “Soluciones principales”
Maxisacos & Eslingas
Carga a granel · manipulación segura · a medida
Sacos Industriales
Procesos intensivos · líneas de producción
Cobertores Agrícolas
Protección de cultivos frente a lluvia, viento y heladas
06 · Industrias & Certificaciones
Bloques especializados
Estos componentes se usarán en páginas interiores para comunicar a qué mercados atendemos
y qué certificaciones respaldan a Expertobags.
Industrias atendidasPíldoras
Minería
Pesquera
Alimentos
Cementera
Semillas
Fertilizantes
Química
Reciclaje
CertificacionesBloques informativos
Libre de Ftalatos
Apto para alimentos y productos con presencia de grasas y aceites.
UN – OMI
Cumple normativa internacional para transporte marítimo de mercancías peligrosas.
Microbiológica – USACH
Telas y accesorios libres de bacterias y migraciones químicas.
Guía de Estilo
Sistema de Diseño – Expertobags
Lineamientos visuales, paleta cromática, tipografías, iconografía, componentes UI y estructura del sistema visual oficial de la marca Expertobags.
Fundamentos del Sistema
Foundation
Fundamentos Visuales
Colores, espaciados, grilla, tipografías, iconografía y estructura core del sistema visual.
Colors
Paleta Cromática
Colores corporativos, tonos neutros, contrastes y reglas de uso dentro del ecosistema visual.
Typography
Tipografías
Jerarquías textuales, pesos, espaciados y line-height para todos los niveles de contenido.
Icons
Iconografía
Sistema de iconos lineales en rojo corporativo, consistencia y normas de construcción.
Colors
Paleta de Colores
Sistema cromático oficial de Expertobags. Compuesto por un rojo corporativo principal,
una gama de grises técnicos y el blanco como espacio neutral. Todos los elementos deben utilizar exclusivamente esta paleta.
Rojo Principal
HEX: #E13333
Negro
HEX: #1A1A1A
Gris Oscuro
HEX: #2D2D2D
Gris Medio
HEX: #A6A6A6
Gris Claro
HEX: #F2F2F2
Blanco
HEX: #FFFFFF
Typography
Sistema Tipográfico
El sistema tipográfico utiliza la familia Inter, diseñada para interfaces modernas y sistemas visuales.
Se aplica con jerarquías claras, pesos definidos y un line-height que facilita la lectura en entornos digitales.
H1 – Encabezado Principal
Ejemplo de Título H1
Tamaño: 42px Peso: 700 Tracking: -0.5px Uso: Titulares principales
H2 – Secciones
Encabezado H2
Tamaño: 28px Peso: 600 Uso: encabezados de sección
H3 – Subtítulos
Subtítulo H3
Tamaño: 20px Peso: 600 Uso: subtítulos y encabezados contenidos
Body / Párrafo
Este es un ejemplo de texto en estilo "Body". Se utiliza para contenido general, texto descriptivo y
explicaciones dentro del sistema visual.
Tamaño: 16px Peso: 400 Line-height: 1.6
Caption / Small
Texto pequeño para etiquetas, notas y elementos de soporte visual.
Tamaño: 13px Peso: 400
Iconography
Sistema de Iconografía
El sistema de iconos de Expertobags utiliza una línea gráfica limpia, técnica y minimalista.
Todos los íconos deben ser outline, con un grosor de trazo uniforme y usar exclusivamente el color
rojo corporativo (#E13333) como acento visual.
Conjunto Principal de Iconos
Icono Base
Tiempo / Proceso
Menú / Lista
Caja / Contenedor
Reglas de Uso
Consistencia
Todos los iconos deben mantener el mismo estilo outline, grosor de línea (1.8px),
proporciones equilibradas y el mismo tamaño visual.
Color
El único color permitido es el rojo corporativo (#E13333),
especialmente en interfaces, headers o llamadas visuales.
Usos Incorrectos
✘ No usar iconos rellenos.
✘ No cambiar a otros colores.
✘ No modificar el grosor de línea.
✘ No combinar estilos distintos.
✘ No usar iconos descargados sin uniformidad.
✘ No rotar, distorsionar ni agregar efectos de sombra adicionales.
UI Components
Componentes del Sistema
Conjunto de componentes listos para construir interfaces consistentes y escalables.
Diseñados siguiendo la identidad visual de Expertobags y la arquitectura UI del sistema.
Botones
Botón Primario
Botón Secundario
Botón Outline
Campos de Entrada
Input Text
Input Nombre
Email
Select / Dropdown
Input con Icono
Badges
Activo
Badge Principal
Inactivo
Badge Neutro
Nuevo
Badge de Estado
Alertas
Error
Hubo un problema al procesar la solicitud.
Advertencia
Revise los campos antes de continuar.
Información
Todo está funcionando correctamente.
Breadcrumbs
Inicio / Maxisacos / Modelo 1
Pestañas / Tabs
General
Detalles
Contenido
Contenido de ejemplo dentro de la pestaña activa. Esta sección incluye texto, imágenes, fichas o información técnica.
Tablas
Nombre
Estado
Fecha
Item 1
Activo
12/01/2025
Item 2
Inactivo
14/01/2025
Applications
Aplicaciones y Uso Real
Ejemplos de cómo el sistema visual se adapta a diferentes piezas comunicacionales
y productos digitales. Estas aplicaciones sirven como referencia para mantener coherencia
en todos los puntos de contacto de la marca.
Sitio Web
Página Web
Uso correcto del sistema visual en interfaces web, incluyendo navegación,
tipografía, espaciado y estructura de componentes.
Redes Sociales
Social Media
Plantillas base para diseños de post, anuncios e historias manteniendo
coherencia visual con los lineamientos corporativos.
Documentos
Documentos Corporativos
Informes, fichas técnicas, presupuestos y presentaciones internas utilizando
la misma estructura visual.
Layouts
Distribución y Secciones
Referencias visuales para la construcción de secciones, páginas y bloques principales.
Utilizar siempre espaciado generoso y composición limpia, tal como el sistema visual lo establece.
Hero Section
Hero + Llamado a Acción
Títulos claros, sobrelínea gris, máximo contraste, botón primario y
distribución centrada o de dos columnas.
Cards Grid
Secciones con Grid
Tarjetas uniformes con borde claro, iconos outline rojos, títulos pequeños
y descripción gris suave.
Dark Section
Aplicación en Fondos Oscuros
En secciones oscuras se recomienda mantener la tipografía en blanco o gris claro,
botones outline blancos y iconografía en rojo o blanco según el contraste.
Ejemplo 1
Menú en Dark Mode
Iconos blancos para contraste óptimo.
Ejemplo 2
Destacar estados
Usar badges rojos para elementos importantes.
Ejemplo 3
Containers oscuros
Mantener tipografía clara y acentos rojos.
Footer
Pie de Página
El footer sigue una estructura sólida y clara para navegación secundaria. Utiliza fondo negro,
tipografía blanca y enlaces en gris claro, manteniendo contraste y legibilidad adecuadas.
Expertobags
Sistema visual corporativo. Mantener consistencia en todos los puntos de contacto.