Grilles
& fondations.

Le pas de base est 4 px. Les espacements s’expriment à travers une échelle courte plutôt qu’au cas par cas. Le choix se fait d’après la relation entre les éléments : proches s’ils appartiennent à la même action, plus éloignés s’ils ouvrent un autre sujet.

• 4–8 px : relation icône/libellé, détail interne ou petit indicateur.
• 12–16 px : commandes d’un groupe, séparation de champs liés.
• 20–32 px : contenu interne d’un panneau et séparation de blocs.
• 40–64 px : section, composition de page ou séparation forte.
• 80–128 px : respiration éditoriale sur grand écran, jamais une marge mobile imposée.

La grille est un outil d’alignement, pas une raison de conserver douze colonnes sur téléphone. Le conteneur reste fluide, avec une largeur de lecture plus étroite pour les textes longs.

• Largeur maximale de contenu éditorial : environ 1280 px. Une application dense peut définir un autre maximum documenté.
• Ne pas déduire la structure d’une page à partir du seul nom de l’appareil ; utiliser l’espace disponible.
• La navigation mobile fixe occupe toute la largeur sûre de l’écran et réserve son espace dans le contenu.

Les coins traduisent le rôle de l’objet. Le rayon 16 px convient aux composants, 24 px aux surfaces plus grandes. La pastille n’est pas la forme universelle d’orbit : elle sert aux sélections courtes et aux commandes compactes.

Une surface ne devient pas plus importante parce qu’elle reçoit une ombre. Les panneaux d’une même profondeur partagent le même traitement. Le sombre privilégie un changement de fond et un filet plutôt qu’une ombre noire invisible.

• Niveau 0 : fond de page. Niveau 1 : surface de contenu. Niveau 2 : panneau temporaire ou menu. Niveau 3 : dialogue modal.
• Bordure décorative : 1 px, border. Limite de contrôle : border-strong si elle est nécessaire à sa reconnaissance.
• Une seule ombre principale par objet. Éviter de cumuler ombre, halo et bordure lumineuse.
• Le flou de fond est facultatif et limité aux surfaces temporaires ; prévoir un fond opaque de secours.
• Les indices de superposition sont centralisés : barre 20, menu 40, voile 60, dialogue 80, notification 100.

Les règles ci-dessous corrigent les défauts les plus coûteux : commandes collées, textes coupés, navigation qui déborde et outils qui masquent le contenu.

• Donner min-width: 0 aux cellules flexibles et autoriser la coupure des URL longues.
• Ne pas fixer la hauteur d’une carte qui contient du texte traduit ou une erreur de formulaire.
• Prévoir au moins 8 px entre deux zones tactiles indépendantes ; agrandir la zone cible avant de réduire l’icône.
• Utiliser les zones sûres de l’appareil pour les barres fixes et ajouter une réserve de contenu équivalente.
• Sur petit écran, une table peut défiler dans son propre conteneur ; le document entier ne doit pas défiler horizontalement.
• Tester à 320 px, à 390 px, au zoom 200 % et avec des libellés longs.

/* Contenu flexible et navigation mobile */
.item { min-width: 0; overflow-wrap: anywhere; }
.mobile-nav {
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}
.page { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

Les icônes d’interface utilisent une grille de 24 × 24 unités, un trait de 1,7 unité, des extrémités arrondies et la couleur du rôle courant. Elles restent distinctes des logos produits.

• Conserver une taille visuelle de 20 à 24 px dans une cible de 44 px minimum.
• Préférer une caméra explicite pour la capture ; ne pas faire dépendre la compréhension d’un pictogramme décoratif.
• Un bouton sans texte reçoit un nom accessible précis. Une icône décorative est ignorée par les technologies d’assistance.
• Éviter de mélanger plusieurs familles, emojis et pictogrammes de police dans une même navigation.
• Le kit fournit 17 icônes SVG génériques sous MIT. Les favicons ayael restent des éléments d’identité.

La densité est une décision liée à la tâche. Le mode Confort reste le défaut. Le mode Compact peut servir un tableau de travail, à condition de préserver la lecture, les zones cliquables et les états de focus.