HORIZON · Bons et mauvais usages
HHORIZON 02 · Design system

Bons et mauvais usages

Huit règles d'application qui protègent la cohérence et la conformité à la maquette. Chaque « mauvais » exemple ci-dessous serait refusé en revue (ou par la CI pour les couleurs).

1 · Couleurs : tokens uniquement
✓ BON
var(--hz-primary-900)
Toute couleur vient de tokens.css ; le lint refuse le reste.
✕ MAUVAIS
#7B3FF2 en dur
Couleur hors palette : rupture de marque, dérive impossible à maintenir.
2 · Un seul bouton primaire par zone
✓ BON
Exporter PDFNouvelle simulation
Hiérarchie claire : l'action d'engagement domine (maquette).
✕ MAUVAIS
Exporter PDFNouvelle simulation
Deux primaires : aucune action ne guide l'utilisateur.
3 · Statut = couleur + libellé
✓ BON
Validé
Lisible par tous, y compris sans perception des couleurs.
✕ MAUVAIS
Pastille seule : information portée par la seule couleur (RGAA).
4 · Formats français (RNF-24, RG-17)
✓ BON
5 000 € · 320 k€ · 0,60 % / an · 12/03/2026
Espace des milliers, virgule décimale, k€ au-delà de 100 000 €.
✕ MAUVAIS
5,000.00 EUR · 0.6% · 03/12/2026 (US)
Formats anglo-saxons : ambigus et non conformes.
5 · Arbitrage : tiret, jamais zéro
✓ BON
Arbitrage · − € · Planifié
Montant non applicable (RG-10) : le tiret dit « sans objet ».
✕ MAUVAIS
Arbitrage · 0 €
« 0 € » laisse croire à un flux nul réel et fausse les cumuls.
6 · Échelle du graphique stable
✓ BON
Borne haute = dizaine de k€ supérieure du maximum des trois scénarios : la bascule Prudent / Équilibré / Dynamique ne fait pas sauter l'échelle.
✕ MAUVAIS
Échelle recalculée par scénario : les courbes semblent identiques et la comparaison devient trompeuse.
7 · États vides orientés action
✓ BON
Aucune simulation active
Créez une simulation pour afficher la projection.
Nouvelle simulation
✕ MAUVAIS
« Aucune donnée. »
Constat sans issue : l'utilisateur ne sait pas quoi faire.
8 · Mention réglementaire (RG-16)
✓ BON
« Simulation non contractuelle : valeurs projetées à titre indicatif, hors fiscalité. »
Présente sur tout écran de projection et toute page du rapport PDF.
✕ MAUVAIS
Projection présentée comme une promesse de rendement, sans mention : risque réglementaire direct.