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.
Steps
- 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.
- 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.
- 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.
- Optional: under Character portrait, pick one of the built-in characters, or the first tile for no portrait.
- Adjust individual settings in the sections below the portrait. The previews update as you change them.
- Fix any contrast warnings (see below).
- 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 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.