Appearance
The Appearance page lets you customize the visual design of your agent's chat interface. You can choose from pre-built color presets, build a custom palette from base colors, fine-tune individual UI tokens, or write your own CSS for full control.
Navigate to Persona → Appearance in the left sidebar.
Color Palette
Palette Presets
A grid of pre-built themes is shown at the top of the page. Click any preset to instantly apply it to your agent. The preview on the right updates in real time.
Presets cover a range of styles — from neutral and professional to vivid and branded. Use them as a starting point, then fine-tune as needed.
Base Colors
Below the presets, you can define the base colors from which the entire theme is derived. The system generates a full set of semantic color tokens automatically from these four inputs.
| Base color | What it affects |
|---|---|
| Primary | Main interactive elements — top bar, send button, user bubble, CTA buttons |
| Accent | Links, reference text in AI responses, suggestion arrows (defaults to Primary if not set) |
| Neutral | Borders, icons, input text, disabled states |
| Surface | Chat background, gutter, agent bubble, input field, uploaded file chips |
Set the base colors by clicking each swatch and selecting from the color picker.
When you change a base color, the semantic tokens update automatically. A notice appears if any individual tokens have been manually overridden — click Update Colors to sync all component colors to your new base colors.
Light and Dark Mode
Use the sun / moon toggle at the top-right of the palette section to switch between previewing the light and dark variants of your theme. Both variants are configured and saved independently.
Fine-Tune Color Tokens
The Fine Tune Appearance section lets you override individual color tokens per component. Tokens are grouped into categories — click any category to expand it.
Leave a token field blank to use the value automatically derived from your base colors.
Each token can be independently locked to preserve your custom value when you click Update Colors after a base color change.
General
Page background, gutter area, and typography settings.
| Token | Description |
|---|---|
| Background Color | Main page / chat area background |
| Gutter Color | Outer gutter area surrounding the chat |
| Font Size (px) | Base font size for all chat text |
| Font URL | URL to a custom web font (e.g. Google Fonts @import URL) |
| Font Family | Font family name applied to the chat interface |
Top Bar
Header bar at the top of the chat interface.
| Token | Description |
|---|---|
| Background | Top bar background color |
| Text Color | Top bar text and icon color |
Agent Bubble
Message bubbles shown for AI responses.
| Token | Description |
|---|---|
| Background | Bubble background color |
| Text Color | Main response text color |
| Reference Text | Color of inline citation / reference links |
| Reference Hover | Color of reference links on hover |
User Bubble
Message bubbles shown for user messages.
| Token | Description |
|---|---|
| Background | Bubble background color |
| Text Color | User message text color |
Input Box
The message input area at the bottom of the chat.
| Token | Description |
|---|---|
| Background | Input field background color |
| Text Color | Text entered by the user |
| Border Color | Input field border in its default state |
| Focus Border | Input field border when focused / active |
Send Button
The send icon button next to the input field.
| Token | Description |
|---|---|
| Enabled Background | Button background when a message can be sent |
| Enabled Icon | Icon color in the enabled state |
| Disabled Background | Button background when the input is empty |
| Disabled Icon | Icon color in the disabled state |
| Hover Background | Button background on mouse hover |
Question Suggestions
Prompt suggestion chips shown before or during a conversation.
| Token | Description |
|---|---|
| Background | Chip background in its default state |
| Hover Background | Chip background on mouse hover |
| Text Color | Suggestion label text color |
| Arrow Color | Arrow icon color on each suggestion chip |
Uploaded Files
File attachment chips displayed above the input box.
| Token | Description |
|---|---|
| Background | Attachment chip background color |
Button / Login / Spinner
CTA buttons (e.g. login button) and loading spinner.
| Token | Description |
|---|---|
| Background | Button background color |
| Hover Background | Button background on hover |
| Text / Icon Color | Button label text and icon color |
Reset Colors
The Update Colors button (appears as a notice when base colors change) resets all overrides and regenerates the full token set from the current base colors. Use this to undo manual fine-tuning and start fresh after a base color change.
You can also reset individual categories by using the reset action inside each expanded category panel.
Advanced: Custom CSS Editor
Expand the Advanced: Custom CSS Editor section at the bottom of the page to access two code editors.
Theme CSS (read-only)
This editor displays the CSS that is auto-generated from your current theme configuration. It is read-only — you cannot edit it directly. It updates automatically whenever you change base colors or semantic tokens.
Custom CSS
This editor is where you write additional styles that sit on top of the generated theme. Your custom CSS is kept in a separate block and is never overwritten when you change colors or presets.
Use this area for:
- Overriding font families
- Adding custom animations
- Adjusting spacing or layout details not covered by the theme system
- Applying company-specific branding rules
Example:
/* Use a custom font */
.chat-container {
font-family: 'Inter', sans-serif;
}
/* Increase the chat bubble border radius */
.agent-message-bubble {
border-radius: 16px;
}
Saving Changes
Click Save at the bottom right. Changes apply immediately in the Config preview. Publish your agent to make them visible to end users.