Composants
Une page par composant : quand l'utiliser, le balisage à copier, les variantes et états, l'accessibilité, l'équivalent Vuetify. Les exemples sont rendus avec les vrais fichiers du dépôt.
Fondations
CouleursEmplacements métier, surfaces, encre, états. Jamais un hexadécimal dans un écran.TypographieRoboto pour tout, Paytone One pour le mot-symbole, Roboto Mono pour les codes. Styles nommés, jamais une taille en dur.Espacements, formes et ombresUne échelle de 4 px, trois rayons, trois ombres, et les deux utilitaires de mise en page hb-row et hb-stack.Modes : métier, thème, densitéTrois attributs sur <html>, posés par Hublot.setMode, suffisent à rebrancher tout le système.Plateformes : poste, tablette, iPhone, iPadLe même balisage partout ; ce qui change d'un appareil à l'autre est réglé par la densité, le pointeur et les zones de sécurité, pas par des écrans à part.nouveauIcônesMaterial Icons en ligatures, taille --icon, gris encre au repos et couleur métier à l'action.MouvementUne réponse à chaque action, rien qui bouge seul hors chargement : un ressort pour ce qui confirme, une sortie rapide pour ce qui change d'état, un balayage pour ce qui charge.AccessibilitéContrastes vérifiés au build, focus visible partout, cibles de 44 px, texte pour lecteur d'écran et lien d'évitement.
Boutons et actions
BoutonUn seul bouton principal par écran ; le neutre porte un filet ; le destructif reste en contour.Bouton à icôneCarré, neutre au repos, couleur métier au survol ; le danger ne rougit qu'au survol. Toujours une infobulle et un aria-label.Barre d'actionsAnnuler à gauche, l'action principale à droite, l'espace entre les deux : la règle est dans le CSS, sans spacer à poser.Contrôle segmentéUn choix exclusif parmi deux à cinq options visibles d'un coup : Jour / Semaine / Mois, Liste / Grille.nouveauBarre d'outils et menu ⋮Les actions d'une fiche en boutons à icône alignés, un séparateur avant le destructif, le secondaire dans un menu ⋮.
Formulaires
Champ de saisieFilet visible au repos, plus foncé au survol, couleur métier au focus ; libellé au-dessus, aide ou erreur dessous.Case à cocherCarré de 22 px, filet de 2 px, couleur métier cochée ; 28 px en densité touch. Le libellé fait partie de la cible.Bouton radio et interrupteurMême filet et même couleur métier que la case ; le radio pour un choix exclusif, l'interrupteur pour un réglage immédiat.nouveauSélecteur de quantité« − champ + » pour un nombre entier petit (colis, pièces) ; le champ reste saisissable.nouveauSélecteur d'heureLes roues de l'iPhone : heures et minutes en boucle, cylindre, bande centrale, arrêt net sur une valeur ; la pastille d'heure qui les ouvre dans une bulle.nouveauCurseurUn input range habillé : piste fine, poignée métier, 28 px en touch, la valeur lisible à côté.nouveauTexte éditable en placeUn titre ou une description qui se lit comme du texte et se reconnaît comme un champ : filet pointillé, crayon dans le champ, couleur métier au focus.FormulaireGrille à deux colonnes, une seule sur téléphone, groupes avec légende, marque « requis », barre d'actions en pied.nouveauZone de dépôt de fichierPointillé, icône métier, texte ; couleur métier quand un fichier la survole ; l'input file caché dedans.nouveauFiltresEn tête d'une carte ou d'un tableau : recherche, sélecteurs, puces à bascule, sur une ligne qui passe à la ligne.
Données
TableauEn-tête en retrait, lignes séparées par un filet, survol teinté, nombres à droite ; tri, sélection, totaux et en-tête collant en option.Tuile de chiffre cléUn libellé, un grand nombre, une variation, une courbe en option ; filet accent en haut ; en grille auto.Clé / valeur et codeListe de définitions à deux colonnes pour les propriétés d'une fiche, bloc de code pour un identifiant long, une requête, une trace.Badge d'étatUn point et un mot sur fond doux : succès, avertissement, erreur, info, ardoise. L'état se lit, il ne se devine pas à la couleur.PuceAvatar et nom en rond (personne, fournisseur), « +N » pour la suite, et la puce à bascule qui sert de filtre.AvatarInitiales sur ardoise ou couleur de l'employé, trois tailles, empilés avec « +N » et un « + » pointillé pour assigner.Point d'état et pastilleUn point de 8 px à côté d'un nom ou dans un onglet, une pastille de compte sur un bouton à icône.nouveauPrix et poidsUne valeur et son unité sur la même ligne de base, chiffres tabulaires, trois tailles ; barré, atténué, hausse ou baisse.nouveauGraphiquesCinq couleurs de série dans l'ordre, une grille discrète, les tokens lus au rendu pour suivre le thème et le métier ; ECharts dans magasin et crm-front.
Listes et contenu
Liste de tâchesUne carte, une ligne par entrée sur une grille fixe : poignée, case, texte éditable, date, personnes, actions. Le survol révèle, le clic édite.Glisser-déposerRéordonner une liste par sa poignée : la ligne se soulève, l'emplacement d'arrivée se dessine en pointillé, les autres s'écartent. Toujours une autre façon de déplacer, sans glisser.nouveauListe simpleIcône, libellé et sous-texte, valeur ou badge ou chevron à droite ; pour les réglages, les menus de tablette, les résultats de recherche.nouveauAccordéon et séparateurUn <details> avec chevron et contenu en retrait ; un seul ou plusieurs à la suite. Le séparateur porte un mot au milieu ou rien.nouveauChronologieHeure à gauche, point sur un trait, texte à droite ; le point prend la couleur de l'état. Historique d'une fiche, journal de synchro.nouveauTâche compacte (tablette)Une ligne de 48 px avec case, titre, heure et champ : la liste de tâches réduite pour le rayon.État videDans une liste, une ligne squelette qui garde la forme ; sur une page, un bloc centré pointillé avec une action.ArborescenceDes <details> imbriqués : rayons, familles, produits ; chaque niveau décale de 20 px, une feuille se sélectionne.nouveau
Navigation
Navigation latéraleBarre sombre à la couleur métier, sections en capitales, entrée active en couleur d'accent avec barre ; version rail à icônes.OngletsFilet sous la rangée, l'actif en couleur métier avec barre de 3 px, compte en pastille, « + » pointillé en bout pour créer.Fil d'ArianeAu-dessus du titre de page, du général au particulier, la page courante sans lien.nouveauPaginationLe compte « 26–50 sur 312 » à gauche, les pages à droite, la courante en couleur métier, les flèches en boutons à icône.nouveauÉtapesÉtapes numérotées d'un parcours en plusieurs écrans : faites en couleur métier avec une coche, courante cerclée, suivantes grisées.nouveauPage et en-têteGouttières de page, titre en couleur métier avec sous-titre, actions à droite ; bandeau teinté pour la tête d'une fiche.Barre de navigation basseTrois à cinq entrées en bas d'un écran tactile, icône au-dessus du libellé, l'active en couleur métier avec barre.nouveau
Retours et chargement
AlerteUn message local à une carte ou un formulaire : bord gauche coloré, icône, titre en gras, texte, une action en bout.Bannière de pageUn message qui concerne toute la page, sous la barre du haut : hors ligne, version à mettre à jour, période de clôture ; fermable.nouveauToastConfirmation après une action, en bas au centre, sur fond encre, une ligne, disparaît seul ; jamais une erreur bloquante.Progression et chargementBarre avec valeur ou indéterminée, anneau, bouton en cours, surcouche de chargement sur une carte.nouveauSqueletteLignes de texte, bloc, cercle, de la forme du contenu qui arrive ; un balayage lumineux pendant le chargement.nouveauInfobulleSous l'élément, fond encre, une ligne, au survol et au focus ; v-tooltip dans Vuetify, hb-tip ailleurs.nouveauDialogueTitre, corps, barre d'actions ; 480 px pour une confirmation, plein écran sur téléphone ; l'action destructive à droite, en rouge.Erreur de pageLa page n'a pas pu se charger : icône, titre, cause en une phrase, une action pour réessayer ou revenir, la trace repliée pour le support.nouveau
Surfaces
CarteBlanche, filet et ombre, posée sur la page grisée ; en-tête avec filet, corps, pied d'actions ; bandeau teinté ou zone en retrait.Panneau latéralUne fiche qui s'ouvre à droite sans quitter la liste : en-tête collant avec titre, sous-titre et badges, corps en sections, actions en pied.Barre de validationCollée en bas d'un écran de tablette ou d'un formulaire long : total ou résumé à gauche, actions à droite, au-dessus du contenu qui défile.nouveauBouton flottantL'action principale d'un écran tactile en bas à droite, rond ou étendu avec libellé ; un seul par écran.nouveau