Couleurs

Philosophie

Les couleurs doivent servir à mettre en évidence dans l'écran les éléments les plus importants pour l’utilisateur dans certain contextes.

Par défaut privilégiez les nuances de gris.
Les couleurs doivent créer le contraste avec les autres éléments. Il convient donc de les utiliser avec subtilité pour que leur impact soit maximisé pour l’utilisateur.
L’utilisation des couleurs doit être cohérente au travers de toute l’application afin de garantir l’uniformité. On utilisera les nuances en fonction de sémantiques identifiée.

Famille de couleurs	Variable	Sens

Famille de couleurs	Variable	Sens
Gris Par défaut, “neutre”	`$color-dark-gray`	C’est la couleur neutre par excellence. Elle s’utilise par défaut sur éléments d’interface. Les différents niveaux d’opacité permettent d’ajouter de la hiérarchie entre les éléments.
	`$color-gray`
	`$color-light-gray`
Violets “brouillon”, “négatif”	`$color-red`	Signifier un danger, une criticité forte, un retard, une erreur, un état “perdu”, une interdiction, etc. ($danger)
	`$color-amaranth`
	`$color-purple`
	`$color-indigo`
Bleus “Actif”, “informatif”	`$color-blue-night`	Utilisé pour signifier l’accompagnement utilisateur
	`$color-blue`	Signifier un état actif, activé, en cours, etc. ($info)
	`$color-azure`
	`$color-cyan`
Verts “Positif”	`$color-teal`
	`$color-green`	Signifier une action réussie, une chose positive, un état “gagné”, etc. ($success)
	`$color-pistachio`
	`$color-apple`
Orangés “Alerte”	`$color-yellow`
	`$color-gold`
	`$color-orange`	Signifier une alerte, une criticité moyenne, etc. ($warning)
	`$color-divalto`	Couleur de l’identité divalto. Cette couleur est réservée pour mettre en avant des éléments de navigation. Elle est également utiliser pour mettre en avant l’action principale attendue ($primary)

Badge classique (toutes les couleurs) > Tous les autres usages en dehors du danger, interdiction ou criticité.

Pour une thématique de badge qui indique le statut d’avancement d’un élément :