Association humanitaire
Design
System
Le langage visuel d'Espoir Sans Frontières : fondations, composants et règles d'usage.
Logo
Le colombe-main jaune : espoir, soin, protection.
Version principale
Verticale, sur fond clair. Zone de protection minimale : la hauteur de la croix du logo sur les quatre côtés. Taille minimale d'impression : 25 mm de large ; à l'écran : 90 px.
Sur fond sombre
Tant qu'une version vectorielle en blanc n'est pas disponible, le logo est posé sur un aplat sable. Ne jamais inverser le fichier existant : le jaune et le gris s'en trouvent altérés.
À ne pas faire
- Recolorer le symbole ou remplacer le jaune.
- Étirer, incliner ou ajouter une ombre portée.
- Poser le logo sur une photo chargée sans aplat de repos.
- Recomposer la signature dans une autre police.
Couleurs
Extraites du logo, étendues pour l'interface.
Jaune Espoir
#F5C400Couleur d'action. Boutons, chiffres clés, accents. Jamais en texte courant.
Anthracite
#2E2E2CTexte, titres, fonds pleins. La voix de l'association.
Gris Pierre
#9D9D9CInformations secondaires, séparateurs, états inactifs.
Sable
#FAF7F0Fond de page. Chaleureux, moins clinique que le blanc pur.
Nuances & couleurs fonctionnelles
#FFF3C4
Jaune 100#FFDE5C
Jaune 300#C79E00
Jaune 700#2E7D52
Succès#B4462F
Urgence#2C6E8F
InfoL'urgence et l'info ne servent qu'aux bandeaux d'alerte et aux états de formulaire — jamais en décoration, pour préserver la force du jaune.
Répartition 60 / 30 / 10
60 % sable, 30 % anthracite, 10 % jaune. Le jaune signale toujours une action ou une donnée à retenir.
Contrastes validés : anthracite sur sable 13.4:1 · anthracite sur jaune 9.1:1 · blanc sur anthracite 14.2:1. Le jaune ne porte jamais de texte blanc.
Typographie
Barlow Condensed + Source Sans 3.
Aa
Titres — Barlow Condensed 600 / 700
Condensée et affirmée, elle prolonge le lettrage du logo. Toujours en capitales pour les titres de section, en casse normale pour les titres d'article.
Aa
Textes — Source Sans 3 400 / 600
Humaniste, très lisible en petit corps et en langues à diacritiques. Corps de texte 17 px, interligne 1,7. Longueur de ligne : 65 à 75 signes.
Display · 76/70 · 700Redonner espoirH2 · 40/44 · 700Nos programmes sur le terrainH3 · 24/30 · 600Accès à l'eau potable au SahelChapô · 21/32 · 400Depuis 2009, nos équipes interviennent auprès des populations isolées, avec les acteurs locaux et dans la durée.Corps · 17/29 · 400Chaque don finance une action identifiée, suivie et rendue publique dans notre rapport annuel. Nos comptes sont certifiés et nos frais de fonctionnement plafonnés à 12 %.Surtitre · 14 · 600 · .18emRapport d'activité 2025Grille & espacement
12 colonnes · gouttière 24 px · marge 40 px
Conteneur max. 1180 px. Passage à 6 colonnes sous 1024 px, 4 colonnes sous 720 px. Les blocs pleine largeur (bandeau d'urgence, appel au don) débordent la grille en pleine page.
Échelle d'espacement — base 8
8 — intra-composant16 — texte / bouton24 — gouttière40 — padding carte64 — bloc96 — sectionAngles : 2 px sur les boutons et champs, 0 sur les cartes et médias. Pas d'ombre portée — la hiérarchie vient du contraste et du filet 1 px.
Composants
Boutons
Champs de formulaire
Forages solaires au Sahel
14 forages équipés en 2025, gérés par des comités villageois formés sur place.
Découvrir →« L'eau arrive au village. Les enfants sont retournés à l'école. »
Séisme : collecte exceptionnelle ouverte. Soutenir →
Reçu de don délivré ; déduction fiscale selon la législation de votre pays de résidence.
Merci, votre reçu de don a été envoyé.
Imagerie & pictogrammes
Photographies documentaires, lumière naturelle, pas de filtre. Les personnes sont nommées et consentantes, montrées en acteurs de leur situation — jamais en position de détresse anonyme. Cadrage à hauteur de regard. Recadrages autorisés : 16:9, 4:3, 3:4, carré.
Pictogrammes
Trait 2 px, angles vifs, grille 24 px, un seul aplat jaune par picto. Pas de pictogramme illustratif ni d'emoji.
Ton & accessibilité
Ton de voix
Sobre, factuel, digne. On dit ce qu'on fait, avec des chiffres vérifiables, et on nomme les personnes. On s'adresse au lecteur au « vous ».
On écrit
« 14 forages, 9 200 personnes desservies, gestion confiée aux comités villageois. »
On évite
« Grâce à vous, nous sauvons des vies chaque jour dans un monde en détresse. »
Accessibilité — RGAA / WCAG AA
- Contraste texte ≥ 4,5:1 ; jamais de blanc sur jaune.
- Focus visible : contour anthracite 2 px + halo jaune clair.
- Cibles tactiles 44 × 44 px minimum.
- Alternative textuelle sur chaque photo, légende avec lieu et date.
- Formulaires de don utilisables au clavier, sans limite de temps.
- Animations discrètes, désactivées si
prefers-reduced-motion.