siop2/docs/02-design/charte-graphique.md

Charte graphique — SIOP V2

Rôle de ce document (playbook) : fixer l'identité visuelle AVANT le code. Toute valeur visuelle vit dans tokens.css (source de vérité, importée telle quelle par l'application) ; ce document explique les choix et leurs raisons. Règle absolue : aucun style codé en dur hors tokens — c'est ce qui a rendu la v1 « flottante ».

1. Positionnement

SIOP est un outil de travail professionnel pour ascensoristes : sobre, dense sans être étouffant, lisible en plein soleil sur un chantier comme au bureau. Le monde visuel est celui du métier — acier, cabine, signalisation de sécurité — pas celui d'une app grand public. Deux thèmes (clair/sombre) au même niveau de soin.

2. Couleur

Token	Valeur (clair)	Rôle & justification
--encre	#1B2534	Texte principal — un « noir acier » à biais bleu, jamais de noir pur
--bleu-treuil	#1F4FB8	Primaire (actions, liens, focus) — bleu de vêtement de travail, profond et désaturé, volontairement distinct du bleu néon par défaut des frameworks
--safran	#DD8A0B	Accent de marque — safran marocain / gilet haute visibilité. Parcimonieux : logo, rail actif de navigation, moments de marque. Jamais pour un statut
Fonds	#F5F7FA / surfaces #FFFFFF	Acier clair, biais froid assumé
Sombre	fond #0F1622, surface #182234	« Machinerie de nuit » — pas une simple inversion

Statuts (réservés, jamais réutilisés ailleurs) : Ouvert bleu, En cours indigo, En attente ambre, Terminé vert, Annulé gris. Priorités : Personne bloquée (rouge vif + pastille animée — la seule animation d'alerte de l'app), Haute rouge, Moyenne ambre, Basse verte. Toujours pastille/pictogramme + libellé, jamais la couleur seule.

Palettes graphiques (analytics) — validées par script (CVD, contraste, bande de luminosité) :

• Clair : #3B69D6 · #DD8A0B · #1F9E8E · #8A63D2 (ordre fixe, jamais recyclé ; étiquettes directes obligatoires — le safran passe sous 3:1 sur blanc).
• Sombre : #5580E4 · #C7820A · #26A896 · #9673DE (repas dédiés, pas d'inversion automatique).

3. Typographie

• UI & titres : Manrope (géométrique-humaniste, OFL, auto-hébergée — jamais de CDN). Titres en 600/700, text-wrap: balance. Les maquettes HTML approximent avec Avenir Next (présent sur macOS) en attendant l'app.
• Données : chiffres tabulaires (font-variant-numeric: tabular-nums) partout où des nombres s'alignent (tables, KPI, coûts).
• Échelle : 12 / 13 / 14 (base) / 16 / 20 / 24 / 32. Libellés en capitales : 11 px, letter-spacing: 0.06em.

4. Forme & espace

• Grille d'espacement 4 px ; densité « bureau » (tables 40 px/ligne) mais cibles tactiles ≥ 44 px sur mobile.
• Rayons : 10 px (cartes), 8 px (contrôles), 999 px (pastilles).
• Élévation discrète : bordures d'abord (--bordure), ombre légère seulement au survol/menus.
• Motif signature « rail » : l'élément actif de la navigation porte un rail vertical safran de 3 px (la cage d'ascenseur) — c'est LE geste identitaire, utilisé nulle part ailleurs.

5. Iconographie & logo

• Lucide, trait 1,75 px, 16–20 px dans l'UI.
• Logotype : « SIOP » en Manrope 700 + marque ▲▼ (montée/descente cabine) safran sur encre. Favicon = la marque seule.

6. Mouvement

Fonctionnel uniquement : transitions 120–160 ms (ease-out) sur survol/ouverture ; prefers-reduced-motion respecté ; une seule animation continue autorisée — la pastille « personne bloquée ».

7. Ton rédactionnel

Français métier, direct, sans jargon système : « Clôturer l'intervention », pas « Soumettre le formulaire ». Les erreurs disent quoi faire (« La checklist est incomplète : traitez chaque tâche »), jamais « Erreur 400 ». Vocabulaire du carnet : OT, bilan, organe, grille du mois.

8. Application

tokens.css est copié tel quel dans apps/web (et mappé vers la config Tailwind/shadcn). La page /design de l'app (R0) expose tous les tokens et composants — c'est la référence vivante des revues pixel.