# Blip brand kit

Everything the Photon hub needs to put Blip on screen and give it a voice.

## Files

- `tokens.css`: colour variables. Body amber, eye ink, and the five mood
  tints. Light and dark via `[data-theme="dark"]`, same as the hub.
- `blip.svg`: the avatar. One SVG, every state. Inline it; don't load it as
  an `<img>`, or the CSS states can't reach inside.
- `blip.css`: the states and animations. Reduced motion is handled.
- `VOICE.md`: how Blip talks. The block under the rule goes straight into
  the system prompt.

## Using the avatar

```html
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="blip.css">

<!-- paste the contents of blip.svg, then set the state -->
<svg class="blip" data-state="idle" ...>...</svg>
```

Change `data-state` and the avatar follows:

| state      | what you see                                             | when the hub should use it        |
| ---------- | -------------------------------------------------------- | --------------------------------- |
| `idle`     | amber dot, halo breathes, body squashes gently, blinks   | nothing in flight                 |
| `thinking` | body goes fuzzy, violet tint, a mote orbits              | the model is generating           |
| `working`  | the dot becomes a travelling wave                        | a node is running a task          |
| `done`     | hops, happy eyes, one green ring rolls out               | a task finished well (hold ~2s)   |
| `error`    | red, deflates a little, eyes drop, lids half down        | a task failed or a node dropped   |
| `observed` | shrinks, fidgets, blushes, glances aside                 | hover or focus on the avatar      |

Sizes: it is drawn on a 100 unit box and reads fine from 20px up. The
sidebar can use `width="24" height="24"`. The halo and wave spill outside the
box on purpose, so keep `overflow: visible` (the CSS does this) and give it a
few pixels of room.

Several Blips on one page: the SVG uses `id`s for its gradients
(`blip-body`, `blip-halo-g`, `blip-clip-l`, `blip-clip-r`). Browsers resolve them to the first match, which
is fine if every copy is identical. If you need different colours per copy,
rename the ids in that copy.

## Colours

Mood is wavelength. Long wavelength on the left, short on the right.

| mood     | token               | wavelength   |
| -------- | ------------------- | ------------ |
| error    | `--blip-mood-error` | red, ~650 nm |
| rest     | `--blip-mood-rest`  | amber, ~590 nm |
| done     | `--blip-mood-done`  | green, ~530 nm |
| thinking | `--blip-mood-think` | violet, ~410 nm |
| blush    | `--blip-mood-blush` | pink. Not on the spectrum. Neither is being looked at. |

Rest is the hub's existing accent, so a Blip at rest matches every other amber
thing on the page.

## Don'ts

- Don't give Blip a mouth. Eyes only. The happy state is two arcs, not a smile.
- The eyes are the whole performance: pupils look around, lids blink and droop, cheeks blush. Move pupils (`.blip-pupil-g`), not the eye sockets.
- Lids are circles, not bars. The upper lid (`.blip-lid`) is a circle above the eye that lowers in; the lower lid (`.blip-lower`) is a circle below that rises. Curved edges read as soft. A straight edge across a round eye reads as bored or grumpy, so don't swap them for rects.
- At rest both lids are open and the face is neutral. The lower lid lifts for the warm squint in observed, working, and wink. Surprise is open eyes plus tiny pupils.
- No highlight dot in the pupil. It was fine detail that read as nervous energy at small sizes.
- The body gradient runs left to right on purpose. Lids slide and skew vertically, and a horizontal gradient keeps their colour identical to the body underneath. Don't make it diagonal.
- Bounce is squash and stretch on `.blip-self`. Add `is-poked` to the svg for one jelly wobble; it removes itself on `animationend` if you listen for it.
- Don't make it angry. Error is sorry, not cross.
- Don't scale the eyes separately from the body.
- Don't use the wave state for "loading the page". It means a machine is
  doing real work.