BUG: UX — Audit et correction des anomalies graphiques des maquettes Penpot Heimdall #112

New issue

Closed

opened 2026-08-13 11:49:23 +02:00 by nonobis · 1 comment

nonobis commented

2026-08-13 11:49:23 +02:00

Owner

Contexte

Les maquettes Penpot du fichier « nonobis-design-system » (fileId 82e5dace-26fe-809c-8008-79b6f7a8b536) couvrent les 8 modules Heimdall (Dashboard, Sites et installation, Agents, Événements, Caméras, Snapshots et découvertes, Admin, Compte et connexion). L'utilisateur demande une passe d'audit graphique complète sur ces IHM : contrastes WCAG, cohérence des tokens, alignements, états manquants, hiérarchie, dark/light, usage des composants, conformité aux captures réelles (Login/Register/404/Error) et au code .razor.

État actuel

22 pages dans le fichier, dont 8 pages Heimdall (151 boards) + pages Charte et Composants.
Tokens Penpot : sets nonobis/dark (50) et nonobis/light (41) présents dans la bibliothèque du fichier.
Captures réelles Playwright : login.png, register.png, not-found.png, error.png (1440x900).
Code réel de référence : src/Heimdall.Web/Components/Pages/*.razor (21 pages).

À faire (checklist d'audit, profil the-designer)

CONTRASTES WCAG : texte ≥ 4.5:1, texte large ≥ 3:1, composants ≥ 3:1 — vérifier chaque couleur des boards Heimdall vs tokens charte, corriger les couleurs hors charte ou insuffisantes.
COHÉRENCE TOKENS : aucune couleur/typo/radius/ombre en dur dans les shapes — tout référencé aux tokens (couleurs sémantiques, échelle display/title/body/caption, espacements 4px, radius limité).
ALIGNEMENTS et CENTRAGE : boards alignés sur la même grille, contenu centré, espacements cohérents, pas d'éléments orphelins/hors board.
ÉTATS : chaque écran doit montrer loading (skeleton), empty (message + action), error (message actionnable), success (feedback) — combler les états manquants.
HIÉRARCHIE : un seul H1 par écran, échelle H1→H2→H3 cohérente, densité ≤ 3 niveaux visuels.
DARK/LIGHT : les deux thèmes respectent les tokens (pas de noir pur #000 / blanc pur #FFF).
COMPOSANTS : les écrans utilisent les composants de la page 2 — pas de doublons dessinés en dur.
CONFORMITÉ RÉELLE : comparer Login/Register/404/Error aux captures réelles ; écrans internes vérifiés contre le code .razor (libellés, champs, actions, tables, statuts).
UX WRITING : français, boutons = verbes d'action, pas de double négation, tutoiement/vouvoiement cohérent.
RESPONSIVE : variantes mobile/tablette si pertinent ; zones tactiles ≥ 44x44px sur mobile.

Critères d'acceptation

Chaque page Heimdall auditée : liste des anomalies trouvées et corrections appliquées (ou « rien à corriger »).
Contrastes vérifiés par calcul (check_contrasts.py ou calcul manuel) — aucun échec AA sur les usages vérifiés.
Aucune valeur en dur hors charte dans les shapes des pages Heimdall.
États 4/4 présents sur chaque écran (loading/empty/error/success).
Maquettes Login/Register/404/Error conformes aux captures réelles.
Corrections appliquées dans Penpot vérifiables via execute_code (positions, couleurs, composants).

Fichiers

Fichier Penpot : nonobis-design-system (fileId 82e5dace-26fe-809c-8008-79b6f7a8b536), pages « 3. Heimdall › * » (8), « 1. Charte », « 2. Composants » (portée limitée aux corrections Heimdall).
Captures : /home/hermes/workspace/design/heimdall-captures/
Specs : /home/hermes/workspace/design/nonobis-ds/DESIGN_SYSTEM.md
Code : src/Heimdall.Web/Components/Pages/*.razor
Script contrastes : /home/hermes/workspace/design/nonobis-ds/check_contrasts.py

## Contexte Les maquettes Penpot du fichier « nonobis-design-system » (fileId 82e5dace-26fe-809c-8008-79b6f7a8b536) couvrent les 8 modules Heimdall (Dashboard, Sites et installation, Agents, Événements, Caméras, Snapshots et découvertes, Admin, Compte et connexion). L'utilisateur demande une passe d'audit graphique complète sur ces IHM : contrastes WCAG, cohérence des tokens, alignements, états manquants, hiérarchie, dark/light, usage des composants, conformité aux captures réelles (Login/Register/404/Error) et au code .razor. ## État actuel - 22 pages dans le fichier, dont 8 pages Heimdall (151 boards) + pages Charte et Composants. - Tokens Penpot : sets nonobis/dark (50) et nonobis/light (41) présents dans la bibliothèque du fichier. - Captures réelles Playwright : login.png, register.png, not-found.png, error.png (1440x900). - Code réel de référence : src/Heimdall.Web/Components/Pages/*.razor (21 pages). ## À faire (checklist d'audit, profil the-designer) 1. CONTRASTES WCAG : texte ≥ 4.5:1, texte large ≥ 3:1, composants ≥ 3:1 — vérifier chaque couleur des boards Heimdall vs tokens charte, corriger les couleurs hors charte ou insuffisantes. 2. COHÉRENCE TOKENS : aucune couleur/typo/radius/ombre en dur dans les shapes — tout référencé aux tokens (couleurs sémantiques, échelle display/title/body/caption, espacements 4px, radius limité). 3. ALIGNEMENTS et CENTRAGE : boards alignés sur la même grille, contenu centré, espacements cohérents, pas d'éléments orphelins/hors board. 4. ÉTATS : chaque écran doit montrer loading (skeleton), empty (message + action), error (message actionnable), success (feedback) — combler les états manquants. 5. HIÉRARCHIE : un seul H1 par écran, échelle H1→H2→H3 cohérente, densité ≤ 3 niveaux visuels. 6. DARK/LIGHT : les deux thèmes respectent les tokens (pas de noir pur #000 / blanc pur #FFF). 7. COMPOSANTS : les écrans utilisent les composants de la page 2 — pas de doublons dessinés en dur. 8. CONFORMITÉ RÉELLE : comparer Login/Register/404/Error aux captures réelles ; écrans internes vérifiés contre le code .razor (libellés, champs, actions, tables, statuts). 9. UX WRITING : français, boutons = verbes d'action, pas de double négation, tutoiement/vouvoiement cohérent. 10. RESPONSIVE : variantes mobile/tablette si pertinent ; zones tactiles ≥ 44x44px sur mobile. ## Critères d'acceptation - [ ] Chaque page Heimdall auditée : liste des anomalies trouvées et corrections appliquées (ou « rien à corriger »). - [ ] Contrastes vérifiés par calcul (check_contrasts.py ou calcul manuel) — aucun échec AA sur les usages vérifiés. - [ ] Aucune valeur en dur hors charte dans les shapes des pages Heimdall. - [ ] États 4/4 présents sur chaque écran (loading/empty/error/success). - [ ] Maquettes Login/Register/404/Error conformes aux captures réelles. - [ ] Corrections appliquées dans Penpot vérifiables via execute_code (positions, couleurs, composants). ## Fichiers - Fichier Penpot : nonobis-design-system (fileId 82e5dace-26fe-809c-8008-79b6f7a8b536), pages « 3. Heimdall › * » (8), « 1. Charte », « 2. Composants » (portée limitée aux corrections Heimdall). - Captures : /home/hermes/workspace/design/heimdall-captures/ - Specs : /home/hermes/workspace/design/nonobis-ds/DESIGN_SYSTEM.md - Code : src/Heimdall.Web/Components/Pages/*.razor - Script contrastes : /home/hermes/workspace/design/nonobis-ds/check_contrasts.py

nonobis added the

labels

2026-08-13 11:49:23 +02:00

nonobis commented

2026-08-13 12:21:23 +02:00

Author

Owner

Clôture : audit et corrections appliqués dans Penpot — boards d'états (loading/empty/error/success) créés sur les 8 pages Heimdall, palette 100% charte (23 couleurs, aucune hors charte), contrastes AA vérifiés, alignements/centrage uniformisés. Vérifié indépendamment via MCP Penpot.

nonobis closed this issue

2026-08-13 12:21:23 +02:00

nonobis referenced this issue

2026-08-13 13:27:09 +02:00

BUG: UX — Recheck visuel des maquettes Penpot Heimdall vs app réelle (passe 2) #115