Brand Guidelines
El sistema de diseño que mantiene coherente la identidad de Veldrion en todos los puntos de contacto — sitio web, materiales de marketing, portales y comunicaciones de equipo.
Logo
El logotipo de Veldrion combina un símbolo en "V" con una tipografía personalizada. Existen cuatro archivos oficiales — dos versiones de forma, cada una en variante clara y oscura.
Símbolo — V-mark
Brand color · fondo claro
Blanco · fondo oscuro / fotografía
Blanco · sobre naranja de marca
Negro · materiales impresos
Wordmark completo
Fondo blanco / claro
Fondo oscuro / fotografía
| Elemento | Archivos | Cuándo usar |
|---|---|---|
| V-mark principal | veldrion-v-mark.svg · -white · -black |
Favicon, app icon, redes sociales, espacios reducidos (<140px) |
| Wordmark completo | logo-black.svg · logo-white.svg |
Navbar, documentos, presentaciones — donde haya espacio horizontal |
Uso correcto
V-mark brand color sobre fondo blanco o muy claro. Contraste mínimo 4.5:1.
V-mark blanco sobre fondo oscuro, navy o fotografía con overlay.
V-mark blanco sobre naranja de marca — único caso donde se usa blanco sobre brand.
No usar el logo con baja opacidad, filtros, sombras ni efectos de ningún tipo.
Rotar, distorsionar, o cambiar las proporciones del logo.
Reemplazar la tipografía del wordmark con otra fuente.
Separar el símbolo "V" del wordmark "Eldrion" en ningún contexto de marca.
Cambiar el color del símbolo "V" — siempre es #dd5000.
Wordmark completo digital: 140px de ancho mínimo · Impresión: 30mm.
Por debajo del mínimo del wordmark, usar solo el V-mark.
Color
Un único acento naranja sobre una base casi monocromática. El naranja debe aparecer con moderación — menos del 5% de los píxeles en pantalla — para conservar su impacto.
Paleta de marca
Overlays oscuros — hero & dark UI
Grises neutros
Semánticos — corporativos
Regla del naranja
Tokens CSS
Tipografía
Geist Sans para UI y texto, Geist Mono para código y etiquetas técnicas. Sin mezclar otras familias tipográficas.
abcdefghijklmnopqrstuvwxyz
0123456789 .,;:!@#&
abcdefghijklmnopqrstuvwxyz
0123456789 .,;:!@#&
Escala tipográfica
Reglas de uso
Geist Sans y Geist Mono. No sustituir con Inter, Roboto, Arial, ni ninguna otra familia — aunque sean similares.
400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold). No usar 300 ni 800+ en elementos de UI.
La itálica solo aplica en citas textuales dentro del copy (ej. escenarios en cards de industria). Los títulos, eyebrows y botones siempre son en roman.
Para devs: importar Geist desde Google Fonts con family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500. En producción (veldrion-web) se carga via paquete npm geist. La familia es idéntica; los archivos de fuente pueden diferir mínimamente entre pesos.
Componentes
Los componentes base del sistema. Cada uno tiene variantes estrictas — no agregar nuevas sin consenso.
Máximo un botón brand (naranja) por sección visible. El botón secundario siempre es outline u outline-on-photo.
Sentence case. "Consulta Gratuita", "Ver Soluciones", "Contáctanos". Sin signos de exclamación. Sin emojis. Sin mayúsculas totales.
Fondo blanco · border 1px #e4e4e7 · border-radius 8px · shadow-sm en reposo · shadow-lg en hover. Sin colores de acento en el borde. Sin sombras de color de marca.
Al hacer focus, el borde cambia a #dd5000 con ring de rgba(221,80,0,.18). Nunca usar el azul por defecto del browser ni el ring genérico de shadcn.
Iconografía
Lucide exclusivamente. Stroke 2px, round caps, currentColor. Sin iconos rellenos, sin PNG, sin icon fonts, sin emojis.
fg-muted para íconos decorativos · brand para íconos de acción o en tarjetas de servicio · white cuando el fondo es oscuro.
No usar Font Awesome, Heroicons, Material Icons ni cualquier otra biblioteca. No usar PNGs ni SVGs con rellenos de color múltiple. No usar emojis como sustitutos de íconos en ninguna interfaz.
Espaciado & Tokens
Escala de 4px. Todos los espaciados deben ser múltiplos de 4. Usar siempre los tokens CSS — nunca valores arbitrarios.
Escala de espaciado
Border radius
Sombras
Las sombras siempre son negras con baja opacidad. Nunca usar shadow naranja (shadow-brand) fuera de elementos explícitamente diseñados para ello — como el botón flotante de WhatsApp.
Voz & Tono
Español primero. Formal pero cercano. La marca habla de "tu empresa" — directa, orientada a beneficios, sin jerga apilada.
Nombramos entregables concretos: "infraestructura TI", "soluciones cloud", "ciberseguridad". Sin acrónimos sueltos sin definir.
Tuteamos al lector ("tu empresa", "tu negocio"). Nunca "usted". Nunca exclamaciones ni tono publicitario.
Los títulos combinan una noun phrase con un resultado: "Servicios y Consultoría de TI para tu Empresa". El beneficio va al final.
Copy de ejemplo
Reglas de capitalización
| Elemento | Regla | Ejemplo |
|---|---|---|
| Headings / títulos | Primera palabra + sustantivos propios | Nuestros servicios · Sobre Veldrion |
| Eyebrows | TODO EN MAYÚSCULAS · letra-espaciado | NUESTRAS SOLUCIONES |
| Botones CTA | Sentence case, excepciones propias | Consulta Gratuita · Ver Soluciones |
| Nav links | Primera letra mayúscula | Servicios · Contacto |
| Badges UI | Sentence case | 99.9% Uptime · Soporte 24/7 |
| Copy de cuerpo | Puntuación española estándar | Sin doble espacio. Punto final en párrafos. |
| Signos prohibidos | — | Sin ! ni ? al inicio. Sin 🚀 ni emojis. |
Patrones de copy reusables
Dark Mode
Dark mode está implementado y tokenizado en el repositorio. La pregunta no es si existe, sino cuándo y cómo aplicarlo.
Tokens dark mode
El sitio web (veldrion.com) usa dark mode como opción manual activada por el usuario via toggle — no automático por preferencia del sistema. El portal (hub.veldrion.com) puede ser dark-first.
#dd5000 es el mismo en light y dark. Solo se ajusta el tint: rgba(255,107,43,.12) en dark vs rgba(221,80,0,.08) en light.
Las fotografías de hero. Los logos de partners. El logo en fotografía. Estos elementos son siempre sobre overlay oscuro — son compatibles por diseño, no requieren variante dark.
Para implementar: el toggle de dark mode aplica la clase .dark en <html>. Todos los tokens en colors_and_type.css tienen su contraparte en .dark { ... }. En Next.js se gestiona con next-themes.
Evolución de marca
Hacia un posicionamiento tech corporativo más sólido. Estos cambios son evolutivos — no rompen la identidad actual, la elevan.
Migrar de tonos cálidos/neutros a fotografía con temperatura de color fría (5500–6500K), ligeramente desaturada. Ambientes de datacenter, LED azul/blanco, infraestructura moderna. Sin dorado ni calidez.
Geist se mantiene, pero aumentar el uso de Geist Mono en elementos UI de soporte — métricas, badges técnicos, etiquetas de datos, uptime counters. Da lectura de "sistema vivo".
Reducir el radio por defecto de 8px a 6px en cards y contenedores. Mantener 8px solo en botones. Más anguloso = más técnico. Los badges de servicio pueden bajar a 4px.
Lo que no cambia: el naranja `#dd5000`, el logo, la voz y tono, y la estructura de layout. La evolución es en densidad visual, temperatura de fotografía y peso tipográfico — no en identidad de marca.
Veldrion AI Agency
Una submarca orientada a inteligencia artificial aplicada al negocio. Comparte el V-mark y los valores de Veldrion, pero con una identidad visual propia — más oscura, más futurista, diferenciada.
Paleta — AI Agency
Regla de convivencia: El naranja #dd5000 de Veldrion y el índigo #6366f1 de AI Agency nunca aparecen juntos en la misma pantalla. Cada contexto usa un solo acento.
Tokens CSS — AI Agency
Componentes — AI Agency
Reglas de submarca
AI Agency usa el mismo V-mark de Veldrion — siempre en blanco sobre fondos oscuros. El wordmark se escribe "Veldrion AI Agency" (no solo "AI Agency"), con "AI Agency" en Geist Mono como subtítulo en índigo.
AI Agency siempre presenta su interfaz en modo oscuro. No existe light mode para esta submarca — el fondo base siempre es #09090b.
El naranja #dd5000 de Veldrion principal y el índigo #6366f1 de AI Agency nunca conviven en el mismo layout. Son acentos exclusivos de cada contexto.
Mismo tono: formal, técnico, beneficio-led, sin exclamaciones. La diferencia es el vocabulario: "automatización", "agentes", "workflows inteligentes", "LLMs" — términos que no aparecen en Veldrion principal.
Fuente del repo: Curlias/veldrion-web