Color System
Learn how the widget's two-layer color system works — general colors for chat and UI elements, home screen colors for the landing view — and how to use auto-generation, templates, and manual overrides.
Overview
Every color in the widget is a CSS custom property injected at runtime from your saved configuration. Colors are organized into two groups:
- General — controls the chat interface, message bubbles, input fields, borders, and text throughout the widget
- Home — controls the home screen header, background decorations, cards, and highlight accents
You configure both groups from the Appearance tab in your widget editor.
General Colors
The general palette starts with two main colors. Every other color is derived from these.
Main Colors
| Color | What it controls | Default |
|---|---|---|
| Background | Widget background, panels, and surfaces | #FFFFFF |
| Accent (UI) | Buttons, links, active states, and interactive elements | #083BD9 |
Sub-Colors (Advanced)
These are auto-generated from the main colors but can be overridden individually. Expand the Advanced Colors section in the editor to see them.
| Color | Purpose | How it's generated |
|---|---|---|
| Launcher Button | Color of the floating chat button | Mirrors the accent color |
| Muted Background | Subtle surface variant | Background shifted by 20 |
| Dimmed Background | Stronger surface variant | Background shifted by 40 |
| Text | Primary body text | Light or dark gray based on background luminance |
| Muted Text | Secondary text | Slightly lighter/darker than primary text |
| Toned Text | Tertiary text | Mid-gray tone |
| Dimmed Text | Least prominent text | Faintest gray variant |
| Highlight Text | Strongest emphasis text | White on dark backgrounds, near-black on light |
| UI Text | Text on accent-colored surfaces | White or black based on accent luminance |
| User Bubble | Visitor's message bubble background | Blend of background and accent colors |
| User Bubble Text | Text inside visitor's bubble | White or black based on bubble color |
| Input Background | Message input field | Slightly darker than background |
| Input Text | Text in the input field | White or black based on input background |
| Border | Default borders | Background shifted by 20 |
| Muted Border | Subtle borders | Background shifted by 10 |
Home Screen Colors
The home screen has its own color group so you can give the landing view a distinct look from the rest of the chat.
Main Colors
| Color | What it controls | Default |
|---|---|---|
| Top Header | Background of the header area with logo and greeting | #DEE3F9 |
| Main Body | Background of the card area below the header | #DEE3F9 |
| Highlight 1 | Left-side accent in decoration patterns | #F5CAB7 |
| Highlight 2 | Right-side accent in decoration patterns | #799FE6 |
Sub-Colors
| Color | Purpose |
|---|---|
| Header Text | Text on the top header area |
| Body Text | Primary text on cards and content |
| Muted Text | Secondary text on the home screen |
| Dimmed Text | Least prominent home text |
| Highlight Text | Strongest emphasis on the home screen |
| Muted Background | Subtle surface for home cards |
| Dimmed Background | Stronger surface variant |
| Decorations | Color of pattern elements (dots, lines, grids) |
Background Styles
The home screen supports nine background styles, configured via the Background Style dropdown:
| Style | Description |
|---|---|
| Default | Blobs, grid dots, and vertical lines combined |
| Blobs | Soft color blobs only |
| Spotlight | Large blurred spotlight from the top center |
| Gradient | Three-point gradient mesh |
| Ripple | Concentric circles with color highlights |
| Grid | Checkerboard pattern with blur spots |
| Full Image | Uploaded image fills the background at reduced opacity |
| Small Image | Uploaded image fades out at 300px height |
| None | Solid color only |
For Full Image and Small Image, you upload an image file (WebP, PNG, or JPEG) directly in the editor.
Using Templates
Instead of building a palette from scratch, pick one of the five built-in templates:
Open the template picker
Click Templates in either the Theme or Home Screen section of the Appearance tab.
Choose a template
Select from Classic Blue, Midnight Sky, Crimson Night, Twilight Horizon, or Sunset Sands.
Apply to one or both groups
You'll be asked whether to apply the template to only the current color group or to both general and home colors at once.
Fine-tune
Adjust any individual color after applying the template. Use Auto-Generate to recalculate sub-colors if you change the main colors.
Live Preview
All color changes stream to the widget preview in real time via postMessage. You can see exactly how your palette looks across the home screen, chat, and other views before saving.