Apply a system theme or build a custom theme with brand colors, typography, and border radius.
Themes control the visual appearance of your form — colours, fonts, shape, and background. Switch to the Design tab in the studio top bar to access the theme editor.
When you publish a form, a snapshot of the theme is embedded in the version. Changing the theme later affects future publishes only — existing published versions always render with the theme as it was when they were published.
Page background (overridden by gradient/image — see Backgrounds)
Surface
#f9fafb
Card and input background colour
Text
#111827
Body text colour
For best contrast, keep primary and background clearly different in
luminosity. Light primary on dark background, or dark primary on light
background, both work well.
When a form renders, the theme is translated into CSS custom properties on the root element. These are the same variables used by @workspace/form-renderer.
Variable
Maps from
--fr-primary
colors.primary
--fr-bg
background (computed from type)
--fr-surface
colors.surface
--fr-text
colors.text
--fr-font
typography.font
--fr-radius
shape.borderRadius (px)
--fr-title-size
typography.titleSize (rem)
--fr-body-size
typography.bodySize (rem)
--fr-title-weight
typography.titleWeight
These variables are useful if you are building a content-type plugin that needs to match the host form’s visual style.
