Guía de marca · Vanguard Academy · 2026
El sistema está comprometido.
La firma está dentro.
Una identidad construida desde el ataque. Para los que entran primero.
Descubrir
Una identidad construida desde el ataque. Para los que entran primero.
Este documento reemplaza al brief verbal. Todo lo que hay aquí — hex, SVGs, gradientes, tipos — es el asset real usado en vanguard.web (v1.5), no una aproximación. Úsalo como fuente única de verdad al construir el brandbook.
El símbolo nunca se recolorea libremente ni se separa de sus proporciones. Cada variante de formato ya está resuelta más abajo — usa la que corresponda, no la reconstruyas.
Botones, cards e iconos son SVG reales exportados del sitio en producción. Son vectoriales: puedes escalarlos sin pérdida de calidad para cualquier pieza impresa o digital.
Cada swatch trae su hex exacto — haz clic para copiarlo (en la web real). Las escalas extendidas (50→950) son para estados y fondos, no para color de marca principal.
El botón «Descargar assets» (arriba, siempre visible) trae un .zip con todos los SVG de esta guía listos para abrir en Illustrator o Figma.
El símbolo parte del closing tag — </> — el tag de cierre que en programación indica que un bloque está completo, cerrado, contenido. Un sistema que se protege a sí mismo. Aquí ese tag está roto. Alguien entró.
La barra central del símbolo está partida — con la energía de un impacto, casi un rayo, sin llegar a serlo. Eso es deliberado: un rayo es un símbolo de electricidad. Esto es un vector de ataque. La fractura precisa del momento exacto en que un sistema pasa de cerrado a comprometido.
Mira el hueco que deja la mitad izquierda del símbolo roto: las dos piezas forman una V en el espacio vacío entre ellas. La mitad derecha hace lo mismo con una A. No están dibujadas — las crea el vacío, el hueco que deja la fractura. En la cultura del hacking ofensivo, cuando comprometes un sistema lo marcas. Dejas tu firma dentro. Eso es exactamente lo que hay aquí: la tag de Vanguard Academy, escondida en el sistema caído.
Vanguard no forma analistas esperando detrás de un muro. Forma a los que revientan el muro antes que nadie — porque solo desde dentro se entiende exactamente qué está en juego cuando un sistema cae. Red team. Ofensiva. Entrar primero.
"El sistema más peligroso
no es el que ataca.
Es el que ya está dentro."
Filosofía de diseño · Vanguard Academy
La identidad funciona en cualquier fondo. El gradiente Matrix Green del acento permanece; el resto adapta su contraste al entorno sin perder legibilidad.
Sobre ultraviolet #0D0712
Sobre Edgerunner Purple
Monocromo · Carbon Grey 950 (impresión/merchandising)
Monocromo · Ultraviolet 950 (digital) sobre Matrix Green
Variantes de formato
App icon · Favicon
Variantes adicionales — usadas hoy en producción
Formatos extra del isotipo pensados para contextos muy específicos de interfaz — no son alternativas de marca, son recortes técnicos del mismo símbolo.
Brandmark mini
Logo nav
Hero móvil
Isotipo favicon
Favicon
Wordmark sin isotipo
Monocromo Carbon Grey 950
Monocromo Ultraviolet 950Estos SVG no son maquetas — son los assets exactos que renderiza el sitio en producción (v1.5). Trabaja sobre ellos directamente en el brandbook para garantizar fidelidad 1:1 con lo que ve el usuario.
Botones — variante rellena
Fill · Small
Fill · Medium
Fill · Wide
Fill · Wider
Botones — variante contorno
Line · Small
Line · Medium
Line · Wide
Line · Wider
Marco vectorial estilo "circuito" con esquinas cortadas — el relleno de color y el texto del botón se aplican en código, no forman parte del SVG.
Cards — marcos decorativos
Square
Horizontal
Vertical
Cada marco tiene una variante -mask.svg hermana (incluida en el .zip) que el equipo de desarrollo usa como clip-path para recortar imágenes dentro del contorno — el diseño no necesita tocarla, es solo referencia técnica.
Iconos de sección
Academy
Community
Labs
Portfolio
Vienen coloreados en #03E21D (Matrix Green) directamente en el archivo — no requieren tratamiento de color adicional al usarse sobre fondo oscuro.
La paleta principal son cinco colores que se combinan en degradados para crear diferenciación visual entre módulos, cards y secciones — sin romper la cohesión de la marca.
Colores principales
Cada color va en 3 paradas — claro · principal · oscuro — los mismos 3 tonos que usa la interfaz: claro para texto sobre fondo oscuro, principal para iconos y UI, oscuro para glows y bordes.
¿Cuál vive en el logo? Solo Matrix Green (el acento, #03E21D → #55FF64). El cuerpo usa Edgerunner Purple 50 (#F3F1FF), no el #E9E8F7 suelto del SVG original. En modo claro el logo se aplana a monocromo: Carbon Grey 950 (#0B080C) para impresión, Ultraviolet 950 (#0D0712) para digital. Electric Blue, Cyber Pink y Amber Orange no tocan el logo.
Combinaciones para módulos y secciones
conic-gradient(var(--orange), var(--pink), var(--purple)). Uso reservado, máximo una vez por vista.Escalas extendidas — los 7 colores del sistema, tono a tono
Tabla completa de los 7 colores que usa la interfaz — los 5 de acento más los 2 neutros de fondo (Carbon Grey y Ultraviolet) — con sus 11-12 tonos (50 → 950), hex, RGB y CMYK. Las filas resaltadas en verde son los tonos que la interfaz real usa hoy como token con nombre (--purple, --text-dim, --bg…). Las resaltadas en lila son decisiones de esta guía para el logo (cuerpo y versión de modo claro) — correctas y a usar, pero todavía no están escritas como variable CSS en el sitio. El resto son pasos intermedios de la escala, disponibles para estados, hover y fondos derivados.
| Paso | Muestra | Hex | RGB | CMYK | Token |
|---|---|---|---|---|---|
| 50 | #E5FFE6 | 229, 255, 230 | 10, 0, 10, 0 | ||
| 100 | #C6FFC9 | 198, 255, 201 | 22, 0, 21, 0 | ||
| 200 | #93FF9A | 147, 255, 154 | 42, 0, 40, 0 | --green-text | |
| 300 | #55FF64 | 85, 255, 100 | 67, 0, 61, 0 | ||
| 400 | #22F937 | 34, 249, 55 | 86, 0, 78, 2 | ||
| 500 | #03E21D | 3, 226, 29 | 99, 0, 87, 11 | --green | |
| 600 | #00B318 | 0, 179, 24 | 100, 0, 87, 30 | --green-text-dim | |
| 700 | #048718 | 4, 135, 24 | 97, 0, 82, 47 | ||
| 800 | #0A6A19 | 10, 106, 25 | 91, 0, 76, 58 | ||
| 900 | #0D5A1B | 13, 90, 27 | 86, 0, 70, 65 | ||
| 950 | #01320B | 1, 50, 11 | 98, 0, 78, 80 |
| Paso | Muestra | Hex | RGB | CMYK | Token |
|---|---|---|---|---|---|
| 50 | #E6F4FF | 230, 244, 255 | 10, 4, 0, 0 | ||
| 100 | #CCE9FF | 204, 233, 255 | 20, 9, 0, 0 | ||
| 200 | #99D4FF | 153, 212, 255 | 40, 17, 0, 0 | --blue-text | |
| 300 | #66BFFF | 102, 191, 255 | 60, 25, 0, 0 | ||
| 400 | #339AFF | 51, 154, 255 | 80, 40, 0, 0 | ||
| 500 | #3B9EFF | 59, 158, 255 | 77, 38, 0, 0 | --blue | |
| 600 | #0077E6 | 0, 119, 230 | 100, 48, 0, 10 | --blue-strong | |
| 700 | #0059B3 | 0, 89, 179 | 100, 50, 0, 30 | ||
| 800 | #004080 | 0, 64, 128 | 100, 50, 0, 50 | ||
| 900 | #00264D | 0, 38, 77 | 100, 51, 0, 70 | ||
| 950 | #001326 | 0, 19, 38 | 100, 50, 0, 85 |
| Paso | Muestra | Hex | RGB | CMYK | Token |
|---|---|---|---|---|---|
| 50 | #FDF2F8 | 253, 242, 248 | 0, 4, 2, 1 | ||
| 100 | #FCE7F3 | 252, 231, 243 | 0, 8, 4, 1 | ||
| 200 | #FBCFE8 | 251, 207, 232 | 0, 18, 8, 2 | --pink-text | |
| 300 | #F9A8D4 | 249, 168, 212 | 0, 33, 15, 2 | ||
| 400 | #F472B6 | 244, 114, 182 | 0, 53, 25, 4 | ||
| 500 | #EC4899 | 236, 72, 153 | 0, 69, 35, 7 | --pink | |
| 600 | #DB2777 | 219, 39, 119 | 0, 82, 46, 14 | --pink-strong | |
| 700 | #BE185D | 190, 24, 93 | 0, 87, 51, 25 | ||
| 800 | #9D174D | 157, 23, 77 | 0, 85, 51, 38 | ||
| 900 | #831843 | 131, 24, 67 | 0, 82, 49, 49 | ||
| 950 | #500724 | 80, 7, 36 | 0, 91, 55, 69 |
| Paso | Muestra | Hex | RGB | CMYK | Token |
|---|---|---|---|---|---|
| 50 | #FFF7ED | 255, 247, 237 | 0, 3, 7, 0 | ||
| 100 | #FFEDD5 | 255, 237, 213 | 0, 7, 16, 0 | ||
| 200 | #FED7AA | 254, 215, 170 | 0, 15, 33, 0 | --orange-text | |
| 300 | #FDBA74 | 253, 186, 116 | 0, 26, 54, 1 | ||
| 400 | #FB923C | 251, 146, 60 | 0, 42, 76, 2 | ||
| 500 | #E36B02 | 227, 107, 2 | 0, 53, 99, 11 | --orange | |
| 600 | #B45309 | 180, 83, 9 | 0, 54, 95, 29 | --orange-strong | |
| 700 | #9A3412 | 154, 52, 18 | 0, 66, 88, 40 | ||
| 800 | #7C2D12 | 124, 45, 18 | 0, 64, 85, 51 | ||
| 900 | #6B210F | 107, 33, 15 | 0, 69, 86, 58 | ||
| 950 | #431407 | 67, 20, 7 | 0, 70, 90, 74 |
| Paso | Muestra | Hex | RGB | CMYK | Token |
|---|---|---|---|---|---|
| 50 | #F3F1FF | 243, 241, 255 | 5, 5, 0, 0 | ◆ logo (cuerpo)reemplaza el #E9E8F7 suelto del SVG | |
| 100 | #E9E5FF | 233, 229, 255 | 9, 10, 0, 0 | ||
| 200 | #D4CCFF | 212, 204, 255 | 17, 20, 0, 0 | --purple-text | |
| 300 | #B8ACFF | 184, 172, 255 | 28, 33, 0, 0 | ||
| 400 | #A78BFA | 167, 139, 250 | 33, 44, 0, 2 | ||
| 500 | #8B5CF6 | 139, 92, 246 | 43, 63, 0, 4 | --purple | |
| 600 | #7C3AED | 124, 58, 237 | 48, 76, 0, 7 | --purple-strong | |
| 700 | #6D28D9 | 109, 40, 217 | 50, 82, 0, 15 | ||
| 800 | #4C1D95 | 76, 29, 149 | 49, 81, 0, 42 | ||
| 900 | #3B1678 | 59, 22, 120 | 51, 82, 0, 53 | ||
| 950 | #1E0A47 | 30, 10, 71 | 58, 86, 0, 72 |
| Paso | Muestra | Hex | RGB | CMYK | Token |
|---|---|---|---|---|---|
| 50 | #FAFAFA | 250, 250, 250 | 0, 0, 0, 2 | --text | |
| 100 | #F5F4F5 | 245, 244, 245 | 0, 0, 0, 4 | ||
| 200 | #E7E3E8 | 231, 227, 232 | 0, 2, 0, 9 | ||
| 300 | #D8D2DA | 216, 210, 218 | 1, 4, 0, 15 | --text-muted | |
| 350 | #BEB1C3 | 190, 177, 195 | 3, 9, 0, 24 | ||
| 400 | #A99DAE | 169, 157, 174 | 3, 10, 0, 32 | --text-dim | |
| 500 | #7E7283 | 126, 114, 131 | 4, 13, 0, 49 | ||
| 600 | #5A4E5F | 90, 78, 95 | 5, 18, 0, 63 | ||
| 700 | #453C49 | 69, 60, 73 | 5, 18, 0, 71 | ||
| 800 | #2A262B | 42, 38, 43 | 2, 12, 0, 83 | ||
| 900 | #1A161B | 26, 22, 27 | 4, 19, 0, 89 | ||
| 950 | #0B080C | 11, 8, 12 | 8, 33, 0, 95 | --bg-2también: logo modo claro · impresión / merchandising |
| Paso | Muestra | Hex | RGB | CMYK | Token |
|---|---|---|---|---|---|
| 50 | #4C369B | 76, 54, 155 | 51, 65, 0, 39 | ||
| 100 | #4A2895 | 74, 40, 149 | 50, 73, 0, 42 | ||
| 200 | #41248A | 65, 36, 138 | 53, 74, 0, 46 | ||
| 300 | #3A1E76 | 58, 30, 118 | 51, 75, 0, 54 | ||
| 400 | #381D67 | 56, 29, 103 | 46, 72, 0, 60 | ||
| 500 | #3D1E67 | 61, 30, 103 | 41, 71, 0, 60 | ||
| 600 | #391D57 | 57, 29, 87 | 34, 67, 0, 66 | ||
| 700 | #341E48 | 52, 30, 72 | 28, 58, 0, 72 | ||
| 800 | #271736 | 39, 23, 54 | 28, 57, 0, 79 | ||
| 900 | #120C1A | 18, 12, 26 | 31, 54, 0, 90 | --bg-3 | |
| 950 | #0D0712 | 13, 7, 18 | 28, 61, 0, 93 | --bgtambién: logo modo claro · contextos digitales |
Fondos
La tipografía no es decoración — es actitud. Cada familia tiene un rol funcional y de personalidad preciso. Tres cargan la identidad; la cuarta es un recurso puramente decorativo de alcance muy limitado.
Vanguard Academy opera en un sector donde la credibilidad no se declara — se demuestra. Esta identidad no pide que la crean. El logo es un sistema comprometido: quien lo entiende, ya sabe exactamente de qué va esto. Y eso vale más que cualquier promesa en una landing.
Un único paquete con todos los assets vectoriales mostrados en esta guía — sin capturas de pantalla, sin PNGs de baja resolución.