Appearance

The Coworkkit button is a dot-matrix circle — a field of dots that animate as the agent listens and speaks. It is the product's visual mark, and it is the same mark in every app that embeds Coworkkit. You can tint it to your brand and pick the dot style; you cannot restyle the animated rainbow ring around it or the glow along the page edge. Those stay fixed on purpose — so a Coworkkit surface always reads as one, wherever it shows up.

The look prop

One prop drives all of it: look on CoworkkitProvider. It takes either a look code — a short pointer you generate in the Studio — or an inline LookSpec object for quick iteration while you develop.

The look code is the production path. It is resolved at runtime from a public, cosmetics-only endpoint, so the actual dot shape and accent live in the Studio, not baked into your bundle:

// A look code from the Studio's Appearance tab — resolved at runtime.
<CoworkkitProvider look="amber-fox-7f" getToken={getToken}>
  {children}
</CoworkkitProvider>

The inline object is the dev path — applied directly, no network round-trip, handy while you are dialing in a color:

// An inline LookSpec — applied immediately, no Studio round-trip.
<CoworkkitProvider look={{ dotShape: "square", accentColor: "#7c3aed" }} getToken={getToken}>
  {children}
</CoworkkitProvider>

What you can change

Two fields, and only these two:

type LookSpec = {
  dotShape?: "circle" | "square"; // round dots (default) or square
  accentColor?: string; // any CSS color — tints the dots + the active controls
};

• dotShape — round dots (the default) or square. It changes how the dot field is drawn; the animation and layout are unchanged.
• accentColor — any CSS color. It tints the lit dots and the active control buttons (mic, hand, and the rest, once engaged). Leave it off to keep the default accent.

Everything else — the rainbow ring, the page-edge presence glow, the sizing and motion — is the brand mark and is not themeable. Customization is bounded by it by design.

The Studio flow

To ship a branded button without hand-writing a spec:

1. Open your Coworker and go to the Appearance tab.
2. Pick a dot shape and an accent; the preview updates live as you change them.
3. Save, then copy the look code it gives you.
4. Paste that code into your Provider's look prop.

The code is a live pointer, not a snapshot. Edit the look in the Studio and it updates on your users' next page load — no redeploy. The SDK applies the last resolved look instantly and revalidates fresh in the background, so a saved change propagates on its own.

Cosmetics only

The look channel is cosmetics-only by construction: the SDK keeps only dotShape and accentColor from the endpoint's response and discards every other field. No key, provider, or transport can ride this path — the same closed-loop rule that governs the rest of the SDK. If the look ever fails to resolve — offline, a bad code, a blocked request — the button silently falls back to its default and carries on.