Guide de style - Couleurs

Utilisations

[TODO Edito] Certe inquam pertinax non numquam eius modi tempora incidunt ut perspiciatis unde omnis iste natus error sit sentiri haec putat ut calere ignem nivem esse appetendum alterum esse fugiendum itaque negat opus esse expetendam

Couleurs primaires

[TODO Edito] Certe inquam pertinax non numquam eius modi tempora incidunt ut perspiciatis unde omnis iste natus error sit sentiri haec putat ut calere ignem nivem esse appetendum alterum esse fugiendum itaque negat opus esse expetendam

Couleurs primaires
Couleurs Noms Usages

Primary

#1D71B8

  • Boutons primaires
  • Boutons primaires outline
  • Liens
  • Illustrations, pictogrammes
  • Éléments graphiques / patterns
  • État actif sur les textes
  • Checkbox actifs et boutons radio actifs
  • Listes à puces et listes numérotées

Primary Darker

#0F3F68

  • État « Pressé » du bouton principal
  • Illustrations/pictogrammes

Primary Dark

#155891

  • État « Hover » du bouton principal
  • Illustrations/pictogrammes

Couleurs secondaires

[TODO Edito] Certe inquam pertinax non numquam eius modi tempora incidunt ut perspiciatis unde omnis iste natus error sit sentiri haec putat ut calere ignem nivem esse appetendum alterum esse fugiendum itaque negat opus esse expetendam

Couleurs secondaires
Couleurs Noms Usages

Secondary

#D20050

  • Illustrations/pictogrammes
  • Éléments graphiques
  • Liens "serviciels"

Couleurs neutres

[TODO Edito] Certe inquam pertinax non numquam eius modi tempora incidunt ut perspiciatis unde omnis iste natus error sit sentiri haec putat ut calere ignem nivem esse appetendum alterum esse fugiendum itaque negat opus esse expetendam

Couleurs neutres
Couleurs Noms Usages

Black

#343852

  • Titres (du H1 au H6)
  • Boutons secondaires outline
  • Pictogrammes/illustrations

Gray-800

#464C6D

  • Pictogrammes/illustrations

Gray-700

#697097

  • Chapôs
  • Paragraphes
  • Surtitres
  • Pictogrammes/illustrations

Gray-600

#969CBB

  • Bordures de champs
  • Pictogrammes/illustrations
  • Bordure des boutons d'ajout

Gray-500

#C5C8DA

  • Pictogrammes/illustrations

Gray-400

#DEE0EA

  • Bordures et séparateurs
  • Pictogrammes/illustrations

Gray-300

#EDEEF3

  • Pictogrammes/illustrations

Gray-200

#F2F3F7

  • Pictogrammes/illustrations

Gray-100

#F8F9FB

  • Arrière-plans
  • Pictogrammes/illustrations

White

#FFFFFF

  • Arrière-plans
  • Pictogrammes/illustrations

Couleurs fonctionnelles

[TODO Edito] Certe inquam pertinax non numquam eius modi tempora incidunt ut perspiciatis unde omnis iste natus error sit sentiri haec putat ut calere ignem nivem esse appetendum alterum esse fugiendum itaque negat opus esse expetendam

Couleurs fonctionnelles
Couleurs Noms Usages

Error

#D20024

  • Textes d'erreur
  • Bordure des champs en erreur
  • Éléments graphiques des messages de statut

Warning

#E69215

  • Éléments graphiques des messages de statut

Success

#9AB938

  • Éléments graphiques des messages de statut

Information

#369AEE

  • Éléments graphiques des messages de statut