# Set your colors, fonts and scales

The colors, fonts and scales of your site are set once and used on all your pages. This article teaches you how to set the system colors and your brand colors, install your fonts, create your scale values and clean up the inventory.

## Before you start

- The **Design System** screen is in the **Appearance** menu. It is reserved for site administrators.
- Brand colors, sizes, spacings and radii are created from the editor. Creating or editing them is reserved for site administrators, like the **Design System** screen. Other roles choose among the existing values.
- Every change is saved as soon as you make it. It goes live at the next publication of the site.
- To set a ready-made palette and fonts in one go, use [the design catalog](https://lovelyrender.com/documentation/adopt-catalog-design/).

## Find each setting

A value you reuse is created in the editor, on the block that uses it. Colors with a fixed role and fonts stay on the **Design System** screen.

| Setting | Where |
| --- | --- |
| Light and dark modes of the site | Screen **Design System**, or panel **Palette** of the design catalog |
| The eleven system colors | Screen **Design System** |
| Brand colors | Editor, a block’s color picker, section **Theme** |
| Installed fonts | Screen **Design System** |
| Text sizes | Editor, panel **Typography**, setting **Font size** |
| Spacings | Editor, panel **Size & Spacing** |
| Radii | Editor, panel **Borders** |
| Shadows, gradients and filters | Editor, panel of the setting concerned |

## Choose light or dark mode

At the top of the colors on the **Design System** screen, the **Light and dark modes** menu sets the mode your site shows.

![The Light and dark modes menu of the Design system screen, set to Both, with its help.](https://static.lovelyrender.com/uploads/2026/10/1009-doc-design-modes.png)

| Choices | Your visitors see | The screen asks for |
| --- | --- | --- |
| **Both** (default) | Light or dark, depending on their device or their choice in an appearance selector. | Each brand color and each state with its dark mode value. |
| **Light** | Always light, even on a device set to dark. | The colors only. |
| **Dark** | Always dark, even on a device set to light. | The dark mode value of each brand color and each state. |

Changing the choice saves and reloads the screen. A dark value that the screen no longer shows stays saved: you get it back by switching to **Both**.

## Set the system colors

The system colors have a fixed role in the product. Their name does not change but you choose their value. They are arranged in four cards.

| Card | Colors | Role |
| --- | --- | --- |
| **Contrast references** | **Dark (black reference)** and **Light (white reference)** | All the site’s contrasts are measured against them. In dark mode, the dark one becomes the page background and the light one the text. |
| **Neutrals** | **Neutral light** and **Neutral dark** | The surface of cards and panels. The light neutral must stay lighter than the dark neutral. |
| **Brand** | **Primary**, **Secondary** and **Accent** | The primary colors the main buttons, the links and the selected tab. The secondary colors the secondary buttons and the hovered links. |
| **Statuses** | **Danger**, **Warning**, **Information** and **Success** | The site’s messages. The background and border of each message derive from them. |

1. In the administration menu, open **Appearance** then **Design System**.
2. Scroll down to the card of the color, for example **Brand**.
3. Click the color’s swatch and choose a new value. The message **Saved.** appears.

![The Brand card of the Design system screen: Primary, Secondary and Accent, each with its description and, on the right, its dark mode value.](https://static.lovelyrender.com/uploads/2026/10/1013-doc-design-marque.png)

Changing the primary updates at once the main buttons, links and tabs across the whole site. No page needs to be redone.

The dark reference must stay very dark and the light one very light. Otherwise the screen refuses the value with **The dark base must be very dark.** or **The light base must be very light.**

**Note:** The color of the text on a primary button is not a setting. Your site picks whichever of your two references reads best on the primary. It recalculates it when the primary changes.

### Give a value for dark mode

When the site shows both modes, each brand color and each state has a second field, for example **Primary in dark mode**. With no setting on your part, your site calculates a lighter version of the same shade that reads on the dark background.

To replace it, choose another value in this field. If you change the color without touching this field, the dark version is recalculated. References and neutrals have none. In dark mode, the light and the dark of each pair swap places.

## Create a brand color

A brand color is created in the editor from a block’s color picker. It joins the palette of all the blocks of the site.

1. In the editor, select a block then open the **Styles** tab of the right-hand column.
2. In the **Colors** panel, click the swatch for the text, the link or the background. The picker opens on the **System** and **Theme** sections.
3. Click the color shown at the top, then set it under **Customize color**.
4. Next to **Theme**, click **Add color**. A form opens.
5. Optional: give the color a **Name**, for example “Sage green”.
6. Optional: turn on **Add a dark-mode value** and choose the **Color in dark mode**.
7. Click **Save**. The color applies to the block and appears under **Theme**.

![The form of a color: the picker, the value 22613D, the line Contrast 7.1:1. Very readable (AAA). and the Add a value for dark mode switch turned on.](https://static.lovelyrender.com/uploads/2026/10/148-design-contraste.png)

To edit a color, choose it then click **Edit color**. The form shows **Your changes will apply to all the blocks that use it.** The name of a system color cannot be changed.

### Read the contrast verdict

Under the picker, the line **Contrast … :1.** gives the ratio between the color and whichever of your two references reads best with it. It is the best possible result with this color.

| Verdict | Ratio | Purpose |
| --- | --- | --- |
| **Very readable (AAA).** | 7:1 and above | Comfortable for everyone, even in small text. |
| **Readable (AA).** | From 4.5:1 to 7:1 | The expected level for body text. |
| **Large text only (AA).** | From 3:1 to 4.5:1 | Acceptable for a large heading, not for a paragraph. |
| **Too low. The text will be hard to read on this color.** | Less than 3:1 | To be avoided. |

The verdict informs without blocking. For the contrast between the text and the background of a block, see [Color a block](https://lovelyrender.com/documentation/color-block/).

## Install a font

An installed font is hosted on your site. No visitor IP address is sent to Google. Only the Latin character sets are kept.

| Button on the Design system screen | Purpose |
| --- | --- |
| **Browse Google Fonts** | Search, preview and install a font from the Google Fonts library. |
| **Upload a font** | Upload a .woff2 file, for a commercial font or one not on Google Fonts. |
| **Import from URL** | Paste the address of a Google Fonts stylesheet. |

A typography from the design catalog installs its fonts the same way. All fonts count toward the space of your plan.

### From Google Fonts

1. On the **Design System** screen, click **Browse Google Fonts**.
2. Type a name in **Search fonts…**, or choose a category in **All categories**.
3. Optional: type a sentence from your site in the preview field to see it in each font.
4. Next to the family, click **Install**. For a single style, open the **… styles** list and install that style. The font joins the **Active fonts**.

![The Google Fonts panel: the search, the All categories list, the Variable only box checked, the preview field filled in and four fonts with their styles and their Install button.](https://static.lovelyrender.com/uploads/2026/10/153-design-polices.png)

The **Variable only** box is checked on opening. A variable font carries all its weights in a single file. Your pages load fewer files.

### From a .woff2 file

1. Click **Upload a font**. The **Upload a custom font** panel opens.
2. Drop the file in **Font file (.woff2)**.
3. Enter the **Family name**. Give the same name to all the files of one font.
4. Choose the **Weight** and the **Style**, **Normal** or **Italic**.
5. For a variable font, give the top of its weight range in **Up to (variable font)**. Otherwise, leave **Single weight**.
6. Click **Install**. The message **Installed:** followed by the font name appears.

The content of the file is checked. A file that is not a .woff2 font is refused with **Only .woff2 files are accepted.**

**Warning:** An installed font is never replaced. Dropping the same weight and style again shows **This family already serves this weight and style. Remove the family first to replace its file.**

### From a Google Fonts address

1. On fonts.google.com, choose your fonts then click **Get embed code** then the **@import** tab.
2. Copy the address, which starts with `https://fonts.googleapis.com/css2?`, or the whole `@import` line.
3. On the **Design System** screen, click **Import from URL**, paste the address in **Google Fonts URL** then click **Import**.

The message **Import successful.** gives the number of active fonts. An unrecognized address shows **No valid Google Fonts address found.**

### Choose the fallback font

Under **Active fonts**, each family has a fallback list. The fallback font is shown while your font loads and when it fails to load. The choice is saved right away.

| Fallback | Style | Examples |
| --- | --- | --- |
| Sans-serif | Modern, without serifs | Arial, Helvetica |
| Serif | Classic, with serifs | Times New Roman, Georgia |
| Monospace | Characters of the same width | Courier New |
| Cursive | Handwritten or calligraphic | Depends on the system |
| Fantasy | Decorative | Depends on the system |
| System-ui | The interface font of the visitor’s system | Depends on the system |

## Use an installed font

Installing a font changes nothing on your pages. The product’s styles use three font tokens, named slots that a typography from the catalog fills.

| Token | Blocks concerned | Empty token |
| --- | --- | --- |
| **Heading font** | Headings of level 1 to 6 | The visitor’s system font |
| **Body font** | The whole page, so any block with no font of its own | The visitor’s system font |
| **Handwriting font** | The style **Signature** | A cursive system script |

To put an installed font on all your headings without going through the catalog, choose it in the **Font** setting of a heading. Update its style, for example **Heading 1**. [Save a block’s style](https://lovelyrender.com/documentation/save-block-style/) details how to update a style.

To delete a font, click **Delete** next to its family, under **Active fonts**. The token it held is emptied.

## Create a size, a spacing or a radius

Text sizes, spacings and radii are designated by their value, for example `16px`. Your site starts with three scales.

| Scale | Values |
| --- | --- |
| Text sizes | Nine sizes from 0.75 to 3 rem, then a poster size that goes from 3 to 4.5 rem depending on the screen width |
| Spacings | Eight values from 2 to 128 px, for padding, margins and gaps |
| Radii | Eight values from 2 to 128 px, plus 50% for a round block |

1. In the editor, select a block and open the panel of the setting, for example **Typography**.
2. Next to the setting, for example **Font size**, click the **+**.
3. Enter the value and choose its unit, `px`, `em` or `rem`.
4. Click **Save**. The value applies to the block and joins the list for all blocks.

A text size can be **Fluid**: it asks for a **Minimum**, a **Preferred** size and a **Maximum**. It grows with the screen between its two bounds.

In one scale, two identical values are refused with **… already exists. Choose this value instead.** `1rem` and `16px` count as two different values: the first follows the text size chosen by the visitor, the second does not.

To edit a value across the whole site, select it then click the **Edit** pencil. The change applies to every block that uses it.

## Clean up the inventory

At the bottom of the **Design System** screen, the **Design system entries** card lists everything your site reuses. It counts colors, sizes, spacings, radii, shadows, gradients, fonts and block styles.

![The Spacings section of the inventory: each value with its direct uses and its uses through a style, the System entry label, the Reset button on edited values and the Still in use label on a spacing you created.](https://static.lovelyrender.com/uploads/2026/10/1018-doc-design-inventaire.png)

| Column | Content |
| --- | --- |
| **Name** | The value or name of the entry. **Provided by Lovely Render** marks a product entry. |
| **Direct uses** | The number of blocks that use it. |
| **Through a style or a shadow** | The number of saved styles or shadows that use it. |
| **Actions** | The action available on the entry. |

| Action | Meaning |
| --- | --- |
| **System entry** | A product entry that was never edited. It cannot be deleted. |
| **Reset** | A product entry that you edited. The button brings it back to its original version. |
| **Still in use** | An entry you created that is still in use. It cannot be deleted. |
| **Delete** | An entry that nothing uses anymore. A confirmation appears before deletion. |

To see the **Content**, the **Registered styles** and the **Shadows** that use an entry, click its line. Remove the entry from the styles that use it, then delete it.

## See also

- [Adopt a design from the catalog](https://lovelyrender.com/documentation/adopt-catalog-design/)
- [See your settings in the design preview](https://lovelyrender.com/documentation/preview-design/)
- [Style text](https://lovelyrender.com/documentation/format-text/)
- [Color a block](https://lovelyrender.com/documentation/color-block/)