Guide de style interne
Charte graphique appliquée
Traduction pour l’interface de la charte graphique du Gouvernement de la République démocratique du Congo (février 2022). Chaque élément ci-dessous est le composant réel utilisé dans l’application.
Marque
Bloc-armoirie, Ligne d’État et intitulé officiel, toujours dans cet ordre. En couleur sur fond blanc ; en monochrome blanc sur bleu gouvernement, la Ligne d’État gardant ses trois couleurs.
MINISTÈRE DEL\'ÉCONOMIE NUMÉRIQUE
MINISTÈRE DEL\'ÉCONOMIE NUMÉRIQUELigne d’État : tiers égaux bleu, jaune, rouge. 53 px minimum à l’écran.
Liseré tricolore : haut de la barre latérale et du pied de page.
Marqueur de titre : carré bleu et trait tricolore (charte p. 26).
- Intitulé en capitales, Cooper Hewitt SemiBold, configurable (NEXT_PUBLIC_INTITULE_OFFICIEL).
- Jamais de sceau en couleur sur fond sombre, jamais de recoloration de l’intitulé.
- Zone de sécurité de 4X autour de la marque, X étant la largeur de la Ligne d’État.
- Sceau officiel extrait du PDF de la charte (vectoriel), version blanche dérivée par seuillage.
Couleurs
Les couleurs du drapeau servent la marque ; le bleu gouvernement porte l’interface. Le texte courant reste en anthracite ou en bleu gouvernement (contraste AA).
#0095c9 · Pantone 801 C
Ligne d’État, liseré, accents. Jamais en texte courant.
#fff24b · Pantone 803 C
Action phare uniquement, texte bleu gouvernement.
#db3832 · Pantone 485 C
Erreurs, actions destructrices, Ligne d’État.
Bleu gouvernement
#17418a · 7687 C
Couleur primaire : navigation, titres, boutons
Sur blanc : 9,7:1
Anthracite
#323230 · 447 C
Texte principal
Sur blanc : 12,9:1
Ardoise
#405d64 · 5477 C
Texte secondaire
Sur blanc : 7,1:1
Bleu nuit
#115780 · 7700 C
Variante foncée
Sur blanc : 7,8:1
Bleu clair
#0f89cb · 2925 C
Focus clavier, graphiques
Sur blanc : 3,9:1
Indigo
#3e4d9c · 7455 C
Statut « En revue », graphiques
Sur blanc : 7,7:1
Vert
#65b32e · 369 C
Succès en aplat
Sur blanc : 2,6:1
Vert canard
#1a806c · 568 C
Succès en texte
Sur blanc : 4,8:1
Orange
#ed7016 · 158 C
Avertissement en aplat
Sur blanc : 3,0:1
Bronze
#9f6e26 · 7558 C
Avertissement en texte
Sur blanc : 4,4:1
Brique
#d44816 · 173 C
Graphiques
Sur blanc : 4,4:1
Or
#bd9a00 · 871 C
Graphiques, distinctions
Sur blanc : 2,7:1
Prune
#9c0055 · 676 C
Graphiques
Sur blanc : 8,3:1
Argent
#afb8be · 877 C
Bordures, éléments désactivés
Sur blanc : —
Sable
#f9e3d5 · 7604 C
Fonds d’accent doux
Sur blanc : —
Typographie
Cooper Hewitt partout, auto-hébergée (SIL OFL). Book pour le texte, Medium pour les libellés, SemiBold pour les titres. Chiffres tabulaires dans les colonnes.
Titre de page
Recensement des besoins
Titre de section
Avancement des déclarations
Titre de carte
Structures sans déclaration
Texte courant
Chaque structure publique décrit et chiffre ses besoins pour la campagne ouverte.
Texte secondaire
Mis à jour il y a 3 jours par Patrick Ilunga
Surtitre
Pilotage · Collecte 2027
Chiffres
1 250 000 CDF · 4 223 700 000 CDF · 2 850
Boutons
Le jaune est réservé à l’action la plus importante d’une vue (le bouton « Forum » des gabarits). Le bleu gouvernement porte les actions principales.
Champs
Libellé au-dessus, aide en dessous, erreur explicite reliée au champ. Le focus clavier est toujours visible.
Un titre court et explicite.
Adresse email invalide
Badges et statuts
Un statut associe toujours une icône et un libellé à sa couleur : l’information n’est jamais portée par la couleur seule.
Cartes et indicateurs
Cartes à coins arrondis de 14 px, bordure fine et ombre très douce. Les indicateurs se lisent d’un coup d’œil.
Structures ayant répondu
20 / 27
Coût total estimé
70,5 Md CDF
≈ 24,7 M USD
Titre de carte
Description courte de son contenu
Tableau
Densité maîtrisée : en-têtes en petites capitales, montants alignés à droite en chiffres tabulaires, survol discret.
Graphiques
Une seule teinte (bleu gouvernement) pour les classements ; une rampe séquentielle du même bleu pour la matrice ; une palette catégorielle issue des complémentaires, dans un ordre validé pour le daltonisme.
Barres classées
Barre segmentée (statuts)
Palette catégorielle (ordre validé)
Rampe séquentielle (matrice)
États et notifications
États vides illustrés, squelettes de chargement, erreurs explicites, notifications discrètes.
Aucun besoin déclaré
Un titre suffit pour créer un brouillon.
Chargement impossible
Les données n’ont pas pu être chargées. Vérifiez votre connexion puis réessayez.
Mouvement : transitions de 150 à 200 ms, aucune animation décorative ; les animations sont coupées si le système le demande.