HZ-SFD-002 §2 · calé sur la maquette « Simulateur épargne »

Design system HORIZON

Le système de conception couvre l'intégralité de l'écran de référence avec 12 composants Hz* et une source unique de vérité visuelle : assets/tokens.css, consommée telle quelle par ce chapitre, le prototype et la présentation. Aucune couleur en dur n'est autorisée dans les composants (contrôle en revue et par lint, D-03).

Tokens

Couleurs, typographie, espacements, rayons, ombres, grille.

BoutonValidé

Composants

Les 12 Hz* avec tous leurs états : repos, survol, focus, actif, désactivé, erreur, chargement.

AA 4,5:1

Iconographie & accessibilité

Jeu d'icônes, RGAA 4 niveau AA, contrastes vérifiés en direct, clavier.

✓ Bon✕ Mauvais

Bons et mauvais usages

Règles d'application : couleurs, hiérarchie des actions, badges, formats français.

Les 12 composants

HzSidebar HzTopbar HzBadge HzKpiCard HzTabs HzButton HzChartProjection HzScenarioSwitch HzDonutAllocation HzTable HzProgress HzPagination

Principes

La maquette prime (C-02) : tout écart se consigne en proposition, jamais en interprétation silencieuse.
Tokens uniquement : toute couleur littérale hors tokens.css est refusée par la CI.
États complets : chaque composant est livré avec repos, survol, focus, actif, désactivé, erreur et chargement quand ils s'appliquent.
Accessibilité intégrée : contrastes AA vérifiés automatiquement, navigation clavier, libellés textuels doublant toute couleur.
Formats français (RNF-24) : espace des milliers, virgule décimale, « € », dates JJ/MM/AAAA.