The logo
Teddy's head on a cyan-wash tile, beside the name in Geist Mono. His collar is the wire and his tag is the signal, the same cyan and amber the app uses for shared and running.
On Paper
On Ink
16, 32 and 64 px. Under 32, use the 16 px cut, never a scaled-down head.
Keep a quarter of the tile clear on every side.
Teddy at every size
Each size is drawn by hand, not scaled. A light rim keeps his dark outline off dark backgrounds.
Sitting, 32 by 52
Head, 32 by 32
Icon, 16 by 16
With the rim, on Ink
On a short leash
At home, on a short leash. Everything stays on your computer.
Share a site, and he grabs his leash.
Off he trots, out of your computer.
Off the leash: shared with the world, until you call him home.
Scroll to take him out.
Palette
Teddy's own colours, the same in both themes, as --dk-teddy-* tokens.
Tan
His face, beard and legs.
tan-shadowtantan-lighttan-highlight
Wisps
Grey thinning into tan on his crown: never a solid cap.
steel-shadowsteelsteel-lightwispwisp-light
Ears
Brown, tufted, always up.
ear-edgeearear-light
Saddle
The black on his back.
outlinesaddlesaddle-light
Face
Eyes with a glint, a shiny nose, a tongue for good news.
eyeeye-shineglintnosenose-shinetongue
Collar and tag
The wire and the signal: cyan for shared, amber for running.
collar-shadowcollartag-shadowtagtag-light
How he moves
Stepped, like a sprite, never smeared. With reduced motion or the Motion switch off, every piece rests on its final frame.
Idle
He breathes a pixel up and down, blinks every few seconds and flicks an ear now and then.
Without motion: Sits as drawn.
Watching
His eyes follow your pointer, a pixel at a time, and come back to you when it rests.
Without motion: Looks at you.
Happy
Point at him and he grins, tongue out.
Without motion: Still grins on hover.
Assemble
The logo builds itself: outline, fur, then highlights, each pixel springing into place.
Without motion: The finished logo.
Dissolve
Sections arrive through a pixel cover that sweeps away left to right.
Without motion: Sections are simply there.
Off the leash
Scrolling plays the leash story, and scrolling back rewinds it.
Without motion: Three still frames.
What's next
The redesign goes a step at a time. This page grows with it.
Teddy and the logo
The mascot, the mark, the palette and how they move.
Icons
The app icon, the favicon, and paw prints in the menu bar.
The website
shortleash.dev rebuilt around the leash: local by default, shared when you let it go.
The app · now
Teddy in every empty state, his mood in the mark, onboarding, and the moment a site goes off the leash.