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).

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.

La palette de décisions

Les couleurs de fond
Description de l’usage
Token
Thème clair
Thème sombre
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

Exemple : lettre d’information et réseaux sociaux.
$background-alt-blue-france $blue-france-975 $blue-france-75
Fond de composant contrastant

Exemples : mise en avant, champ de saisie
$background-contrast-grey $grey-950 $grey-100
Fond de composant en relief.

Exemples : en-tête, menu déroulant
$background-elevated-grey $grey-1000 $grey-75
Fond de composant cliquable important et portant l’identité de l’État

Exemple : bouton primaire
$background-action-high-blue-france $blue-france-sun-113 $blue-france-625
Fond de composant cliquable mineur et portant l’identité de l’État
Exemple : tag cliquable
$background-action-low-blue-france $blue-france-925 $blue-france-125
Fond de composant actif et portant l’identité de l’État
Exemple : pagination
$background-active-blue-france $blue-france-sun-113 $blue-france-625
Fond de composant ouvert et portant l’identité de l’État
Exemple : élément de navigation
$background-open-blue-france $blue-france-925 $blue-france-125
Fond de composant désactivé
Exemples : boutons, tag
$background-disabled-grey $grey-925 $grey-125
Fond de composant en état d’erreur

Exemple : alerte
$background-flat-error $error-425 $error-625
Fond de composant en état d’avertissement
Exemple : alerte
$background-flat-warning $warning-425 $warning-625
Fond de composant en état de succès
Exemple : alerte
$background-flat-success $success-425 $success-625
Fond de composant en état d’information Exemple : alerte $background-flat-info $info-425 $info-625
Fonds de page et de composant par défaut
Exemples : pied de page, modale, onglet
$background-default-grey $grey-1000 $grey-50

Les couleurs de texte

À noter

Quand elles sont associées à du texte, les icônes sont assimilées à celui-ci.

Description de l’usage
Token
Thème clair
Thème sombre
Titre ou élément équivalent
Exemples : titres éditoriaux, titre de tableau
$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é
Exemple : éléments de formulaire
$text-label-grey $grey-50 $grey-1000
Texte cliquable important et portant l’identité de l’État
Exemple : bouton secondaire
$text-action-high-blue-france $blue-france-sun-113 $blue-france-625
Texte cliquable important
Exemple : accordéon, élément de navigation
$text-action-high-grey $grey-50 $grey-1000
Texte ou icône contrastant en nuances de gris
Exemple : alerte
$text-inverted-grey $grey-1000 $grey-50
Texte ou icône contrastant portant l’identité de l’État
Exemples : bouton primaire, pagination, tag
$text-inverted-blue-france $blue-france-975 $blue-france-113
Texte actif portant l’identité de l’État

Exemples : élément de navigation, interrupteur
$text-active-blue-france $blue-france-sun-113 $blue-france-625
Texte actif neutre
Exemple : fil d’Ariane
$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
Exemples : champ de saisie, élément de formulaire
$text-default-error $error-425 $error-625
Texte ou icône en état de succès

Exemples : champ de saisie, élément de formulaire
$text-default-success $success-425 $success-625

Les couleurs d’illustrations

Description de l’usage
Token
Thème clair
Thème sombre
Couleur dominante d’illustration (60%)
Exemple: illustration des options de paramètres d’affichage
$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%)
Exemple : citation
$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 :

  • 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.