Composants
Chaque composant dans tous ses états. Basculer le thème en haut à droite vérifie qu'aucun d'eux ne code une couleur en dur.
Boutons
Quatre intentions, trois tailles. L'enfoncement au doigt est le seul retour disponible sans survol.
Commandes à icône
Le libellé est obligatoire : sans lui la commande est muette pour un lecteur d'écran.
Badges et puces
Le badge informe et n'est pas cliquable ; la puce filtre et respecte donc la cible tactile.
Identités
À défaut de photo, les initiales : plus reconnaissables dans une liste dense qu'une silhouette répétée.
Champs de formulaire
La taille de police des champs est forcée à 16 pixels sur mobile : en deçà, iOS zoome à la mise au point.
Adresse ou nom de la salle.
Cette adresse est déjà utilisée.
Listes
La brique dominante d'un système mobile. La ligne entière est la cible tactile dès qu'elle mène quelque part.
-
Camille Roy camille@example.org
-
Rendez-vous dentiste Jeudi 14 h 30
-
Acheter du pain
-
Sans lien, non cliquable Pas de chevron ni d'état actif
Onglets
Cartes
Corps de la carte, avec une bordure discrète.
Variante en relief : ombre au lieu de bordure.
État vide
Un écran vide explique quoi faire ; il ne se contente pas de constater l'absence.
Aucune note pour l'instant
Les notes sont enregistrées en Markdown avec un en-tête YAML, lisibles par n'importe quel éditeur.
Panneaux et notifications
Le panneau monte du bas sur mobile et devient une boîte de dialogue centrée au-delà de 48rem. Il se ferme au glissement, à l'échappement ou au voile.
Le contenu reste dans le DOM clair : il garde la feuille de style globale et peut être remplacé par HTMX.