0092: Teddy, a pixel-art Yorkie, is the mark

On this page

Status: accepted

Context

The mark was a rack panel with an amber pilot lamp and a cyan patch cable: true to the app, but abstract, and it didn't carry the name. With shortleash.dev, the brand takes the name literally: everything stays on your computer, on a short leash, and sharing is letting it off the leash. That wants a character, and one that survives 16 px favicons, 36 px menu bars and 1024 px app icons in one look.

Decision

The mark is Teddy, a black-and-tan Yorkie in a puppy cut, drawn as pixel art: his 32 px head on a cyan-wash tile, with a hand-cut 16 px version for small sizes (never a scaled-down head). His collar is the wire's cyan and his tag the signal's amber, the colours the app already uses for shared and running. He is never shown tied up: at home his leash lies coiled beside him, and when a site is shared he picks it up and trots off.

The drawings are letter grids, one letter per pixel, each letter a named colour, in packages/brand/src/teddy.ts (and the website's sprites.ts, kept the same). Every brand file is drawn from them by script, never by hand: pnpm -C packages/brand svg writes the SVGs and pnpm -C packages/brand icons renders the app's icon files, each size from the drawing that lands on whole pixels there (the small cut at 16 to 48 px, the master from 64). The app's LogoMark draws from the same grids.

The menu bar shows a paw print instead of Teddy himself: a face or a silhouette in one colour at 18 px read as a cat or a hedgehog, and a paw is plainly a dog's. Hollow is stopped and filled is serving, as the lamp was; sharing, Pair and meeting notes add a corner badge (an arrow, a headset, level bars) rather than reshaping the paw.

Consequences

  • One look from favicon to app icon, and changing Teddy means editing a grid and running two scripts, not redrawing files.
  • Pixel art only stays crisp at whole multiples, so sizes are chosen to suit it: the logo at 18 or 36 px, menu bar templates at 72 px, the master's head at 16 units a pixel.
  • The grids live in two repositories (this one and ShortLeash/web, 0091); a change to Teddy is made in both.
  • The rack panel, lamp and cable are gone from the mark; the lamp and wire live on in the app's status grammar and in his collar and tag.