import { Meta } from "@storybook/blocks";
import '../styles/shared.css';

<Meta title="Design Tokens/Espacements" />



<div className="header">
  <h1>Les espacements</h1>
  <p>Les espacements disponibles dans notre Design System.</p>
</div>

Le design système de la CNAM est basé sur des multiples de 4 pour définir la taille des éléments, placer des espacements et disposer des composants.<br/>
Ce système d’espacement permet de garantir une homogénéité, cohérence et consistance des interfaces conçues. Cela dans le but d'améliorer l’UX et de faciliter la conception et le développement.

Chaque partie de l'interface utilisateur doit être intentionnellement conçue, y compris l'espace vide entre les éléments. Les espacements permettent de :

- <b>Créer des relations</b>
Utilisez des espacements faibles entre plusieurs composants pour signaler qu’ils sont liés, ou font partie d’un même groupe (exemple : champs de formulaire) ;
Utilisez des espacements importants pour mettre en évidence un élément indépendant du reste de la page (exemple : call to action).

- <b>Créer des hiérarchies</b>
Augmentez les espacements autour d’un composant clé de votre page permet d’améliorer sa visibilité.

## Les espacements verticaux
<br />
<img alt="Les espacements verticaux" src={'/espacements-verticaux.jpg'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />

## Les espacements horizontaux
<br />
<img alt="Les espacements horizontaux" src={'/espacements-horizontaux.jpg'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />

## Mise en situation
<br />
<img alt="Mise en situation" src={'/espacements-situation.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />