Fondations

Espacement & rayons

Une seule échelle de rayons pour toute la marque : 4 / 8 / 12 px, dans les apps comme sur forme.ch, dans les présentations et les rapports. 9999 est réservé aux cercles et aux pastilles. Dans les apps, les tokens --radius-* portent une intention (inner, element, container) : tu choisis le rayon par rôle de l'élément, pas par valeur en pixels. Hors apps, le socle expose les mêmes valeurs en --forme-radius-*.

Rayons `--radius-*`

--radius-none 0 Angles vifs, séparateurs, jonctions.

--radius-inner .25rem · 4px Petits éléments : badge d'interface, inner d'input. Pas les pastilles de marque (full). --forme-radius-sm

--radius-element .5rem · 8px Boutons, champs, étiquettes à filet. --forme-radius-md

--radius-container .75rem · 12px Cartes, encadrés, modales, popovers, images cadrées. --forme-radius-lg

--radius-full 9999px Cercles (avatar, point) et pastilles de marque uniquement. --forme-radius-full

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-full — cercles et pastilles uniquement (avatar, point, pastille de phase).

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.

Pastille ≠ badge. La pastille de marque (phase Forme®Process, couleur pleine, texte blanc) est une capsule : --radius-full. Le Badge des applications (fond teinté, texte de la même famille) garde --radius-inner (4 px).

--radius-page. Le thème Astryx hérité posait --radius-page à 28 px ; depuis 0.4.7, le socle le ramène à 12 px. N'en ajoute pas : préfère --radius-container.

Espacement — base 4

Marges et paddings suivent une base de 4 px. Dans les apps, on emploie les tokens --spacing-* du thème ; hors apps (vitrine, documents), le socle expose --forme-space-*. Présentations : marges 16 px, gouttières 8 px.

--forme-space-1 4 px

--forme-space-2 8 px

--forme-space-3 12 px

--forme-space-4 16 px

--forme-space-6 24 px

--forme-space-8 32 px

--forme-space-12 48 px

--forme-space-16 64 px

✓ À faire

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

✕ À éviter