# Customise the buddy

> Style the widget, swap the art style, and tune evolution stages to match your brand.

Source: https://docs.hatched.live/docs/guides/customize-buddy

The buddy widget is opinionated but configurable. Most products change two
things: the art style and the brand tokens.

## Art style

At preset selection you pick a **creature style** — cute, sci-fi, fantasy,
minimal, playful, or custom. The image generator is primed with this style
for egg art, hatch art, and every evolution stage.

If none of the presets fit, upload a **style reference image** under
Settings → Art style. Hatched will sample the palette, silhouette, and
texture characteristics and apply them to generated buddies.

## Brand tokens

The widget is themed through `--hw-*` CSS custom properties that you set in
the dashboard. The four you'll touch most:

- `--hw-accent` — the primary call-to-action colour (coin-earn, hatch button)
- `--hw-accent-strong` — hover/pressed state
- `--hw-bg` — background
- `--hw-text` — text and outlines

See [Theme tokens](/docs/reference/theme-tokens) for the full `--hw-*` list.
Additional design tokens (radii, shadows, typography) follow a small
opinionated set — adjust them in the brand kit, not per page.

## Per-page overrides

For dense UIs or embedded contexts, pass an accent override and a size on the
loader `<script>` tag via `data-theme-vars` (a JSON map of `--hw-*` values)
and `data-size` (`small`, `medium`, or `large`):

```html
<script
  src="https://cdn.hatched.live/widget.js"
  data-session-token="…"
  data-theme="light"
  data-size="small"
  data-theme-vars='{"--hw-accent":"#FF6B4A"}'
  defer
></script>
<div data-hatched-mount="buddy"></div>
```

The loader injects these `--hw-*` variables into each widget's shadow root.

## Evolution stages

Each evolution stage gets a different image. You control the **count**
(3–6), the **conditions** (XP, skill level, badges, coins), and whether
evolution is automatic or user-triggered.

For a complete design conversation with the art generator, see
[Evolution](/docs/concepts/evolution).

## Equip slots

Marketplace items snap into one of a fixed set of equip slots: head, body,
accessory, background. Each item declares which slots it uses.
When designing items, stick to the slot's silhouette so the art layering
stays clean across evolution stages.