Skip to main content
Open Design → Customise in the studio to access all options below. Changes apply live to the canvas preview.

​
Colors

Surface opacity is especially effective with gradient or image backgrounds. Set it to 80–90% to let the background bleed through the card while keeping text readable.
The background colour is configured separately in the Background section below.

​
Background

Three background types are available.

​
Solid

A flat background colour behind the entire page.

​
Gradient

A smooth colour transition across the page.

​
Image

A photograph or illustration as the page background.
When using an image background, reduce Surface opacity (Colors section) so the image shows through the form card.

​
Typography

​
Font family

One font applies globally to the entire form. The following fonts are pre-loaded for instant rendering: Sans-serif
  • Inter (default)
  • Outfit
  • Plus Jakarta Sans
  • Nunito
  • Syne
  • Albert Sans
  • Barlow Condensed
  • Roboto
Serif
  • Lora
  • Cormorant Garamond
  • DM Serif Display
  • Libre Baskerville
  • Playfair Display
  • Georgia
Monospace
  • Courier New

​
Title size

Controls the font size of question and screen titles.

​
Title weight

Controls the font weight of question and screen titles.

​
Body size (description size)

Controls the font size of question descriptions and answer labels.

​
Shape

Border radius controls how rounded all interactive elements appear — cards, inputs, buttons, and option chips. The value is in pixels and applies uniformly to all elements.

​
Branding

Branding adds your logo and/or company name to the form. Where they appear depends on the active layout.
The Split alignment works best with the Navbar layout. In the Clean layout it centers branding above the form card regardless of this setting.

​
CSS variables

When a form renders, the theme is translated into CSS custom properties on the root element using the --fr-* prefix. These variables are injected by ThemeProvider and available to all question components and custom layouts. If you are building a content-type plugin these let you match the host form’s visual style without hard-coding values.

​
Saving themes

When you have a theme you’re happy with, click Save theme in the amber bar at the bottom of the Customise panel.
  • Save as new — creates a new saved theme with a name you choose
  • Update existing — overwrites the saved theme this form was based on (affects all forms using it on next publish)
Saved themes appear in the Gallery tab under the Saved filter.

​
Next steps

Layouts

Choose between Clean, Navbar, and Split page structures.

System themes

Browse the 10 pre-built curated themes.