# Design tokens for custom CSS

> The CSS custom properties every Maxforms form renders on its public page, and what each one controls.

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.