Couleurs

Chaque couleur est nommée par son rôle (le texte principal, le fond d'une carte...), jamais par sa teinte. C'est ce qui permet au site web d'avoir un thème sombre : le rôle reste, seule la valeur change.

La marque

brand/primary#144545Boutons, navigation, liens

brand/accent#E8C18EPauses, coche du logo

brand/accent-strong#7A4F1ATexte ou trait sable lisible

brand/work#2E8A82Temps travaillé (frise, graphiques)

brand/track#DCE3E1Fond des barres et anneaux

brand/danger#B91C1CDanger, erreurs, service en cours

Texte

text/default#111827Texte principal

text/subtle#374151Texte un peu moins appuyé

text/muted#4B5563Aides, légendes, valeurs

text/on-brand#FFFFFFTexte sur fond vert

Surfaces et bordures

surface/page#F5F5F4Fond de la page

surface/card#FFFFFFCartes, menus, champs

border/default#E5E7EBBordures, séparateurs

border/strong#9CA3AFBordures en pointillés

Retours d'état

feedback/danger-strong#B91C1CBouton et texte de danger

feedback/danger-border#FECACABordure d'une zone dangereuse

feedback/danger-soft#FEF2F2Fond d'un message d'erreur

Le thème sombre (site web)

Depuis la version 1.7 des spécifications, le site web propose trois thèmes : clair, sombre, ou celui de l'appareil. Le choix est enregistré sur le compte et suit la personne sur tous ses appareils.

Rôle (web)	Clair	Sombre	Remarque
page	#F5F5F4	#0F1716
surface	#FFFFFF	#18221F
surface-muted	#F9FAFB	#202D2A	Survol, en-têtes de tableau
line	#E5E7EB	#2F3D39
ink	#111827	#E6EDEB	Texte principal
muted	#4B5563	#9FB0AB
primary	#144545	#1A5654	Un peu plus clair que la page, texte blanc à 8,4:1
brand	#144545	#6CC3B8	Le vert en texte et en contour doit s'éclaircir pour rester lisible
accent-strong	#7A4F1A	#E8C18E	Le brun serait illisible sur fond sombre
danger	#B91C1C	#F28B82
track	#DCE3E1	#2C3A37

Le fond sombre n'est pas noir mais un vert très foncé (#0F1716) : il garde l'identité de la marque.

L'application mobile n'a pas de thème sombre : les maquettes mobiles n'en ont pas, et l'app reste en clair.

Les noms dans le code

La même couleur porte un nom proche dans chaque projet :

Figma	Web (main.css)	Mobile (colors.ts)
brand/primary	--color-primary	brandPrimary
brand/accent	--color-accent	brandAccent
brand/accent-strong	--color-accent-strong	brandAccentStrong
brand/work	--color-work	brandWork
brand/track	--color-track	brandTrack
brand/danger	--color-danger	brandDanger
text/default	--color-ink	textDefault
text/muted	--color-muted	textMuted
surface/page	--color-page	surfacePage
surface/card	--color-surface	surfaceCard
border/default	--color-line	borderDefault

Une seule source

Une nouvelle couleur s'ajoute d'abord dans Figma, avec un nom de rôle, puis dans le code. Jamais de valeur #... écrite directement dans un composant.