Avatars

Everyone has a face, drawn from their name by web/faces.js, so it is the same on every machine and nobody picks or uploads one. The faces below are drawn by that code.

Buddies: a body, a face and a colour

A buddy is one of five bodies (circle, square, triangle, pentagon, cloud) with a face: eyes (dot, big, happy, sleepy, squint), a mouth (smile, grin, o, flat, cat) and maybe one extra (blush, glasses, bow). Its colour is one of eight OKLCH hues, evenly spaced, with Clippy's sunflower first. Outlines are a little uneven and tilted, as if drawn by hand, and the same every time.

In a doc, buddies take parts and colours as unlike each other's as possible: the first five never share a body, eyes or a mouth, and eight never share a colour. These are eight buddies in one doc:

Clippy

Clippy's face is fixed: a sunflower cloud with dot eyes, a smile and blush. It is also the app's mark, on its icon and its documents.

People

People are always round. Their face and colour come from their name, the same way as a buddy's.

Sizes

Set by --size on .pj-avatar. Features are drawn to read at 18px; a new eye, mouth or extra must too.

States

A buddy shows what it is doing with its face, never with a badge or a dot, and the same on every face of it: in the header, on its card and on the thread it works on. It has three states and one moment:

• Ready: as drawn, still. It answers when you @mention it.
• Working: it grows a little, its body rolls and its face bobs, until the run ends and it settles back.
• Away: greyed out. It does not answer in this doc.
• Failed, a moment: when a run fails, its face shakes and flashes red, once. The thread says what happened.

A person has two states, the same way: here, as drawn, with the project open, and away, greyed out. In a doc, each person with you has a cursor in their colour, with their name beside it while they move or type, as a buddy's while it works.

A finished run has no moment of its own: its edits light up in the text, in its colour. A face you point at grows the same way, and on its card a buddy moves as if at work, to greet you. With reduced motion, faces keep their size and nothing moves.

Faces have their own palette and gradient in faces.js, the one place outside the tokens with colour literals. Ink for features is #1f1d24.