Contenido
01. Introducción a la Marca
Descripción del Software
VESCLO (Ver Ecosistema Circular LOgístico) es una plataforma SaaS innovadora que simplifica y acelera el control de solicitudes de recolección y recepción de cualquier tipo de residuos.
Se distingue por su integración con plataformas externas empresariales para la sincronización de solicitudes de recolección, proporcionando trazabilidad completa, simplicidad operativa y accesibilidad universal.
🎯 Misión
Facilitar la transición hacia una economía circular mediante tecnología que hace visible, trazable y eficiente cada paso en el ciclo de vida de los residuos.
🚀 Visión
Ser la plataforma líder en Latinoamérica para la gestión inteligente de residuos, donde cada kilo de material tenga un camino visible hacia su valorización.
Valores de Marca
Confianza
Seguridad y transparencia en cada transacción.
Sostenibilidad
Compromiso real con el impacto ambiental positivo.
Tecnología
Innovación al servicio de la simplicidad.
Trazabilidad
Control total del ciclo de vida.
Educación
Empoderar usuarios con conocimiento.
Personalidad de Marca
Profesional pero accesible
Innovadora pero confiable
Seria pero optimista
Técnica pero humana
02. Identidad Visual
Filosofía del Diseño
El logotipo de VESCLO integra tres conceptos fundamentales:
Circularidad
Flechas formando un círculo continuo
Logística
Camión en movimiento dinámico
Tecnología
Líneas de velocidad digitales
Versiones del Logotipo
Versión Horizontal Full Color (Uso Preferente)
Composición:
- • Isotipo: Gradiente turquesa-verde
- • Camión: Gris carbón #3D4F5C
- • Wordmark: Gris oscuro #2C3E50
- • Disposición: Horizontal
- • URL:
vesclo.co/img/vesclo.png
Versión Monocromática Oscura
Uso: Fondos claros cuando el color no sea posible
Todo el logotipo en gris oscuro #1A3C34
Disponible en:
- • Con efecto 3D:
vesclo-logo-3d.png - • Versión plana:
vesclo.png
Versión Monocromática Clara
Uso: Fondos oscuros o fotografías
Todo el logotipo en blanco #FFFFFF
URL: vesclo-logo-3d-letrablanca.fw.png
Versiones Verticales
Para espacios con formato vertical o cuando se requiere mayor impacto visual.
Vertical - Letra Blanca
Uso: Fondos oscuros, héroes de portada, splash screens
vesclo-logo-3d-letra-blanca.png
Vertical - Letra Verde
Uso: Fondos claros, documentos oficiales, presentaciones
vesclo-logo-3d-letra-verde.fw.png
Isotipo Independiente (Favicon/App Icon)
El isotipo (camión circular con flechas) puede usarse solo cuando:
- ✓ El espacio es muy limitado (íconos de app, favicons)
- ✓ La marca ya está establecida en el contexto
- ✓ Se requiera un elemento gráfico compacto
NO usar el isotipo solo en:
- ✗ Primera presentación de la marca
- ✗ Documentos oficiales
- ✗ Comunicaciones externas formales
URL: vesclo.co/img/app-icon-vesclo.png
Zona de Protección
Regla: Mantener un espacio mínimo equivalente a la altura de la letra "v" del wordmark alrededor del logotipo completo.
Tamaños Mínimos
💻 Digital
- Logotipo completo: Mínimo 140px de ancho
- Isotipo solo: Mínimo 32px de ancho
🖨️ Impreso
- Logotipo completo: Mínimo 35mm de ancho
- Isotipo solo: Mínimo 10mm de ancho
Usos Correctos e Incorrectos
✓ Usos Correctos
Logo completo en fondos claros con versión full color
Logo completo en fondos oscuros con versión blanca
Isotipo en favicon o íconos de aplicación
Logo escalado proporcionalmente sin distorsión
✗ Usos Incorrectos
❌ Cambiar colores del logotipo
❌ Rotar o inclinar el logotipo
❌ Distorsionar o estirar las proporciones
❌ Agregar efectos (sombras, bordes)
📦 Recursos Descargables
Todas las versiones del logotipo están disponibles en alta resolución:
| Versión | Uso | Archivo |
|---|---|---|
| Horizontal - Color | General, fondos claros | vesclo.png |
| Horizontal - 3D Oscuro | Fondos claros, efecto 3D | vesclo-logo-3d.png |
| Horizontal - Blanco | Fondos oscuros | vesclo-logo-3d-letrablanca.fw.png |
| Vertical - Letra Blanca | Splash screens, portadas | vesclo-logo-3d-letra-blanca.png |
| Vertical - Letra Verde | Documentos, presentaciones | vesclo-logo-3d-letra-verde.fw.png |
| Isotipo/Favicon | App icons, favicon, espacios pequeños | app-icon-vesclo.png |
💡 Tip: Todas las imágenes están alojadas en https://vesclo.co/img/
03. Colores Corporativos
Filosofía Cromática
La paleta de VESCLO evoca sostenibilidad (verde/turquesa), profesionalismo (grises) y acción (acentos vibrantes).
Colores Primarios
🟢 Verde VESCLO (Primary)
HEX: #00A676
RGB: 0, 166, 118
CMYK: 78, 0, 50, 0
Pantone: 3385 C
CSS Variable: --vesclo-primary
Uso: Color principal de marca, CTAs primarios, elementos destacados
🔵 Verde Oscuro (Secondary)
HEX: #1A3C34
RGB: 26, 60, 52
CMYK: 85, 50, 70, 50
Pantone: 560 C
CSS Variable: --vesclo-secondary
Uso: Textos sobre fondos claros, encabezados, elementos de apoyo
Colores Secundarios
Blanco
Gris Carbón
Gris Medio
Gris Claro
Colores de Estado (Sistema)
✅ Éxito
Confirmaciones, estados completados
❌ Error
Errores, alertas críticas
⚠️ Advertencia
Advertencias, rechazados
ℹ️ Información
Información, recibidas
Gradientes Corporativos
linear-gradient(135deg, #00A676 0%, #1A3C34 100%)
Uso: Fondos hero, headers premium, elementos destacados
linear-gradient(135deg, #5BC5D9 0%, #00A676 100%)
Uso: Flechas circulares del isotipo
04. Tipografía
Filosofía Tipográfica
VESCLO utiliza Nunito como tipografía corporativa única, creando coherencia visual entre marca, producto y comunicaciones.
¿Por qué Nunito?
- ✓ Legibilidad excepcional en pantallas
- ✓ Carácter amigable pero profesional
- ✓ Buena performance web (Google Fonts)
- ✓ Amplio rango de pesos disponibles
Familia Completa
- Nunito Light (300)
- Nunito Regular (400)
- Nunito SemiBold (600)
- Nunito Bold (700)
- Nunito ExtraBold (800)
Jerarquía Tipográfica
Título Grande (H1)
Fuente: Nunito ExtraBold (800)
Tamaño: 48px / 3rem
Line Height: 1.2
Color: #1A3C34
Título Principal (H2)
Fuente: Nunito Bold (700)
Tamaño: 36px / 2.25rem
Line Height: 1.3
Título Secundario (H3)
Fuente: Nunito Bold (700)
Tamaño: 24px / 1.5rem
Cuerpo de Texto (Body)
Fuente: Nunito Regular (400)
Tamaño: 16px / 1rem
Line Height: 1.6
Texto Pequeño (Small)
Fuente: Nunito Regular (400)
Tamaño: 14px / 0.875rem
Importación Web
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--font-family-primary: 'Nunito', sans-serif;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
}
body {
font-family: var(--font-family-primary);
}
</style>05. Elementos Gráficos
Iconografía
Estilo de Íconos
- Estilo: Línea (outline)
- Grosor: 2px
- Esquinas: Redondeadas
- Color primario: #00A676
- Color secundario: #6B7280
- Librería: Font Awesome, Lucide
Íconos Core de VESCLO
Recolección
Residuos
Reciclaje
Ubicación
Éxito
Alerta
Sincronización
Firma
Cámara
Usuario
Estilo Fotográfico
Placeholder: Fotografía Natural
Conductores en acción
Características
- • Naturalidad, no sobre-posadas
- • Iluminación natural y cálida
- • Personas diversas e inclusivas
- • Contextos reales de operación
- • Color vibrante pero realista
Tratamiento
- • Saturación: +10% para vibrancia
- • Contraste: Moderado
- • Overlay: Gradiente verde al 20%
Patrones y Texturas
Patrón Circular (Economía Circular)
Uso: Fondos hero, tarjetas premium, watermark en documentos
Patrón de Líneas (Movimiento)
Uso: Fondos de secciones, elementos dinámicos
06. Aplicaciones de Marca
Aplicación Móvil (Android)
Splash Screen
Ver Ecosistema Circular LOgístico
Pantalla Login
Ver Ecosistema
Circular LOgístico
Dashboard
Hola, Carlos 👋
15 KG
Hoy
8
Rutas
Solicitudes Pendientes
🗑️ #SOL-001
Residuos Plásticos
📍 Calle 57
🗑️ #SOL-002
Residuos Orgánicos
Papelería Corporativa
Tarjeta de Presentación
Carlos Mario Celedón
CEO & Founder
carlos@cmceledon.com
vesclo.co
CMCELEDON S.A.S.
Hoja Membretada
CMCELEDON S.A.S.
NIT: 901765035
[Contenido del documento]
Lorem ipsum dolor sit amet...
Plantillas Redes Sociales
Instagram - Estadística
2,500 KG
de residuos gestionados
este mes
LinkedIn - Caso de Éxito
"Con VESCLO recolecto 2x más rápido"
- Juan, Conductor
Instagram Story
¿Sabías que...?
Cada tonelada de plástico reciclado ahorra 5,774 kWh de energía
07. Lineamientos Técnicos
CSS Variables Completas
:root {
/* Colores Primarios */
--vesclo-primary: #00A676;
--vesclo-secondary: #1A3C34;
/* Grises */
--vesclo-white: #FFFFFF;
--vesclo-gray-dark: #2C3E50;
--vesclo-gray: #6B7280;
--vesclo-light-gray: #F5F5F5;
/* Estados */
--vesclo-success: #10B981;
--vesclo-error: #EF4444;
--vesclo-warning: #F59E0B;
--vesclo-info: #3B82F6;
--vesclo-pending: #6B7280;
/* Tipografía */
--font-family-primary: 'Nunito', sans-serif;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
/* Espaciados */
--spacing-xs: 0.25rem; /* 4px */
--spacing-sm: 0.5rem; /* 8px */
--spacing-md: 1rem; /* 16px */
--spacing-lg: 1.5rem; /* 24px */
--spacing-xl: 2rem; /* 32px */
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
/* Sombras */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
/* Transiciones */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}Componentes Base
Botones
.btn-primary {
background-color: var(--vesclo-primary);
color: var(--vesclo-white);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-semibold);
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: var(--radius-md);
transition: all var(--transition-base);
}
.btn-primary:hover {
background-color: var(--vesclo-secondary);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}Cards
Card Title
Contenido de la tarjeta con información relevante.
Card Destacada
Con borde de acento verde.
Card Premium
Con fondo gradiente corporativo.
.card {
background-color: var(--vesclo-white);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-base);
}
.card:hover {
box-shadow: var(--shadow-md);
}Badges de Estado
.badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
}
.badge-success {
background-color: rgba(16, 185, 129, 0.1);
color: var(--vesclo-success);
}Grid y Layout System
/* Container Principal */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
/* Grid Responsivo */
.grid {
display: grid;
gap: var(--spacing-lg);
}
.grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
/* Responsive Breakpoints */
@media (max-width: 768px) {
.grid-cols-2,
.grid-cols-3 {
grid-template-columns: 1fr;
}
}08. Ejemplos Visuales
Landing Page - Hero Section
Ver más allá de los residuos
Hacia un futuro sostenible
Portal Web - Dashboard
Dashboard
2.5K
KG Total
45
Rutas
12
Vehículos
98%
Uptime
Solicitudes Recientes
Firma de Email
Carlos Mario Celedón
CEO & Founder
CMCELEDON S.A.S.
✉️ carlos@cmceledon.com 📞 +57 300 533 3744 🌐 vesclo.co
Post LinkedIn - Impacto
25 Toneladas
de CO₂ evitadas este trimestre
Gracias a nuestros clientes comprometidos con la sostenibilidad
La Coherencia Visual Construye Confianza
Este Manual de Identidad Corporativa no es solo un documento de diseño: es la esencia visual de VESCLO. Cada pixel, cada color, cada decisión tipográfica refuerza nuestra promesa de simplicidad, confiabilidad y sostenibilidad.
Confianza
Una marca consistente transmite profesionalismo
Reconocimiento
Identificación instantánea en cualquier contexto
Valor
Una identidad cuidada eleva la percepción
Diferenciación
Nos distingue en el sector
"Ver más allá de los residuos, hacia un futuro sostenible"
Esta no es solo nuestra tagline, es nuestro compromiso visual y funcional. Cada decisión de diseño refuerza este mensaje.
Hagamos que VESCLO no solo sea reconocible, sino memorable.
Que cada interacción visual inspire acción hacia la sostenibilidad.