Forme® Design System
Une seule ligne, pour tout ce que Forme® produit.
La référence de la marque Forme® : logo, couleurs, typographie, rédaction, présentations, rapports et composants des applications. Pour l'équipe, pour nos partenaires et pour nos agents IA.
Par où commencer
Tout le monde La marque
Le socle commun : logo, couleurs, palette Forme, Aeonik, ton et rédaction.
Je prépare un document Présentations & rapports
Gabarit 16:9, styles de texte, pied de page, rapports A4, graphiques.
J'utilise Claude Avec l'IA
Ce que Claude applique tout seul, comment le lui demander, et les règles pour les agents de code.
Je développe Applications
Installer
@forme-ch/ui, les composants, le shell, les règles de conformité.
Un socle, trois expressions
Les applications (Admin, AI, Space, Frame), le site forme.ch et nos documents partagent le même socle : noir et blanc, trois gris, la palette Forme, Aeonik et Aeonik Mono, une échelle de rayons 4 / 8 / 12 et les mêmes règles d'écriture. Chacun l'exprime à son échelle : dense dans les applications, généreux sur le site, une idée par page dans les documents.
Les sources
| Quoi | Où |
|---|---|
| Valeurs (couleurs, polices, rayons) | Paquet @forme-ch/design-system : css/brand.css, brand.json (télécharger) |
| Composants d'interface | Paquet @forme-ch/ui |
| Gabarits de présentation | Figma : bibliothèque « Forme Design System » et Slides « Gabarit présentation Forme » (mode d'emploi) |
| Claude | Design system Forme® par défaut de l'organisation |
| Agents de code | llms.txt |
| Règles et explications | Ce site. L'ancien document du NAS (FORME-DESIGN-SYSTEM.md) est remplacé par design.forme.ch. |
Une règle à changer ? On modifie la source, jamais une copie : le paquet pour les
valeurs, ce site pour les règles. Figma, Claude et les applications suivent.