← Design notes

Stego Coffee · Identity · Round three

How friendly is
too friendly?

Six steps from the mark on the site to the cute game-sprite stegosaurus, so the question stops being a matter of taste and becomes a place to stand on a line.

Six stepsOne variableAll drawn on the same 64 gridEvery one tested at 16px

The tension

worth naming once

The brief has three clauses. The third is “doesn’t look like a children’s dinosaur brand”, and the reference is exactly that — a game sprite, drawn to be adorable. Borrowing from it is borrowing against that clause.

That is not an argument against doing it. It is your brand and you have been steering warmer since the first round. But the useful move is not to guess where your line sits — it is to lay out the whole gradient and let you point at it. Each step below adds exactly one thing.

What the reference actually offers, in order of what it costs you: legs, a tail, a rounder body, a mouth, and a second eye. The first three are anatomy. The last two are personality, and they are the ones that stop working at favicon size.

The gradient

00 — 05 · one change per step
16 · 24
reversed
00

Where it stands

The mark on the site now. A back and a head, no legs, no tail, one eye and no mouth. It reads as a creature but never as a character.

Baseline — nothing borrowed yet.
16 · 24
reversed
01

Legs

Four stubby legs, nothing else changed. The single cheapest borrow from the reference and by some distance the best value: it stops being a shape and starts being an animal standing somewhere.

Holds at 16px. The legs are 8 units wide, so they survive where a face would not.
16 · 24
reversed
02

Legs and tail

A tapering tail sweeping up off the back. Restores the silhouette a stegosaurus is actually known for, and gives the mark a direction to face.

Watch — the raised tail leaves a thin gap against the body that fills in below about 20px.
16 · 24
reversed
03

Rounder body

The reference’s proportions: a taller, more circular body with the plates lifted to sit on it. Softer without adding a single feature.

The middle setting. Warmer than the current mark, still no mouth.
16 · 24
reversed
04

A mouth

One eye and a smile. This is the line: everything above could pass as a considered animal mark, and this is where it commits to being friendly.

Watch — the smile is 3.4 units deep and closes up at favicon size.
16 · 24
reversed
05

Two eyes and a smile

The reference read directly: face turned to the viewer, both eyes, full smile. Unmistakably a character.

Reads as a mascot — which is either the point or the problem.

Where I’d stop

01, the legs. It is the only step that costs nothing at any size and it changes the read completely — the mark stops being a badge and becomes something standing on the ground. Everything after it trades legibility for charm at a worsening rate.

03 if you want the reference’s feel without the mascot. Rounder body, tail, still no mouth. It is noticeably warmer than what is on the site and it still survives a browser tab.

05 is a different asset, not a different favicon. If you love it, the honest use is a sticker, a cup, a shop-window decal, an app icon at 512px — somewhere it is never asked to be 16 pixels wide. Marks and mascots can coexist; they just should not be the same file.