# Forme® Design System — llms.txt
> Source de vérité pour agents (mise à jour 21.10.2026). Couvre la MARQUE (documents, présentations,
> textes) et l'INTERFACE (code des apps). Doc humaine : https://design.forme.ch/
> Valeurs : @forme-ch/design-system ≥0.4.7 (css/brand.css, brand.json → https://design.forme.ch/marque/brand.json).
> Interface : socle Astryx (@astryxdesign/core) + @forme-ch/ui ≥2.18.18. L'ancien @forme/ui v1 (RAC) est abandonné.

## Marque (toutes surfaces)
- Écrire « Forme SA » (société, jamais Sàrl) et « Forme® » (marque). Produits : Forme®AI, Forme®Frame, Forme®Admin, FormeType™.
- Français de Suisse. Interface : tutoiement. Documents client : vouvoiement. Site forme.ch : « nous ».
- Typographie : apostrophe ’ ; guillemets « » ; nombres et montants SANS séparateur de milliers, partout (12017 ; 1408.00 CHF ; 13376.00) ; dates 28.04.2026 ; numéros d'offre en mono (026.090).
- Polices (9 fichiers woff2 livrés par le paquet, copiés par `prebuild` sync-fonts) : Aeonik Regular/Medium/Bold + italiques, Aeonik Mono Light/Regular/Bold. Aeonik (400/500/700) ; Aeonik Mono en CAPITALES (tracking 0.08em) pour surtitres, métadonnées, étiquettes. Titres en Medium 500 ; Bold 700 = grands chiffres seulement.
- Couleurs de base : noir #000, blanc #fff, gris #767676 (secondaire), #ddd (filets), #f7f7f7 (fonds).
- Palette Forme (aplat, trait, point ; jamais texte courant) : orange #ffaa00, rose #ff82be, violet #823cff, bleu #00a0ff, vert #00dc8c, rouge #ae0411. Texte blanc sur les pastilles.
  Forme®Process (ordre fixe) : Challenge=orange, Découvrir=rose, Définir=violet, Développer=bleu, Délivrer/Solution=vert. Aussi : phases et catégories (ERP), séries de graphiques (même ordre), schémas.
- Trois niveaux par couleur : plein (pastilles, courbes ; texte blanc) ; light --forme-*-light (orange #fee7cb, rose #ffe2ee, violet #ebe8ff, bleu #dbeeff, vert #d3f5e0, rouge #ffe4e1 ; « à faire / à éviter » en vert et rouge light) ; ultra-light --forme-*-ultra-light, fonds de boîtes et de colonnes (orange #fff7e5, rose #fff3f9, violet #f3ebff, bleu #dff6ff, vert #dcfbf4, rouge #f7e6e7) ; texte noir sur light et ultra-light. --forme-*-pale = alias historique de light.
- Boutons : « éditorial » (Aeonik Mono capitales, filet 1 px, rayon 8, plein au survol) pour forme.ch et documents ; « interface » (Button @forme-ch/ui, plein) pour les applications.
- Palette Vif = états d'interface uniquement (succès #047857, attention #c2410c, erreur #e11d48), toujours avec un mot ou une icône.
- Rayons 4 / 8 / 12 px ; 9999 pour les cercles et les pastilles seulement. Pas de dégradé décoratif, pas d'ombre décorative, pas d'émoji.
- Logo : mot-symbole Forme® noir ou blanc, jamais recoloré ni déformé (SVG : /marque/forme-wordmark-noir.svg, -blanc.svg).
- Présentations 16:9 (1920×1080) : fond blanc ; grille 12 colonnes de 150 px, gouttière 8, marges 16, marge de pied 124 (pied hors grille, à y 972) → carrés de 150 ; une idée par diapositive ; pied de page sur chaque diapositive (logo · CLIENT · TITRE · date · référence OFFRE 026.064 · « 1 / 20 ») en mono capitales 15 px ; intercalaires inversés (noir) ; titres 48 Medium (48/48), couverture 72 Medium, texte courant ≥ 24 px ; montants SANS apostrophe de milliers (« 1280.00 »), comme partout ; logo toujours « Forme® » avec le ®. 16 diapositives de base (bibliothèque, page « Présentation — slides de base ») : 01 Couverture, 02 Équipe, 03 Prestations, 04 Forme® Process, 05 Collaborer, 06 Contexte et enjeux, 07 Déroulé du projet (nodal), 08 Détail de phase (tableau), 09 Récapitulatif d'offre (montants seuls), 10 Mur de projets, 11 Partenaires, 12 Mosaïque, 13 Logos clients, 14 Distinctions, 15 Conditions générales (standard, jamais adaptées), 16 Contact. Détail : /documents/presentations/
- Schéma nodal (offres) : réservé à la vue d'ensemble (diapositive « Déroulé du projet », cartes = pastille + titre) ; marges et gouttières 72 px (4 colonnes de 390) ; les phases sont détaillées en TABLEAUX (composants Ligne d'offre / Total d'offre, textes complets de l'ERP, corps 24, une ligne Gestion de projet 10 %, total de phase ; un tableau peut s'étaler sur plusieurs diapositives, suites sans titre). Pastilles selon Forme®Process ; GESTION, TIERS, OPTION en noir. Données : admin.forme.ch/api/offres/<numéro>/schema-nodal ou outil MCP get_offre_schema_nodal (connecteur Forme Admin) ; générateur : https://design.forme.ch/figma/schema-nodal/generer-slides.js (remplacer __DATA__ par le JSON, exécuter via use_figma dans un fichier Slides abonné à la bibliothèque).
- Figma : bibliothèque unique « Forme Design System » (fichier HhdrU4lS01GhSkwwyohj6G ; pages Fondations, Présentation — slides de base, Archive ; variables Marque var(--forme-*), Interface var(--color-*), Graphiques var(--dv-*) ; couleurs à 3 niveaux plein / light / ultra-light ; composants Pied de page, Pastille (composant unique : Style Plein/Contour × 8 couleurs × M/S/XS, posée sur la ligne de base), Carte, Ligne/Total d'offre, Process, Argument, Personne, Nodal/*, Slide/NN) ; gabarit Slides « Gabarit présentation Forme » (zPG0d3vzTzR5cx6rrwnubU, 16 diapositives). Fichiers d'offre nommés par numéro d'offre. Publier la bibliothèque après chaque changement (éditeur humain). Détail : /documents/figma/
- Rapports A4 : couverture (surtitre mono, titre Medium, date, logo), sections numérotées en mono, tableaux à filets #ddd et montants mono alignés à droite, encadrés fond #f7f7f7 rayon 12 sans bordure latérale, pied « Forme SA — Rue des Creusets 16, 1950 Sion » + pagination. Détail : /documents/rapports/

## Interface — installer
.npmrc: @forme-ch:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}   (PAT lecture packages)
npm i @forme-ch/ui @forme-ch/design-system @astryxdesign/core
CSS (ordre): @astryxdesign/core/reset.css ; @astryxdesign/core/astryx.css ; @forme-ch/design-system/css/index.css
Thème: poser data-astryx-theme="forme" haut dans l'arbre. Sous-chemins @forme-ch/ui : /controls, /shell, /layout, /lockups, /icons, /date.

## Règle d'or
Tout composant d'UI vient de @forme-ch/ui, jamais dupliqué ni réécrit par app. Chaque composant Forme
enrobe son équivalent Astryx sous l'API Forme (a11y + comportement hérités d'Astryx ; charte + vocabulaire
Forme par-dessus). Les tokens (couleurs light-dark, typo, rayons) ont une seule origine : @forme-ch/design-system.

## API notable
- Button/LinkButton/IconButton : prop `label` (string) = nom accessible ET texte visible (voie canonique,
  alignée Astryx). `children` = fallback rétrocompat. `variant` = primary|secondary|ghost|destructive|success|warning ; `size` = sm|md|lg. iconOnly -> IconButton.
- Contrôles : TextField, Textarea, FormeSelect, Checkbox, RadioGroup/Radio, Switch, Segmented, SearchInput,
  FileInput, FormeDatePicker (+ FormeLocale fr-CH), Badge (tone), Card, Tooltip, TabNav, DropdownMenu, MoreMenu, SlideOver, Modal/Dialog, ButtonGroup, ToggleButton(+Group).
- Shell : FormeAppShell (shell d'app partagé admin/ai/space/frame — cadre AppShell variant `section` + FormeSideNav + drawer mobile natif ; slots header/topContent/footer/groups|sideNav/banner/children ; collapsible+resizable) ; FormeSideNav (nav latérale, data-mode `groups` + slots). Cadre = TOUJOURS FormeAppShell (jamais .app-frame maison) ; sidebar riche = FormeSideNav en `sideNav`, jamais SideNav Astryx brut.
- Icônes : @forme-ch/ui/icons (wrapper Lucide RSC-safe), jamais lucide-react en dur.

## Conformité
Pas de couleur en dur (toujours var(--color-*) ou var(--forme-*)). Échelle typo --font-size-* 6/7/8/10/12/14/17/20/24/29/35/42px (15px interdit dans les apps).
Rayons --radius-inner(4)/element(8)/container(12)/full(9999, cercles et pastilles) ; --radius-page = 12 depuis 0.4.7 (préférer container).
Capitales mono : letter-spacing var(--forme-tracking-caps) (0.08em, alias --ls-mono). Doc complète : https://design.forme.ch/