Présentation de Trilogy Entreprises

Le design system de Bouygues Telecom Entreprises repose sur trois types d'objets : les atomes, les composants, et les facettes. Tous s'organisent autour d'une même bibliothèque permettant d'offrir aux utilisateurs de nos différentes applications, une expérience visuelle unifiée et harmonieuse.

# Atomes

Les atomes sont les éléments de base de Trilogy. Un atome donne son style à un élément. Il est indivisible : on ne peut pas utiliser certaines de ses propriétés et délaisser les autres.

Le nom d'un atome renseigne sur sa forme et pas sur son fond, car il n'a pas vocation à être sémantique : on ne veut pas connaitre son rendu final, on veut simplement connaitre son utilité. Ainsi, il est suffisamment abstrait pour que l'on puisse justement changer son rendu final, sans avoir à changer son nom.

Exemple

DON'T Un atome nommé has-text-blue, car si le bleu évolue un jour dans une autre couleur, le nom de l'atome n'a plus aucun sens.

DO Un atome nommé has-text-primary, car on définit simplement la couleur la plus importante du design system, peu importe ce qu'elle est, et on peut la faire évoluer autant que l'on veut.

# Composants

A l'opposé des atomes, infiniment petits, on trouve les composants, éléments les plus avancés de la bibliothèque. Utilisés par les développeurs sur une page web ou au sein d'une application, leur rendu est immédiatement celui attendu et il ne reste plus que les contenus à y intégrer.

D'une simple icône à un menu de navigation, les composants sont en fait des compositions d'atomes ayant un comportement et un rendu propre à chacun, du plus simple au plus complexe.

Les composants sont des objets réutilisables sur l'intégralité des sites et applications Bouygues Télécom, ils ne doivent pas être spécifiques à un seul applicatif dont le besoin serait unique. Ainsi, à l'inverse du nom d'atome, le composant doit être nommé assez concrètement tout en restant réutilisable. Il doit être sémantique et renseigne sur le fond plutôt que sur la forme.

Exemple

DON'T Un composant nommé box-homepage, car la spécificité est trop restreinte. Il faut que l'on puisse utiliser un composant box partout, sans qu'il soit contraint à une page spécifique (ici la "homepage"), sinon on ne respecte pas le but premier d'un design system, à savoir l'homogénéité visuelle.

DO Un composant nommé button, box ou encore notification, car on indique clairement le résultat attendu.

# Facettes

Les facettes permettent de modifier certaines propriétés d'un composant et d'obtenir une variation du composant original. On ajoutera par exemple une facette sur un composant box qui est ombré par défaut et dont on voudrait supprimer l'ombrage en question.

Le nom de la facette renseigne sur la raison qui pousse à la modification du composant d'origine, pas sur sa conséquence graphique. Le nom de la facette doit également être suffisamment abstrait pour garder une cohérence entre les différents composants : si plusieurs composants

Exemple

DON'T Une facette nommée is-error, car cela implique une erreur. Or, on pourrait simplement vouloir afficher un message en rouge qui attire l'attention et n'est pas forcément une erreur.

DO Une facette nommée is-danger ou is-important pour attirer l'attention de l'utilisateur et lui signaler quelque chose de conséquent.