Bibliothèque UI
Fondations visuelles, composants et états prêts à réutiliser.
Scanner les fondations, puis les usages d’écran les plus utiles.
Fondations
Une base visuelle simple, stable et immédiatement lisible.
Fond, surfaces et accent principal.
Une échelle conçue pour le scan rapide.
Eyebrow
Le texte courant reste volontairement compact pour préserver la densité et la lisibilité.
Quelques règles simples pour garder un rendu stable.
Actions et saisie
Actions, champs et sélecteurs partagent les mêmes conventions de taille et de densité.
Actions
Variantes principales, tailles et chargement.
Saisie
Des champs lisibles, homogènes et sans variantes inutiles.
Exemple de champ texte standard.
Liste déroulante typée.
Champ multi-ligne avec limite visible.
Statuts et feedback
Badges, loaders et messages signalent un état sans casser la lecture.
Statuts
Une échelle simple pour l’état et la criticité.
La logique sémantique reste identique entre vitrine et backlog.
Chargement
Une attente visible, discrète et adaptée au contexte.
Les trois tailles restent lisibles selon la densité de l’écran.
Composition d’écran
Les composants de structure composent une page complète sans casser la hiérarchie du système.
Structure
Un en-tête réutilisable, puis des cartes plus compactes pour le détail.
Exemple d’en-tête pour une page métier ou un onglet fonctionnel.
Une carte secondaire pour détailler métriques ou sous-sections.
États
Des composants pour l’absence de données et les confirmations courtes.
Données
Un état vide qui oriente immédiatement vers l’action utile.