Fondations

Couleurs

Toutes les couleurs viennent des tokens --color-* de la charte Forme, 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.

Règle. On n'écrit jamais une couleur en dur (#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 1^er 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).

Succès

Payé, accepté, sain, en ligne

Texte / plein: --color-success
Fond teinté: --color-background-green
Bordure: --color-border-green
Clair · sombre: #047857 · #34d399

Attention

À relancer, à vérifier, dégradé

Texte / plein: --color-warning
Fond teinté: --color-background-orange
Bordure: --color-border-orange
Clair · sombre: #c2410c · #fb923c

Erreur

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

--color-text-primary

--color-text-secondary

--color-text-accent

--color-text-disabled

Surfaces

Gris neutres uniquement (R = G = B) : aucune surface ne tire sur le brun ou le bleu.

--color-background-body

--color-background-surface

--color-background-card

--color-background-muted

--color-background-popover

--forme-surface-2

Bordures

--color-border

--color-border-emphasized

--forme-line

Accent

Monochrome : l'accent Forme est noir en clair, blanc en sombre.

--color-accent

--color-accent-muted

--color-on-accent

Palette texte

Teintes nommées, pour badges et catégories.

--color-text-blue

--color-text-cyan

--color-text-teal

--color-text-green

--color-text-yellow

--color-text-orange

--color-text-red

--color-text-pink

--color-text-purple

Palette fonds

--color-background-blue

--color-background-cyan

--color-background-teal

--color-background-green

--color-background-yellow

--color-background-orange

--color-background-red

--color-background-pink

--color-background-purple

Dataviz

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.

--dv-cat-1

--dv-cat-2

--dv-cat-3

--dv-cat-4

--dv-cat-5

--dv-cat-neutral

--dv-up

--dv-down

--dv-track

--dv-zone

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);
}