# AI permissioned coworker framework and designs

> Source: <https://eisenzopf.github.io/Thelve-coworkers/demo/>
> Published: 2026-09-12 22:36:38+00:00

## The cast

Pick one to inspect & recolor

Avatar kit · soft-body renders · v1

Fourteen shapes for giving AI coworkers a face. Each one is a single inline SVG — lit from the upper left, with a bounce rim off the lower right — so it holds its volume from 16 px in a list to 200 px on a profile.

Shape and hue derived from the coworker's name, so they stay stable across sessions

Overlapped at 44 px the silhouettes stay separable without a ring or a border — that's what the different shapes buy you. A page of same-shaped circles needs colour alone to carry the difference.

Flat is a destination, not a degraded render — every stop is somewhere worth landing

No dependencies, no build step, no image assets

Install

```
npm i @thelve/coworkers
```

One coworker

``` js
import { avatarSVG } from "@thelve/coworkers";
import "@thelve/coworkers/avatar.css";

el.innerHTML = avatarSVG({ name: "Call QA" });
```

React

``` js
import { Avatar } from "@thelve/coworkers/react";
import "@thelve/coworkers/avatar.css";

<Avatar name={coworker.name} size={36} />
```

Overriding

```
avatarSVG({ shape: "bean", hue: 174, size: 96 })
avatarSVG({ name: "Inbox Triage", eyes: false })
```

`avatarSVG({ name: 'Call QA' })` returns a complete SVG string — shape and hue hashed from the name, so the same coworker looks the same everywhere. Pass `shape` and `hue` to override.

Wrap it: `<span dangerouslySetInnerHTML={{__html: avatarSVG({name, size})}} />`. Every gradient id is namespaced per instance, so a hundred on one page never collide.

The SVG has no intrinsic size — set `width`/` height` in CSS. Idle float, specular drift and blink are CSS keyframes on `.av-body`, `.av-spec` and `.av-eyes`; they already honour `prefers-reduced-motion`.