> ## Documentation Index
> Fetch the complete documentation index at: https://docs.feedal.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Themes

> 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.

<img src="https://mintlify.s3.us-west-1.amazonaws.com/feedal/images/building-forms-design-themes.png" alt="Theme editor in the Design panel" />

***

## 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

| Setting        | Default   | Description                                                                                            |
| -------------- | --------- | ------------------------------------------------------------------------------------------------------ |
| **Primary**    | `#111827` | Button colour, selected-state accents, interactive highlights                                          |
| **Background** | `#ffffff` | Page background (overridden by gradient/image — see [Backgrounds](/building-forms/design/backgrounds)) |
| **Surface**    | `#f9fafb` | Card and input background colour                                                                       |
| **Text**       | `#111827` | Body text colour                                                                                       |

<Tip>
  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.
</Tip>

***

## 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.

| Value            | Size      |
| ---------------- | --------- |
| `sm`             | 1.25 rem  |
| `md` *(default)* | 1.5 rem   |
| `lg`             | 1.875 rem |
| `xl`             | 2.25 rem  |

### Body size

Controls the font size of descriptions and answer input labels.

| Value            | Size      |
| ---------------- | --------- |
| `sm` *(default)* | 0.875 rem |
| `md`             | 1 rem     |
| `lg`             | 1.125 rem |

### Title weight

Controls the font weight of question/screen titles.

| Value                  | Weight |
| ---------------------- | ------ |
| `normal`               | 400    |
| `medium`               | 500    |
| `semibold` *(default)* | 600    |
| `bold`                 | 700    |

***

## Shape

**Border radius** controls how rounded cards, inputs, and buttons appear.

| Value           | Result               |
| --------------- | -------------------- |
| `0`             | Sharp square corners |
| `8` *(default)* | Subtly rounded       |
| `16`            | Visibly rounded      |
| `24`            | Pill-like            |

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`.

| 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](/developer/plugins/content-types) that needs to match the host form's visual style.

***

## Next steps

<CardGroup cols={2}>
  <Card title="Backgrounds" icon="image" href="/building-forms/design/backgrounds">
    Add solid colours, gradients, or image backgrounds.
  </Card>

  <Card title="Branding" icon="palette" href="/building-forms/design/branding">
    Add a logo and configure the powered-by footer.
  </Card>
</CardGroup>