ChromaShifter
A mobile game UI where oil paint pigments are weapons, shields, and the fabric of reality. Every mechanic born from a classical oil painter's sacred twelve-color palette.
An ink-wash combat language for mobile.
ChromaShifter is a concept for a mobile action game where combat revolves around hue-shifting your character's ink signature — each color family unlocking different elemental attacks. The design challenge was building a HUD and menu system that felt cinematic and readable under fast gameplay.
The visual direction fuses two reference worlds: the spare, ink-washed landscapes of Ghost of Tsushima, and the high-contrast panel compositions of Tite Kubo's Bleach manga. The result is a design language that reads as simultaneously ancient and kinetic.
Mobile game UIs fail in two directions.
They clutter the viewport with HUD elements the player can't process during action, or they strip so much back that vital feedback disappears. The brief: design a HUD that conveys color state, health, and ability cooldowns with zero reading friction — and that survives players with deuteranopia or protanopia.
- —Too much HUD → cognitive overload during action
- —Color-only feedback → fails colorblind players
- —Generic mobile patterns → breaks game immersion
- —No hierarchy → player loses critical info
- —3 persistent HUD elements maximum
- —Every signal needs shape + color redundancy
- —Ink-wash aesthetic must survive fast gameplay
- —WCAG AA contrast on all interactive elements
Four phases from research to validation.
Competitive Analysis
Studied 12 mobile action games. Mapped every HUD failure mode. Benchmarked Ghost of Tsushima and Bleach mobile for visual language reference points.
Ink-Wash Aesthetic Development
40+ Procreate sketches defining the glyph vocabulary. Established the five elemental color families: Crimson, Void, Jade, Amber, and Frost.
60+ Component Library
Full Figma component system — HUD elements, menus, character select, ability cards. Variable tokens driving the 5-state color family system.
Prototype & User Testing
Interactive Figma prototype (80+ screens). Tested with 8 gamers across 3 accessibility profiles. 40% improvement in HUD readability vs baseline.
From title screen to mid-combat HUD.
All screens built as CSS art — representative of the Figma prototype's visual direction.
The Sacred 12 — mechanics as palette.
Every UI color maps directly to a real oil paint pigment from the designer's studio palette. The game's HUD is the painter's palette — when you run out of Cadmium Red, your attack indicator drains red.
Don's actual oil painting palette — no Yellow Ochre, no Black. Alla prima technique, brush-only measurement.
What the design taught me.
Domain expertise is a design superpower
Classical oil painting knowledge informed every mechanic decision in ways no user research could replace. The HUD feels intuitive because it mirrors a real painter's mental model.
Complexity must feel earned, not given
Players unlock pigments progressively. The HUD starts with 3 slots, expands to 12. Every visual element scaled with player mastery.
Manga taught me negative space
Bleach's visual language — explosive action against stark white voids — directly inspired ChromaShifter's UI philosophy. Maximum contrast. Every element earns its place or it doesn't exist.
The ink wash principle
Ghost of Tsushima uses atmospheric depth through layers, not detail. ChromaShifter's UI follows the same rule: background elements breathe, foreground elements demand immediate attention.
See the full prototype.
80+ screens. Full navigation flows. Ability animations. Accessibility variant overlays. Available on request for hiring managers and studio art directors.