Couleurs - utilisation dans le DSFR
La palette de couleurs du Système de Design de l'État n’est pas utilisée à l'état brut dans les composants : elle sert de fondation à une nomenclature contextuelle, exprimée par des design tokens de décision.
À noter
On distingues deux typologies de “design token” que nous utilisons pour les couleurs :
option et décision.
Les “options” sont les tokens de couleurs hors contexte, la palette brute à votre disposition. En pratique, les “décisions” recensent les usages contextuels de ces options dans le Système de Design (par exemple, sur un fond, une bordure, un texte).
Sommaire :
Convention de nommage des tokens
La nomenclature des tokens de décisions est la suivante :
contexte - usage - variante - couleur
Par exemple : BACKGROUND - ACTION - LOW - BLUE-FRANCE soit $background-action-low-blue-france
Le contexte est choisi parmi les suivants : fond, bordure, texte (les icônes sont assimilées au texte quand elles y sont associées), et illustration
L’usage fait référence à la fonction signifiée par l’élément, que ce soit un potentiel (action), un état (actif, désactivé, erreur, succès, etc.) ou une hiérarchie (défaut, titre, libellé, contraste, etc.)
La variante (optionnel) nuance l’importance de l'élément lorsque c’est nécessaire : important (high) ou mineur (low).
La couleur indique quelle famille de couleurs est utilisée par le token : les neutres (nuances de gris), le bleu France, une des couleurs système.
Chaque token fait référence à deux couleurs de la palette d’options : une pour le thème clair, et une pour le thème sombre. Il y a une unique paire de nuances pour chaque couleur. Dans notre exemple du token $background-action-low-blue-france, il s’agit du couple $blue-france-925 et $blue-france-125.
Arborescence de tous les tokens de décision (sur Figma)
La palette de décisions
Les couleurs de fond
Fonds de page et de composant par défaut | $background-default-grey | $grey-1000 | $grey-50 |
Fond de blocs ou de sections Exemple : pied de page | $background-alt-grey | $grey-975 | $grey-75 |
Fond de bloc de page aux couleurs de l’État | $background-alt-blue-france | $blue-france-975 | $blue-france-75 |
Fond de composant contrastant
| $background-contrast-grey | $grey-950 | $grey-100 |
Fond de composant en relief.
| $background-elevated-grey | $grey-1000 | $grey-75 |
Fond de composant cliquable important et portant l’identité de l’État
| $background-action-high-blue-france | $blue-france-sun-113 | $blue-france-625 |
Fond de composant cliquable mineur et portant l’identité de l’État | $background-action-low-blue-france | $blue-france-925 | $blue-france-125 |
Fond de composant actif et portant l’identité de l’État | $background-active-blue-france | $blue-france-sun-113 | $blue-france-625 |
Fond de composant ouvert et portant l’identité de l’État | $background-open-blue-france | $blue-france-925 | $blue-france-125 |
Fond de composant désactivé | $background-disabled-grey | $grey-925 | $grey-125 |
Fond de composant en état d’erreur | $background-flat-error | $error-425 | $error-625 |
Fond de composant en état d’avertissement | $background-flat-warning | $warning-425 | $warning-625 |
Fond de composant en état de succès | $background-flat-success | $success-425 | $success-625 |
Fond de composant en état d’information Exemple : alerte | $background-flat-info | $info-425 | $info-625 |
Les couleurs de bordure
Séparateur et cadre par défaut | $border-default-grey | $grey-925 | $grey-125 |
Séparateur portant l’identité de l’État | $border-default-blue-france | $blue-france-main-525 | $blue-france-main-525 |
Bordure d’élément cliquable important et portant l’identité de l’État | $border-action-high-blue-france | $blue-france-sun-113 | $blue-france-625 |
Bordure d’élément cliquable important et neutre | $border-action-high-grey | $grey-50 | $grey-1000 |
Bordure d’élément actif et portant l’identité de l’État | $border-active-blue-france | $blue-france-sun-113 | $blue-france-625 |
Bordure d’élément ouvert et portant l’identité de l’État | $border-open-blue-france | $blue-france-925 | $blue-france-125 |
Bordure d’élément désactivé | $border-disabled-grey | $grey-925 | $grey-125 |
Séparateur ou bordure d’élément identitaire, non cliquable | $border-plain-blue-france | $blue-france-sun-113 | $blue-france-625 |
Bordure illustrative et neutre | $border-plain-grey | $grey-200 | $grey-850 |
Bordure d’élément en état d’erreur | $border-plain-error | $error-425 | $error-625 |
Bordure d’élément en état d’avertissement | $border-plain-warning | $warning-425 | $warning-625 |
Bordure d’élément en état de succès.
| $border-plain-success | $success-425 | $success-625 |
Bordure d’élément en état d’information | $border-plain-info | $info-425 | $info-625 |
Les couleurs de texte
À noter
Quand elles sont associées à du texte, les icônes sont assimilées à celui-ci.
Titre ou élément équivalent | $text-title-grey | $grey-50 | $grey-1000 |
Titre portant l’identité de l’État | $text-title-blue-france | $blue-france-sun-113 | $blue-france-625 |
Corps de texte | $text-default-grey | $grey-200 | $grey-850 |
Texte de mentions ou de détail | $text-mention-grey | $grey-425 | $grey-625 |
Texte de libellé | $text-label-grey | $grey-50 | $grey-1000 |
Texte cliquable important et portant l’identité de l’État | $text-action-high-blue-france | $blue-france-sun-113 | $blue-france-625 |
Texte cliquable important | $text-action-high-grey | $grey-50 | $grey-1000 |
Texte ou icône contrastant en nuances de gris | $text-inverted-grey | $grey-1000 | $grey-50 |
Texte ou icône contrastant portant l’identité de l’État | $text-inverted-blue-france | $blue-france-975 | $blue-france-113 |
Texte actif portant l’identité de l’État | $text-active-blue-france | $blue-france-sun-113 | $blue-france-625 |
Texte actif neutre | $text-active-grey | $grey-50 | $grey-1000 |
Texte désactivé | $text-disabled-grey | $grey-625 | $grey-425 |
Texte ou icône en état d’erreur | $text-default-error | $error-425 | $error-625 |
Texte ou icône en état de succès | $text-default-success | $success-425 | $success-625 |
Les couleurs d’illustrations
Couleur dominante d’illustration (60%) | $artwork-major-blue-france | $blue-france-sun-113 | $blue-france-625 |
Icône portant l’identité de l’État ou couleur mineure d’illustration (30%) | $artwork-minor-blue-france | $blue-france-main-525 | $blue-france-main-525 |
Les usages
Il est recommandé d’utiliser autant que possible les tokens de décision lors de la création d'écrans à partir du Système de Design de l'État:
Si le bon token n’existe pas, se référer aux couleurs d’options, en prenant garde à respecter les correspondance thème clair / thème sombre. Vous pouvez aussi nous signaler votre nouveau cas d’usage sur Slack , avec un ticket ou lors des bureaux !
Les tokens sont présents dans libraires Sketch et Figma, ainsi que dans le code, avec à chaque fois de petites spécificités liées à l’outil.
Certains éléments portant des tokens de décision peuvent être accentués, c’est-à-dire changés de couleur parmi la palette illustrative. Référez-vous à la documentation de chaque composant pour connaître les couleurs utilisables !
Accentuation des composants
L’accentuation des composants est réglementée : un tableau récapitulatif des éléments qu’il est possible d’accentuer sur chaque composant est détaillé dans la page de documentation (paragraphe ‘Personnalisation > Couleurs d’accent’).
À l’heure actuelle, seuls les composants suivants sont ouverts à l’accentuation :
Badges (Fond , texte)
Carte (Fond blanc ou gris)
Citation (Icône)
Mise en avant (Fond et bordure)
Mise en exergue (Bordure)
Tableau (Fond et bordure)
Tag (Fond , texte et icône)
Tuile (Fond blanc ou gris)
D’autres composants seront ajoutés à ce périmètre au fur et à mesure des mises à jour du Système de Design de l'État.
N’hésitez pas à nous faire des suggestions sur le sujet, sur le Slack ou en ouvrant un ticket.