Customise the buddy

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

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 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):

<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.

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.