Landing page · Featured · 2024
V5G Brand Guidelines.
A brand at 5G speed.
presentsAdmit one
Act I
The challenge
A brand guide is only useful if it can’t drift from the real brand. So instead of pasting logo images and hoping people follow the rules, I made the logo a piece of code and rendered every lockup, size rule, and color example straight from that one source of truth.
Act II
What I built
A brand-guidelines site for V5G, an O-RAN 5G simulation platform. The centrepiece is the logo: a code-drawn parametric React SVG that acts as the single source of truth for every lockup, size rule, and color treatment on the page.
Intermission, the demo
The product, playing itself
the service itself, drag the dot between the wireframe the project started from and the shipped site
The cast
What actually makes it work
Read the card, then flip it to watch the mechanism run.
0x01
Logo as parametric React SVG
One component renders four lockups with per-path stroke-drawing and color props, so every guideline example on the site draws from a single source of truth.
how it works
Logo as parametric React SVG
0x02
Brand rules encoded as JSX
Minimum-size and exclusion-zone diagrams are rendered from code, not pasted as images, so the rules can’t drift from the mark.
how it works
Brand rules encoded as JSX
0x03
Dual-theme presentation
Navy-on-green and green-on-navy treatments stay legible in both light and dark modes.
how it works