# Charte graphique — SIOP V2

> **Rôle de ce document (playbook)** : fixer l'identité visuelle AVANT le code. Toute
> valeur visuelle vit dans [`tokens.css`](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.