# Adopt a design from the catalog

The design catalog sets the colors, fonts, sizes and look of the components of your whole site in one go. This article teaches you to choose a palette, a typography and components, to see them on the preview and then to apply them.

## Before you start

- The catalog is reserved for the site’s administrators.
- You work on the Staging. The applied design goes online at the site’s next publication.
- Nothing is saved until you click **Apply this design to the whole site**. You can try as many entries as you want.
- A design changes the look of your pages. Your texts, images, layouts and the styles you created stay in place.

## Open the catalog

1. In the admin menu, open **Appearance** then **Preview**. The design preview opens in the editor.
2. Above the page, click **Open the design catalog**. The **Design catalog** sidebar opens on the right, on the panel **Palette**.

![The notice above the design preview: Choose a ready-made design for the whole site in the design catalog. Below, the Open the design catalog button.](https://static.lovelyrender.com/uploads/2026/10/1021-doc-design-avis.png)

The notice stays displayed as long as the page is open. The catalog also opens with the palette icon in the editor toolbar. The catalog only exists on this page.

![The Design catalog sidebar: the warning at the top, then the Palette panel with the Light and dark modes menu, the Search palettes field, the color buttons Red to Neutral and the first palettes, each on a light row and a dark row.](https://static.lovelyrender.com/uploads/2026/10/1000-doc-design-catalogue.png)

## Understand a design’s choices

A design is made of independent choices, one per sidebar panel. You make them all at once or one by one. Changing the palette does not move a font and changing the buttons does not modify the fields.

| Panel | Settings applied to the site |
| --- | --- |
| **Palette** | The site’s eleven colors: background, text, surfaces, primary, secondary, accent and four states. The states are the same in all palettes. |
| **Typography** | The heading font, the body font and the handwriting font. Some typographies set the weight or the case of headings. |
| **Links** | The color, underline and weight of links written in a text. |
| **Rhythm** | The text sizes, the page’s line height and the large spacings between sections and between groups. |
| **Buttons** | The primary, secondary and tertiary buttons as well as the forms’ send and step buttons. |
| **Cards** | The background, border, rounding and shadow of the style **Card**. |
| **Breadcrumb** | The steps of the Breadcrumb block, the page being read and the separator. |
| **Accordion** | The accordion’s frame, the lines between its questions and the space around each question. |
| **Forms** | The input field and its state while typing, the dropdown, the checkbox and the radio button. |
| **Tabs** | The tab and the bar that carries the tabs. |
| **Images** | The corners, frame and shadow of a Media block’s image. The frame surrounds the image without its caption. |
| **Icons** | The color, the stroke weight and the badge around the drawing of an Icon block. |
| **Tables** | The lines and tinted rows of the Advanced table block. |
| **Separators** | The color, thickness and dashes of the Separator block. |
| **PDF viewer** | The border, corners and shadow of the PDF block. |
| **Menu** | The menu link, its active state and the submenu. |
| **Table of contents** | The entry of a table of contents and that of the heading being read. |

A product style that no panel names, such as **Section** or **FAQ**, keeps your colors, borders and shadows. Only the typography and the rhythm apply to it.

Buttons and cards take their roundings and shadows from your site’s scales. If you have adjusted the rounding scale, your values stay.

## Choose light or dark mode

At the top of the **Palette** panel, the **Light and dark modes** menu sets the mode your site shows to its visitors.

| Choices | Your visitors see | Palettes show |
| --- | --- | --- |
| **Both** | Light or dark, depending on their device or their choice in an appearance selector. | Their light row and their dark row. |
| **Light** | Always light. | Their light row only. |
| **Dark** | Always dark. | Their dark row only. |

The menu shows the choice saved for the site. Changing it switches the preview to that mode. The same setting is on the screen **Design System**.

## Find a palette or a typography

The catalog has 49 palettes and 20 typographies. The **Palette** and **Typography** panels each have a search field and a row of family buttons.

| Tool | How it works |
| --- | --- |
| Field **Search the palettes** | Searches the name, the hues and the mood of each palette, for example `sand`, `pastel` or `elegant`. Capitals and accents do not count. If you type several words, only the palettes that contain all of them remain. |
| Main color buttons | **Red**, **Orange**, **Brown**, **Yellow**, **Green**, **Blue**, **Purple**, **Pink** and **Neutral**. One click keeps the palettes of that family and a second click removes the filter. Only the families present in the catalog have a button. |
| Field **Search the typographies** | Searches the font names and the keywords of each typography, for example `serifs`, `magazine` or `plain`. |
| Buttons **Family** | **Neutral**, **Geometric**, **Humanist**, **Editorial**, **Elegant**, **Tech**, **Retro** and **Playful**. One click keeps the typographies of that family. |

The search and the buttons combine. When nothing matches, the panel shows **No palette matches.** or **No typography matches.** A filter that hides the chosen entry does not remove your choice.

## Choose an entry

1. In the sidebar, open a panel, for example **Buttons**. The preview page scrolls to the section that this panel changes.
2. Click an entry. It carries the **Selected** mark and the preview page changes right away.
3. Optional: open another panel and choose an entry. Each click only replaces the choice of its panel.

![The catalog’s Buttons panel: six entries drawn with their Button, Secondary and Tertiary buttons, the Framed pill entry with the Selected mark.](https://static.lovelyrender.com/uploads/2026/10/1005-doc-design-boutons.png)

Each entry shows what it changes. A palette shows its colors and a typography writes the name of its fonts in each of them. A component entry shows its buttons, its card or its small form, in your site’s colors and fonts.

The **In use** mark designates the entry your site carries today. The catalog recognizes it by comparing your settings to those of the entry. If you adjust a color of the palette, the entry is no longer recognized.

A palette or rhythm choice changes the whole page without scrolling it.

## Adjust before applying

You can adjust the design on the preview’s sample blocks before applying it. These adjustments are kept until you apply.

- An adjustment on a sample block, for example a card’s rounding, is carried into the style that block carries.
- Updating, creating or deleting a style from the **Styles** tab prepares the change without saving it.
- A color or a shadow created from a selector is prepared the same way.

You cannot add or remove a sample block. The **Body** block keeps its **Page** style, which can be edited but not replaced.

**Warning:** If you leave the page, your choices and adjustments are lost. The browser warns you if changes have not been applied.

## Apply the design

1. At the bottom of the sidebar, click **Apply this design to the whole site**. A confirmation appears.
2. Read the sentence **All the pages of the site change look, and your settings on the product styles that this design covers are replaced. Continue?**
3. Click **Yes, apply**. The page reloads with the design applied.

![The confirmation at the bottom of the catalog: the sentence announcing the replacement of the settings, then the Yes, apply and Cancel buttons.](https://static.lovelyrender.com/uploads/2026/10/1007-doc-design-appliquer.png)

With no entry chosen and no block adjusted, the screen shows **Nothing has changed on this screen: first choose a design or adjust a block.** Each application adds a line to your site’s history with the chosen entries.

| Your setting | After applying |
| --- | --- |
| A setting covered by the design, for example your colors on the **Primary** style when you chose a buttons entry | Replaced by the design’s. |
| A covered setting that the chosen entry does not set, for example your colors on the button **Tertiary** | Removed. The style goes back to its shipped version. |
| A setting that the design does not cover, for example your colors on **Section**, or on buttons when you only chose a palette | Kept. |
| A style you created yourself or a default style you chose | Kept. |
| The fonts of a chosen typography | Installed in your site. They count toward your plan’s space. |
| The choice **Light and dark modes** | Saved for the whole site. |

**Warning:** To get your old settings back after an application, restore a site version.

## Lift an application refusal

Three situations block the application. The sidebar shows a message that names the problem.

| Message | Fix |
| --- | --- |
| **“…” carries … registered styles: keep only one before applying.** | The adjusted block carries several styles. Remove some until you keep only one. |
| **Two blocks that carry “…” are set differently: match them before applying.** | Give them the same settings, or reset the adjustment on one of the two. |
| The design changed elsewhere since the page was opened | Another member or an AI modified the design. Reload the page and make your choices again. |

Two actions are refused on this page. Resetting a product style that was never adjusted shows **This style carries no site setting to reset.** Deleting a previously created style shows **Delete this style from a page, not from the preview: the preview does not know which pages use it.**

## The catalog’s entries

This section describes the entries of each panel. The rounding sizes quoted are those the product ships. Values in dark mode follow your palette.

### Palettes

A palette gives five colors. Your site derives its eleven colors from it while keeping every text readable.

| Site color | Resulting color |
| --- | --- |
| Primary and secondary | Two colors of the palette. A color that is too light is darkened until it reaches a 4.5:1 contrast on the background. |
| Accent | A color of the palette, as is. |
| Background and light surface | The darkest color of the palette, mixed with 97% white for the background and 90% for the surface. |
| Text | The same color, pushed toward black until it reaches a contrast of at least 12:1 on the background. |
| Dark surface | The text, lightened by 10%. |
| The four states | The product’s, in all palettes. |

Each palette gives its brand colors a value for dark mode. This value keeps the hue and lightens until it reads on the dark background: 4.5:1 for the primary and secondary, 3:1 for the accent.

### Rhythms

| Rhythm | Top and bottom of a section | Inside a card | Body text | Level 1 heading | Line height |
| --- | --- | --- | --- | --- | --- |
| **Airy** | 160 px | 32 px | 17 px | 60 px | 1,65 |
| **Editorial** | 144 px | 28 px | 19 px | 68 px | 1,6 |
| **Balanced** | 128 px | 24 px | 16 px | 50 px | 1,5 |
| **Tight** | 96 px | 20 px | 16 px | 40 px | 1,4 |
| **Compact** | 64 px | 20 px | 16 px | 34 px | 1,45 |

### Links

All the entries keep your primary color at rest and your secondary color on hover. The two entries that do not underline the link at rest carry a note under their name.

| Entry | At rest | On hover | Note |
| --- | --- | --- | --- |
| **Underlined** | Underlined with a thin line | The line thickens | None |
| **Underlined and bold** | Underlined and semibold | The line thickens | None |
| **Subtle underline** | Underlined with a light line, a little lower | The line takes the secondary color | None |
| **Underlined on hover** | No underline | Underlined | **No underline: only its color sets the link apart from the text.** |
| **Bold** | Bold, no underline | Underlined | **Can be mistaken for a bold word in the text.** |

**Tip:** The RGAA, the French accessibility standard, requires a link to stand out from the text in a way other than color. A 3:1 contrast with a sign on hover also works. An entry that underlines settles the question.

### Buttons

| Entry | Corners | Particularity |
| --- | --- | --- |
| **Classic** | 4 px | The primary filled, the secondary bordered and the tertiary as a link. |
| **Tonal** | 8 px | The secondary on a light background of the primary color, without a border. |
| **Pill** | Pill-shaped | The tertiary without underline, with a light background on hover. |
| **Square** | 2 px | The secondary placed on the **Neutral light** color, without a border. |
| **Plain** | 8 px | The primary filled with the text color, with no brand color. |
| **Secondary color** | 4 px | The secondary filled with the secondary color. |

### Cards

| Entry | Card |
| --- | --- |
| **Bordered** | A thin border, 8 px corners. |
| **Shadowed** | No border, lifted by the **Elevation 1** shadow, which becomes **Elevation 2** on hover. 16 px corners. |
| **Filled** | No border, placed on the **Neutral light** color. 16 px corners. |
| **Bare** | No border, no background, no shadow. 8 px corners. |
| **Accent edge** | A thick line in the primary color on the left side and a thin border elsewhere. 4 px corners. |

### Forms

| Entry | Field | While typing |
| --- | --- | --- |
| **Outline** | A thin border, 4 px corners | The border takes the primary color. |
| **Filled** | A light background and a line below | The line thickens in the primary color. |
| **Underlined** | A line below, no background | The line thickens in the primary color. |
| **Soft fill** | A light background, no visible border | A thick border in the primary color appears. |
| **High contrast** | A thick border in the text color | The border takes the primary color. |
| **Pill** | A thin border, pill-shaped | The border takes the primary color. |
| **Tinted** | A light background and a muted border in the primary color | The background darkens and the border becomes solid. |
| **Shadowed** | No border, lifted by the shadow **Elevation 1** | A thin border appears and the shadow becomes **Elevation 2**. |

Each entry draws the checkbox and the radio button like its field. Once checked, they take the primary color. The switch and the Range field keep the product’s look.

### Tabs

| Entry | Selected tab |
| --- | --- |
| **Underlined** | Underlined in the primary color, on a bar underlined with a thin line. |
| **Pills** | A solid pill in the primary color. |
| **Tinted pills** | A light pill in the primary color. |
| **Segmented** | A light background in a bordered bar. The tabs share the bar in equal parts. |
| **Boxed** | The selected tab is boxed at the top and on the sides. The others sit on a discreet background. |
| **Top line** | A line in the primary color above the label. |

### Other components

| Panel | Entries |
| --- | --- |
| **Breadcrumb** | **Simple**, **Underlined**, **Subtle** and **Badges**. |
| **Accordion** | **Lines** (a line under each question), **Boxed** (a frame with 8 px corners) and **Bare** (no frame or line, tight spacing). |
| **Images** | **Plain** (2 px corners), **Rounded** (16 px), **Shadowed** (8 px and **Elevation 2** shadow) and **Frame** (a light 8 px frame). |
| **Icons** | **Bare**, **Thin line**, **Badge**, **Solid square** and **Outline**. None changes the product’s 24 px size. |
| **Tables** | **Boxed striped**, **Boxed**, **Striped lines**, **Lines**, **Striped** and **Borderless**. These styles apply to the Advanced table block. |
| **Separators** | **Thin**, **Thick** (3 px), **Dotted**, **Faded** and **Colored** (2 px in the primary color). |
| **PDF viewer** | **Frameless**, **Bordered**, **Shadowed** and **Rounded**. |
| **Menu** | **Simple**, **Underlined on hover**, **Active bar** and **Badges**. Each draws the link of the page being read. |
| **Table of contents** | **Simple**, **Rail** and **Badge**. |

**Note:** An entry replaces your settings on the styles of its panel. If you had enlarged the **Icon** style, an icons entry brings it back to 24 px. A size set on an icon itself stays.

## See also

- [See your settings in the design preview](https://lovelyrender.com/documentation/preview-design/)
- [Set your colors, fonts and scales](https://lovelyrender.com/documentation/set-colors-fonts-scales/)
- [Save a block’s style](https://lovelyrender.com/documentation/save-block-style/)
- [Restore a version of the site](https://lovelyrender.com/documentation/restore-site-version/)