Nos couleurs

Palette graphique pour l'ensemble du design system.

Couleurs de la marque

#00263c

primary

#109DB9

secondary

#FF554B

tertiary

Couleurs sémantiques

#109DB9

info

#FFBB33

warning

#007B52

success

#D42D02

error

Variantes de gris

#4F4F4F

grey-dark

#707070

grey

#E1E1E1

disabled

#F6F6F6

grey-light

Helpers

# Couleurs de background

Pour appliquer une couleur de fond à un élément, il est possible d'utiliser des atomes de customisation. Utiliser un fond de couleur requiert généralement la couleur de texte adéquate. Puisqu'il s'agit d'atomes, une classe has-background-xxx ne peut impacter qu'une propriété. Afin d'obtenir automatiquement la couleur de texte adéquate, l'adjonction d'un autre helper has-text-xxx-invert est donc nécessaire.

Classes pour les couleurs de marque : couleur de fond, de texte associé et rendu
Classe CSS pour le fond	Classe CSS associée (pour le texte)	Résultat (couleurs sémantiques)
has-background-primary	has-text-primary-invert	Lorem ipsum dolor sit amet
has-background-secondary	has-text-secondary-invert	Lorem ipsum dolor sit amet
has-background-tertiary	has-text-tertiary-invert	Lorem ipsum dolor sit amet

Classes pour les couleurs sémantiques : couleur de fond, de texte associé et rendu
Classe CSS pour le fond	Classe CSS associée (pour le texte)	Résultat (couleurs sémantiques)
has-background-info	has-text-info-invert	Lorem ipsum dolor sit amet
has-background-success	has-text-success-invert	Lorem ipsum dolor sit amet
has-background-warning	has-text-warning-invert	Lorem ipsum dolor sit amet
has-background-error	has-text-error-invert	Lorem ipsum dolor sit amet

Classes pour les variantes de gris : couleur de fond, de texte associé et rendu
Classe CSS pour le fond	Classe CSS associée (pour le texte)	Résultat (variantes de gris)
has-background-grey-dark	N/A
has-background-grey	N/A
has-background-grey-light	N/A
has-background-white	has-text-white-invert	Lorem ipsum dolor sit amet