Brand direction 04 · the gamified layer

You don't earn points. You mint proof.

Every learning app hands out confetti and a number that resets. This one strikes a coin. One concept mastered, one object cast — in a metal that says how hard it was and how well you hold it.

See the XP loop
01 · the idea

The world is a foundry, not a playground.

Gamified, but not cartoon. These are people learning backend engineering — plastic toys patronise them. Machined metal doesn't. Metal already means earned, weighty and permanent, so it buys us loot-tier progression with a straight face.

What makes it feel like a game

the four levers
01WeightObjects have thickness, a rim and a contact shadow. You can tell the coin would be heavy in the hand. Flat rewards feel free, and free things feel worthless.
02Scarcity you can seeFour alloys. You never read a rarity label — you recognise the metal. Gold is rare because gold looks rare.
03A ritual with a peakThe strike: drop, flash, spin down, settle. 1.4 seconds, once. Anticipation then payoff, not a shower of particles.
04Visible absenceEmpty vault slots are machined sockets, not blank space. You feel the gaps — and that pulls harder than any streak counter.

The coin is the concept

not a currency

The face is struck with the diagram of the thing you learned — a B-tree, a stack frame, a queue. So the reward isn't money you spend, it is a compressed picture of a mental model you now own. Two people comparing vaults are comparing what they can actually draw.

02 · the alloys

Four metals. No rarity text.

Tier is carried by material alone, so it survives at any size and in any language. Difficulty sets the floor; how cleanly you solved it sets the metal.

Gold — first pass, no hints

you already had the model; this only confirmed it

Material palette

3 stops · one light, top-left
Iron2E343C · 59616C · 8B939E
Steel71818F · B8C8DA · F6FAFF
Brass6E4C15 · C79337 · F4D98C
Gold8A5F0C · EBB63A · FFEFB4
ChargeXP and live state only
Moltenthe strike only · 1.4s
03 · the loop

XP is charge, not score.

A number that only goes up means nothing. Here XP is heat you are putting into the concept in front of you — it fills, and when it is full it is spent striking the coin, then resets to zero. You are never hoarding. You are always about to make something.

Play it

level 4 · 40 / 100 charge
4
B-trees & indexes40 / 100
→Charge fills as you workEach solved puzzle adds charge to the concept you are inside, never to a global vanity total.
→Full charge triggers the strikeThe bar empties into the coin. It is the only way a coin is ever made, so the bar always means exactly one thing.
04 · the ritual

The strike.

The one theatrical moment in the whole product. Drop, flash, spin down, settle — 1.4 seconds, plays once, and only when a coin is genuinely made. Everything else in the interface holds still so this reads as an event.

B-trees & indexes
GOLD · STRUCK ON FIRST PASS

The coin arrives molten and cools into its alloy over the last 400ms — so the metal you earned is revealed at the end of the animation, not the start. The reveal is the reward.

05 · the vault

Absence is the hook.

Your profile is a case of struck sockets. Filled ones catch the light; empty ones are machined holes with the concept name still on them, so you can see exactly what you don't know yet.

Databases & storage

4 of 8 struck
B-TREE
INDEX
WRITE
AHEAD LOG
QUERY
PLAN
ISOLATION
LEVELS
MVCC
SHARDING
REPLICATION
LAG
DEADLOCK
DETECTION
06 · applied

What the phone feels like.

Home is a case of what you own and what is next. The lesson itself stays clean — this layer wraps around learning and never sits on top of a diagram.

4
Backend Engineering
12 STRUCK · 41 TO GO
Latest strike
B-TREE INDEX · GOLD
Concurrency
3 OF 7 STRUCK
in progress
Mutex contention
NEXT UP · 8 MIN
start
Goroutine leaks
LOCKED

Home · own it, or see the hole

CONCEPT COMPLETE
Gold. First pass.

You placed every node without a hint. That is the version of this you will still have in a year.

CHARGE SPENT100 / 100

The strike · the one loud moment

07 · the discipline

What keeps 3D from looking cheap.

Rules

non-negotiable
01One light, top-left, alwaysEvery highlight, bevel and contact shadow agrees. Inconsistent light is the single biggest tell of fake 3D.
02Real geometry, not a gradient circleEach coin is a built cylinder with a reeded rim, so turning it is honest — you can see the edge.
03Contact shadows, not halosTight, dark, directly under the object. Big soft glows under everything is what makes a UI look like a template.
04Metal is never the accentCharge teal does UI state; metals do earned objects. They never swap jobs, so gold can never become decoration.
05Only one thing moves at a timeThe interface is still. Motion means something just happened.

Refused

the slop list
  • Purple-to-blue gradient heroes and glassmorphic cards
  • Floating 3D blobs, orbiting particles, ambient sparkle
  • A cute mascot with eyes that reacts to your streak
  • Confetti, on anything, ever
  • Neon cyberpunk grids and fake terminal chrome
  • Rarity written as text — "EPIC", "LEGENDARY"
  • A currency you spend on cosmetics; the coin is proof, not money
  • Streak flames that punish you for having a life

Brand direction 04 · gamified 3D layer · lesson engine untouched · every coin is real CSS geometry, no images