Brand & Visual Identity
Brief 2026
Guía de identidad visual para diseñadores, desarrolladores y colaboradores creativos de Innova Ingeniería Integral S.A.S.
Documento interno · Mayo 2026 · v1.0
01 · ContextoQuién es Innova Digital
INNOVA INGENIERÍA INTEGRAL S.A.S (marca comercial: Innova Digital) es una empresa colombiana con más de 6 años de trayectoria. Opera como un híbrido entre estudio creativo digital, laboratorio de innovación educativa, empresa de tecnología y consultora de transformación digital.
Lo que vende emocionalmente
| Capa | Promesa |
|---|
| Transformación | Convierte procesos tradicionales en experiencias digitales modernas. |
| Inmersión | No desarrolla "productos" — desarrolla experiencias interactivas memorables. |
| Acceso al futuro | Acerca tecnologías complejas (XR, IA, Web 3D) a instituciones y empresas. |
| Impacto social | Educación y sostenibilidad como propósito, no solo negocio. |
Servicios (taxonomía oficial)
| # | Línea | Incluye |
|---|
| 01 | 3D Web · VR · AR | Realidad virtual, aumentada, Web 3D interactiva, modelado y texturizado |
| 02 | E-learning · REDA | Ecosistemas TICs, Recursos Educativos Digitales, aulas virtuales, OVAs, microlearning |
| 03 | Software · Apps · Web | Software web, apps Android/iOS, diseño web, hosting, dominios |
| 04 | Audiovisual · Marketing | Producción audiovisual, animación 2D/3D, motion graphics, marketing digital |
Producto estrella: Aula Virtual + Nova AI
Plataforma Moodle en producción (aula.innovadigital.co) con asistente conversacional AI integrado llamado "Nova". Bilingüe ES/EN, con app móvil iOS/Android. Cursos activos: Seguridad Vial (K–5), OVAs, Castellano 3º, y didácticas matemáticas para la Nueva Escuela Mexicana (preescolar, primaria, secundaria).
Arquetipo de marca
El Innovador + El Visionario. Innova comunica futuro, exploración, transformación, inteligencia aplicada, aprendizaje inmersivo y evolución digital. No es una marca "corporativa fría". Debe sentirse: tecnológica, humana, creativa, educativa, cinematográfica, futurista y confiable.
Posicionamiento ideal
"Diseñamos ecosistemas digitales inmersivos que transforman la manera en que las personas aprenden, interactúan y evolucionan."
Canales oficiales
| Canal | URL / handle |
|---|
| Web | innovadigital.co |
| Aula virtual | aula.innovadigital.co |
| Teléfono | +57 302 461 4515 |
| YouTube | @innovaingenieriaintegral5788 |
| Instagram | @innova_ingenieria_integral |
| Facebook | facebook.com/profile.php?id=100085449663188 |
02 · ColorPaleta de marca
Azul primario — anclado al logo
El azul #1878F0 proviene directamente del logo y es la única tinta de marca real. Toda la identidad visual gira alrededor de este color. Dos companions lo acompañan: #B8D8F8 (soft, para fondos claros) y #0A2A56 (ink, para texto sobre superficies claras).
Acentos secundarios
Se usan con moderación. Cada acento tiene un rol semántico claro.
Cyan
#00C8F0
data · XR · live
Purple
#6E5BFF
creativo · multimedia
Neon
#5EFFB1
success · live
Coral
#FF6E5A
warm · excepcional
Dos canvas igualmente válidos
Light (default) — friendly, educativo, accesible
Dark (cinematic) — inmersivo, premium, ideal para hero, XR, casos destacados
Texto — escalas de foreground
| Token | Sobre light | Sobre dark | Uso |
|---|
| fg-1 | #0A2A56 | #F5F7FF | Títulos, texto primario |
| fg-2 | #36456A | #C2C9E4 | Body, párrafos |
| fg-3 | #6B7794 | #8A93B8 | Captions, metadatos |
| fg-4 | #9AA4BD | #5B6388 | Placeholder, disabled |
Semánticos
| Estado | Color | Background | Uso |
|---|
| Success | #1FB877 | #E5F8EF | Confirmación, "live", publicado |
| Info | #00C8F0 | #E0F7FD | Tips, enlaces, nuevo |
| Warning | #E89A2B | #FFF4E0 | Atención, borrador |
| Danger | #E5394F | #FCE6E9 | Error, destructivo |
Gradientes
Aurora · hero
Blue rise · CTA
Soft · paper
Deep space
Glow · halo
Spot light
03 · TipografíaSistema tipográfico
La tipografía oficial de Innova Digital es la familia Roboto (Android), cargada desde Google Fonts. Se usa Roboto Flex como variable font para display y Roboto estándar para body. Roboto Mono para código y datos.
Diseñamos experiencias
digitales inmersivas.
Roboto Flex · 900 · tracking −3.5% · leading 0.95 — para titulares grandes y héroes.
font-family: var(--innova-font-display) · 'Roboto Flex', 'Roboto', system-ui, sans-serif
| Rol | Familia | Peso | Tracking | Uso |
|---|
| Display | Roboto Flex / Roboto | 700 – 900 | −2.5 a −3.5% | Titulares, héroes, headlines |
| Body | Roboto | 400 – 500 | Normal | Párrafos, UI, descripciones |
| Body bold | Roboto | 700 | Normal | Emphasis, labels, botones |
| Mono | Roboto Mono | 400 – 600 | Normal | Código, tokens, KPIs, métricas |
| Eyebrow | Roboto | 700 | +0.22em | Labels de sección, ALL CAPS |
Escala tipográfica
| Token | Size | Leading | Uso |
|---|
| text-xs | 12px | 1.4 | Tags, footnotes |
| text-sm | 14px | 1.4 | Meta, captions |
| text-base | 16px | 1.5 | Body default |
| text-md | 18px | 1.5 | Lead paragraphs |
| text-lg | 22px | 1.3 | h6, subtítulos |
| text-xl | 28px | 1.2 | h5 |
| text-2xl | 36px | 1.15 | h4 |
| text-3xl | 48px | 1.1 | h3 |
| text-4xl | 64px | 1.0 | h2, hero mobile |
| text-5xl | 88px | 0.95 | h1, hero desktop |
| text-6xl | 120px | 0.95 | Display cinematic |
04 · Espaciado y formaSpacing, radii, sombras, motion
Espaciado — base 4px
| Token | Valor | Uso típico |
|---|
| space-1 | 4px | Gap mínimo entre ítems inline |
| space-2 | 8px | Padding de chips/badges |
| space-3 | 12px | Gap entre cards compactos |
| space-4 | 16px | Padding de inputs, cards pequeños |
| space-5 | 24px | Gutter de grids, padding estándar |
| space-6 | 32px | Padding de cards, gap entre secciones menores |
| space-7 | 48px | Separación de bloques |
| space-8 | 64px | Padding vertical de secciones |
| space-9 | 96px | Padding de hero, sections grandes |
| space-10 | 128px | Padding cinematic, closings |
Radios de borde — generosos, eco del logomark circular
| Token | Valor | Uso |
|---|
| radius-xs | 6px | Code chips, small tags |
| radius-sm | 10px | Inputs, selects |
| radius-md | 14px | Default · cards compactos, badges |
| radius-lg | 20px | Cards estándar |
| radius-xl | 28px | Cards grandes, modals |
| radius-2xl | 40px | Hero containers, overlays |
| radius-pill | 999px | Botones, pills, badges |
Sombras / elevación
| Nivel | Light | Uso |
|---|
| sm | 0 1px 2px rgba(10,42,86,.08) | Listas, badges |
| md | 0 12px 32px -12px rgba(10,42,86,.18) | Cards, dropdowns |
| lg | 0 32px 64px -24px rgba(10,42,86,.25) | Modals, overlays |
| glow-blue | 0 0 0 1px rgba(24,120,240,.4), 0 16px 40px -8px rgba(24,120,240,.45) | CTA destacado, hover de cards |
En dark canvas las sombras usan rgba(0,0,0, …) en lugar de rgba(10,42,86, …).
Motion / animación
| Curva | CSS | Uso |
|---|
| ease-out | cubic-bezier(0.22, 1, 0.36, 1) | Default para apariciones, hovers, transiciones |
| ease-in-out | cubic-bezier(0.65, 0, 0.35, 1) | Sliders, scroll-linked |
| spring | cubic-bezier(0.34, 1.56, 0.64, 1) | Arrivals, pops, elementos nuevos |
| Duración | Valor | Uso |
|---|
| fast | 120ms | Micro-interactions (hover color) |
| base | 220ms | Default (buttons, inputs, toggles) |
| slow | 420ms | Panels, drawers, modals |
| cine | 900ms | Cinematic reveals, hero animations |
05 · LogoUso del logo
Archivos oficiales
| Archivo | Uso |
|---|
| logo-color-v2.png | Full color sobre fondos claros (default) |
| logo-white-v2.png | Sobre fondos oscuros (default) |
| logo-black.png | Negro sólido sobre claros (alternativa) |
| logomark.svg | Solo el mark, vectorial (decoración) |
Reglas de uso
- Espacio de respeto: ¼ del ancho del mark alrededor de todo el logo.
- Tamaño mínimo digital: 18px de alto.
- Default para headers: 24–32px.
- Hero / cover: 48px+.
Prohibiciones
- Nunca recolorear fuera de las 3 versiones oficiales (color, blanco, negro).
- Nunca distorsionar (estirar, comprimir).
- Nunca rotar más de ±5°.
- Nunca rellenar con gradiente.
- Nunca colocar sobre fondos que comprometan la legibilidad.
Logomark como decoración
El mark (sin wordmark) puede usarse como elemento decorativo grande y flotante en héroes y cierres de deck. Siempre con sombra azul suave detrás: drop-shadow(0 24px 80px rgba(24,120,240,.55)).
06 · Fondos y motifsTexturas visuales de marca
Grid wireframe
Líneas a 24px o 64px, opacidad 4–7%. Símbolo de "construir el futuro". Se usa en héroes, secciones dark y como overlay sutil en slides.
Aurora mesh
Tres blobs (blue / cyan / purple) con filter: blur(40–60px). Para hero, manifesto, closing. Cinematográfico, nunca saturado.
Spotlight
Un solo radial-gradient azul concentrado, para escenas donde un mark o titular debe brillar.
Qué evitar
- Patrones repetidos densos
- Texturas de papel
- Gradientes púrpura-rosa "AI slop"
- Fondos saturados sin aire
07 · EstadosInteracción y feedback
| Estado | Tratamiento |
|---|
| Hover (buttons primarios) | translateY(−1px) + color más claro (#3A8FFF) |
| Hover (cards) | translateY(−4px) + borde → #1878F0 + shadow glow-blue |
| Press | scale(0.98) + color más oscuro (#0F5EC8) |
| Focus | box-shadow: 0 0 0 3px rgba(24,120,240,.28) — anillo azul translúcido |
| Disabled | Opacity 0.5 + cursor: not-allowed |
| Active link | Color #1878F0 + background #EAF1FB (pill) o underline 2px |
08 · IconografíaLucide · sistema de íconos
Innova usa Lucide (lucide.dev) como sistema oficial de iconografía. Stroke 1.75px, esquinas redondeadas, sin relleno, color hereda currentColor.
Vocabulario recurrente
| Concepto | Ícono Lucide |
|---|
| VR / 3D Web | box, glasses |
| AR | scan, qr-code |
| E-learning / OVA | graduation-cap, book-open |
| Software | cpu, code, terminal |
| Audiovisual | play-circle, video, film |
| Marketing | zap, target, megaphone |
| AI (Nova) | sparkles, bot |
| Web | globe, monitor |
| Personas | users, user-circle |
| Idioma | languages |
| App móvil | smartphone |
| CTA / navegación | arrow-right, arrow-up-right |
Emoji: no se usan en superficies oficiales (marketing, decks, producto). Para acentuar conceptos se usan íconos Lucide o glyphs tipográficos (→, ·, ⌕).
09 · Voz y tonoCómo habla la marca
Persona
Plural inclusivo (nosotros) hablando a un cliente (tú, informal). Profesional cercano, nunca institucional gubernamental.
Casing
- Títulos: sentence case ("Diseñamos experiencias digitales."), nunca Title Case
- Eyebrows: MAYÚSCULAS + letter-spacing 0.22em ("SERVICIOS", "PORTAFOLIO")
- Numeración: dos dígitos con separador ("01 · 02 · 03")
Vocabulario propio
Preferir: experiencia · multimedia · realidad inmersiva · ecosistema · aprendizaje · animación · interactividad · interdisciplinario · OVA · REDA
Reglas editoriales
- Frases cortas y aspiracionales — máximo 18 palabras por frase
- Apertura y cierre con visión, nunca con datos institucionales
- Servicios siempre agrupados en los 4 ecosistemas, nunca como lista plana
- CTAs humanas: "Hablemos de tu proyecto", "¿En qué te podemos ayudar?", "Solicitar cotización"
- Nunca sobreexplicar — el lector llena los espacios
Ejemplos
✓ Bien
"Diseñamos experiencias digitales inmersivas."
"Todo lo digital, bajo un mismo techo."
"Aula virtual con asistente AI integrado."
"¿En qué te podemos ayudar?"
✗ Evitar
"Somos una empresa líder en soluciones tecnológicas integrales que ofrece..."
"Nuestro portafolio incluye desarrollo de software, aplicaciones web, hosting, dominios..."
"Sinergia y valor agregado para potenciar..."
10 · LayoutReglas de composición
| Regla | Valor |
|---|
| Max-width contenido | 1280px (880px para texto largo) |
| Padding lateral (desktop) | 56px mínimo |
| Padding lateral (mobile) | 24px mínimo |
| Padding vertical (sections) | 120–160px |
| Gutter de grids | 24px |
| Header | Sticky, backdrop-filter: blur(20px), sobre rgba(255,255,255,.78) |
| Cards grid | 2 o 3 columnas (nunca 4 en web; 4 solo en slides 16:9) |
| Hero | Asimetría intencional: titular izquierda, mark/object grande sobresaliendo derecha |
Cards
| Propiedad | Light | Dark |
|---|
| Background | #FFFFFF o #F5F8FE | #0F1530 |
| Border | 1px solid #EAF1FB | 1px solid #182148 |
| Radius | 20–28px |
| Padding | 28–36px |
| Hover | translateY(−4px) + borde #1878F0 + glow-blue |
| Transition | 0.35s cubic-bezier(0.22, 1, 0.36, 1) |
Transparencia y blur
- Nav header: backdrop-filter: blur(20px) sobre rgba(255,255,255,.78)
- Glass chips sobre cards: backdrop-filter: blur(8px) + rgba(255,255,255,.18)
- Usar blur solo donde hay imagery o gradients vivos detrás — nunca sobre flat color
Imagery (vibe)
- Cinematográfica: 16:9 o cuadrada, foco poco profundo, mood azul/morado o b&w con tinte azul
- Mockups inmersivos: dispositivos VR/AR, dashboards en negro+azul, escenas con luz azul direccional
- Evitar fotos stock genéricas de business people con laptops y handshakes
11 · ComponentesElementos de UI
Botones
| Variante | Background | Color | Radius | Peso |
|---|
| Primary | #1878F0 + glow shadow | #fff | pill | Heavy — para CTA principal |
| Secondary | #EAF1FB | #1878F0 | pill | Medium — acciones secundarias |
| Ghost | transparent | #1878F0 | pill | Light — enlaces, "saber más" |
| Ghost dark | rgba(255,255,255,.06) + border | #fff | pill | Para sobre fondos oscuros |
| Outline | transparent + border #C5D2E8 | #0A2A56 | pill | Low emphasis, cancelar |
| Disabled | #EAF1FB | #9AA4BD | pill | No interactivo |
Sizes: SM (7px 14px, 12.5px), MD (13px 22px, 14.5px), LG (16px 28px, 16px).
Inputs / formularios
- Border: 1.5px solid #DDE6F4, radius 12px
- Focus: border → #1878F0, box-shadow → 0 0 0 3px rgba(24,120,240,.18)
- Error: border → #E5394F, box-shadow → 0 0 0 3px rgba(229,57,79,.18)
- Checkboxes: 18×18, radius 6px, checked → #1878F0
- Radio: igual pero radius 50%
- Toggle: 36×22px, track → #DDE6F4 / #1878F0, thumb blanco con shadow
Badges / chips
- Radius pill (999px), padding 5px 11px
- Cada color tiene un bg tinted (10–15% de opacidad) + color saturado para texto
- Filter chips: background #F5F8FE, border #DDE6F4; active → #1878F0 con texto blanco
Nav header
- Sticky, z-index 50, backdrop blur 20px
- Logo a la izquierda, links en pills, CTA y search a la derecha
- Light: bg rgba(255,255,255,.78), border-bottom #EAF1FB
- Dark: bg #0A1024, border-bottom #182148
12 · ArchivosIndex del design system
| Archivo | Descripción |
|---|
| colors_and_type.css | Fuente única de verdad: 50+ CSS custom properties (color, tipo, espacio, radii, sombras, motion) |
| README.md | Documentación técnica completa |
| SKILL.md | Cargable como skill en Claude Code |
| assets/ | Logos oficiales (v1, v2, negro, mark SVG) |
| preview/ | 24 tarjetas HTML de previsualización (Design System tab) |
| ui_kits/marketing-website/ | Sitio completo: hero, servicios, aula+Nova, portafolio, clientes, CTA, footer |
| slides/ | Deck portafolio 1920×1080 — 6 slides con contenido real |