Brand direction 04 · mascot · invented creature

Cinder

it grows what it learns

Not an animal and not a pun. A small warm creature that grows crystal — and every shard on its back is a concept you actually understand. Start and it has three. Finish the course and it's unrecognisable.

The soft body is the appeal; the crest is the identity. That split is deliberate — round bodies are warm but generic, so the silhouette has to come from one bold signature. Making that signature the progress bar means the character and the reward system are the same object.

Concepts mastered3 of 9
The three earlier characters → Coins & XP →
01 · what changed in the process

Silhouette first, in black, before any colour.

The last four attempts were ovals with limbs stuck on, and colour was hiding it. This one was designed as a solid black shape and only coloured once it passed. Everything appealing about it is already there in the silhouette — that's the test.

Solid black

the only test that matters

Crest, tail and two different-sized feet give it "event". No two shapes are the same size, and nothing is mirrored.

Size ladder

32 · 44 · 72 · 120px
32
44
72
120

The crest survives to 32px as a teal tuft. That is the app icon.

02 · emotional range

Six states, and one of them is blocked.

Most mascots have happy, sad and neutral. A backend course needs blocked — waiting on something you don't control — because that is the feeling the whole subject is about, and no other learning app has a character for it.

Idle — a slow 3.4s bob. Present and alive, slow enough to ignore. It never asks for anything.

03 · the system

One asset, both worlds.

Warm paper

the lesson surface

Near-black

the progression surface

Why this one holds up where the others didn't

against the study
01Not symmetricalWhole body tilted 5°, crest swept back-right, two different-sized feet, arms at different lengths. Nothing mirrors.
02Head and body are one massOne path. The eyes sit on it rather than on a separate head, which is why it reads at 32px.
03Eyes at 31% and 28% of body widthDeliberately unequal — the far eye is smaller, which implies a turned head and a third dimension. Each carries one specular dot.
04Depth through overlapTail and crest sit behind the body, feet and near arm in front. Three layers, not one flat plane.
05Warm and cool do different jobsEmber body is the creature; teal crystal is knowledge. The two never swap, so the crest always means the same thing.
06Still a hand-drawn stand-inThis is a strong brief made visible, not final artwork. An illustrator should redraw it — but now they are redrawing something specific instead of guessing.

Brand direction 04 · Cinder · SVG + CSS, no images · crest count is data-driven, so mastery renders the character