> ## Documentation Index
> Fetch the complete documentation index at: https://docs.meetdarwin.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Make the chat look like your brand

> Style the real widget from the launcher to the booking experience.

<div className="darwin-location"><strong>Find it in Darwin</strong> Settings → Widget appearance <a href="https://app.meetdarwin.ai/admin/settings/appearance">Open this screen ↗</a></div>

<Frame caption="Exact color controls and the live widget preview share one appearance editor.">
  <img src="https://mintcdn.com/meet-darwin/j9QNY_OzVc2Uv_0E/images/screenshots/appearance.webp?fit=max&auto=format&n=j9QNY_OzVc2Uv_0E&q=85&s=3623465b0db90621a883902667e41fd7" alt="Exact color controls and the live widget preview share one appearance editor." width="1280" height="720" data-path="images/screenshots/appearance.webp" />
</Frame>

<p className="darwin-screenshot-note">Screenshots use a demonstration workspace. Your data, plan, and activation status may differ.</p>

The appearance editor changes the embedded chat, not your Darwin admin workspace. The preview uses the same widget components as the embed, with a sample conversation.

<Steps>
  <Step title="Choose a starting point">
    Open **Brand** and choose a preset. Pick an avatar style: brand symbol, custom image, initials, or no avatar. Upload a PNG, JPEG, or WebP image, or use a public HTTPS image URL. Choose whether the launcher uses a chat symbol or the avatar.
  </Step>

  <Step title="Set your colors">
    Open **Colors**. Edit the surfaces, text, buttons, header, messages, input, teaser, launcher, links, and feedback colors. Enter six-digit hex values for exact brand matching. Review any contrast warnings before saving.
  </Step>

  <Step title="Match your type and shape">
    In **Typography**, choose a font family or supply an HTTPS font URL, then set text size, weights, line height, and spacing. In **Shape & layout**, adjust corners, borders, shadows, panel size, launcher size, position, and screen offsets.
  </Step>

  <Step title="Review all states">
    Switch between **Opening**, **Welcome**, **Chat**, and **Booking**, then compare **Desktop** and **Mobile**. Check that long messages remain readable and that the launcher does not cover your website’s important controls.
  </Step>

  <Step title="Save and verify on your site">
    Select **Save appearance**. Previewing, importing, or choosing a preset changes a draft until you save. Reload your website after saving and check the live widget in a fresh session.
  </Step>
</Steps>

## Useful controls

| Area               | Controls                                                                                     |
| ------------------ | -------------------------------------------------------------------------------------------- |
| **Brand**          | Avatar, avatar size and corners, launcher icon, agent role visibility.                       |
| **Colors**         | Separate foreground and background values across every major widget state.                   |
| **Typography**     | Font source and fallbacks, body and heading sizes, weights, line height, letter spacing.     |
| **Shape & layout** | Panel, bubble, button and input corners; width, height, padding, borders, shadows, position. |
| **Preferences**    | Motion, attribution where your plan permits, theme import/export, reset.                     |

Origin and Adapt retain Darwin branding. Evolve and Apex allow its removal. Your plan enforces this even if an imported theme asks to hide it.

**Export theme** saves a reusable JSON file. **Import theme** and **Reset to Darwin** update the draft; review and save to apply them. The appearance preview does not create real leads, conversations, or bookings.