Évolutions à venir

L'équipe du SIG travaille actuellement sur un nouveau système de couleur. Son lancement est prévu pour la version 1.2. Cette section est vouée à être grandement modifiée.

Palettes de couleurs

Certains composants possèdent plusieurs variantes de couleurs : mise en avant, mise en exergue (à venir), notifications (à venir).

Ces variantes s'adaptent au mode clair et au mode nuit.

Plus de couleurs sont à venir dans de prochaines versions du Design System.

Combinaisons accessibles

Ces combinaisons de couleurs utilisent les variables CSS du Design System.

Ces couleurs peuvent être utilisées comme fond alternatif avec du texte blanc. Leur contraste est supérieur à 4.5 : elles peuvent être utilisées pour tout type de textes (titres et corps de page).

En mode nuit, le fond sera clair, et le texte foncé.

Fond alternatif

Ce texte est en w sur fond g800.

Fond alternatif

Ce texte est en w sur fond g700.

Fond alternatif

Ce texte est en w sur fond bf500.

Ces couleurs peuvent être utilisées comme fond alternatif avec du texte foncé. Leur contraste est supérieur à 4.5 : elles peuvent être utilisées pour tout type de textes (titres et corps de page).

En mode nuit, les fonds colorés seront dans une teinte de gris. La couleur ne devra pas être le seul moyen de transmettre une information (une erreur sera symbolisée par une icône et le texte Erreur par exemple).

Fond alternatif

Ce texte est en g800 sur fond g300.

Fond alternatif

Ce texte est en g800 sur fond g200.

Fond alternatif

Ce texte est en g800 sur fond g100.

Fond alternatif

Ce texte est en g800 sur fond bf100-g750.

Fond alternatif

Ce texte est en g800 sur fond w-bf500.

Fond alternatif

Ce texte est en g800 sur fond rm300.

Ces combinaisons de couleurs peuvent servir pour afficher des titres ou des éléments graphiques (comme des boutons). Elles ne peuvent pas servir à afficher du texte normal.

Titre de couleur bf500

Texte foncé.

Fond alternatif de couleur bf500

Titre de couleur g600

Texte foncé.

Fond alternatif de couleur g600

Titre de couleur rm500

Texte foncé.

Fond alternatif de couleur rm500

Variables de couleurs

Échelle de gris

g800

g700

g600

g500

g400

g300

g200

g100

Bleu France

bf500

bf300-plain

bf200-bf300

bf100-g750

w-bf500

Rouge Marianne

rm500

rm300

Couleurs fonctionnelles

info

success

error