Este manual interactivo contiene las directrices, códigos de color y variantes del nuevo logotipo trazado a partir de tu boceto. Diseñado bajo los principios de escalabilidad matemática, limpieza técnica y adaptabilidad SaaS.
Los cimientos estratégicos y la voz que define la personalidad de KonectaVox en el mercado de telecomunicaciones.
Humanizar las telecomunicaciones a través de tecnología inteligente, acortando distancias y creando conexiones reales, estables e instantáneas en un entorno omnicanal B2B.
Proveer software SaaS e infraestructura de voz robusta y de última generación que permita a las empresas interactuar con sus clientes de forma ágil, segura y sin fricciones.
Ser el estándar global en plataformas de comunicación empresarial, reconocido por la fiabilidad de nuestra red, la innovación en IA de voz y la simplicidad de integración.
Garantizamos una disponibilidad de red del 99.9% para mantener siempre a las empresas conectadas.
Evolucionamos constantemente incorporando análisis de datos e IA en tiempo real.
Claridad total en la arquitectura técnica, precios y soporte centrado en el cliente.
Hacemos que lo complejo (las telecomunicaciones globales) parezca sencillo y amigable.
Nuestra comunicación es Profesional, Tecnológica pero Cercana, y Directa. Evitamos la jerga innecesaria que confunde al usuario, pero mantenemos la autoridad de expertos.
Expertos y precisos
Fríos o distantes
Innovadores y modernos
Informales o inmaduros
"Conectamos a tus clientes con agentes en tiempo real de forma segura y veloz."
"Implementamos un pipeline omnicanal síncrono para el enrutamiento de sockets de voz."
Variantes listas para descargar en formato vectorial limpio, preparadas para cualquier contexto de producción web, impreso, interfaces móviles u oscuras.
Las proporciones matemáticas, el área de protección obligatoria y las dimensiones mínimas para su reproducción en cualquier medio.
El área de exclusión equivale a la altura de la palabra "Konecta" (representado como valor X). Ningún elemento gráfico, borde de página o texto debe invadir este perímetro de protección.
El isotipo está construido matemáticamente sobre una retícula hexagonal. La estructura central representa un canal de comunicación de datos simétrico de 30° de inclinación con terminales en punta que simbolizan la emisión y recepción de voz digitalizada.
Si el logotipo se va a mostrar en resoluciones menores a 32px de altura en entornos digitales (como un favicon o icono de barra de herramientas), se debe prescindir del texto y utilizar **únicamente** el Isotipo Aislado.
Para mantener la consistencia de KonectaVox, evita a toda costa alterar las proporciones, colores y composición del logotipo.
No altere la relación de aspecto original ni estire horizontal o verticalmente la firma.
No use colores ajenos a la paleta aprobada. La identidad debe ser homogénea.
El logotipo principal debe presentarse siempre de manera horizontal estricta.
No aplique versiones con colores oscuros directamente sobre fondos grises u oscuros.
Códigos cromáticos corporativos obligatorios para la estructura principal y el logotipo. Haz clic para copiar el código HEX.
Seguridad & Confianza B2B
Innovación & Omnicanalidad
Estructura & Legibilidad
Gama expandida para interfaces web (SaaS), estados de componentes de software (éxito, error, hover) y soportes gráficos adicionales.
Enlaces (Hover en Tema Claro)
Contenedores Claros
Validación de Errores
La tipografía elegida es Inter. Diseñada específicamente para pantallas e interfaces de usuario avanzadas, ofrece una legibilidad perfecta, equilibrio geométrico y una gran consistencia de marca.
Telecomunicaciones Omnicanal KonectaVox
Telecomunicaciones Omnicanal KonectaVox
Telecomunicaciones Omnicanal KonectaVox
Guías de estilo para el uso de iconos en interfaces de usuario web/móvil, documentación y marketing. La librería de iconos oficial adoptada es Lucide Icons.
Los iconos son de estilo lineal geométrico con terminaciones redondeadas. Se adopta Lucide Icons como la librería oficial, la cual está optimizada sobre una rejilla base de 24px × 24px con 2px de área interna segura.
Las formas combinan líneas rectas precisas con esquinas sutilmente redondeadas. Se prescribe un radio de esquina de 2px a 3px. Evitar esquinas vivas de 90° para mantener el tono moderno, amigable y tecnológico de la marca.
En interfaces dinámicas, los iconos se alojan dentro de contenedores circulares o súper-elipses con fondos de baja opacidad (estilo cristal) o colores pasteles, generando contraste estructurado en modos claro y oscuro.
Explora cómo interactúan los iconos corporativos en sus contenedores respectivos según el color de fondo de la interfaz (Modo Oscuro vs. Modo Claro) y la paleta de colores oficial.
Fórmula CSS:
color: var(--brand-accent); background-color:
rgba(var(--brand-accent-rgb), 0.1); border: 1px solid
rgba(var(--brand-accent-rgb), 0.2);
Fórmula CSS:
color: var(--brand-accent); background-color:
var(--brand-accent-light-flat); border: 1px solid
var(--brand-accent-border);
Variaciones oficiales de iconos sólidos para KonectaVox. Haz clic en "Copiar SVG" para obtener el código vector plano relleno.
Aunque Lucide Icons es una librería basada en trazos (outlines) por defecto, es posible utilizarlos en formato sólido/relleno de forma nativa en la web a través de dos métodos principales:
Para rellenar un icono utilizando la librería JS estándar de
Lucide, se debe aplicar el atributo
fill directamente en el
elemento contenedor o en la clase CSS utilizando Tailwind CSS
(fill-current):
<!-- Relleno con Tailwind --> <i data-lucide="shield" class="fill-current text-blue-500"></i> <!-- Relleno directo con atributo SVG --> <svg fill="currentColor" stroke="currentColor" ...> ... </svg>
Al importar los componentes de Lucide en React o Vue, puedes
pasar la propiedad fill para
forzar al componente a pintar el fondo del vector con el color
especificado:
// Importación en React
import { Shield } from 'lucide-react';
const MyComponent = () => (
<Shield fill="currentColor" className="text-blue-500" />
);
Guías visuales detalladas para la correcta maquetación de componentes, formularios, tablas y estados interactivos en los modos Claro y Oscuro.
Para portales públicos, landings informativas y documentación.
bg-slate-50 (#F8FAFC) a bg-white (#FFFFFF)
#FFFFFF), borde sutil con acento de marca Azul Profundo (border-brandBlue/20) y sombreado pesado
shadow-2xl.
bg-slate-100), bordes en Slate 200 (border-slate-200) con filas alternadas en Slate 50/50 (bg-slate-50/50).
bg-white), borde Slate 200 (border-slate-200). Focus: anillo y borde activo en Azul Profundo (focus:ring-brandBlue focus:border-brandBlue).
text-slate-700 / text-slate-500 / text-slate-400
(deshabilitado)
text-slate-450) u orientados al color de marca Azul Profundo.
text-brandBlue) para títulos principales (H1, H2, H3) para establecer
identidad. Subtítulos secundarios en Slate 800.
text-brandBlue). Hover: Transición suave, cambio a Azul Claro / Azul
Brillante (hover:text-[#2649AB]) y subrayado.
bg-brandBlue/10), texto e iconos en Azul Profundo (text-brandBlue) y borde sutil (border-brandBlue/20).
Predeterminado para aplicaciones SaaS, consolas de autogestión y dashboards.
bg-slate-950 (#020617) a bg-slate-900 (#0F172A)
#0F172A), borde con acento de marca en Verde Esmeralda (border-brandGreen/25) y sombreado pesado.
bg-slate-900), bordes en Slate 800 (border-slate-800) con filas alternadas con 40% y 10% de opacidad.
focus:ring-brandGreen focus:border-brandGreen) con anillo de enfoque activo.
text-slate-300 / text-slate-500 (deshabilitado)
text-slate-500) o activos en color Verde Esmeralda.
text-white) para óptima legibilidad. Opcionalmente acentuado o
destacado con Verde Esmeralda (#10B981).
text-brandGreen). Hover: Transición suave, cambio a Verde Claro / Esmeralda
Brillante (hover:text-emerald-350) y subrayado.
bg-brandGreen/10), texto e iconos en Verde Esmeralda (text-brandGreen) y borde sutil (border-brandGreen/20).
Ejemplos reales maquetados en HTML/Tailwind de cómo deben lucir y comportarse los elementos más comunes en ambos temas.
| Anexo | Estado | Llamadas |
|---|---|---|
| Anexo 101 | Activo | 142 |
| Anexo 102 | Offline | 89 |
Se agregará el anexo virtual a la cuenta y se aplicará el cargo prorrateado correspondiente en el mes en curso.
| Anexo | Estado | Llamadas |
|---|---|---|
| Anexo 101 | Activo | 142 |
| Anexo 102 | Offline | 89 |
Se agregará el anexo virtual a la cuenta y se aplicará el cargo prorrateado correspondiente en el mes en curso.
Sigue estas directrices técnicas para asegurar una transición fluida entre modos de interfaz y mantener el estándar de diseño B2B premium de KonectaVox:
Al alternar modos, guarda la preferencia del usuario en
localStorage. Agrega la
propiedad CSS
transition-colors duration-300 a
las etiquetas principales del DOM para suavizar el cambio de
colores y evitar el parpadeo blanco/oscuro inicial en carga.
Asegura un contraste mínimo de **4.5:1** (WCAG AA). Evita colocar textos en Slate 400 directamente sobre fondos claros, o textos oscuros sobre contenedores oscuros de Slate 800. Los placeholders de inputs deben conservar al menos el color Slate 500 en modo oscuro.
Evita incrustar múltiples SVGs inline idénticos repetidamente.
Carga la librería Lucide de forma diferida (defer) en scripts web o usa componentes dinámicos en React/Vue. Esto
reduce sustancialmente el peso del HTML inicial y optimiza el
SEO.
Demostraciones en vivo de cómo se renderiza la marca vectorizada en la interfaz web de la aplicación SaaS, tarjetas corporativas y productos promocionales.
4,281
98.4%
142
CTO & Fundador
|
KonectaVox
COMMUNICATIONS
|
Daniel Tito
CTO & Fundador
T:
+51 934 619 580
E:
daniel@konectavox.com
W:
www.konectavox.com
|
Los colaboradores pueden copiar el código HTML renderizado para pegarlo en sus clientes de correo (Gmail, Outlook, Mac Mail) manteniendo el formato visual corporativo intacto.