Every public Maxforms form renders a set of CSS custom properties for its design: colors, corner radius, spacing, width, and image sizes. The Design tab's settings compute their values. Maxforms does not yet offer a Custom CSS control in the builder, so there is currently no way to override these properties from the product; this page documents the token names for reference.
Why these tokens are documented now#
These property names are a tested, stable part of the platform: renaming one is a breaking change, not a refactor. Whenever Maxforms ships a way to set custom CSS, it will read these same names, so this reference will not need to change out from under you.
Colour and surface#
| Token | What it controls |
|---|---|
--mf-bg |
The page canvas behind the form |
--mf-text |
The main text colour |
--mf-surface |
Input backgrounds, and the form card in Card mode |
--mf-muted |
Help text and field descriptions |
--mf-border |
Input and card borders |
--mf-primary-fg |
Text drawn on top of your primary colour, picked for contrast |
--mf-ring |
The focus ring |
--primary-50 … --primary-950 |
The full ramp generated from your primary colour |
Shape, spacing and size#
| Token | What it controls |
|---|---|
--mf-radius |
Corner radius for inputs, buttons and cards |
--spacing |
The base spacing step the whole form scales from |
--mf-width |
Maximum width of the form column |
--mf-font-scale |
Text size multiplier, applied at the root so every field follows |
--font-family |
The chosen web font, when you pick one |
Images#
| Token | What it controls |
|---|---|
--mf-logo-size |
Width and height of the logo badge |
--mf-cover-h |
Height of the cover image |
--mf-overlay |
The tint laid over a background image |
How dark appearance is rendered#
When a form's Appearance setting is Dark, Maxforms puts a dark class on the page and every token above resolves to its dark value directly. When it is Match device, the token values use the CSS light-dark() function so the browser picks the light or dark value from the visitor's system setting, and a small script keeps a dark class on the page in sync with that setting for anything else that needs it. A future Custom CSS control could therefore rely on either the .dark class or a prefers-color-scheme: dark media query on a Match device form.