Themes

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.

---

​

How theming works

A theme is a reusable configuration. You can:

• Use a system theme (pre-built, read-only)
• Create a custom theme for full control
• Assign one theme per form

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.

---

​

Colours

---

​

Typography

​

Font

One font is applied globally to the entire form. The font is loaded from Google Fonts at runtime. Popular options include:

• Inter (default) — clean, modern, neutral
• Geist — sharp tech aesthetic
• DM Sans — friendly, geometric
• Playfair Display — editorial, serif
• Space Grotesk — contemporary, slightly quirky

You can type any Google Fonts family name. If the font is unavailable it falls back to the system sans-serif.

​

Title size

Controls the font size of question/screen titles.

​

Body size

Controls the font size of descriptions and answer input labels.

​

Title weight

Controls the font weight of question/screen titles.

---

​

Shape

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

---

​

CSS variables

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. These variables are useful if you are building a content-type plugin that needs to match the host form’s visual style.

---

​

Next steps