> ## 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.
# Colors, Typography & Design
> Full reference for every configurable option in the Feedal theme editor — colors, fonts, background, shape, and branding.
Open **Design → Customise** in the studio to access all options below. Changes apply live to the canvas preview.
***
## Colors
| Setting | Default | Description |
| ------------------- | --------- | -------------------------------------------------------------------------------------------- |
| **Primary** | `#111827` | Buttons, selected states, progress bar, interactive accents |
| **Surface** | `#f9fafb` | Card and input background colour |
| **Surface opacity** | `100%` | Transparency of the surface colour — lower values let the page background show through cards |
| **Text** | `#111827` | All 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.
| Setting | Description |
| ----------------------------- | ------------------------------------------------------------------- |
| **Style** | Linear (straight direction) or Radial (from a centre point outward) |
| **Start colour** | Colour at the gradient origin |
| **End colour** | Colour 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.
| Setting | Options | Description |
| ------------- | ------------------------------------------------------ | ------------------------------------------------ |
| **Image URL** | Any HTTPS URL | Remote image to use as background |
| **Upload** | PNG, JPG up to 10 MB | Upload directly from your device |
| **Size** | Cover, Contain, Auto | Cover fills the viewport; Contain fits within it |
| **Position** | Center, Top left, Top right, Bottom left, Bottom right | Where to anchor the image |
| **Repeat** | No Repeat, Repeat Both, Repeat X, Repeat Y | Whether 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.
| Value | Rendered size |
| ---------------- | ------------- |
| `SM` | 1.25 rem |
| `MD` *(default)* | 1.5 rem |
| `LG` | 1.875 rem |
| `XL` | 2.25 rem |
### Title weight
Controls the font weight of question and screen titles.
| Value | Weight |
| -------------------- | ------ |
| Normal | 400 |
| Medium | 500 |
| Semibold *(default)* | 600 |
| Bold | 700 |
### Body size (description size)
Controls the font size of question descriptions and answer labels.
| Value | Rendered size |
| ---------------- | ------------- |
| `SM` *(default)* | 0.875 rem |
| `MD` | 1 rem |
| `LG` | 1.125 rem |
***
## Shape
**Border radius** controls how rounded all interactive elements appear — cards, inputs, buttons, and option chips.
| Value | Effect |
| --------------- | -------------------- |
| `0` | Sharp square corners |
| `8` *(default)* | Subtle rounding |
| `16` | Noticeably rounded |
| `24–32` | Pill-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](/theming/layouts).
| Setting | Description |
| ----------------- | ------------------------------------------------------------------------------------------------ |
| **Logo** | Upload a PNG, SVG, or JPG (up to 5 MB). Displays at its natural aspect ratio. |
| **Logo width** | Override the logo's rendered width in pixels (16–400 px). Defaults to the image's natural width. |
| **Logo alt text** | Accessible description of the logo image. |
| **Logo link URL** | Wraps the logo in an anchor tag — useful for linking back to your homepage. |
| **Brand name** | Text shown next to (or instead of) the logo. |
| **Alignment** | Left, 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.
| Variable | Source |
| ------------------- | -------------------------------------- |
| `--fr-primary` | `colors.primary` |
| `--fr-bg` | Background colour (computed from type) |
| `--fr-surface` | `colors.surface` with opacity applied |
| `--fr-text` | `colors.text` |
| `--fr-font` | `typography.font` |
| `--fr-radius` | `shape.borderRadius` (as `px`) |
| `--fr-title-size` | `typography.titleSize` (as `rem`) |
| `--fr-body-size` | `typography.bodySize` (as `rem`) |
| `--fr-title-weight` | `typography.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](/developer/content-type-plugins) 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
Choose between Clean, Navbar, and Split page structures.
Browse the 10 pre-built curated themes.