definition.theme. All theme controls are available on Free except customCss, which is Pro.
Top-level tokens
| Token | Type | Accepted values | Plan |
|---|---|---|---|
logo | asset or null | Object containing a url and optional dimensions | Free |
background | object | brightness, layout, image | Free |
colors | object | Light semantic tokens plus dark | Free |
alignment | object | Welcome, question, and logo alignment | Free |
size | object | Welcome and question text size | Free |
font | string | Font family, for example Inter | Free |
corners | integer | 0 rounded, 1 square, 2 pill | Free |
logoPlacement | object | align, vertical | Free |
layout | object | pageWidth, baseFontSize CSS values | Free |
logoSize | object | Numeric width, height, radius | Free |
coverHeight | string | CSS height | Free |
inputs | object | Input dimensions, colors, spacing, and radius | Free |
buttons | object | Button dimensions, colors, alignment, and spacing | Free |
customCss | string | CSS applied to the form | Pro |
theme | string | light or dark initial mode | Free |
Background
| Token | Type | Values |
|---|---|---|
brightness | number | 0 through 100 |
layout | string | fullscreen, right, left, split |
image | asset or null | id, url, width, height, base64; additional asset metadata is allowed |
Alignment and size
| Token | Values |
|---|---|
alignment.welcomeAndEndings | 0 left, 1 center, 2 right |
alignment.questions | 0 left, 1 center, 2 right |
alignment.logo | 1 top-left, 2 top-center, 3 top-right, 4 bottom-left, 5 bottom-center, 6 bottom-right |
size.welcomeAndEndings | 0 small, 1 medium, 2 large |
size.questions | 0 small, 1 medium, 2 large |
logoPlacement.align | left, center, right |
logoPlacement.vertical | inside, overlap, below |
Semantic colors
Every color accepts a CSS color string. The same tokens may be repeated insidecolors.dark for dark mode.
| Group | Tokens |
|---|---|
| Page | background, foreground, text |
| Cards | card, cardForeground |
| Popovers | popover, popoverForeground |
| Primary actions | primary, primaryForeground |
| Secondary actions | secondary, secondaryForeground |
| Muted surfaces | muted, mutedForeground |
| Accents | accent, accentForeground |
| Destructive actions | destructive, destructiveForeground |
| Controls | border, input, ring |
| Charts | chart1, chart2, chart3, chart4, chart5 |
| Sidebar base | sidebar, sidebarForeground |
| Sidebar primary | sidebarPrimary, sidebarPrimaryForeground |
| Sidebar accent | sidebarAccent, sidebarAccentForeground |
| Sidebar controls | sidebarBorder, sidebarRing |
{
"colors": {
"primary": "#3969D9",
"primaryForeground": "#FFFFFF",
"background": "#F8FAFF",
"foreground": "#111827",
"dark": {
"primary": "#3969D9",
"primaryForeground": "#FFFFFF",
"background": "#0B1020",
"foreground": "#F8FAFC"
}
}
}
Input tokens
| Token | Type | Meaning |
|---|---|---|
width | string | CSS width |
height | string | CSS height |
background | string | CSS background color |
placeholder | string | CSS placeholder color |
border | string | CSS border color |
borderWidth | number | Pixels |
radius | number | Corner radius in pixels |
marginBottom | number | Bottom margin in pixels |
paddingX | number | Horizontal padding in pixels |
Button tokens
| Token | Type | Meaning |
|---|---|---|
width | string | CSS width |
height | string | CSS height |
alignment | string | left, center, or right |
fontSize | number | Pixels |
radius | number | Corner radius in pixels |
background | string | CSS background color |
text | string | CSS text color |
marginY | number | Vertical margin in pixels |
paddingX | number | Horizontal padding in pixels |
Complete example
{
"definition": {
"theme": {
"font": "Inter",
"corners": 0,
"theme": "light",
"background": {
"brightness": 100,
"layout": "fullscreen",
"image": null
},
"alignment": {
"welcomeAndEndings": 1,
"questions": 0,
"logo": 1
},
"size": {
"welcomeAndEndings": 2,
"questions": 1
},
"layout": {
"pageWidth": "720px",
"baseFontSize": "16px"
},
"inputs": {
"height": "48px",
"background": "#FFFFFF",
"border": "#CBD5E1",
"borderWidth": 1,
"radius": 10,
"paddingX": 14
},
"buttons": {
"height": "48px",
"alignment": "left",
"fontSize": 16,
"radius": 10,
"background": "#3969D9",
"text": "#FFFFFF",
"paddingX": 20
},
"colors": {
"primary": "#3969D9",
"primaryForeground": "#FFFFFF",
"ring": "#3969D9",
"dark": {
"primary": "#3969D9",
"primaryForeground": "#FFFFFF",
"ring": "#3969D9"
}
}
}
}
}
Custom CSS
customCss is Pro. Free-plan requests that add or change non-empty custom CSS return 403 PLAN_RESTRICTION. Sending an empty string is allowed to remove existing CSS.