Le vocabulaire visuel et les briques réutilisables. Palette navy doux + moutarde + gris
(sobre & chaleureux). Tout passe par un seul fichier de tokens — changer une valeur met tout à jour.
Couleurs (par rôle)
primary
secondary
success
warning
danger
info
background
surface-alt
border
text-strong
text-muted
Boutons
Un seul composant Button, décliné par variantes/tailles/états — jamais dupliqué.
Boutons icône (IconButton)
Le « bouton icône » réutilisable : barre d'outils du tableau, actions visio, header… Toujours un libellé accessible (title/aria).
Action destructive (« Supprimer »)
dans une liste / un tableau (répété par ligne)
sur un écran de détail ou dans la confirmation
Même icône, même mot, couleur danger, et toujours une confirmation avant l'action. La forme change selon le contexte, jamais la règle.
Champs de formulaire
Prénom et initiale suffisent.
Adresse email invalide.
Notifications (Toast) & Alertes
Enregistré
Le tableau a été sauvegardé.
Échec
La connexion a été perdue.
Un même style de toast partout — seule la couleur change (variante).
Badges / statuts
ActifEn pauseArchivéNiveau B1Paiement en attente
Carte + Table + Avatar
Mes élèves
Nom
Niveau
Statut
Prochain cours
MD
Marie D.
B1
Actif
Auj. 14h30
KB
Karim B.
A2
Actif
Demain 18h
SL
Sophie L.
B2
En pause
—
Icônes source unique
Référencées par nom depuis icons.svg. Changer un dessin là = mise à jour partout. Couleur héritée du contexte (ex. ).
Cases, radios, interrupteur
Onglets (Tabs)
Menu (Dropdown)
Modifier
Voir la fiche
Supprimer
Pagination
123
Fenêtre (Modal) — ex. confirmation de suppression
Supprimer Marie D. ?
Cette action est irréversible. Son historique sera archivé, pas supprimé.