Cyberpunk Game UI Kit – One design system, four HUD themes

Action games ask a lot from their UI. The same system has to carry a quiet main menu, a dense loadout screen, a timed hacking minigame and a HUD that sits over a rain-soaked street without getting in the way.

This is a self-initiated kit I built in Figma to show how I'd set that up for an AAA team. It has around 55 components and variant sets: menu tiles, equipment slots, item tooltips, contract and quest rows, dialogue choices, breach code cells, health and ammo readouts, map pins, enemy nameplates and toasts. Type is Rajdhani for headings and Share Tech Mono for the readouts.

Every colour comes from a Theme token, so one switch moves the whole kit between Red, Cyan, Yellow and Green. A faction, a hacking state or a separate game can get its own colour without anyone redrawing a screen.

To prove the pieces work together I built 14 full screens, from vendor, inventory and contracts to breach protocol, quickhack scan, world map and the gameplay HUD. A Motion page holds the timing for menu open and close, breach boot and HUD boot, built on motion tokens and wired into a clickable prototype.