Readability under pressure
A battle screen carries a countdown, a star meter, three loot counters and six troop cards at once. None of it can compete with the tap target the player needs right now.
Mobile Game UI · Concept & Art Direction
Emberfall
Emberfall is a self initiated concept for a mobile base builder in the Clash of Clans family. Ten screens, a documented component library and an isometric world where every single asset, from the gem icon to the village itself, was produced inside Figma with nothing imported.
About the
Project
Emberfall started as a question rather than a brief. I wanted to see how far one designer can push a complete game interface when there is no illustrator, no 3D pass and no stock asset anywhere in the file.
The answer turned into a base building strategy game with a fiction behind it. Players are Forge Lords on volcanic islands who mine ore out of the rock, burn ember to train troops and raid each other for dark gems. Ten screens cover the whole loop, from the splash to the store.
What the project covers
- Game UI
- Art Direction
- Design System
- Procedural Illustration
- Figma
Three Problems
I Set Myself
No client, no ticket, so I wrote my own constraints first. Everything after this point was judged against these three.
Depth without illustration
Casual game interfaces live on the illusion of thickness. I had no 3D renders and no painted assets, so the depth had to come from a repeatable stack of gradients and shadows.
Ready to hand over
A concept that only exists as flat pictures is worthless to a team. Tokens, components and spacing rules had to be real objects in the file, not annotations on top of it.
“If I cannot explain why a surface is lighter at the top, the surface is wrong.”
A World That
Explains the Palette
Emberfall sits on volcanic islands. Players mine ore out of the rock, burn ember to train troops and raid each other for dark gems. Once the fiction was fixed the palette wrote itself: cold violet stone for everything the player owns, warm ember light for energy, gold for reward.
-
Gold
Mined out of the rock. Pays for buildings and walls. The reward colour of the whole game, so it never becomes a background.
-
Ember
Molten fuel piped up from below. Trains and upgrades troops. Used anywhere heat or production is happening.
-
Dark Gem
Rare crystal formed in the crater. Buys time. Reserved for premium moments so the player learns to read it instantly.
Direction keywords
- volcanic
- carved stone
- warm rim light
- heavy and tactile
- readable at arm length
- no thin lines
Light Comes From
the Top, Always
I wrote the rule down before drawing anything. Every raised surface gets a gloss band across the top, a dark edge all the way around, a bright inner line at its upper lip and a soft shadow underneath. Every recessed surface gets the opposite.
After that, panels, buttons, pills and chips stopped needing individual decisions. There was one recipe to apply and one reason to reject anything that did not follow it.
Build up of a single panel
01 Flat fills2 solid, nothing else
02 Base gradients3 at the top, s1 at the bottom
03 Dark edge2.5px ink stroke, inside
04 Top glosswhite 44 percent to 3 percent
05 Inner lipinner shadow, white 40 percent
06 Cast shadowy4 blur10 plus y1 blur2
Elevation scale
e1chip and badge
e2card and button
e3panel and tray
e4modal and screen
glowprimary action
wellrecessed slot
Six properties, one order, no exceptions. The same recipe scales from a 17px count badge to a full screen tray, which is why the whole interface reads as a single material.
Twenty Six Tokens,
Seven Roles
Every colour in the game is a Figma variable with a job description. Ramps run light to dark so a gradient can be written as two neighbouring tokens instead of two hand picked hex values.
Surface: the stone the player owns
- ink#0A0712
- vd#100B1C
- night#171129
- s1#241B3C
- s2#322549
- s3#453361
- s4#5C4680
- mist#BDB2D8
- dim#8B7FA8
- w#FFFFFF
Six accent ramps, one job each
GoldReward and primary action
- g1#FFE7A3
- g2#FFC24D
- g3#E8951C
- g4#A65A0A
GreenConfirm and progress
- e1#7BE87A
- e2#3FBF52
- e3#1F8A3C
- e4#0E5C29
RedAttack and danger
- r1#FF8FA3
- r2#F2445F
- r3#B01F3C
- r4#6E0F26
GemPremium currency
- a1#DDB0FF
- a2#A855F7
- a3#7326D6
- a4#47128C
EmberHeat and resources
- m1#FFD07A
- m2#FF8A3D
- m3#D9541E
AzureMagic and experience
- z1#A8E6FF
- z2#38BDF8
- z3#0C7FB8
Gold never sits behind text
It is the payoff colour. The moment it becomes a background it stops meaning reward.
Green only confirms
Train, claim, upgrade, donate. Nothing else is allowed to be green.
Red only attacks or warns
The attack button and the surrender button share it, and that is on purpose.
Gem means money
If violet appears, real currency or premium currency is involved.
Two Faces,
One Job Each
Lilita One carries anything the player reads at a glance: titles, counters, button labels. Montserrat carries everything that needs to be read properly. Nothing else is allowed in.
Titles run 64 down to 24, counters 28 to 17 and button labels 26 to 12, always with a 2.5px outline so they hold up on top of a gradient. Labels use Black at 9 to 15 with wide tracking, body text Medium at 14 to 19. Nothing sits below 9px anywhere in the game.
Radius scale
- 10badge
- 12chip
- 14well
- 16button
- 20card
- 26tray
- 30screen
16px of screen padding left and right, 12 to 14 in grids and lists, 8 inside a card, and a 2.5px edge stroke on every raised surface. Those four numbers cover the entire layout.
Two Components,
One Rule Set
Only the two pieces that repeat on every screen became real components. Everything else is a documented pattern with fixed numbers, which keeps the file light and stops variant sprawl before it starts.
-
HUD / top bar390 × 104
The player badge and the four counters. It floats over the world rather than sitting on a full width bar.
-
Nav / bottom bar390 × 108
Base, army, clan and shop, with the raised attack action breaking the bar in the middle.
Six button states
Upgrade, buy now, attack, use gems, cancel and locked. Every screen picks from this row instead of inventing a seventh.
Buildings Written,
Not Painted
The village is not an illustration. I wrote a small isometric routine inside Figma that takes a grid cell, a footprint, a height and a palette, then returns the three visible faces, a rim light along the top edges and a soft contact shadow.
Roofs, domes, banners and collect bubbles follow the same idea, so repainting a whole village is a palette argument rather than a second drawing.
Anatomy of one block
- Top faceThe lightest tone. This is the only surface the light hits straight on.
- Right faceMid tone, plus a soft black gradient across the lower half for falloff.
- Left faceDarkest tone, same gradient. Two tones apart from the top face, never one.
- Rim lightA 1.6px stroke along the two upper edges at 95 and 50 percent. This is what sells the thickness.
- Contact shadowTwo stacked ellipses under the footprint. Without them the buildings float.
The same routine, repainted
One palette argument apart, not one illustration apart. That is the whole reason the routine exists.
The Two Screens
That Set the Tone
A player decides how a game feels in the first six seconds. The splash carries the fiction. The base screen has to stay legible while an entire world moves behind it.
- Layered sky, not a photoEight gradient stops, three ridge silhouettes, a blurred crater glow and a bottom scrim. Every layer is a flat vector shape, so the whole screen stays light.
- The HUD floatsNothing sits on a full width bar. The pills carry their own shadows over the world, which keeps the village readable and gives the camera room.
- One loud button per screenBuild is the green action in the corner, attack is the raised red one in the nav. The player is never asked to choose between two shouting buttons.
Ten Screens,
One Skeleton
Header, content column, bottom navigation. The same three zones on every screen, which is why the tenth screen took an hour instead of a day.
Three Things
I Take With Me
Write the rule before the pixels
Defining the light recipe took twenty minutes and saved me from a hundred small arguments later. Every surface in the game was decided by that one paragraph, which is also why the whole thing reads as a single material.
Auto layout is a correctness tool
I stopped treating it as a convenience. Once each screen became one column with fixed padding, overlap and drift went from unlikely to impossible, and I could move a whole section without checking anything below it.
Generated art scales differently
Because the village is a routine and not a drawing, the enemy base cost me one palette instead of a second illustration. That is the part I will carry into the next project first.
- 10
- Screens designed
- 26
- Colour variables
- 6
- Button states
- 0
- Imported assets