> For the complete documentation index, see [llms.txt](https://ecomnius.gitbook.io/formrest/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ecomnius.gitbook.io/formrest/theme-options/colors-and-typography.md).

# Colors & Typography

Formrest keeps its design tokens in one place: **Theme Options**. Every color and font you set there is used by the theme's own CSS and is also copied to the Elementor **Global Colors** and **Global Fonts**, so the color and font pickers in the Elementor editor offer the same palette.

## Basic Styling

Go to **Theme Options > Styling > Basic Styling**.

| Option                | Demo value | Used for                                     |
| --------------------- | ---------- | -------------------------------------------- |
| Body Background Color | `#FFFFFF`  | Page background                              |
| Primary color         | `#243E32`  | Brand color: buttons, active states, accents |
| Titles Color          | `#243E32`  | Headings                                     |
| Text Color            | `#262824`  | Body text                                    |
| Border Color          | `#DEE2E0`  | Lines, card and field borders                |

## Formrest Color System

Go to **Theme Options > Styling > Formrest Color System**. These colors are the surfaces and accents used across the demo sections.

| Option               | Demo value            |
| -------------------- | --------------------- |
| Surface background   | `#FFFFFF`             |
| Sage surface         | `#E2E7DE`             |
| Sand surface         | `#EAE2D5`             |
| Stone surface        | `#EAE7DF`             |
| Highlight accent     | `#E7EBAB`             |
| Warm accent          | `#98563D`             |
| Subdued text         | `#5C625A`             |
| Muted text           | `rgba(38,40,36,0.66)` |
| Text on accent       | `#FBFAF8`             |
| Dark surface         | `#262824`             |
| Text on dark surface | `#F5F3EE`             |

In Elementor, these colors appear in every color picker under **Global Colors**. When you set a section background or a text color to a global color, it follows any later change you make in Theme Options.

{% hint style="info" %}
Global Colors you add yourself in **Elementor > Site Settings > Global Colors** are kept when Theme Options are saved. Only the Formrest colors are updated.
{% endhint %}

## Buttons, Links and Forms

* **Buttons/Links**: general link color and hover color, primary button (demo: `#243E32` background, `#FBFAF8` text), secondary button (white background, `#243E32` text) and **Button radius** (the demo uses `100` for pill buttons).
* **Forms**: field radius, input background and text colors, label color, and submit button colors.

## Typography

Go to **Theme Options > Typography**.

| Option                     | Demo font             | Used for                                      |
| -------------------------- | --------------------- | --------------------------------------------- |
| Regular Text Font          | Instrument Sans, 18px | Body text, navigation, buttons, product cards |
| Primary Titles Font Family | Manrope 500           | Headings                                      |
| Data Font Family           | IBM Plex Mono         | Dimensions, codes and other data              |

Only the fonts you select here are loaded from Google Fonts.

## Site width

The content width is set in **Theme Options > Site Settings > Site Width** (demo: 1440 px). It is also copied to the Elementor container width, so boxed sections line up with the header and footer.