Couleurs web

En accord avec l'identité de marque, le styleguide web utilise la gamme de couleur MAIF
Information

Accessibilité : Les contrastes doivent viser une compatibilité AA, vous pouvez vérifier ces contrastes via cet outil : Accessible Brand Colors

Couleurs principales
Rouge logo
  • HEX : #fc0d1a
  • RVB : 252 13 26
  • SCSS : $color-3

Il est important de veiller à sa parfaite reproduction.
Symbole de la vie, de la puissance, de la passion, force, énergie, dynamisme, chaleur, joie.

Rouge titres web
  • HEX : #c62222
  • RVB : 198 34 34
  • SCSS : $color-14

Répondant aux critères d'accessibilité.

Rouge secondaire
  • HEX : #fbf1f3
  • RVB : 251 241 243
  • SCSS : $color-17
Bleu ardoise
  • HEX : #2e404f
  • RVB : 46 64 79
  • SCSS : $color-8

Utilisé pour les titres web et les boutons.

Ardoise 20%
  • HEX : #d5d9dc
  • SCSS : $color-10
Couleur secondaire
  • HEX : #e1e7ef
  • SCSS : $color-16
Beige
  • HEX : #ede9e2
  • SCSS : $color-1

Fond web et email

Beige foncé
  • HEX : #e1d9cc
  • SCSS : $color-2

Fond web secondaire

Niveau gris 1
  • HEX : #666666
  • SCSS : $color-1001
Niveau gris 2
  • HEX : #999999
  • SCSS : $color-1002
Niveau gris 3
  • HEX : #cccccc
  • SCSS : $color-1003
Niveau gris 4
  • HEX : #333333
  • SCSS : $color-1004
Noir
  • HEX : #000000
  • RVB : 0 0 0
  • SCSS : $color-00

Couleur texte de labeur

Blanc
  • HEX : #ffffff
  • RVB : 255 255 255
  • SCSS : $color-0
État erreur
  • HEX : #fc0d1a
  • SCSS : $color-3

Affichage d'une erreur

État attention
  • HEX : #E6A529
  • SCSS : $color-7

Couleur pour un message important mais non bloquant

État information
  • HEX : #999999
  • SCSS : $color-1002

Couleur pour l'affichage d'un message informatif, avec aucun importance particulière.

État succès
  • HEX : #3C9F2A
  • SCSS : $color-4

Couleur pour l'affichage d'un message de confirmation ou de bon déroulement d'opération.

Rappel
  • HEX : #f9545e
  • SCSS : $color-18

Couleur représentative du rappel automatique - webcallback

Information

Les règles générales des couleurs sont accessibles dans Identité de marque