Design system
One look for every tour, tooltip, banner, announcement, checklist and survey on your site, in light and dark.
Your design system decides how guidance looks on your site. Edit it once and every item that uses it follows, without re-publishing.
Open it from Design system in the sidebar. Pick an element on the left (Tours, Tooltips, Banners, Announcements, Checklists, Surveys, Help launcher) to preview it on the canvas, and switch the preview between Light and Dark. The settings on the right apply to every element.
Settings
| Group | What you set |
|---|---|
| Size | Default width of the selected element. Banners: full width with side margins, or a fixed width |
| Style | Starting point (Clean or Soft) and font. Switching style resets the rest to that style |
| Colours | Background, text, accent, text on accent and border, separately for light and dark |
| Shadow | None, small, medium, large, or a custom shadow (X, Y, blur, spread, colour, opacity) |
| Card | Card corners and borders |
| Buttons | Size (medium or large), corners, and whether secondary buttons (Skip, Later) are text only or outlined |
Save applies the changes. Cancel leaves without saving, after asking you to confirm.
Using it on an item
Tours, tooltips and banners have Use brand theme in their appearance step. It is on for new items and off for items created before the design system existed, so their look doesn't change. When it's on, choose the Theme mode (light or dark) for that item; its colours, corners, shadow, button size and width come from the design system.
Visitors see a change within a minute.
API, MCP and CLI
- API:
GETandPATCH /api/workspaces/current/brand-theme(see the API reference). - MCP:
get_design_systemandupdate_design_system(API keys only for changes). See MCP tools. - CLI:
cueston design-systemandcueston design-system update. See CLI.