# Régler vos couleurs, vos polices et vos échelles

Les couleurs, les polices et les échelles de votre site se règlent une fois et servent sur toutes vos pages. Cet article vous apprend à régler les couleurs système et vos couleurs de marque, à installer vos polices, à créer vos valeurs d’échelle et à nettoyer l’inventaire.

## Avant de commencer

- L’écran **Design system** se trouve dans le menu **Apparence**. Il est réservé aux administrateurs du site.
- Les couleurs de marque, les tailles, les espacements et les arrondis se créent depuis l’éditeur. Les créer ou les modifier est réservé aux administrateurs du site, comme l’écran **Design system**. Les autres rôles choisissent parmi les valeurs existantes.
- Chaque changement s’enregistre dès que vous le faites. Il arrive en ligne à la prochaine publication du site.
- Pour poser d’un coup une palette et des polices toutes prêtes, passez par [le catalogue de design](https://lovelyrender.com/fr/documentation/catalogue-de-design/).

## Trouver chaque réglage

Une valeur que vous réutilisez se crée dans l’éditeur, sur le bloc qui s’en sert. Les couleurs à rôle fixe et les polices restent sur l’écran **Design system**.

| Réglage | Endroit |
| --- | --- |
| Modes clair et sombre du site | Écran **Design system**, ou panneau **Palette** du catalogue de design |
| Les onze couleurs système | Écran **Design system** |
| Couleurs de marque | Éditeur, sélecteur de couleur d’un bloc, section **Thème** |
| Polices installées | Écran **Design system** |
| Tailles de texte | Éditeur, panneau **Typographie**, réglage **Taille du texte** |
| Espacements | Éditeur, panneau **Taille et espacement** |
| Arrondis | Éditeur, panneau **Bordures** |
| Ombres, dégradés et filtres | Éditeur, panneau du réglage concerné |

## Choisir le mode clair ou sombre

En tête des couleurs de l’écran **Design system**, le menu **Modes clair et sombre** règle le mode que votre site montre.

![Le menu Modes clair et sombre de l’écran Design system, réglé sur Les deux, avec son aide.](https://static.lovelyrender.com/uploads/2026/10/1009-doc-design-modes.png)

| Choix | Vos visiteurs voient | L’écran demande |
| --- | --- | --- |
| **Les deux** (par défaut) | Le clair ou le sombre, selon leur appareil ou leur choix dans un sélecteur d’apparence. | Chaque couleur de marque et chaque état avec sa valeur en mode sombre. |
| **Clair** | Toujours le clair, même sur un appareil réglé en sombre. | Les couleurs seulement. |
| **Sombre** | Toujours le sombre, même sur un appareil réglé en clair. | La valeur en mode sombre de chaque couleur de marque et de chaque état. |

Changer de choix enregistre et recharge l’écran. Une valeur sombre que l’écran ne montre plus reste enregistrée : vous la retrouvez en repassant sur **Les deux**.

## Régler les couleurs système

Les couleurs système ont un rôle fixe dans le produit. Leur nom ne change pas mais vous choisissez leur valeur. Elles se rangent en quatre cartes.

| Carte | Couleurs | Rôle |
| --- | --- | --- |
| **Références de contraste** | **Sombre (référence du noir)** et **Claire (référence du blanc)** | Tous les contrastes du site se mesurent par rapport à elles. En mode sombre, la sombre devient le fond de la page et la claire le texte. |
| **Neutres** | **Neutre claire** et **Neutre sombre** | La surface des cartes et des panneaux. La neutre claire doit rester plus claire que la neutre sombre. |
| **Marque** | **Primaire**, **Secondaire** et **Accent** | La primaire colore les boutons principaux, les liens et l’onglet sélectionné. La secondaire colore les boutons secondaires et les liens survolés. |
| **États** | **Danger**, **Avertissement**, **Information** et **Succès** | Les messages du site. Le fond et la bordure de chaque message en découlent. |

1. Dans le menu de l’administration, ouvrez **Apparence** puis **Design system**.
2. Descendez jusqu’à la carte de la couleur, par exemple **Marque**.
3. Cliquez sur la pastille de la couleur et choisissez une nouvelle valeur. Le message **Enregistré.** s’affiche.

![La carte Marque de l’écran Design system : Primaire, Secondaire et Accent, chacune avec sa description et, à droite, sa valeur en mode sombre.](https://static.lovelyrender.com/uploads/2026/10/1013-doc-design-marque.png)

Changer la primaire met à jour d’un coup les boutons principaux, les liens et les onglets de tout le site. Aucune page n’est à reprendre.

La référence sombre doit rester très sombre et la claire très claire. Sinon l’écran refuse la valeur avec **La base sombre doit être très sombre.** ou **La base claire doit être très claire.**

**Remarque :** La couleur du texte posé sur un bouton principal n’est pas un réglage. Votre site choisit celle de vos deux références qui se lit le mieux sur la primaire. Il la recalcule quand la primaire change.

### Donner une valeur pour le mode sombre

Quand le site montre les deux modes, chaque couleur de marque et chaque état a un second champ, par exemple **Primaire en mode sombre**. Sans réglage de votre part, votre site calcule une version plus claire de la même teinte qui se lit sur le fond sombre.

Pour la remplacer, choisissez une autre valeur dans ce champ. Si vous changez la couleur sans toucher à ce champ, la version sombre se recalcule. Les références et les neutres n’en ont pas. En mode sombre, la claire et la sombre de chaque paire échangent leurs places.

## Créer une couleur de marque

Une couleur de marque se crée dans l’éditeur depuis le sélecteur de couleur d’un bloc. Elle rejoint la palette de tous les blocs du site.

1. Dans l’éditeur, sélectionnez un bloc puis ouvrez l’onglet **Styles** de la colonne de droite.
2. Dans le panneau **Couleurs**, cliquez sur la pastille du texte, du lien ou du fond. Le sélecteur s’ouvre sur les sections **Système** et **Thème**.
3. Cliquez sur la couleur affichée en haut, puis réglez-la sous **Personnaliser la couleur**.
4. À côté de **Thème**, cliquez sur **Ajouter une couleur**. Un formulaire s’ouvre.
5. Facultatif : donnez un **Nom** à la couleur, par exemple « Vert sauge ».
6. Facultatif : activez **Ajouter une valeur pour le mode sombre** et choisissez la **Couleur en mode sombre**.
7. Cliquez sur **Enregistrer**. La couleur s’applique au bloc et apparaît sous **Thème**.

![Le formulaire d’une couleur : le sélecteur, la valeur 22613D, la ligne Contraste 7.1:1. Très lisible (AAA). et l’interrupteur Ajouter une valeur pour le mode sombre activé.](https://static.lovelyrender.com/uploads/2026/10/148-design-contraste.png)

Pour modifier une couleur, choisissez-la puis cliquez sur **Modifier la couleur**. Le formulaire affiche **Vos changements s’appliqueront à tous les blocs qui s’en servent.** Le nom d’une couleur système ne se modifie pas.

### Lire le verdict de contraste

Sous le sélecteur, la ligne **Contraste … :1.** donne le rapport entre la couleur et celle de vos deux références qui s’y lit le mieux. C’est le meilleur résultat possible avec cette couleur.

| Verdict | Rapport | Usage |
| --- | --- | --- |
| **Très lisible (AAA).** | 7:1 et plus | Confortable pour tous, même en petit texte. |
| **Lisible (AA).** | De 4,5:1 à 7:1 | Le niveau attendu pour un texte courant. |
| **Grand texte seulement (AA).** | De 3:1 à 4,5:1 | Acceptable pour un grand titre, pas pour un paragraphe. |
| **Trop faible. Le texte sera difficile à lire sur cette couleur.** | Moins de 3:1 | À éviter. |

Le verdict informe sans bloquer. Pour le contraste entre le texte et le fond d’un bloc, voyez [Colorer un bloc](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/).

## Installer une police

Une police installée est hébergée sur votre site. Aucune adresse IP de visiteur n’est envoyée à Google. Seuls les jeux de caractères latins sont gardés.

| Bouton de l’écran Design system | Usage |
| --- | --- |
| **Parcourir Google Fonts** | Chercher, prévisualiser et installer une police de la bibliothèque Google Fonts. |
| **Envoyer une police** | Envoyer un fichier .woff2, pour une police commerciale ou absente de Google Fonts. |
| **Importer depuis une adresse** | Coller l’adresse d’une feuille Google Fonts. |

Une typographie du catalogue de design installe ses polices de la même façon. Toutes les polices comptent dans l’espace de votre offre.

### Depuis Google Fonts

1. Sur l’écran **Design system**, cliquez sur **Parcourir Google Fonts**.
2. Tapez un nom dans **Chercher une police…**, ou choisissez une catégorie dans **Toutes les catégories**.
3. Facultatif : tapez une phrase de votre site dans le champ d’aperçu pour la voir dans chaque police.
4. À côté de la famille, cliquez sur **Installer**. Pour un seul style, ouvrez la liste **… styles** et installez ce style. La police rejoint les **Polices actives**.

![Le panneau Google Fonts : la recherche, la liste Toutes les catégories, la case Variables seulement cochée, le champ d’aperçu rempli et quatre polices avec leurs styles et leur bouton Installer.](https://static.lovelyrender.com/uploads/2026/10/153-design-polices.png)

La case **Variables seulement** est cochée à l’ouverture. Une police variable porte toutes ses graisses dans un seul fichier. Vos pages chargent moins de fichiers.

### Depuis un fichier .woff2

1. Cliquez sur **Envoyer une police**. Le panneau **Envoyer une police à vous** s’ouvre.
2. Déposez le fichier dans **Fichier de police (.woff2)**.
3. Saisissez le **Nom de la famille**. Donnez le même nom à tous les fichiers d’une même police.
4. Choisissez la **Graisse** et le **Style**, **Normal** ou **Italique**.
5. Pour une police variable, indiquez le haut de sa plage de graisses dans **Jusqu’à (police variable)**. Sinon, laissez **Graisse unique**.
6. Cliquez sur **Installer**. Le message **Installée :** suivi du nom de la police s’affiche.

Le contenu du fichier est vérifié. Un fichier qui n’est pas une police .woff2 est refusé avec **Seuls les fichiers .woff2 sont acceptés.**

**Attention :** Une police déjà installée n’est jamais remplacée. Redéposer la même graisse et le même style affiche **Cette famille sert déjà cette graisse et ce style. Retirez d’abord la famille pour remplacer son fichier.**

### Depuis une adresse Google Fonts

1. Sur fonts.google.com, choisissez vos polices puis cliquez sur **Get embed code** puis sur l’onglet **@import**.
2. Copiez l’adresse, qui commence par `https://fonts.googleapis.com/css2?`, ou toute la ligne `@import`.
3. Sur l’écran **Design system**, cliquez sur **Importer depuis une adresse**, collez l’adresse dans **Adresse Google Fonts** puis cliquez sur **Importer**.

Le message **Import réussi.** donne le nombre de polices actives. Une adresse non reconnue affiche **Aucune adresse Google Fonts valide trouvée.**

### Choisir la police de recours

Sous **Polices actives**, chaque famille a une liste de recours. La police de recours s’affiche pendant le chargement de votre police et quand elle ne se charge pas. Le choix s’enregistre aussitôt.

| Recours | Style | Exemples |
| --- | --- | --- |
| Sans-serif | Moderne, sans empattement | Arial, Helvetica |
| Serif | Classique, avec empattements | Times New Roman, Georgia |
| Monospace | Caractères de même largeur | Courier New |
| Cursive | Manuscrit ou calligraphié | Selon le système |
| Fantasy | Décoratif | Selon le système |
| System-ui | La police d’interface du système du visiteur | Selon le système |

## Utiliser une police installée

Installer une police ne change rien à vos pages. Les styles du produit utilisent trois jetons de police, des emplacements nommés qu’une typographie du catalogue remplit.

| Jeton | Blocs concernés | Jeton vide |
| --- | --- | --- |
| **Police des titres** | Les titres de niveau 1 à 6 | La police système du visiteur |
| **Police des textes** | Toute la page, donc tout bloc sans police propre | La police système du visiteur |
| **Police manuscrite** | Le style **Signature** | Une écriture cursive du système |

Pour mettre une police installée sur tous vos titres sans passer par le catalogue, choisissez-la dans le réglage **Police** d’un titre. Mettez à jour son style, par exemple **Titre 1**. [Enregistrer le style d’un bloc](https://lovelyrender.com/fr/documentation/styles-enregistres/) détaille la mise à jour d’un style.

Pour supprimer une police, cliquez sur **Supprimer** à côté de sa famille, sous **Polices actives**. Le jeton qu’elle tenait se vide.

## Créer une taille, un espacement ou un arrondi

Les tailles de texte, les espacements et les arrondis se désignent par leur valeur, par exemple `16px`. Votre site reçoit au départ trois échelles.

| Échelle | Valeurs |
| --- | --- |
| Tailles de texte | Neuf tailles de 0,75 à 3 rem, puis une taille d’affiche qui va de 3 à 4,5 rem selon la largeur de l’écran |
| Espacements | Huit valeurs de 2 à 128 px, pour le padding, les marges et les écarts |
| Arrondis | Huit valeurs de 2 à 128 px, plus 50 % pour un bloc rond |

1. Dans l’éditeur, sélectionnez un bloc et ouvrez le panneau du réglage, par exemple **Typographie**.
2. À côté du réglage, par exemple **Taille du texte**, cliquez sur le **+**.
3. Saisissez la valeur et choisissez son unité, `px`, `em` ou `rem`.
4. Cliquez sur **Enregistrer**. La valeur s’applique au bloc et rejoint la liste de tous les blocs.

Une taille de texte peut être **Fluide** : elle demande un **Minimum**, une taille **Préférée** et un **Maximum**. Elle grandit avec l’écran entre ses deux bornes.

Dans une même échelle, deux valeurs identiques sont refusées avec **… existe déjà. Choisissez plutôt cette valeur.** `1rem` et `16px` comptent comme deux valeurs différentes : la première suit la taille de texte choisie par le visiteur, la seconde non.

Pour modifier une valeur sur tout le site, sélectionnez-la puis cliquez sur le crayon **Modifier**. La modification s’applique à chaque bloc qui s’en sert.

## Nettoyer l’inventaire

En bas de l’écran **Design system**, la carte **Entrées du design system** liste tout ce que votre site réutilise. Elle compte les couleurs, les tailles, les espacements, les arrondis, les ombres, les dégradés, les polices et les styles de bloc.

![La section Espacements de l’inventaire : chaque valeur avec ses usages directs et ses usages via un style, la mention Entrée du système, le bouton Rétablir sur les valeurs retouchées et la mention Encore utilisée sur un espacement créé.](https://static.lovelyrender.com/uploads/2026/10/1018-doc-design-inventaire.png)

| Colonne | Contenu |
| --- | --- |
| **Nom** | La valeur ou le nom de l’entrée. **Fournie par Lovely Render** marque une entrée du produit. |
| **Usages directs** | Le nombre de blocs qui s’en servent. |
| **Via un style ou une ombre** | Le nombre de styles enregistrés ou d’ombres qui s’en servent. |
| **Actions** | Le geste possible sur l’entrée. |

| Action | Sens |
| --- | --- |
| **Entrée du système** | Une entrée du produit jamais retouchée. Elle ne se supprime pas. |
| **Rétablir** | Une entrée du produit que vous avez retouchée. Le bouton la ramène à sa version d’origine. |
| **Encore utilisée** | Une entrée que vous avez créée et qui sert encore. Elle ne se supprime pas. |
| **Supprimer** | Une entrée que plus rien n’utilise. Une confirmation s’affiche avant la suppression. |

Pour voir les **Contenus**, les **Styles enregistrés** et les **Ombres** qui se servent d’une entrée, cliquez sur sa ligne. Retirez l’entrée des styles qui l’utilisent, puis supprimez-la.

## Voir aussi

- [Adopter un design du catalogue](https://lovelyrender.com/fr/documentation/catalogue-de-design/)
- [Voir vos réglages dans l’aperçu du design](https://lovelyrender.com/fr/documentation/apercu-du-design/)
- [Mettre en forme un texte](https://lovelyrender.com/fr/documentation/typographie/)
- [Colorer un bloc](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/)