# Appearance and branding for simulations and coaches

> Set the colors, sizing, character portrait, loading screen and devlin.ai branding that learners see in a simulation or coach.

- Plans: All plans
- Canonical: https://docs.devlin.ai/simulations/appearance-and-branding

Every simulation and coach has its own appearance settings: colors, corner rounding, text size, an optional character portrait, the loading screen, and how much devlin.ai branding learners see. Until you change them, a simulation or coach uses the dark devlin.ai look, with the gradient outline and gradient buttons turned on.

## Before you start
- Open the simulation or coach from **Studio**.
- The appearance controls are available on all plans. A few of them are limited to the Core, Team, Enterprise plans: background transparency, the simpler loading screens, and hiding devlin.ai branding. On other plans those controls are dimmed and show a plan badge that links to the plans page.
- The text and layout of the screen learners see before a session starts are set separately. See [Start screen](https://docs.devlin.ai/simulations/start-screen).

## Steps
1. In a simulation, open the **Design** stage and choose **Appearance**. In a coach, open the **Design** stage and choose **Visual Editor**. Both open the same set of controls under the heading **Appearance**.
2. Optional: start from something you already have. Under **Match branding of…**, pick another simulation or coach in your workspace and confirm with **Yes, copy settings**. This replaces the current colors, sizing, loading screen and branding settings with the ones from the item you picked. The character portrait is not copied. Nothing is saved until you save.
3. Optional: under **Theme Presets**, choose **Light theme** or **Dark theme (default)**. A preset swaps every color to a palette that meets WCAG AA contrast and keeps your sizing, corners and branding choices.
4. Optional: under **Character portrait**, pick one of the built-in characters, or the first tile for no portrait.
5. Adjust individual settings in the sections below the portrait. The previews update as you change them.
6. Fix any contrast warnings (see below).
7. Save. In a simulation, use **Save Changes** in the title row at the top of the editor. In a coach, use **Save Changes** in the Appearance card.

## Result
Learners see the saved appearance the next time the simulation or coach loads, in an embed or on its standalone link.

## What you can customize
Colors are entered with a color swatch or as a hex code, typed with or without the leading `#`.

- **Font Settings**: **Font Size** for the conversation.
- **Widget Container**: the **Background** color, **Background Opacity** (limited to the Core, Team, Enterprise plans) and **Corner Radius** of the widget. **Use branded outline** draws the devlin.ai gradient border around the widget. Turn it off to set your own **Outline** color, **Outline Width** and **Outline Opacity**.
- **Bot Message Bubbles** and **User Message Bubbles**: for the character's messages and the learner's messages, the **Background**, **Text Color**, **Opacity**, **Corner Radius** and **Font Weight**.
- **Message Input Field**: **Corner Radius** and **Text Color**. **Use branded outline** draws the gradient border around the input. Turn it off to set **Border Color**, **Border Width** and **Border Opacity**, plus the **Active Border Color**, **Active Border Width** and **Active Border Opacity** used while the learner is typing.
- **Send Button**: **Corner Radius** and **Text Color**. **Use branded button** fills the button with the devlin.ai gradient. Turn it off to set your own **Background** and **Opacity**.
- **Voice Mode**: these settings apply only when voice is turned on. **Use branded mic button gradient** (turn it off to set **Mic Button Background**), **Voice Accent Color** and **Voice Text Color**.
- **Standalone Display**: the **Page Background**, **Widget Width** and **Widget Height** used when the simulation or coach is opened outside an iframe.
- **Loading Screen**: **Traditional** shows a background, loading bar, status text and optional logo, and lets you set its **Background**, **Loading Bar Color**, **Corner Radius** and **Status Text Color**. **Minimal** shows the loading bar only. **Invisible** shows no loading screen. **Minimal** and **Invisible** are limited to the Core, Team, Enterprise plans.
- **Branding**: see "devlin.ai branding" below.

## Previews
A **Text preview** shows the widget with your settings. Switch it between **Conversation** and **End of sim** to check the conversation and the closing feedback with its retry button, which uses the send button's style. A **Voice preview** sits beside it. On very wide screens the previews stay in view at the right of the controls; otherwise they are below them.

## Contrast checks
devlin.ai checks your color pairs against WCAG AA as you edit, using the text contrast level for text and the non-text contrast level for borders and the voice accent.

- A badge next to a color shows its contrast ratio, with **AA** when it passes and **Fails AA** when it does not. Choose **Fix** on a failing badge to change that color to the closest lighter or darker shade that passes.
- When any pair fails, a warning at the top of the tab lists each failing pair with its ratio. **Fix all to AA** corrects every pair that has an editable color, and **Undo** restores the colors it replaced.
- The gradient border around the input is a fixed brand color. If it fails against your widget background, darken the widget background or turn off **Use branded outline**.

The warning does not block saving.

## Character portrait
A portrait is one of 6 built-in characters. You pick one. You cannot upload your own image.

In a simulation, the portrait appears above the conversation in text sessions and in the call panel during voice sessions. In a coach, the portrait appears in the call panel during voice sessions.

The portrait's expression follows the character's mood, which the simulation or coach sets through its mood variable. The moods are neutral, happy, sad, angry, afraid, surprised, disgusted. To choose the expression learners see first and to describe when the mood should change, follow the link under the portrait picker to **Variables** in the **Design** stage, where the **Character mood** card has the **Starting mood** setting.

## devlin.ai branding
Below the message input, learners see a short AI disclaimer followed by "Powered by devlin.ai", which links to devlin.ai.

Under **Branding**, on the Core, Team, Enterprise plans you can:

- Hide the "Powered by devlin.ai" footer with the first checkbox. The AI disclaimer always stays.
- Turn on **Hide devlin.ai branding from loading screen** to show the loading screen without the devlin.ai logo.
- Under **Voice Mode**, turn on **Hide devlin.ai branding from the voice popup** to remove the devlin.ai wordmark from the microphone permission popup.

On other plans the learner-facing widget keeps the footer, the logo and the **Traditional** loading screen regardless of what is stored.

**Footer Text Color** is available on all plans. Keep the disclaimer readable against your widget background.

## Workspace color schemes and AI tools
An AI tool connected over the [MCP server](https://docs.devlin.ai/integrations/mcp-server-and-ai-tool-connectors) can read your workspace's saved color schemes, and which one is the default, so it can match a simulation or coach to your brand.

## Related
- [Start screen](https://docs.devlin.ai/simulations/start-screen)
- [Build a simulation](https://docs.devlin.ai/simulations/build-a-simulation)
- [Embedding a simulation in Articulate Storyline](https://docs.devlin.ai/publish-and-embed/storyline-web-object-setup)
- [MCP server](https://docs.devlin.ai/integrations/mcp-server-and-ai-tool-connectors)