mirror of
https://github.com/siop-spelev/siop2.git
synced 2026-08-08 20:51:53 +00:00
04e61056f6
Refondation design-first du projet SIOP (v1 gelée) : - Playbook 00-vision (charte projet, personas, benchmark Atlas) - Playbook 01-cadrage (releases R0→R5 + DoD, user-story map, exigences, risques) - Playbook 02-design : charte graphique, tokens.css bi-thème (palettes analytics validées CVD/contraste par script), maquettes HD navigables (7 écrans dont démo-login DEMO_MODE, bilan codé, portail QR, mobile) Prochaine étape : validation des maquettes par le référent avant tout code. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
80 lines
4.1 KiB
Markdown
80 lines
4.1 KiB
Markdown
# 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.
|