CHARTE GRAPHIQUE
Marie-Christine Abatte - Psychologue
Cette charte graphique définit l'identité visuelle pour tous les supports digitaux et imprimés.
Elle garantit cohérence, harmonie et professionnalisme dans la communication.
🎨 Palette de Couleurs
Vert Sauge Clair
#C8D0C3
Douceur, équilibre émotionnel, naturalité. Utilisé pour les sections partenaires et zones de compatibilité.
Beige Sable
#D8CDBB
Chaleur humaine, stabilité, bienveillance. Pour les zones d'interprétation et bordures douces.
Sable
#E6D7C3
Neutralité, ancrage. Ton de fond idéal pour supports web, questions et cartes de présentation.
Mer (Bleu-Vert Doux)
#8FAFB1
Harmonie, introspection. Couleur principale pour titres, bordures, boutons et éléments interactifs.
Blanc Pur
#FFFFFF
Fond général, zones de réponse. Apporte clarté, lisibilité et respiration visuelle.
âœï¸ Typographie
Police Principale : Montserrat
Montserrat Bold - Titres principaux
Montserrat SemiBold - Sous-titres
Montserrat Medium - Emphase
Montserrat Regular - Corps de texte
Police Secondaire : Segoe UI / System
Utilisée comme police de secours pour garantir la compatibilité sur tous les appareils.
Tailles de Police Recommandées
| Élément |
Taille |
Poids |
Couleur |
| Titre H1 |
2.5em (40px) |
700 (Bold) |
#8FAFB1 |
| Titre H2 |
2em (32px) |
600 (SemiBold) |
#8FAFB1 |
| Titre H3 |
1.5em (24px) |
600 (SemiBold) |
#333333 |
| Corps de texte |
16px |
400 (Regular) |
#333333 |
| Légende / Footer |
11-14px |
400 (Regular) |
#000000 ou #666666 |
🧩 Composants UI
Boutons
.btn {
background: linear-gradient(135deg, #8FAFB1 0%, #C8D0C3 100%);
color: white;
border: none;
padding: 15px 40px;
border-radius: 10px;
font-size: 18px;
font-weight: 600;
box-shadow: 0 4px 15px rgba(143, 175, 177, 0.3);
}
Cartes / Cards
Exemple de carte
Contenu de la carte avec bordure colorée et fond dégradé.
.card {
background: linear-gradient(135deg, #E6D7C3 0%, #D8CDBB 100%);
padding: 20px;
border-radius: 10px;
border-left: 4px solid #8FAFB1;
}
📋 Règles d'Utilisation
✅ À Faire
- Utiliser les couleurs de la palette pour maintenir la cohérence
- Respecter les contrastes pour l'accessibilité (texte noir sur fond clair)
- Privilégier Montserrat pour tous les textes importants
- Utiliser les dégradés subtils entre couleurs complémentaires
- Maintenir des espacements généreux pour la lisibilité
- Utiliser les bordures gauche (#8FAFB1) pour hiérarchiser l'information
⌠À Éviter
- Ne pas utiliser de couleurs en dehors de la palette
- Éviter les contrastes insuffisants (texte gris clair sur fond clair)
- Ne pas mélanger trop de polices différentes
- Éviter les dégradés trop marqués ou agressifs
- Ne pas surcharger l'interface d'éléments visuels
- Éviter les animations trop rapides ou distrayantes
💻 Code CSS de Base
/* Importation de la police */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
/* Variables CSS pour la charte */
:root {
--vert-sauge: #C8D0C3;
--beige-sable: #D8CDBB;
--sable: #E6D7C3;
--mer: #8FAFB1;
--blanc: #FFFFFF;
--noir: #000000;
--gris-texte: #333333;
}
/* Styles de base */
body {
font-family: 'Montserrat', 'Segoe UI', sans-serif;
background: linear-gradient(135deg, var(--sable) 0%, var(--beige-sable) 100%);
color: var(--gris-texte);
}
h1, h2, h3 {
color: var(--mer);
font-weight: 600;
}
/* Bouton */
.btn {
background: linear-gradient(135deg, var(--mer) 0%, var(--vert-sauge) 100%);
color: var(--blanc);
font-weight: 600;
border-radius: 10px;
padding: 15px 40px;
}
/* Carte */
.card {
background: var(--sable);
border-left: 4px solid var(--mer);
border-radius: 10px;
padding: 20px;
}
📱 Responsive Design
Points de rupture recommandés :
- Mobile : < 768px - Réduire les tailles de police de 20%
- Tablette : 768px - 1024px - Ajuster les grilles en 2 colonnes
- Desktop : > 1024px - Layout complet sur 3-4 colonnes