Brand · mascot
One dot, out of the frame
The logo is a frame holding four dots. The mascot is what happens when one of them leaves: same 6-unit geometry, same gradient, now with a nub, two eyes and exactly three moods. Original work — nothing borrowed from a meme library, and no emoji face bolted onto the mark.
Lost
404 pages
Tilted, ears down, one of its dots dropped behind it. A dead end should look like the site noticed.
Found
empty states with a next step
Upright, holding the dot it was looking for, mouth curved up. Only ever used when there is an action to take.
Idle
long-running panels, waiting states
Eyes closed, no mouth movement, no animation loop. A character that never stops moving is a character people hate by week two.
It is already on the 404 page
A mascot that exists only on its own page is decoration. The “lost” pose ships in this build on the not-found route, at 88px, above the headline. Visit a URL that does not exist and it is what you will see — the same drawing, not a screenshot.
Rules, so it stays a character and not a sticker
- · It never appears on a page where something is working; it only shows up when the interface has nothing to show.
- · It never animates in a loop. Reduced-motion users should not have to opt out of a mascot.
- · It never speaks in a cute voice — the copy next to it stays in the site's normal register.
- · It is never redrawn ad hoc: the poses are three path sets in one component, so a new pose is a decision, not a doodle.
Geometry is in src/components/mascot.tsx — 64-unit viewBox, 15-unit corner radius, both eyes at y=33.