Color System | Yaplet

Overview

There is no palette to fill in. The Widget section of Brand → (your brand) → Chat widget → Design (Chat Widget) asks for a handful of things, and every other color in the widget — surfaces, text, chips, badges, gradients, the color behind the greeting, the launcher — is worked out from them. The section's own subtitle: "The panel itself: your images, your colors, and the shape of everything in it."

Each widget has its own theme. Since a brand carries at most one chat widget, that is one theme per brand — and the brand's public pages use it too.

Widget Color

"The page color. Light or dark starts here." It decides whether the widget reads light or dark, and every grey in it is tinted from this color. Six swatches give you a quick start — Paper #FFFFFF, Linen #FBF7F1, Mist #F5F7FB, Slate #1E2430, Graphite #15171C, Ink #0B0D14 — and a color picker underneath takes any color at all.

Pick something clearly light or clearly dark. A mid-tone grey leaves no room for readable text on it, and the readability check below will say so.

Brand Colors

"The first one paints buttons and links. Up to three, in gradient order."

Main — buttons, links, the active tab in the dock and the visitor's own message bubbles. The launcher bubble on your website follows it too, until you give the bubble colors of its own.
2nd and 3rd — join the gradients and the shapes behind the greeting, in the order you put them.

Add a color pre-fills the shade the widget would otherwise have invented for that slot, so you can start from something that already fits. Reorder with the Move up / Move down arrows, drop one with Remove (the last color cannot be removed), and stop at three — "Three colors is the maximum."

One color means one hue. If you give a single brand color, the shades the widget needs are lighter or darker versions of it — never a different color it made up.

Buttons & Messages

"How your brand colors are painted on buttons and your visitors' messages." Two options:

Option	What it does
One color	"Buttons, visitor messages and the launcher bubble in one solid color."
Gradient	"Your colors run through buttons, visitor messages and the launcher bubble, in the order above. Give the bubble its own colors in the Launcher section to detach it."

The angle of the gradient is fixed; there is nothing to set.

The launcher bubble follows this setting too, until you give it colors of its own. With One color the bubble is your main brand color; with Gradient it runs through your brand colors (with a single brand color, from that color into a lighter or darker shade of it). Colors you set for the bubble in the Launcher section take over from this setting — see Launcher Button.

The Color Behind the Greeting

The fourth thing that carries your colors is the Color layer of the Home screen background — None, Tint, Solid or Gradient. It sits in the Home screen section, below the Widget section, alongside the Photo, Glow and Lines layers, and it is covered in Home Screen Background.

What Is Calculated for You

From those choices the widget derives, and keeps in step:

the surface colors of every card, chip, panel and the composer, washed with as much brand color as the Cards setting asks for — Neutral, Subtle, Medium or Strong (see Appearance & Theming)
four tiers of text — headings, body, labels, timestamps — on the page and on every surface
link color, the active dock item, the unread badge, error, success and warning colors
the color behind the greeting and the ink that reads on it
the launcher bubble and the color of the icon on it, until you set them yourself
the colors of the shapes and lines on the Home screen, shaded to suit whatever they sit on

The readability check

A small icon in the Widget section's header tells you where you stand: a green tick with the tooltip "All text stays readable on this theme.", or a warning sign. When some pairs fall short, a warning bar also appears at the top of the section — for example "3 text and background pairs fall short on this theme." — with a Details button.

The icon and Details both open Readability: every pair — headings on a card, body text on the page, the label on a button, the icon on the launcher, the greeting on the Home header and so on — with its measured contrast. Headings aim for 10:1, body text for 7:1, everything else for 4.5:1 and the launcher icon for 3:1. The same dialog lists the adjustments the widget made on its own to keep text readable, such as a gradient pulled together slightly. Nothing is ever silently left unreadable.

Starting Points

Starting points, in the Widget section's header, applies one of twelve finished looks — colors, Home background, card finish, corners and bubble together. The full list is on Appearance & Theming.

Letting AI Propose a Design

Redesign with AI, in the same header, designs the widget from a website address and previews the result before anything is saved — see Appearance & Theming.

A Dark Widget

There is no dark-mode switch. Pick a dark Widget color — Slate, Graphite or Ink, or any dark color of your own — and the widget solves light text, light hairlines and matching surfaces for it. The dark starting points (Midnight, Terminal, Twilight, Ember and Aurora) do the same in one click.

Live Preview

Every change is drawn in the widget preview beside the form the moment you make it — Home, the chat, Help and the rest — so you see the whole widget in the new colors before saving. The preview's launcher bubble follows too.