Forme DS

Fondations

Espacement & rayons

Les rayons d'arrondi viennent des tokens --radius-*. Chaque token porte une intention (inner, element, container, page) : tu choisis le rayon par rôle de l'élément, pas par valeur en pixels. Ça garantit que tous les boutons de toutes les apps Forme partagent le même arrondi.

Rayons --radius-*

--radius-none 0
--radius-inner .375rem · 6px
--radius-element .625rem · 10px
--radius-container .75rem · 12px
--radius-page 1.75rem · 28px
--radius-full 9999px

Doctrine d'usage

Le rayon suit l'échelle d'imbrication de l'élément :

  • --radius-inner — le plus petit niveau : puce de badge, zone interne d'un input, chip.
  • --radius-element — les contrôles autonomes : boutons, champs, selects.
  • --radius-container — les regroupements : cartes, modales, menus, popovers.
  • --radius-page — les grands conteneurs : panneaux, feuilles, blocs pleine largeur.

Règle de composition : un élément imbriqué a un rayon égal ou plus petit que son parent. Un bouton (element) dans une carte (container) reste visuellement cohérent ; jamais un rayon d'enfant plus grand que le conteneur.

Espacement. Les marges et paddings suivent des multiples cohérents (pas de valeurs au hasard). On empile des pas réguliers plutôt que des nombres isolés, pour que le rythme vertical reste identique d'une app à l'autre. Comme pour la typo : on ne sort pas de l'échelle.

✓ À faire

Choisir le rayon par rôle : var(--radius-element) sur un bouton, var(--radius-container) sur une carte.

✕ À éviter

Coder border-radius: 8px en dur, ou donner à un enfant un rayon plus grand que son conteneur.