DocsStyling
Styles JSON reference
Every style key, its type and default — the shape shared by the web embed and every SDK.
A site’s styles are stored as one JSON object with seven sections. It’s the exact shape returned by the get_styles MCP tool and sent to the web embed and every SDK. Every field is optional — anything you leave out falls back to the default.
Colours are hex (#1925AA) or rgba() strings. Sizes are numbers in pixels.
{
"fab": { "position": "bottom-right", "icon": "rocket", "bg_color": "#1925AA", "border_radius": 24 },
"card": { "bg_color": "#ffffff", "border_radius": 12 },
"type": { "title_color": "#0D0A1C", "body_color": "#4b5563", "dot_inactive_color": "rgba(13,10,28,0.15)" },
"btn": { "bg_color": "#1925AA", "text_color": "#ffffff", "border_radius": 8 },
"beacon": { "style": "numbered", "bg_color": "#1925AA", "text_color": "#ffffff" },
"overlay": { "bg_color": "rgba(0,0,0,0.45)", "spotlight_color": "rgba(0,0,0,0.45)" },
"carousel": { "bg_color": "#1a1a2e", "text_color": "#ffffff", "width": 600 }
}fab — launcher button
| Field | Type | Default | Description |
|---|---|---|---|
position | string | bottom-left | Web: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right. Apps: left or right (default right). |
icon | string | question | A flat icon key — question, compass, map, lightbulb, sparkle, search, book, rocket, chat, info, play, guide, flag, bell, gift, check, heart, lock, settings, trophy, zap, eye, cursor, chart — or a single emoji. |
bg_color | color | #7c3aed | Button background. Hover is derived. |
border_radius | number | 24 | Corner radius in px. |
size | number | 44 | iOS / Android only. 32–72. |
bottom_offset | number | 40 | iOS / Android only. 0–200. |
card — tooltip & welcome card
| Field | Type | Default | Description |
|---|---|---|---|
bg_color | color | #ffffff | Card background. |
border_radius | number | 14 | Corner radius, 0–24. |
type — text
| Field | Type | Default | Description |
|---|---|---|---|
title_color | color | #111111 | Step and welcome titles. |
body_color | color | #4b5563 | Step and welcome body text. |
dot_inactive_color | color | rgba(13,10,28,0.15) | Progress dots for other steps. |
btn — action buttons
| Field | Type | Default | Description |
|---|---|---|---|
bg_color | color | #7c3aed | Primary button background. |
text_color | color | #ffffff | Primary button text. |
border_radius | number | 8 | Corner radius, 0–24. |
beacon — step markers
| Field | Type | Default | Description |
|---|---|---|---|
style | string | numbered | numbered, dot or ring. |
bg_color | color | fab.bg_color | Beacon colour. |
text_color | color | #ffffff | Number colour (numbered style only). |
overlay — spotlight (web)
| Field | Type | Default | Description |
|---|---|---|---|
bg_color | color | rgba(0,0,0,0.45) | Page dimming while a tour runs. |
spotlight_color | color | rgba(0,0,0,0.45) | Shadow around the highlighted element. |
carousel — splash carousel
| Field | Type | Default | Description |
|---|---|---|---|
bg_color | color | #1a1a2e | Slide background. |
text_color | color | #ffffff | Slide text. |
width | number | 600 | Web only. Max modal width, 400–1400. |
Something missing or unclear? Tell us and we’ll fix the page.