Manual de marca.
Sistema de diseño 2026
Todo lo necesario para tratar la marca Elev8 de forma coherente: logotipo, color, tipografía, componentes y principios. Úsalo como referencia para crear activos creativos, manuales y presentaciones.
01
Logotipo
Cuatro versiones oficiales, todas monocolor: horizontal oscuro, horizontal blanco, vertical negro y vertical blanco. No existe ninguna otra ni se admite el logo amarillo.
Usos correctos
- Usa solo los archivos oficiales monocolor; nunca reconstruyas el escudo.
- Deja una zona libre mínima igual a la altura visible del carácter «8» por cada lado.
- Usa la versión blanca solo sobre antracita o verde.
- Para el icono de navegador, usa el escudo negro de la variante vertical.
- Mantén siempre la proporción original.
Usos incorrectos
- No lo deformes, rotes, separes ni le añadas sombras o degradados.
- No lo recolorees: monocolor no significa elegir cualquier tinta.
- No uses el logo amarillo: queda fuera de las variantes oficiales.
- No lo pongas en verde sobre antracita, donde desaparece.
- No lo coloques sobre fotografía compleja o fondos de bajo contraste.
02
Color
Tres colores de identidad, dos auxiliares ligados a componentes y una pareja editorial restringida a redes y presentaciones. Cream domina la web, el verde es el único acento sobre claro y la antracita solo ocupa fondo en footer y manifiesto.
Identidad
Cream
--cream
Fondo dominante y continuidad. Referencia aproximada del 80 % de la interfaz
Antracita
--ink
Texto, estructura, acción principal y cierres oscuros. En web solo como fondo de footer y manifiesto
Verde
--verde
Único acento habitual, siempre sobre claro: acciones de sección, resultados y detalles significativos
Auxiliares de componente
Muted
--muted-warm
Texto secundario y metadata sobre claro
Tint
--tint
Fondo de tags y agrupaciones que necesiten una superficie suave
Editorial restringido · solo redes y presentaciones
Verde Profundo
--verde-deep
Fondo del modo editorial en posts, carruseles y slides
Amarillo
--amarillo
Titulares y cifras sobre verde profundo. Nunca en web
Modos cromáticos
Cada pieza elige un solo modo. Base clara: cream de fondo, antracita para leer y verde para acciones. Footer o manifiesto: fondo antracita, texto cream y logo blanco, sin verde encima. Editorial de impacto: verde profundo con amarillo, solo en posts, stories, carruseles y slides.
El amarillo nunca aparece en la web ni convive con el verde #166B50 en la misma pieza. No se usa lima #E2FB7A.
Contraste
| Antracita / Cream | 14,37:1 | Texto principal |
| Verde / Cream | 5,87:1 | Acento o acción |
| Verde / Tint | 5,78:1 | Tags del sistema |
| Muted / Cream | 5,11:1 | Texto secundario |
| Muted / Tint | 5,04:1 | Texto secundario dentro de un componente con Tint |
| Cream / Antracita | 14,37:1 | Lectura en oscuro |
| Amarillo / Verde Profundo | 8,06:1 | Modo editorial |
| Verde / Antracita | 2,45:1 | Prohibido por marca |
Referencia WCAG 2.2: 4,5:1 en texto normal y 3:1 en texto grande. Comprueba opacidades e imágenes en su contexto real.
Colores retirados y migración
Cream Alt
#EDEAE2 · --cream-alt
Cream, espacio y hairlines. Tint solo cuando el componente necesite superficie
Antracita Soft
#3A3630 · --anthracite-soft
Revisar cada uso: antracita para tinta sobre claro, cream para lectura sobre oscuro
Muted Light
#A09D98 · --muted-lt
Muted sobre claro. Cream para lectura sobre oscuro
Verde Texto
#0D5040 · --verde-txt
Verde principal para texto de acento sobre claro
Verde Tint
#C8EAE0 · --verde-tint
Tint para el fondo de tags
Esta tabla sirve para revisar material existente. Estos valores no forman parte de la paleta activa y no aparecen en piezas, plantillas ni tokens nuevos. En la web la migración se hace por componentes: revisa dependencias, estados y contraste a tamaño real antes de retirar el valor antiguo.
03
Tipografía
Mulish para todo. JetBrains Mono solo para eyebrows, tags, estadísticas y metadata. El énfasis se logra por peso, nunca por color.
Mulish
PrincipalTitulares, cuerpo y navegación.
JetBrains Mono
MetadataEyebrows, tags, cifras y metadata de autor.
+2.500
Ecosistema VIKO
Training04
Iconografía
Phosphor Icons en peso Regular. Trazo fino y geometría limpia. Nunca robots, cerebros, redes neuronales, rayos ni hologramas.
Librería: @phosphor-icons/react · peso regular. Consulta el catálogo completo en phosphoricons.com.
05
Escala tipográfica
Jerarquía por tamaño y peso. Un único color por titular.
Display
80 / 44 px · Mulish 900 · 1,02 · -0,04 em
AI Adoption Partner
H1
64 / 40 px · Mulish 900 · 1,08 · -0,04 em
Empresas que trabajan con IA
H2
44 / 32 px · Mulish 900 · 1,15 · -0,03 em
Construimos formas de trabajar
H3
28 / 24 px · Mulish 800 · 1,2 · -0,025 em
Formación sobre tu negocio real
Lead
22 / 20 px · Mulish 500 · 1,6
Formamos, asesoramos y construimos la IA que cada empresa necesita.
Cuerpo
18 / 16 px · Mulish 400 · 1,65
Criterio, práctica y aplicación inmediata sobre los casos del equipo.
Navegación
16 px · Mulish 500 · 1,2
Servicios · Casos · Cursos
Botón
16 px · Mulish 800 · 1,2
Hablemos
Metadata
14 px · Mono 400 · 1,4
23 de septiembre de 2026 · 6 min
Eyebrow permitido
14 px · Mono 500 · 0,16 em · mayúsculas
Ecosistema VIKO
Tag breve
12 px · Mono 500 · 0,10 em · mayúsculas
Training
06
Retícula y espacio
El espacio organiza y la línea delimita. Cada soporte tiene su retícula y todas las medidas se repiten en los componentes.
Web escritorio
12 columnas · contenido hasta 1200 px · márgenes mínimos 32 px
Gutter 24 px · sección 80–112 px
Web móvil
4 columnas · margen 20 px · tarjetas apiladas
Gutter 16 px · sección 40–64 px
Slides 16:9
6 columnas · margen 5 % del ancho
Gutter 2 % del ancho
Post 1080 × 1350
4 columnas · margen 72 px
Gutter 24 px · revisar recorte del canal
Documento
Una columna principal · segunda para comparación breve
Márgenes 18–22 mm
Escala de espaciado · px
8 px entre icono y etiqueta, 16 entre título y descripción, 24 entre grupos y 32 o más entre módulos. Padding de tarjeta: 32 px en escritorio y 24 en móvil.
07
Componentes
Botones en pill, tarjetas con borde superior verde de 3px, tags de esquinas 4px. Sin sombras: la separación es por hairline de 1px.
Botones · pill 999px · Mulish 800
Tags · esquinas 4px · Mono
Tarjeta · radio 6px · borde superior verde 3px
Formación sobre tu negocio real
Programas a medida, aplicados a los casos reales de tu equipo.
Output: equipos que cambian su forma de trabajar.
Radios
- 0px · secciones y grids
- 4px · tags
- 6px · tarjetas e inputs
- 24px · borde superior de panel apilado
- 999px · botones
Separación
Nada de sombras ni cajas flotantes. Las secciones y bloques se separan con una línea de 1px:
hairline · rgba(20,20,20,.09)