# Adopter un design du catalogue

Le catalogue de design pose d’un coup les couleurs, les polices, les tailles et l’allure des composants de tout votre site. Cet article vous apprend à choisir une palette, une typographie et des composants, à les voir sur l’aperçu puis à les appliquer.

## Avant de commencer

- Le catalogue est réservé aux administrateurs du site.
- Vous travaillez sur le Staging. Le design appliqué arrive en ligne à la prochaine publication du site.
- Rien n’est enregistré avant votre clic sur **Appliquer ce design à tout le site**. Vous pouvez essayer autant d’entrées que vous voulez.
- Un design change l’allure de vos pages. Vos textes, vos images, vos mises en page et les styles que vous avez créés restent en place.

## Ouvrir le catalogue

1. Dans le menu de l’administration, ouvrez **Apparence** puis **Aperçu**. L’aperçu du design s’ouvre dans l’éditeur.
2. Au-dessus de la page, cliquez sur **Ouvrir le catalogue de design**. La barre latérale **Catalogue de design** s’ouvre à droite, sur le panneau **Palette**.

![L’avis au-dessus de l’aperçu du design : Choisissez un design tout prêt pour tout le site dans le catalogue de design. Dessous, le bouton Ouvrir le catalogue de design.](https://static.lovelyrender.com/uploads/2026/10/1021-doc-design-avis.png)

L’avis reste affiché tant que la page est ouverte. Le catalogue s’ouvre aussi par l’icône de palette de la barre d’outils de l’éditeur. Le catalogue n’existe que sur cette page.

![La barre latérale Catalogue de design : l’avertissement en haut, puis le panneau Palette avec le menu Modes clair et sombre, le champ Rechercher une palette, les boutons de couleur Rouge à Neutre et les premières palettes, chacune sur une ligne claire et une ligne sombre.](https://static.lovelyrender.com/uploads/2026/10/1000-doc-design-catalogue.png)

## Comprendre les choix d’un design

Un design se compose de choix indépendants, un par panneau de la barre latérale. Vous les faites d’un coup ou un par un. Changer de palette ne déplace pas une police et changer de boutons ne modifie pas les champs.

| Panneau | Réglages posés sur le site |
| --- | --- |
| **Palette** | Les onze couleurs du site : fond, texte, surfaces, primaire, secondaire, accent et quatre états. Les états sont les mêmes dans toutes les palettes. |
| **Typographie** | La police des titres, la police des textes et la police manuscrite. Certaines typographies fixent la graisse ou la casse des titres. |
| **Liens** | La couleur, le soulignement et la graisse des liens écrits dans un texte. |
| **Rythme** | Les tailles de texte, l’interligne de la page et les grands espacements entre sections et entre groupes. |
| **Boutons** | Les boutons principal, secondaire et tertiaire ainsi que les boutons d’envoi et d’étape des formulaires. |
| **Cartes** | Le fond, la bordure, l’arrondi et l’ombre du style **Carte**. |
| **Fil d’Ariane** | Les étapes du bloc Fil d’Ariane, la page lue et le séparateur. |
| **Accordéon** | Le cadre de l’accordéon, les traits entre ses questions et l’espace autour de chaque question. |
| **Formulaires** | Le champ de saisie et son état pendant la saisie, la liste déroulante, la case à cocher et le bouton radio. |
| **Onglets** | L’onglet et la barre qui porte les onglets. |
| **Images** | Les coins, le cadre et l’ombre de l’image d’un bloc Média. Le cadre entoure l’image sans sa légende. |
| **Icônes** | La couleur, l’épaisseur du trait et la pastille autour du dessin d’un bloc Icône. |
| **Tableaux** | Les traits et les lignes teintées du bloc Tableau avancé. |
| **Séparateurs** | La couleur, l’épaisseur et les tirets du bloc Séparateur. |
| **Lecteur de PDF** | La bordure, les coins et l’ombre du bloc PDF. |
| **Menu** | Le lien de menu, son état actif et le sous-menu. |
| **Sommaire** | L’entrée d’un sommaire et celle du titre en cours de lecture. |

Un style du produit qu’aucun panneau ne nomme, comme **Section** ou **FAQ**, garde vos couleurs, vos bordures et vos ombres. Seules la typographie et le rythme s’y appliquent.

Les boutons et les cartes prennent leurs arrondis et leurs ombres dans les échelles de votre site. Si vous avez retouché l’échelle des arrondis, vos valeurs restent.

## Choisir le mode clair ou sombre

En tête du panneau **Palette**, le menu **Modes clair et sombre** règle le mode que votre site montre à ses visiteurs.

| Choix | Vos visiteurs voient | Les palettes montrent |
| --- | --- | --- |
| **Les deux** | Le clair ou le sombre, selon leur appareil ou leur choix dans un sélecteur d’apparence. | Leur ligne claire et leur ligne sombre. |
| **Clair** | Toujours le clair. | Leur ligne claire seulement. |
| **Sombre** | Toujours le sombre. | Leur ligne sombre seulement. |

Le menu affiche le choix enregistré pour le site. Le changer fait passer l’aperçu dans ce mode. Le même réglage se trouve sur l’écran **Design system**.

## Trouver une palette ou une typographie

Le catalogue compte 49 palettes et 20 typographies. Les panneaux **Palette** et **Typographie** ont chacun un champ de recherche et une rangée de boutons de famille.

| Outil | Fonctionnement |
| --- | --- |
| Champ **Rechercher une palette** | Cherche dans le nom, les teintes et l’humeur de chaque palette, par exemple `sable`, `pastel` ou `élégant`. Majuscules et accents ne comptent pas. Si vous tapez plusieurs mots, seules les palettes qui les contiennent tous restent. |
| Boutons de couleur principale | **Rouge**, **Orange**, **Brun**, **Jaune**, **Vert**, **Bleu**, **Violet**, **Rose** et **Neutre**. Un clic garde les palettes de cette famille et un second clic retire le filtre. Seules les familles présentes dans le catalogue ont un bouton. |
| Champ **Rechercher une typographie** | Cherche dans le nom des polices et dans les mots-clés de chaque typographie, par exemple `empattements`, `magazine` ou `sobre`. |
| Boutons **Famille** | **Neutre**, **Géométrique**, **Humaniste**, **Éditorial**, **Élégant**, **Tech**, **Rétro** et **Ludique**. Un clic garde les typographies de cette famille. |

La recherche et les boutons se combinent. Quand rien ne correspond, le panneau affiche **Aucune palette ne correspond.** ou **Aucune typographie ne correspond.** Un filtre qui masque l’entrée choisie ne retire pas votre choix.

## Choisir une entrée

1. Dans la barre latérale, ouvrez un panneau, par exemple **Boutons**. La page d’aperçu défile jusqu’à la section que ce panneau change.
2. Cliquez sur une entrée. Elle porte la marque **Choisi** et la page d’aperçu change aussitôt.
3. Facultatif : ouvrez un autre panneau et choisissez une entrée. Chaque clic ne remplace que le choix de son panneau.

![Le panneau Boutons du catalogue : six entrées dessinées avec leurs boutons Bouton, Secondaire et Tertiaire, l’entrée Pilule encadrée avec la marque Choisi.](https://static.lovelyrender.com/uploads/2026/10/1005-doc-design-boutons.png)

Chaque entrée montre ce qu’elle change. Une palette montre ses couleurs et une typographie écrit le nom de ses polices dans chacune d’elles. Une entrée de composant montre ses boutons, sa carte ou son petit formulaire, dans les couleurs et les polices de votre site.

La marque **Utilisé** désigne l’entrée que votre site porte aujourd’hui. Le catalogue la reconnaît en comparant vos réglages à ceux de l’entrée. Si vous retouchez une couleur de la palette, l’entrée n’est plus reconnue.

Un choix de palette ou de rythme change toute la page sans la faire défiler.

## Retoucher avant d’appliquer

Vous pouvez ajuster le design sur les blocs témoins de l’aperçu avant de l’appliquer. Ces retouches sont gardées jusqu’à l’application.

- Une retouche sur un bloc témoin, par exemple l’arrondi d’une carte, est reprise dans le style que porte ce bloc.
- Mettre à jour, créer ou supprimer un style depuis l’onglet **Styles** prépare le changement sans l’enregistrer.
- Une couleur ou une ombre créée depuis un sélecteur est préparée de la même façon.

Vous ne pouvez ni ajouter ni retirer de bloc témoin. Le bloc **Corps de page** garde son style **Page**, qui se modifie mais ne se remplace pas.

**Attention :** Si vous quittez la page, vos choix et vos retouches sont perdus. Le navigateur vous prévient si des changements ne sont pas appliqués.

## Appliquer le design

1. En bas de la barre latérale, cliquez sur **Appliquer ce design à tout le site**. Une confirmation s’affiche.
2. Lisez la phrase **Toutes les pages du site changent d’allure, et vos réglages sur les styles du produit que ce design couvre sont remplacés. Continuer ?**
3. Cliquez sur **Oui, appliquer**. La page se recharge avec le design appliqué.

![La confirmation en bas du catalogue : la phrase qui annonce le remplacement des réglages, puis les boutons Oui, appliquer et Annuler.](https://static.lovelyrender.com/uploads/2026/10/1007-doc-design-appliquer.png)

Sans entrée choisie ni bloc retouché, l’écran affiche **Rien n’a changé sur cet écran : choisissez un design ou retouchez d’abord un bloc.** Chaque application ajoute à l’historique de votre site une ligne avec les entrées choisies.

| Votre réglage | Après l’application |
| --- | --- |
| Un réglage couvert par le design, par exemple vos couleurs sur le style **Primaire** quand vous avez choisi une entrée de boutons | Remplacé par celui du design. |
| Un réglage couvert que l’entrée choisie ne règle pas, par exemple vos couleurs sur le bouton **Tertiaire** | Retiré. Le style revient à sa version livrée. |
| Un réglage que le design ne couvre pas, par exemple vos couleurs sur **Section**, ou sur les boutons quand vous n’avez choisi qu’une palette | Conservé. |
| Un style que vous avez créé vous-même ou un style par défaut que vous avez choisi | Conservé. |
| Les polices d’une typographie choisie | Installées dans votre site. Elles comptent dans l’espace de votre offre. |
| Le choix **Modes clair et sombre** | Enregistré pour tout le site. |

**Attention :** Pour retrouver vos anciens réglages après une application, restaurez une version du site.

## Lever un refus d’application

Trois situations bloquent l’application. La barre latérale affiche un message qui nomme le problème.

| Message | Correction |
| --- | --- |
| **« … » porte … styles enregistrés : n’en gardez qu’un avant d’appliquer.** | Le bloc retouché porte plusieurs styles. Retirez-en jusqu’à n’en garder qu’un. |
| **Deux blocs qui portent « … » sont réglés différemment : accordez-les avant d’appliquer.** | Donnez-leur les mêmes réglages, ou réinitialisez la retouche de l’un des deux. |
| Le design a changé ailleurs depuis l’ouverture de la page | Un autre membre ou une IA a modifié le design. Rechargez la page et refaites vos choix. |

Deux gestes sont refusés sur cette page. Réinitialiser un style du produit jamais retouché affiche **Ce style ne porte aucun réglage du site à réinitialiser.** Supprimer un style créé auparavant affiche **Supprimez ce style depuis une page, pas depuis l’aperçu : l’aperçu ne sait pas quelles pages l’utilisent.**

## Les entrées du catalogue

Cette section décrit les entrées de chaque panneau. Les tailles d’arrondi citées sont celles que le produit livre. Les valeurs en mode sombre suivent votre palette.

### Palettes

Une palette donne cinq couleurs. Votre site en tire ses onze couleurs en gardant chaque texte lisible.

| Couleur du site | Couleur obtenue |
| --- | --- |
| Primaire et secondaire | Deux couleurs de la palette. Une couleur trop claire est assombrie jusqu’à un contraste de 4,5:1 sur le fond. |
| Accent | Une couleur de la palette, telle quelle. |
| Fond et surface claire | La couleur la plus foncée de la palette, mêlée de blanc à 97 % pour le fond et à 90 % pour la surface. |
| Texte | La même couleur, poussée vers le noir jusqu’à un contraste de 12:1 au moins sur le fond. |
| Surface sombre | Le texte, éclairci de 10 %. |
| Les quatre états | Ceux du produit, dans toutes les palettes. |

Chaque palette donne à ses couleurs de marque une valeur pour le mode sombre. Cette valeur garde la teinte et s’éclaircit jusqu’à se lire sur le fond sombre : 4,5:1 pour la primaire et la secondaire, 3:1 pour l’accent.

### Rythmes

| Rythme | Haut et bas d’une section | Intérieur d’une carte | Texte courant | Titre de niveau 1 | Interligne |
| --- | --- | --- | --- | --- | --- |
| **Aéré** | 160 px | 32 px | 17 px | 60 px | 1,65 |
| **Éditorial** | 144 px | 28 px | 19 px | 68 px | 1,6 |
| **Équilibré** | 128 px | 24 px | 16 px | 50 px | 1,5 |
| **Resserré** | 96 px | 20 px | 16 px | 40 px | 1,4 |
| **Compact** | 64 px | 20 px | 16 px | 34 px | 1,45 |

### Liens

Toutes les entrées gardent votre couleur primaire au repos et votre couleur secondaire au survol. Les deux entrées qui ne soulignent pas le lien au repos portent une mention sous leur nom.

| Entrée | Au repos | Au survol | Mention |
| --- | --- | --- | --- |
| **Souligné** | Souligné d’un trait fin | Le trait s’épaissit | Aucune |
| **Souligné et gras** | Souligné et en demi-gras | Le trait s’épaissit | Aucune |
| **Soulignement discret** | Souligné d’un trait léger, un peu plus bas | Le trait prend la couleur secondaire | Aucune |
| **Souligné au survol** | Sans soulignement | Souligné | **Sans soulignement, seule sa couleur distingue le lien du texte.** |
| **Gras** | En gras, sans soulignement | Souligné | **Peut se confondre avec un mot en gras du texte.** |

**Conseil :** Le RGAA, le référentiel français d’accessibilité, demande qu’un lien se distingue du texte autrement que par sa couleur. Un contraste de 3:1 avec un signe au survol convient aussi. Une entrée qui souligne règle la question.

### Boutons

| Entrée | Coins | Particularité |
| --- | --- | --- |
| **Classique** | 4 px | Le principal plein, le secondaire bordé et le tertiaire en lien. |
| **Tonal** | 8 px | Le secondaire sur un fond léger de la couleur primaire, sans bordure. |
| **Pilule** | En pilule | Le tertiaire sans soulignement, avec un fond léger au survol. |
| **Carré** | 2 px | Le secondaire posé sur la couleur **Neutre claire**, sans bordure. |
| **Sobre** | 8 px | Le principal plein de la couleur du texte, sans couleur de marque. |
| **Couleur secondaire** | 4 px | Le secondaire plein de la couleur secondaire. |

### Cartes

| Entrée | Carte |
| --- | --- |
| **Bordée** | Une bordure fine, coins de 8 px. |
| **Ombrée** | Sans bordure, soulevée par l’ombre **Élévation 1**, qui passe à **Élévation 2** au survol. Coins de 16 px. |
| **Remplie** | Sans bordure, posée sur la couleur **Neutre claire**. Coins de 16 px. |
| **Nue** | Ni bordure, ni fond, ni ombre. Coins de 8 px. |
| **Bord accentué** | Un trait épais de la couleur primaire sur le côté gauche et une bordure fine ailleurs. Coins de 4 px. |

### Formulaires

| Entrée | Champ | Pendant la saisie |
| --- | --- | --- |
| **Contour** | Une bordure fine, coins de 4 px | La bordure prend la couleur primaire. |
| **Rempli** | Un fond léger et un trait dessous | Le trait s’épaissit dans la couleur primaire. |
| **Souligné** | Un trait dessous, sans fond | Le trait s’épaissit dans la couleur primaire. |
| **Fond doux** | Un fond léger, sans bordure visible | Une bordure épaisse de la couleur primaire apparaît. |
| **Contrasté** | Une bordure épaisse de la couleur du texte | La bordure prend la couleur primaire. |
| **Pilule** | Une bordure fine, en pilule | La bordure prend la couleur primaire. |
| **Teinté** | Un fond léger et une bordure atténuée de la couleur primaire | Le fond fonce et la bordure devient pleine. |
| **Ombré** | Sans bordure, soulevé par l’ombre **Élévation 1** | Une bordure fine apparaît et l’ombre passe à **Élévation 2**. |

Chaque entrée dessine la case à cocher et le bouton radio comme son champ. Une fois cochés, ils prennent la couleur primaire. L’interrupteur et le champ Range gardent l’allure du produit.

### Onglets

| Entrée | Onglet choisi |
| --- | --- |
| **Souligné** | Souligné de la couleur primaire, sur une barre soulignée d’un trait fin. |
| **Pilules** | Une pilule pleine de la couleur primaire. |
| **Pilules teintées** | Une pilule légère de la couleur primaire. |
| **Segmenté** | Un fond léger dans une barre bordée. Les onglets se partagent la barre à parts égales. |
| **Encadré** | L’onglet choisi est encadré en haut et sur les côtés. Les autres sont sur un fond discret. |
| **Liseré** | Un trait de la couleur primaire au-dessus du libellé. |

### Autres composants

| Panneau | Entrées |
| --- | --- |
| **Fil d’Ariane** | **Simple**, **Souligné**, **Discret** et **Pastilles**. |
| **Accordéon** | **Lignes** (un trait sous chaque question), **Encadré** (un cadre aux coins de 8 px) et **Nu** (ni cadre ni trait, espaces serrés). |
| **Images** | **Brut** (coins de 2 px), **Arrondi** (16 px), **Ombré** (8 px et ombre **Élévation 2**) et **Cadre** (un cadre clair de 8 px). |
| **Icônes** | **Nu**, **Trait fin**, **Pastille**, **Carré plein** et **Contour**. Aucune ne change la taille de 24 px du produit. |
| **Tableaux** | **Encadré zébré**, **Encadré**, **Lignes zébrées**, **Lignes**, **Zébré** et **Sans bordure**. Ces styles valent pour le bloc Tableau avancé. |
| **Séparateurs** | **Fin**, **Épais** (3 px), **Pointillé**, **Estompé** et **Coloré** (2 px de la couleur primaire). |
| **Lecteur de PDF** | **Sans cadre**, **Bordé**, **Ombré** et **Arrondi**. |
| **Menu** | **Simple**, **Souligné au survol**, **Barre active** et **Pastilles**. Chacune dessine le lien de la page lue. |
| **Sommaire** | **Simple**, **Rail** et **Pastille**. |

**Remarque :** Une entrée remplace vos réglages sur les styles de son panneau. Si vous aviez agrandi le style **Icône**, une entrée d’icônes le ramène à 24 px. Une taille réglée sur une icône elle-même reste.

## Voir aussi

- [Voir vos réglages dans l’aperçu du design](https://lovelyrender.com/fr/documentation/apercu-du-design/)
- [Régler vos couleurs, vos polices et vos échelles](https://lovelyrender.com/fr/documentation/design-system/)
- [Enregistrer le style d’un bloc](https://lovelyrender.com/fr/documentation/styles-enregistres/)
- [Restaurer une version du site](https://lovelyrender.com/fr/documentation/versions/)