Police principale : Segoe UI (Windows) · Inter (web) · fallback Arial, sans-serif.
Règles de Micro-Typographie
Interlignage (Line-height) : 1.5 pour le texte courant, 1.2 pour les titres.
Espacement (Letter-spacing) : -0.01em pour les titres, +0.05em pour les labels en majuscules.
Contraste : Utiliser `var(--dark)` pour le texte important, `var(--gray)` pour le texte secondaire.
Hiérarchie Digitale
Utiliser la taille pour l'importance et la graisse (Weight) pour la structure. Ne jamais utiliser l'italique pour l'emphase (préférer le gras ou la couleur).
Dashboard Title
1.4rem / 700
Nigeria — Ventes Pétrole Brut
Section Head
1.1rem / 700
Revenus des Industries Extractives
Chart Title
0.92rem / 700
Répartition par secteur · 2022
Chart Subtitle
0.73rem / 400
Millions USD déclarés à l'EITI par pays membre
KPI Value
1.8rem / 800
$94B
KPI Label
0.72rem / 600
REVENUS DÉCLARÉS (2022)
Axis / Label
0.78rem / 400
2018 · 2019 · 2020 · 2021 · 2022
Source note
0.65rem / 400
Source : EITI Open Data · eiti.org/open-data · 2024
3
Types de graphiques
Barres horizontales (Bar Chart)
Usage : classement, comparaison de catégories nominales · max 12 barres
Courbe temporelle (Line Chart)
Usage : évolution dans le temps, tendances · toujours axe X = temps
Donut / Pie Chart
Usage : proportions d'un tout · max 6 segments · toujours annoter le total au centre
Usage : part du total (max 5 segments) · toujours préférer au Pie chart
Nuage de points (Scatter)
Usage : corrélation entre 2 variables (ex: investissement vs production)
4
Composants UI Dashboard
KPI Cards
$94B
Revenus déclarés
▲ 12% vs 2021
25
Pays membres
● Stable
78%
Taux divulgation
▼ 3% alerte
2,400
Entreprises
▲ 145
Règles : Valeur en haut (grand, gras) · Label en bas (petit, majuscules, gris) · Bordure gauche colorée selon catégorie · Jamais plus de 4 KPIs par ligne.
Badges de statut
ConformeCandidatSuspendu
Grilles et espacements
Système d'espacement en multiples de 4px. Padding carte : 20px · Gap entre cartes : 20px · Padding page : 32px (desktop) / 16px (mobile).
5
Règles à respecter (Dos & Don'ts)
A faire
Toujours inclure un titre et une source
Utiliser les couleurs sémantiques (vert=positif, rouge=problème)
Respecter l'ordre de la palette pour les séries multiples
Aligner les axes Y à zéro pour les barres
Annoter les valeurs importantes directement sur le graphique
Fournir des tooltips riches au survol
Rendre le dashboard responsive (mobile + desktop)
Grilles légères en #eef2f7, jamais noires
A éviter
Plus de 6 couleurs dans un seul graphique
Pie chart avec plus de 6 segments
Axes Y qui ne commencent pas à zéro (sauf lignes)
3D sur les graphiques (trompeur visuellement)
Texte en blanc sur fond clair ou vice versa
Trop de décimales dans les labels ($18,523.4M → $18.5B)
Légendes sans association claire avec les séries
Tableaux sans alternance de couleur ou bordures trop lourdes
Accessibilité
Ratio de contraste minimum 4.5:1 (WCAG AA)
Ne jamais encoder uniquement par couleur (ajouter motif/forme)
Tooltips accessibles au clavier
Alt text sur les graphiques SVG/image
Performance
Eviter d'afficher plus de 1000 points sans agrégation
Pas d'animations sur les données temps réel
Limiter les appels API simultanés dans un dashboard
Toujours paginer les tableaux > 50 lignes
6
Modèles de Mise en Page (Layout Patterns)
Choisir le modèle de mise en page en fonction de l'objectif principal de l'utilisateur.
1. Modèle Exécutif (Overview)
Focus sur la performance globale. Idéal pour les décideurs ITIE.
4 KPIs max en haut
Graphique principal à gauche
Répartition (Donut) à droite
2. Modèle Analytique (Deep Dive)
Comparaison de plusieurs dimensions et séries temporelles.
Barre latérale pour filtres complexes
Grande zone centrale pour le temps
Comparaison côte à côte en bas
3. Modèle Géo-Spatial
Priorité à la localisation des gisements et projets extractifs.
Carte en plein écran ou large
Widgets flottants pour métriques
Barre de temps en bas
4. Modèle Reporting (Tableau)
Exploration de données brutes et listes d'entreprises.
Recherche globale en haut
Pagination visible
Actions (Export) accessibles
Exemple d'assemblage complet
7
Ombres & Élévation
Utilisation des ombres pour créer une hiérarchie visuelle et de la profondeur.
Niveau 0
border: 1px solid #eef2f7
Niveau 1
box-shadow: 2px 10px
Niveau 2
box-shadow: 8px 20px
Niveau 3
box-shadow: 16px 40px
Règles : Utiliser le Niveau 0/1 pour les cartes standards, le Niveau 2 pour les survols (hover) et le Niveau 3 pour les éléments flottants (modales, dropdowns).
8
Elements UI & Filtres
Boutons
Champs de saisie & Filtres
Comparer avec l'année précédente
Afficher les entités suspendues
9
Iconographie
Sélection d'icônes recommandées pour les thématiques liées aux industries extractives et à la transparence.
shield-check
alert-circle
resource
filters
map-pin
government
finance
disclosure
society
timeline
Note : Utiliser des icônes de type Lucide ou Feather pour leur sobriété. Epaisseur de trait constante (1.5px ou 2px).
10
Directives pour les tableaux
Les tableaux doivent rester sobres et privilégier la lisibilité des données chiffrées.
Pays
Secteur
Année
Montant (M$)
Statut
Nigeria
Pétrole & Gaz
2022
$18,450.0
Conforme
Norvège
Pétrole
2022
$12,100.2
Conforme
Ghana
Minier (Or)
2022
$3,520.5
Candidat
Iraq
Pétrole
2021
$15,890.0
Suspendu
Règles : Aligner les textes à gauche · Aligner les nombres à droite · Utiliser une police monospace ou tabulaire pour les chiffres · Alterner les couleurs au survol (hover).
11
Règles de Formatage & Cartographie
Formatage des grands nombres
Toujours simplifier pour la lecture rapide (Dashboard vs Rapport).
18,542,300,000 $18.5 B$
942,800 $942.8 K$
0.782478.2 %
Cartographie (Choroplèthe)
Utiliser une échelle séquentielle pour les volumes.
Min (0)Max (100+)
12
Interactions & Tooltips
Tooltip Standard
Nigeria2022
Secteur:PétroleRevenus:$18.5BVar. %:+12.4%
États de chargement (Skeletons)
13
Grilles & Layout Patterns
Utiliser une grille de 12 colonnes pour assurer l'alignement et la modularité.