Thèmes et chartes graphiques
Comment fonctionne le thème du projet, comment le changer sans risque, et pourquoi les couleurs ne doivent jamais être modifiées écran par écran.
Dernière mise à jour :
Chaque projet a un thème : un ensemble de design tokens pour les couleurs, la typographie, les rayons et les espacements. Les écrans référencent ces tokens plutôt que des valeurs figées, et c'est ce qui fait que vingt écrans ressemblent à un seul produit.
Changer quelques couleurs
Demandez simplement :
Mets la couleur principale à #1B4DFF. Le fond est trop froid — réchauffe-le.
Cela fusionne un petit changement dans le thème existant et laisse le reste tranquille. C'est gratuit et cela s'applique partout d'un coup.
Construire une toute nouvelle allure
Pour un changement radical — refonte, passage au sombre, nouvelle marque — demandez exactement cela :
Donne à tout le projet un thème sombre. Refais ça avec notre nouvelle marque : vert profond en principale, fond crème, titres avec empattements.
Cela construit un jeu de tokens entièrement neuf au lieu de rapiécer l'ancien.
Limiter un changement
Par défaut, les changements de thème sont valables pour tout le projet. Pour en limiter un à un seul écran, dites-le :
Uniquement sur la landing page, mets le fond de l'en-tête en noir.
Le contraste est vérifié
Les thèmes sont validés sur la lisibilité des couples de couleurs avant d'être appliqués : vous ne devriez donc pas vous retrouver avec du texte sombre sur fond sombre. Si vous voulez délibérément un traitement peu contrasté, dites-le — mais attendez-vous à ce que le système pousse vers la lisibilité.
Générer une charte graphique
Demandez une charte graphique et vous obtiendrez un écran rendu montrant la palette, l'échelle typographique et les composants principaux — utile comme livrable de transmission et comme vérification de la cohérence du système.
Erreurs fréquentes
- Modifier une couleur sur un seul écran. Ça marche, puis l'écran généré suivant ne correspond plus. Utilisez le thème.
- Demander le « mode sombre » depuis le mode édition sur un élément. Cette voie peut figer des couleurs dans le code au lieu de rethématiser. Demandez dans la discussion, au niveau du projet.
- Croire qu'un succès annoncé par l'outil de thème signifie un rendu effectif. Regardez le canevas. Si les écrans n'ont pas bougé, voir Ma charte graphique ne s'est pas appliquée.
Questions fréquentes
- Changer le thème coûte-t-il des crédits ?
- Non. Créer ou mettre à jour un thème est gratuit. Seuls les écrans eux-mêmes coûtent des crédits à générer.
- Un écran peut-il avoir un thème différent ?
- Oui — demandez que le changement soit limité à cet écran. Par défaut un changement de thème s'applique à tout le projet, ce qui est généralement ce que l'on veut.
Cet article vous a-t-il été utile ?
Articles liés
Polices et typographie
Choisir des polices, utiliser Google Fonts, et quoi faire quand un changement de police n'apparaît pas.
Modifier un écran
Les trois façons de changer un design — discussion, mode édition et thème — et quand chacune est le bon outil.
Ma charte graphique ou mon thème ne s'est pas appliqué
Les écrans s'affichent sans style ou ignorent un changement de thème — quoi vérifier et quoi nous envoyer.