Dimensionnement
Jetons de dimension fixes et reactifs pour les icones, controles et conteneurs.
Tailles de composant
Chaque contrôle interactif utilise l’une des trois tailles. La base de 4 px et le pas de 8 px maintiennent un rythme vertical cohérent.
Référence visuelle
Chaque carte affiche un bouton simulé à la hauteur, au remplissage, à la taille de police et à la taille d’icône réels.
sm · 44px
- height
- 44px
- padding-x
- 12px
- font
- 13.5px
- icon
- 14px
md · 44px
- height
- 44px
- padding-x
- 16px
- font
- 14.5px
- icon
- 16px
lg · 48px
- height
- 48px
- padding-x
- 20px
- font
- 16px
- icon
- 20px
La taille de l’icône suit celle du texte. N’utilisez jamais une icône plus grande que le texte associé.
Tailles tactiles minimales
Les éléments interactifs doivent mesurer au moins 44x44 pixels CSS (WCAG 2.5.5 / Apple HIG) ou 48x48 dp (Material Design). Imposer avec min-h-[var(--ep-tap-min)] sur chaque contrôle personnalisé.
Règle de dimensionnement des icônes
La taille de l’icône suit celle du texte. N’utilisez jamais une icône plus grande que le texte associé — elle dominerait et paraîtrait déséquilibrée.
Source : sizing.html d’origine (table des dimensions) + recommandation interne zones tactiles.
Besoin d’un blanc de mise en page plutôt que de dimensions ? Consultez la fondation Espacement pour l’échelle numérique (ep-1 → ep-24).