Design tokens and custom CSS
Fine-tune every color, size and spacing value, or write your own CSS.
The Design system panel (in Customize) exposes every design value of your form as a token. Colors are saved as OKLCH, so they look consistent on every screen.
Color tokens
| Group | Tokens |
|---|---|
| Brand | Primary, Primary foreground, Accent, Caret |
| Neutrals | Background, Foreground, Surface, Muted, Border |
| Feedback | Error, Error surface, Colorful error, Colorful error surface |
| Inputs Pro | Input background, Input text, Placeholder, Input border, Selection background, Selection text |
Layout tokens Pro
| Token | Range |
|---|---|
| Page width | 320–1200 px |
| Page padding | 0–96 px |
| Base font size | 12–24 px |
| Cover height | 10–100 % |
| Field gap / Section spacing | 0–64 px / 0–96 px |
| Input margin / Input padding | 0–64 px / 0–48 px |
| Radius / Input radius | 0–32 px / 0–48 px |
| Logo width, height, radius | up to 400 px |
| Input width mode | Full width, or Fixed at an input width of 160–960 px |
| Input height / Input border | 32–96 px / 0–8 px |
Custom CSS Pro
Write your own CSS for anything tokens don’t cover, up to 25,000 characters.