Fondations
Couleurs
Deux couches, une seule source (@forme-ch/design-system). Le
socle de marque (--forme-*, css/brand.css)
est commun à toutes les surfaces : apps, forme.ch, présentations, rapports. Les apps y ajoutent la
couche interface (--color-*), avec ses neutres et son mode sombre.
Socle de marque — noir et gris
Les valeurs de référence sont celles de forme.ch. Les neutres d'interface des apps (#171717, mode sombre) en dérivent.
Socle de marque — palette Forme
Six couleurs, dans l'ordre du Forme®Process. Elles servent au Process, aux phases et
catégories (--forme-phase-1..6 selon le rang de phase), aux schémas et aux
graphiques. Chaque couleur existe en trois niveaux : plein (pastilles,
courbes, aplats ; texte blanc), light (--forme-*-light,
encadrés) et ultra-light (--forme-*-ultra-light, fonds de boîtes
et de colonnes) ; texte noir sur ces deux derniers. Jamais pour colorer du texte courant. Les anciens
jetons --forme-*-pale restent des alias de light.
Palette Forme ≠ palette d'interface : un état (succès, attention, erreur) ne prend jamais une couleur de la palette Forme, il passe par la palette Vif ci-dessous. Détails d'usage : Marque.
Interface — tokens --color-*
Dans les apps, toutes les couleurs viennent des tokens --color-*,
définis une seule fois dans @forme-ch/design-system. Chaque token utilise
light-dark() : la même variable s'adapte au thème clair ou sombre sans code
conditionnel. Bascule le thème (en haut à droite) pour voir les valeurs changer ci-dessous.
#hex) dans une app.
On référence un token. C'est ce qui garantit le thème sombre, la cohérence et la maintenabilité.
États — palette « Vif »
Trois couleurs, et seulement trois, disent l'état d'une chose : émeraude, orange, framboise
(adoptées le 1er octobre 2026). Chacune passe le contraste AA en texte comme en
remplissage, sur fond clair et sur fond sombre. Une hausse ou une baisse chiffrée réutilise le
même vert et le même rouge (--c-up / --c-down
dans les apps, --dv-up / --dv-down en dataviz).
Payé, accepté, sain, en ligne
- Texte / plein
--color-success- Fond teinté
--color-background-green- Bordure
--color-border-green- Clair · sombre
#047857·#34d399
À relancer, à vérifier, dégradé
- Texte / plein
--color-warning- Fond teinté
--color-background-orange- Bordure
--color-border-orange- Clair · sombre
#c2410c·#fb923c
En retard, refusé, en perte, panne
- Texte / plein
--color-error- Fond teinté
--color-background-red- Bordure
--color-border-red- Clair · sombre
#e11d48·#fb7185
- Une couleur d'état ne sert qu'à un état. Une catégorie (type de mandat, membre, série de graphe) prend la palette catégorielle, jamais le vert ou le rouge.
- Un état n'est jamais porté par la couleur seule : il s'accompagne d'un libellé ou d'une icône.
- Badge = fond teinté + texte de la même famille. Pastille et barre = couleur pleine.
Texte
Surfaces
Gris neutres uniquement (R = G = B) : aucune surface ne tire sur le brun ou le bleu.
Bordures
Accent
Monochrome : l'accent Forme est noir en clair, blanc en sombre.
Palette texte
Teintes d'interface héritées d'Astryx (Badge tone). Les phases, le Forme®Process et les séries de graphiques passent par la palette Forme ci-dessus.
Palette fonds
Dataviz
Les séries suivent la palette Forme, dans l'ordre du Process, avec une luminosité ajustée et validée
en clair et en sombre. Jetons de rôle des graphiques (@forme-ch/ui/styles/dataviz.css). La palette
catégorielle est validée pour les daltonismes (protanopie, deutéranopie, tritanopie) en clair et en
sombre : on l'utilise dans cet ordre fixe, sans la réordonner. Au-delà de cinq séries, on regroupe en
« Autres » (--dv-cat-neutral) ou on passe aux petits multiples.
Usage
Réfère un token en CSS, jamais une valeur littérale :
.mon-bloc {
color: var(--color-text-primary);
background: var(--color-background-card);
border: 1px solid var(--color-border);
}