# Figures: Colours and stills

> Its eight colourways or colours of your own, your design tokens included, a dot of its colours, and a still for anywhere a live figure can't go.

Source: https://cesarvenzac.com/figures/docs/colours

Each colourway is three colours, `main`, `light` and `deep`, which the figure's material flows through, with a rainbow round its rim. `palette` picks one of `COLOURWAYS`: 1 blue, 2 green, 3 sun, 4 pink, 5 violet, 6 teal, 7 orange, 8 red.

## Colours of your own

`colours` gives a figure three of your own, and `ink` its eyes' colour (`INK`, a near black, unless said). Any CSS colour works, and a custom property is read from the page's root, so your design tokens stay the one place its colours are said:

```tsx
<AgentFigure
  figure={ada}
  colours={{
    main: "var(--brand)",
    light: "var(--brand-light)",
    deep: "var(--brand-deep)",
  }}
  ink="var(--ink)"
/>
```

A colour is read once, the first time a figure is drawn in it: a token changed later isn't seen until the page loads again.

## Drained

`drain`, from 0 to 1, greys a figure: an agent running out of its budget, say. At 1 it keeps less than half its colour.

## A dot

`AgentDot` is a figure's colours alone, a dot 8 pixels across unless `size` says otherwise, for where a whole figure wouldn't read, a table's row say. It takes `colours` too.

```tsx
<AgentDot figure={ada} size={10} />
```

## A still

`svgOf` writes a figure as an SVG file, seen from the front: for an email, a social card or a server, anywhere a live one can't go. It's in the main entry and runs anywhere.

```typescript
import { figureFor, svgOf } from "@cesarvenzac/figures";

const svg = svgOf(figureFor("Ada"), "happy", {}, 128);
// '<svg xmlns="http://www.w3.org/2000/svg" …'
```

Its third argument takes `main`, `light`, `deep` and `ink`, its colourway's and `INK` unless given, and its last names its gradient, unique on a page. Where a browser has no WebGL 2, a live figure is a flat drawing much like it.

## Figures's docs

- [Overview](https://cesarvenzac.com/figures.md): Small 3D figures for your agents, saying what each is doing with two eyes and the way they move.
- [Getting started](https://cesarvenzac.com/figures/docs/getting-started.md): Install Figures, put a figure beside an agent's name, and keep the four choices a figure is made of.
- [Moods and moves](https://cesarvenzac.com/figures/docs/moods.md): What a figure shows for each mood, how it reacts as one changes, its fourteen faces, and the moves it makes on demand.
- [Colours and stills](https://cesarvenzac.com/figures/docs/colours.md): Its eight colourways or colours of your own, your design tokens included, a dot of its colours, and a still for anywhere a live figure can't go.
- [API reference](https://cesarvenzac.com/figures/docs/api.md): Everything the package exports, entry by entry: the figures as data, and the React components with every prop.