← All work

Primal Tactica

Primal Tactica is a roguelike auto-battler built on Illuvium IP, in the lineage of Slay the Spire and TFT, headed to Steam. I led the game UI/UX across every player-facing surface alongside the brand work: logo exploration, brand guidelines, and the design system that holds the in-game and meta-game screens together.

Client Primal Tactica
Role Game UX/UI Designer
Services
Game UXProduct DesignBrand
Year 2025–2026
Primal Tactica landing screen

The brief

Primal Tactica is a single-player roguelike auto-battler heading to Steam. The remit covered every surface players touch: Battle HUD, roguelike map, card and rarity system, character select, augments, synergies, tooltips, win/loss flow, and the pregame scaffolding around each run. Alongside that sat the brand work: logo exploration, brand guidelines, and the design system that kept the in-game and meta-game screens consistent.

The problem space

The game pulls from three well-established genres at once. The autobattler positioning reads from TFT. The run structure reads from Slay the Spire and Last Flame. The card language pulls from Hearthstone and MTGA. Players arrive carrying different expectations from each, and the UI has to honour enough of every convention that nothing feels foreign, while staying unambiguous about the one thing the game actually is.

On top of that, the team is small, the timeline is tight, and much of the visual production runs through AI-assisted generation. That creates a different kind of art direction problem. The challenge isn’t creating images, it’s keeping them on-register with Illuvium’s painterly fantasy look and preventing drift toward generic sci-fi or cartoon styles.

Primal Tactica battle HUD showing the autobattler combat arena

Genre benchmarking

Most of the upstream systems design (character roster, stat list, rarity scheme) sat with the game designer. The design work started by pulling apart how the mechanics translate into a single-player run, then benchmarking the closest commercial references (TFT, Hearthstone, Slay the Spire, Last Flame, MTGA) to map which conventions to lean on and which to push against.

Key challenges

The card cost gem. TFT players expect a gold cost shown in the shop. Hearthstone players expect a mana cost sitting on the card face. Locking down what the number actually represented, and making that unambiguous through the gem’s visual language, was the first decision that unlocked the rest of the card system.

Rarity communication. The agreed Common (warm grey) and Rare (blue) needed a clear visible step between them. An early Common gem read as cool metallic silver and threatened to disappear into the UI chrome, which would collapse the gap between the two tiers instead of reinforcing it.

Battle HUD panel placement. Getting the panel layout straight before building the synergy panel and tooltip layer on top meant any layout ambiguity in the HUD had to be resolved first, not retrofitted later.

Map background. The map needed to be stylish, functional, and in-theme at the same time: visually rich enough to belong in the Illuvium world, with enough room and contrast for the path SVGs and event icons to read cleanly on top. Getting Weavy to land all three at once took prompting that named what the composition needed to do, not just what it should look like.

Stat depth vs. onboarding. The stat list is long (Attack Damage, Attack Speed, Attack Range, Armour, Magic Resist, Mitigation, Vamp, Omega Power, Crit Chance, Crit Amp) and the tooltip layer had to surface it without pushing new players off.

Primal Tactica roguelike map with event icons and branching paths

The work

Workstreams ran in parallel rather than sequentially.

Battle UI and HUD. Panel placement, synergy panel, tooltip system, win cards screen, and integrating the stat list into tooltips that work at a glance without dumping the full stat block on first contact.

Map UI. A vertical roguelike map with six event icon types (Battle, Elite Battle, Boss Battle, Camp, Shop, Event, Ruins) and top-down stylised act backgrounds for Brightland Steppes, Crimson Waste, and Abyssal Basin. Each background was generated through Weavy with prompts I authored and iterated against game designer feedback, with a focus on excluding everything that would read as side-scroll or horizon-based composition.

Cards and rarity. Card layout, cost gem and detail gem across Common, Rare, Epic, and Legendary, and a rarity palette tuned so each tier reads as a clean upgrade rather than a lateral variation.

Character select. Layout, character poses, and art direction for portraits. Bramble grounded on a planted staff, Eado extending a dagger toward camera, Jinxo leaning back flicking a coin. Each pose foregrounds personality before stat archetype.

Augment and relic icons. An icon set tying back to the Illuvium visual language without drifting into sci-fi. The essence icon went through a second pass after game designer feedback pushed for something more vital and organic: blood red, crimson, with an inner glow that pulses rather than glows.

Pregame, landing, and settings. The scaffolding around the run, not just inside it, keeping in-game and meta-game surfaces consistent as more screens landed.

Brand and design system

The brand work ran alongside the UI. I explored logo directions for the Primal Tactica wordmark and finalised the mark. The guidelines covered the wordmark, light and dark applications, minimum sizes, and the rationale behind the mark itself: a holo treatment for the corruption of the Primals, and claw forms for the Primal characters.

Underneath all of it sat a design system used across in-game and meta-game surfaces, so the Chronicle screen, the Battle HUD, the map, and the pregame screens stayed visually coherent as more pieces shipped without each new surface needing fresh alignment.

Primal Tactica wordmark in light and dark applications
Behind the logo: Primal Tactica mark design rationale
My Primals card grid showing unit cards with rarity borders
Chronicle screen showing unlockable Primals and progression

AI art direction

A significant portion of the visual production ran through Weavy. The challenge wasn’t getting images out. It was keeping them on-register with Illuvium’s painterly fantasy aesthetic while hitting specific compositional requirements the backgrounds needed to work as UI surfaces.

For the map backgrounds, that meant authoring prompts that named what to exclude as precisely as what to include: no sky, no horizon line, top-down only, painterly not cartoon, no bubble shapes or sci-fi elements. A usable Brightland Steppes background and a generic fantasy landscape were separated almost entirely by exclusion language in the prompt, not by inclusion.

For character portraits and relic icons, the direction focused on material specificity (the difference between a coin that reads as gold and one that reads as plastic, or armour that reads as weathered steel rather than a cosplay prop) and on keeping everything traceable to the Illuvium source designs rather than drifting toward whatever the model’s defaults produced.

Outcome

The designs were handed over to the dev team and are in active implementation. The game is in review and beta builds rather than public release, with the designed surfaces (Battle HUD, map, cards, character select, augments, brand, design system) all moving through the build pipeline toward a Steam launch.

Reflection

The useful lesson from this project was learning where to stop borrowing genre conventions. The temptation when you’re building adjacent to TFT, Hearthstone, and Slay the Spire is to lift the conventions wholesale, and most of the time that’s right, because players reward familiarity. But the card cost gem, the rarity steps, and the map background were all places where copying broke down. Each one required a deliberate decision about which convention to honour and what the game was actually asking of its UI at that moment.

The other lesson was how much weight tight art direction carries when AI generation is in the loop. The failure mode isn’t getting bad images, it’s getting images that are fine in isolation but wrong for the context. Getting that right was almost entirely a matter of being specific about what to exclude, not just what to include.

← All work
View case →