🎯 Intention

Pour faciliter le design et le développement, ce standard présente les nuances à utiliser pour représenter l’image de Captive pour le web et le mobile.

Ces nuances sont l’implémentations web/mobiles des couleurs de la “Marque Captive”

✅ Points clés

Capture d’écran 2022-10-01 à 19.18.47.png

Point clé	Raison
🔘 Blue Grey représente le neutre
Exemple : le texte principal et le background	il se rapproche du ‣ la couleur de marque
⚪ White complète les **neutres
Exemple :** le background, ou les texte des CTA
💗 Pink Vivid représente la couleur **primaire
Exemple :** les Call To Action	C’est l’équivalent du jaune de amazon.fr, inspiré du ‣ de la marque
🔵 Light Blue Vivid est la couleur **d’accent
Exemple :** les liens ou éléments interactifs	Les liens sont bleus depuis l’origine d’Internet, il vient du ‣ de la marque
🟢 Lime Green pour les messages **positifs
Exemple**: les notifications de confirmation
🟡 Yellow Vivid pour les **avertissements
Exemple:** Email non confirmé
🔴 Red Vivid pour les erreurs
Exemple: une erreur dans un formulaire
🟣 Purple pour les aides
Exemple: des messages de tutoriel
Tirer le ‣ si vous avez le sentiment qu’il manque une couleur	On pourra la rajouter ou modifier le nuancier actuel

❌ Erreurs type à éviter

Utiliser une autre couleur que celles présente dans le nuancier.

🧑‍🎓 Aller plus loin

ℹ️ Ce standard est une implémentation de UI : La palette de couleurs d’une application

Nuances de couleurs Captive Digital

Implémentation CSS des couleurs

// captive-theme/colors.css

:root {
  // white
  --white: #fff;

  // blue-grey
  --blue-grey-050: #f5f7fa;
  --blue-grey-100: #d9e2ec;
  --blue-grey-200: #bcccdc;
  --blue-grey-300: #9fb3c8;
  --blue-grey-400: #829ab1;
  --blue-grey-500: #5e7997;
  --blue-grey-600: #486581;
  --blue-grey-700: #334e68;
  --blue-grey-800: #243b53;
  --blue-grey-900: #102a43;

  // pink-vivid
  --pink-vivid-050: #fff5f8;
  --pink-vivid-100: #ffb8d2;
  --pink-vivid-200: #ff8cba;
  --pink-vivid-300: #f364a2;
  --pink-vivid-400: #e8368f;
  --pink-vivid-500: #d9127c;
  --pink-vivid-600: #bc0a6f;
  --pink-vivid-700: #a30664;
  --pink-vivid-800: #870557;
  --pink-vivid-900: #620042;

  // light-blue-vivid
  --light-blue-vivid-050: #f0fbff;
  --light-blue-vivid-100: #b3ecff;
  --light-blue-vivid-200: #81defd;
  --light-blue-vivid-300: #5ed0fa;
  --light-blue-vivid-400: #40c3f7;
  --light-blue-vivid-500: #2bb0ed;
  --light-blue-vivid-600: #188dcd;
  --light-blue-vivid-700: #1177b6;
  --light-blue-vivid-800: #0a6299;
  --light-blue-vivid-900: #035388;

  // lime-green
  --lime-green-050: #f2fde0;
  --lime-green-100: #e2f7c2;
  --lime-green-200: #c7ea8f;
  --lime-green-300: #abdb5e;
  --lime-green-400: #94c843;
  --lime-green-500: #7bb026;
  --lime-green-600: #63921a;
  --lime-green-700: #507712;
  --lime-green-800: #42600c;
  --lime-green-900: #2b4005;

  // yellow-vivid
  --yellow-vivid-050: #fffbea;
  --yellow-vivid-100: #fff3c4;
  --yellow-vivid-200: #fce588;
  --yellow-vivid-300: #fadb5f;
  --yellow-vivid-400: #f7c948;
  --yellow-vivid-500: #f0b429;
  --yellow-vivid-600: #de911d;
  --yellow-vivid-700: #cb6e17;
  --yellow-vivid-800: #b44d12;
  --yellow-vivid-900: #8d2b0b;

  // red-vivid
  --red-vivid-050: #fff0f0;
  --red-vivid-100: #ffbdbd;
  --red-vivid-200: #ff9b9b;
  --red-vivid-300: #f86a6a;
  --red-vivid-400: #ef4e4e;
  --red-vivid-500: #e12d39;
  --red-vivid-600: #cf1124;
  --red-vivid-700: #ab091e;
  --red-vivid-800: #8a041a;
  --red-vivid-900: #610316;

  // purple
  --purple-050: #eae2f8;
  --purple-100: #cfbcf2;
  --purple-200: #a081d9;
  --purple-300: #8662c7;
  --purple-400: #724bb7;
  --purple-500: #653cad;
  --purple-600: #51279b;
  --purple-700: #421987;
  --purple-800: #34126f;
  --purple-900: #240754;
}