Nous utilisons des multiples de 8px pour définir les marges et le padding, ce système d'espacement nous permet de garantir une homogénéité, une cohérence et une consistance.
Usages
L'espacement est un élément essentiel de la conception. Il peut être appliqué sur la grille et les layouts mais aussi utilisé sur la marge et le padding de nos composants.
Comme notre grille, le système d'espacement utilise la grille de 8 pixels. Si nous utilisons par défaut la grille de 8 pixels pour le système d'espacement, certains éléments (comme les icônes ou les petits composants) peuvent utiliser un espacement de 4px.
Un espacement cohérent crée un équilibre visuel qui rend l'interface utilisateur plus facile à lire. Appliquez un espacement cohérent pour améliorer la qualité de l'interface utilisateur.
Les espaces vides sont vos amis
Utilisez les espacements pour créer une hiérarchie et des relations entre les éléments. Pour créer une mise en page efficace, nous prenons en compte deux types d'espacement : horizontaux et verticaux.
- Les horizontaux sont principalement basés sur les systèmes de grille et les espacements entre les éléments
- L'espacement vertical est basé sur certaines règles et sur l'espacement minimal entre les composants.
Chaque élément d'un composant est construit en suivant ces grilles.
Sections
Les sections possèdent un padding unique permettant de créer de la respiration entre chaque partie.
Desktop
Mobile
Typographie
Chaque style de texte possède une marge bien précise qui permet d’appuyer la hiérarchie et d’apporter une aération aux textes en général.