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
- Dans le menu de l’administration, ouvrez Apparence puis Aperçu. L’aperçu du design s’ouvre dans l’éditeur.
- 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 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.
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
- 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.
- Cliquez sur une entrée. Elle porte la marque Choisi et la page d’aperçu change aussitôt.
- Facultatif : ouvrez un autre panneau et choisissez une entrée. Chaque clic ne remplace que le choix de son panneau.
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.
Appliquer le design
- En bas de la barre latérale, cliquez sur Appliquer ce design à tout le site. Une confirmation s’affiche.
- 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 ?
- Cliquez sur Oui, appliquer. La page se recharge avec le design appliqué.
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. |
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. |
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. |