The complete interface layer for a mobile RPG: character and equipment screens, forging, refining and reforging flows, skill trees and a six-element class system — several hundred screens derived from one component library.
Original IP — Mobile RPG UI System — cover artwork
Artwork from our archive. High-resolution originals are available on request under NDA.
Production stills
The goal
What we set out to build.
RPG interfaces carry the most state of any mobile genre: one character screen has to express level, rarity, six equipment slots, element affinity, talents and upgrade paths without becoming unreadable at six inches. The real problem is information architecture, not decoration.
How we ran it
Defined the component library first — frames, slots, rarity states, currency bars, tab bars — before drawing a single screen.
Locked six element colours as tokens shared by UI and art, so a fire character reads as fire in the icon, the frame and the VFX.
Gave forging, refining and reforging three different layout archetypes — list, socket, wheel — so players never confuse them.
Sized every tap target and text run against a phone-at-arm’s-length test rather than a desktop mockup.
Shipped the library as prefabs with named states, so engineering builds new screens without filing new art requests.
Result
A complete, self-consistent UI system covering character, equipment, forging, refining, reforging, talents and classes.
New screens are assembled from existing components — the marginal cost of the next feature dropped sharply.
The same component library and token set now serve client casual titles.
Interface art, iconography and layout all produced in-house.
