Forme Design System · 2.0

Une seule ligne, pour toutes nos surfaces.

Le Design System Forme® est la source unique des composants, des tokens et des règles d'interface pour Admin, AI, Space et Frame. Il est bâti sur Astryx comme socle, habillé par la charte Forme, et distribué en un paquet : @forme-ch/ui.

Démarrer → Installer le paquet et rendre le premier composant. Fondations → Couleurs, typographie, espacement, motion. Composants → 22 primitives documentées, aperçus live. Conformité → Les règles qui garantissent la parité.

Le principe

Chaque composant vient de @forme-ch/ui, jamais dupliqué dans une app. Chaque composant enrobe son équivalent Astryx sous l'API Forme : on hérite de l'accessibilité et du comportement d'Astryx, on impose la charte et le vocabulaire Forme par-dessus. Les tokens — couleurs, typographie, rayons — ont une seule origine : @forme-ch/design-system.

Cette page de documentation consomme elle-même la vraie charte et les vrais composants : ce que tu vois dans les aperçus est le rendu de production, pas une capture.

Nouveautés récentes

La convergence 2.0 a introduit plusieurs primitives et alignements :

IconButton — bouton icône seule, label obligatoire.
Segmented — sélecteur exclusif, enrichi (hint, fluid, tailles).
FileInput — champ de fichier natif au DS.
DropdownMenu & MoreMenu — menus data-driven.
FormeSideNav — navigation latérale partagée Admin / AI.
API label alignée sur Astryx (accessibilité d'abord).

Astryx socle, Forme couche. Astryx apporte le comportement et l'a11y ; Forme apporte l'identité et le vocabulaire. On ne bricole jamais un composant dans une app — on l'améliore dans le paquet, et toutes les surfaces en profitent.