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

​
Colors

SettingDefaultDescription
Primary#111827Buttons, selected states, progress bar, interactive accents
Surface#f9fafbCard and input background colour
Surface opacity100%Transparency of the surface colour — lower values let the page background show through cards
Text#111827All body text inside the form card
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.
SettingDescription
StyleLinear (straight direction) or Radial (from a centre point outward)
Start colourColour at the gradient origin
End colourColour at the gradient end
Direction (linear only)Angle in degrees (0° = bottom to top, 90° = left to right)
Radius (radial only)How far the gradient spreads from the centre (10%–200%)

​
Image

A photograph or illustration as the page background.
SettingOptionsDescription
Image URLAny HTTPS URLRemote image to use as background
UploadPNG, JPG up to 10 MBUpload directly from your device
SizeCover, Contain, AutoCover fills the viewport; Contain fits within it
PositionCenter, Top left, Top right, Bottom left, Bottom rightWhere to anchor the image
RepeatNo Repeat, Repeat Both, Repeat X, Repeat YWhether the image tiles
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.
ValueRendered size
SM1.25 rem
MD (default)1.5 rem
LG1.875 rem
XL2.25 rem

​
Title weight

Controls the font weight of question and screen titles.
ValueWeight
Normal400
Medium500
Semibold (default)600
Bold700

​
Body size (description size)

Controls the font size of question descriptions and answer labels.
ValueRendered size
SM (default)0.875 rem
MD1 rem
LG1.125 rem

​
Shape

Border radius controls how rounded all interactive elements appear — cards, inputs, buttons, and option chips.
ValueEffect
0Sharp square corners
8 (default)Subtle rounding
16Noticeably rounded
24–32Pill-shaped elements
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.
SettingDescription
LogoUpload a PNG, SVG, or JPG (up to 5 MB). Displays at its natural aspect ratio.
Logo widthOverride the logo’s rendered width in pixels (16–400 px). Defaults to the image’s natural width.
Logo alt textAccessible description of the logo image.
Logo link URLWraps the logo in an anchor tag — useful for linking back to your homepage.
Brand nameText shown next to (or instead of) the logo.
AlignmentLeft, Center, Right, or Split (logo left, brand name right).
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.
VariableSource
--fr-primarycolors.primary
--fr-bgBackground colour (computed from type)
--fr-surfacecolors.surface with opacity applied
--fr-textcolors.text
--fr-fonttypography.font
--fr-radiusshape.borderRadius (as px)
--fr-title-sizetypography.titleSize (as rem)
--fr-body-sizetypography.bodySize (as rem)
--fr-title-weighttypography.titleWeight (numeric)
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.