Espacement

L'echelle d'espacement de 4 pt et les jetons d'espace semantiques.

Échelle

ep-10.25rem · 4px

ep-20.5rem · 8px

ep-30.75rem · 12px

ep-41rem · 16px

ep-51.25rem · 20px

ep-61.5rem · 24px

ep-82rem · 32px

ep-102.5rem · 40px

ep-123rem · 48px

ep-164rem · 64px

ep-205rem · 80px

ep-246rem · 96px

Alias sémantiques

Les alias nommés référencent l'échelle numérique — privilégiez-les dans le code des composants : c'est l'intention (et non le palier brut) qui se lit.

ep-xxsvar(--ep-space-1) · 4px

ep-xsvar(--ep-space-2) · 8px

ep-smvar(--ep-space-3) · 12px

ep-mdvar(--ep-space-4) · 16px

ep-lgvar(--ep-space-6) · 24px

ep-xlvar(--ep-space-8) · 32px

ep-xxlvar(--ep-space-12) · 48px

ep-3xlvar(--ep-space-16) · 64px

ep-4xlvar(--ep-space-24) · 96px

Utilisation

Tout l espacement utilise les classes Tailwind avec le prefixe ep-:

Brut (norme actuelle)

mt-4 → 16px marge supérieure (brut, recommandé)

px-6 → 24px remplissage-x (brut, recommandé)

gap-2 → 8px espacement flex/grid (brut, recommandé)

p-3 → 12px remplissage total (brut, recommandé)

Préfixe ep- (sémantique design-system)

mt-ep-4 → 16px marge supérieure (variante préfixe ep-)

px-ep-6 → 24px remplissage-x (variante préfixe ep-)

gap-ep-2 → 8px espacement flex/grid (variante préfixe ep-)

p-ep-3 → 12px remplissage total (variante préfixe ep-)

Les classes Tailwind brutes sont la norme actuelle dans le code (ex. mt-4, px-6, gap-2). Le préfixe ep- est l’alternative sémantique du design-system (mt-ep-4, px-ep-6, gap-ep-2) — les deux fonctionnent, le brut domine.