Branding et Logos
Ce guide explique comment configurer l'identite visuelle du systeme, incluant les logos officiels utilises dans les exports PDF et les rapports.
Vue d'ensemble
Le systeme PCH-SIG utilise une charte graphique officielle incluant :
- Logos institutionnels : Logos des partenaires du projet
- En-tetes PDF : Bandeau superieur des documents generes
- Pieds de page : Signataires et mentions legales
- Couleurs : Theme emeraude (#059669)
Logos officiels
Partenaires affiches
| Logo | Institution | Position |
|---|---|---|
| Republique | Gouvernement | Gauche |
| Banque Mondiale | Partenaire financier | Centre-gauche |
| UNICEF | Partenaire technique | Centre-droit |
| PCH | Programme | Droite |
Emplacement des logos
Les logos sont stockes dans :
frontend/public/logos/
├── logo-republique.png
├── logo-banque-mondiale.png
├── logo-unicef.png
└── logo-pch.png
Format recommande
| Parametre | Valeur |
|---|---|
| Format | PNG avec transparence |
| Largeur | 200-400 px |
| Hauteur | Proportionnelle |
| Resolution | 150 DPI minimum |
Configuration des en-tetes PDF
Documents concernes
Les en-tetes sont appliques automatiquement sur :
- Fiches menage PDF
- Lettres de transfert
- Rapports de justification
- Exports de listes
- Attestations
Structure de l'en-tete
┌─────────────────────────────────────────────────────────────────┐
│ [Logo Rep] [Logo BM] TITRE DU DOCUMENT [Logo UNICEF] │
│ Sous-titre / Date │
├─────────────────────────────────────────────────────────────────┤
│ Contenu du document │
└─────────────────────────────────────────────────────────────────┘
Signataires
Configuration des signataires
Les documents officiels (lettres de transfert, rapports de justification) incluent des blocs de signature :
| Role | Description |
|---|---|
| Coordinateur PCH | Responsable du programme |
| Directeur financier | Validation financiere |
| Representant BM | Pour les rapports Banque Mondiale |
Ajouter un signataire
Via l'interface :
- Allez dans Parametres > Exports
- Section Signataires
- Cliquez sur Ajouter un signataire
- Renseignez :
- Nom complet
- Fonction
- Organisation
Position des signatures
┌─────────────────────────────────────────────────────────────────┐
│ │
│ ____________________ ____________________ │
│ Nom du signataire Nom du signataire │
│ Fonction Fonction │
│ Organisation Organisation │
│ │
└─────────────────────────────────────────────────────────────────┘
Personnalisation des exports
Lettre de transfert
La lettre de transfert inclut :
- En-tete avec logos officiels
- Informations du cycle
- Liste des beneficiaires
- Montants par operateur
- Bloc signatures
Rapport de justification
Le rapport de justification inclut :
- En-tete officiel
- Resume des paiements
- Statistiques par region
- Liste des ecarts
- Signataires autorises
Couleurs officielles
Theme principal
| Element | Couleur | Code |
|---|---|---|
| Primaire | Emeraude | #059669 |
| Secondaire | Gris | #6B7280 |
| Accent | Bleu | #3B82F6 |
| Succes | Vert | #22C55E |
| Erreur | Rouge | #EF4444 |
Application
Les couleurs sont appliquees sur :
- Interface utilisateur
- Graphiques et tableaux
- En-tetes PDF
- Badges de statut
API Configuration
Recuperer la configuration branding
GET /api/settings/branding
{
"logos": {
"republique": "/logos/logo-republique.png",
"banqueMondiale": "/logos/logo-banque-mondiale.png",
"unicef": "/logos/logo-unicef.png",
"pch": "/logos/logo-pch.png"
},
"signataires": [
{
"nom": "Jean Dupont",
"fonction": "Coordinateur PCH",
"organisation": "PCH"
}
],
"couleurs": {
"primaire": "#059669"
}
}
Bonnes pratiques
:::tip Recommandations
- Qualite des logos : Utilisez des images haute resolution pour les PDF
- Format PNG : Preferez PNG avec transparence pour les logos
- Coherence : Utilisez les memes logos sur tous les documents
- Mise a jour : Mettez a jour les signataires lors des changements de personnel
- Tests : Verifiez l'apparence des PDF apres modification :::