UI Kit TotalEnergies
Un kit de composants commun aux applications IT du groupe, des fondations aux templates
familles de composants, de la saisie à la data visualisation
types de graphiques documentés pour les données métier
pictogrammes classés par usage, de l'énergie aux services
L'essentiel, avant le détail
- Le problème
- Les équipes IT de TotalEnergies conçoivent de nombreuses applications métier. Sans base commune, chaque projet redessinait ses boutons, ses formulaires et ses tableaux. Le kit TGITS devait leur donner un socle partagé : des fondations fidèles à l'identité multi-énergies du groupe et des composants prêts à l'emploi.
- Mon rôle
- J'ai participé à la création du kit : conception de composants et de leurs états, rédaction des règles d'usage qui les accompagnent, et déclinaison en modules et templates de pages.
- Le résultat
- Un kit documenté des fondations aux templates, qui fixe à la fois l'apparence des composants et les règles qui encadrent leur usage dans les applications du groupe.
Une identité grand public à traduire en outils métier
L'identité TotalEnergies repose sur un rouge fort et une palette multi-énergies pensée pour la communication. Dans une application métier, utilisée des heures durant, ces couleurs doivent être dosées : le rouge réservé aux titres, aux actions et aux liens, les dégradés à des usages précis.
Un kit utile ne se limite pas à une bibliothèque de composants : chaque élément doit dire quand l'utiliser, dans quelle taille et dans quel état, pour que deux équipes qui ne se parlent pas produisent des écrans cohérents.
Des fondations aux templates
-
01
Poser des fondations qui disent quand, pas seulement quoi
Les fondations fixent les couleurs et leurs usages : le rouge #ED0000 et le gris #374649 pour la typographie, le rouge limité aux titres, aux actions et aux liens, trois tons neutres pour les fonds, et des couleurs secondaires réservées aux aplats avec leur couleur de texte associée. Les dégradés traduisent les énergies du groupe, énergies vertes, électricité et hydrogène, pétrole, gaz, et le dégradé horizontal n'est autorisé que sur les titres de niveau 1. La typographie associe Nunito pour les titres et Roboto pour le texte, avec une échelle distincte sur desktop et sur mobile.
Couleurs primaires, neutres de fond et secondaires, chacune avec sa couleur de texte 
Deux familles et une échelle typographique déclinée pour desktop et mobile 
Les dégradés par énergie, en version horizontale, verticale et diagonale 
Pictogrammes des énergies et bibliothèque thématique -
02
Encadrer les composants par leurs états et leurs usages
Chaque composant est documenté dans tous ses états. Les boutons existent en deux tailles, 46 px et 38 px, la plus petite étant réservée aux tableaux et aux en-têtes, et en trois variantes : rouge principal pour tous les usages, bleu réservé aux parcours liés à l'électricité, et secondaire. Chacune se décline en cinq états, actif, survolé, pressé, focus et désactivé. Les champs de formulaire suivent la même logique, avec des états d'erreur et de succès explicites, et des variantes dédiées aux tableaux.
Boutons : trois variantes, cinq états, avec ou sans icône 
Champs texte et zones de saisie : par défaut, en cours, rempli, désactivé, erreur, succès 
Cases à cocher, boutons radio, interrupteurs, champs date et calendrier 
Snackbars et bannières : succès, avertissement, information, erreur -
03
Rendre les données lisibles
Les applications du groupe manipulent beaucoup de données. Le kit leur consacre une palette de visualisation à part, avec des règles inscrites dans le fichier : pas plus de cinq couleurs par graphique, une seule couleur par type de donnée, et des couleurs contrastées testées en niveaux de gris pour rester distinguables. Les tableaux existent en version classique, condensée et avec lignes dépliables éditables, et les graphiques couvrent anneaux, courbes, aires, barres simples et empilées.
La palette de data visualisation, avec ses contrastes vérifiés 
Tableaux classique et condensé, avec statuts et actions 
Graphiques en anneau : avec ou sans légende, survol d'un segment 
Courbes, aires, barres simples et empilées -
04
Assembler en modules et en templates
Au-dessus des composants, le kit propose des briques prêtes à l'emploi : navigation par fil d'Ariane, steppers horizontaux et verticaux, onglets et pagination, un module de dépôt de fichiers, une carte d'information, l'en-tête commun aux sites et aux web apps, et des pages d'erreur illustrées qui reprennent les énergies du groupe plutôt qu'un message technique.
L'en-tête commun aux sites et web apps, en version desktop et réduite 
Pages d'erreur 410, 403 et 404 illustrées par les énergies du groupe 
Steppers : par numéro, par pictogramme, horizontal et vertical 
Modules : dépôt de fichiers et carte d'information
Ce qui a été livré
Des fondations documentées : couleurs, dégradés par énergie, typographie, grilles et élévations
Des composants décrits dans tous leurs états, avec leurs règles d'usage
Une palette et des règles dédiées à la visualisation de données
Des modules et templates de pages réutilisables par toutes les équipes IT
Ce que je retiens
- Un design system vaut autant par ses règles que par ses composants : une phrase comme « boutons de 38 px réservés aux tableaux » évite plus d'incohérences qu'une variante supplémentaire.
- Traduire une identité de marque en outil métier demande de la retenue : la couleur la plus forte de la marque devient la plus rare de l'interface.
- Documenter les états, du focus au désactivé, c'est concevoir pour l'accessibilité et pour les développeurs en même temps.
