(Brand and web)
Vanguard Academy
Brand and web for a Spanish-language cybersecurity school.
The challenge
A new academy that had to sound approachable in a cold, technical sector, without losing rigour.
The solution
A brand that feels like a video game, with levels, challenges and a cyberpunk look, on top of an orderly system that brings the rigour.
The result
A brand you get at a glance and a website that is already collecting the waiting list for the first students.
(01)
Identity
A broken tag that signs off like an attacker.
The look comes from neon, glitches and hacked terminals. The symbol is a broken closing tag, the signature left by whoever breaks into a system, and the V and the A hide in its negative space.
Deliverables Art direction · Logo and versions · Palette and typefaces · Iconography · Brand guidelines
An almost black background and a green that only shows up where there's action. The accents organise the rest.
Main
- Matrix GreenAction#03E21D
- Carbon BlackBackground#0B080C
- Carbon WhiteText#FAFAFA
Accents
- Electric BlueAccent#3B9EFF
- Cyber PinkAccent#EC4899
- Amber OrangeAccent#E36B02
- Edgerunner PurpleAccent#8B5CF6
Headings
Orbitron
Para los que entran primero
Interface
Barlow Semi Condensed
Ciberseguridad aplicada al mundo real
Text
Exo 2
Laboratorios, retos y un portfolio verificable
Code
Courier New
> acceso: ok
(02)
Applications
The brand off the screen.
Cards and merchandise for the team and the community, always on dark and with just the right touch of green.
Deliverables Business cards · Merchandise
(03)
Web
A landing page built to convert.
It's static, with no CMS, and the whole journey leads to the early access form. For a cybersecurity academy the website had to be secure too, so we checked it for vulnerabilities. It's also accessible: you can enlarge the text or switch to a dyslexia-friendly font.
Deliverables Landing page · UX/UI design · Web development · Lead generation · Security · Accessibility
1 goal
Getting visitors to leave their details in the early access form.
Join
Always at hand in the menu and on the homepage, and it goes straight to the form.
Secure
Vulnerability review, strict security headers and a bot-protected form.
Static
Our own HTML, CSS and JavaScript, with no CMS or templates.
Dyslexia
Adjustable text size and the Sylexiad font on every page.
100
Accessibility
Google Lighthouse score: contrast, labels and keyboard in order.
Scroll inside each screen
View live website ↗ (opens in a new tab)“The branding took us by surprise. You've managed to make something visually simple carry a really powerful meaning. The broken closing tag, the V and the A hidden in the negative space, the idea of the attacker's signature... it all fits together and makes so much sense for what Vanguard is.”
Blanca Amorim, CEO and co-founder · Vanguard Academy
Team and credits
| Service | Lead | Support |
|---|---|---|
| Logo and iconography | Odei Siruela | — |
| Branding | Odei Siruela | — |
| Brand guidelines design | Jota Reyes | — |
| Art direction | Odei Siruela | Xuri FentonOddity |
| Web design and development | Odei Siruela | — |
Shall we talk?
Tell us about your project.
It could be a brand, a website, photos or all of it at once. We'll listen and tell you how we'd go about it.