UI - Tableau de bord client

Ce document définit les spécifications UI pour un tableau de bord institutionnel, clair et rassurant. Palette de couleurs : à définir (voir section Couleurs).

Intentions

• Institutionnel, sobre, lisible.
• Actions évidentes, feedback discret.
• Confort de lecture par l'espace blanc.

Grille et mise en page

• Conteneur max : 1200-1280 px, marges latérales 24-32 px.
• Double en-tête : barre utilitaire + navigation principale à icônes.
• Zone d'accueil : fil d'Ariane, titre, infos client.
• Grille de cartes régulière (2-3 colonnes), gouttières 24 px.
• Rythme vertical base 8 px.

Typographie

• Sans-serif neutre et moderne.
• Titres : 28-32 px, graisse 600.
• Intertitres : 16-18 px, graisse 600.
• Texte courant : 14-16 px, graisse 400-500.
• Labels courts, parfois en capitales.

Cartes

• Surface blanche, bordure 1 px neutre, rayon 8-12 px.
• Variante "info" : fond légèrement teinté.
• Icônes linéaires 1,5-2 px, alignées à gauche des titres.
• Actions en lien avec chevron/flèche à droite.

Navigation et bouton principal

• Items de navigation : icône + libellé, état actif souligné.
• Bouton principal en version pleine dans l'en-tête.
• Bouton d'aide flottant en bas à droite.

Motion

• Survol cartes : ombre douce + bordure accent + flèche qui avance de 2-4 px.
• Transitions 150-200 ms, easing "ease-out".

Accessibilité

• Contraste texte >= 4,5 : 1.
• Focus visible, navigation clavier complète.

Couleurs et palettes proposées

• Déclinaison de tons : 50 / 100 / 200 / 300 / 400 / 500 / 700 / 900.

• États communs : succès #2e7d32, avertissement #e09500, erreur #d64545.

• Série 1 (primaire #106ebe).

• Palette A — Ardoise cyan : Accent #00a6d6, Neutres #5b6775. Aperçu : thème A.

• Palette B — Sable ambre : Accent #f4a12e, Neutres #6a5f56. Aperçu : thème B.

• Palette C — Brume sarcelle : Accent #2a9d8f, Neutres #556b66. Aperçu : thème C.

• Palette D — Quartz violet : Accent #6b4eff, Neutres #535c6b. Aperçu : thème D.

• Palette E — Graphite lime : Accent #8ac926, Neutres #4f5b62. Aperçu : thème E.

• Série 2 (primaire #2cd4de).

• Palette AA — Lagune corail : Accent #ff6b6b, Neutres #586070. Aperçu : thème AA.

• Palette BB — Lagune ambre : Accent #ffb703, Neutres #6b6258. Aperçu : thème BB.

• Palette CC — Lagune indigo : Accent #7b61ff, Neutres #525b6b. Aperçu : thème CC.

• Palette DD — Lagune émeraude : Accent #43aa8b, Neutres #4f615e. Aperçu : thème DD.

• Palette EE — Lagune framboise : Accent #f72585, Neutres #595060. Aperçu : thème EE.

Implémentation

Historique des décisions