Refonte graphique — référence
Ce que les trois écrans du cockpit ont en commun, extrait et nommé, pour que les seize écrans restants parlent la même langue. Un même sens produit toujours le même signe : c'est la seule règle qui compte, tout le reste en découle.
01
Cinq états, cinq couleurs, aucune exception. Un utilisateur doit pouvoir apprendre cette table une fois et la retrouver partout — sur une ligne de liste, une carte de projet, une case d'admin, un segment de frise. Les couleurs ne servent JAMAIS à décorer, seulement à dire un état.
Bleu de marque. Quelque chose avance, nous en avons la main.
Chantier en cours, étape courante d'une frise, devis envoyé, commercial principal.
brand-600 · fond brand-50
Ambre. On attend quelque chose, ou quelque chose est à faire.
Négociation, tâche à venir, champ requis vide, relance programmée.
amber-500 · fond amber-50
Émeraude. C'est gagné, fait, franchi. Rien à faire.
Projet terminé, devis accepté, étape franchie, prérequis rempli.
emerald-500 · fond emerald-50
Rouge. Une échéance est dépassée, ou une action détruit des données.
Tâche en retard, suppression, révocation d'accès.
red-500 · fond red-50
Gris. Clos sans gain, désactivé, ou pas encore atteint.
Projet perdu, brouillon, étape future, portail inactif, statut orphelin.
gray-300 · fond gray-100
Le rouge est un budget, pas une palette
Un écran a droit à un seul bloc à fond coloré plein, et il est réservé à ce qui appelle une action immédiate — « bloque l'étape », « à relancer ». Tout le reste passe par une bordure de 3 px. C'est ce qui rend l'urgence lisible : si trois cartes crient, aucune ne crie. Le rappel programmé de la fiche contact est passé d'une carte pleine ambre à une simple bordure pour cette raison — il criait plus fort qu'une tâche en retard.
Les statuts sont configurables — cette table ne l'est pas
Chaque tenant définit ses propres statuts et leurs couleurs (entity_status_definitions). Ce que fige cette table, c'est la couleur des états DÉRIVÉS, ceux que l'app calcule elle-même à partir des drapeaux : gagné (is_won), clos non gagné (is_terminal), en retard (échéance dépassée), vide. Aucune clé de statut n'est écrite en dur nulle part.
02
Huit signes visuels récurrents. Ils sont volontairement peu nombreux : un vocabulaire court s'apprend, un vocabulaire riche se subit. Chacun a un emploi exclusif — s'il apparaît, c'est qu'il dit ce qu'il est censé dire.
Trois pixels à gauche, couleur de la table ci-dessus. C'est le motif le plus employé de l'app : il transforme n'importe quelle liste en information scannable sans rien ajouter à la hauteur de ligne.
Où : lignes de liste et de tableau, cartes de projet, adresses, tâches, membres d'équipe, champs requis vides, lignes de devis, prérequis d'étape.
border-l-[3px] border-l-<couleur> — sur le <li>, pas sur le lien interne, sinon elle saute au survol.
Jamais la couleur seule. Un badge d'état porte toujours une pastille ET un mot — c'est une exigence d'accessibilité (8 % des hommes distinguent mal le rouge du vert), et c'est aussi ce qui rend l'app lisible en capture d'écran noir et blanc.
Où : badges de statut, en-têtes de groupe, légendes de répartition, puces d'activité, catégories de documents.
Le badge NEUTRE (type, catégorie) n'a pas de pastille — l'absence de pastille signale « ceci n'est pas un état ».
Projets actifs
3 / 7
Pipeline
31 300 €
Libellé 11 px gris au-dessus, valeur 19 px semibold en dessous, toujours en tabular-nums pour que les chiffres s'alignent d'une ligne à l'autre. Un dénominateur (« / 7 ») se met en 12 px gris : il donne l'échelle sans voler la vedette au numérateur.
Où : bandeau de synthèse des fiches, tableau de bord, en-tête des listes, carte chiffre d'affaires.
Variante 26 px pour un tableau de bord, où le chiffre EST le contenu.
Carré de 20 px, puis titre 14 px semibold, puis un compteur ou sous-titre 11,5 px gris, puis l'action à droite. Toujours dans cet ordre.
Le pictogramme porte la hiérarchie : fond brand-50 sur une carte où l'utilisateur agit, fond gray-100 sur une carte qu'il consulte. C'est le seul usage du bleu de marque en tête de carte, donc il reste lisible comme « c'est ici que ça bouge ».
Où : toutes les cartes de l'app, sans exception.
Vendu
Visite
Pose
Posé
Consuel
Version compacte, sans libellés, pour les lignes de liste :
Un segment par étape du pipeline configuré, largeurs égales. Les étapes franchies sont émeraude, l'étape courante prend la couleur de son état, les suivantes restent grises. Seule l'étape courante est en gras : la frise se lit d'un coup d'oeil, sans compter les segments.
Où : fiches projet (pleine largeur, avec libellés et dates), cartes de projet d'une fiche contact (libellés seuls), lignes de liste (compacte, sans libellés).
Jamais sur un objet clos : sur un projet terminé la frise n'apprend rien et double la hauteur de ligne.
Isolation combles A
18 200 €
PAC immeuble B
35 200 €
Carport solaire
9 800 €
Ce qui est clos tient sur une ligne : icône d'issue, libellé, date, montant. Pas de frise, pas de badge plein, texte en gris. L'histoire ne mérite pas le même poids que le présent — c'est ce qui libère la place pour ce qui compte.
Où : historique des projets, activité récente, versions de devis remplacées, tâches faites, journal d'audit.
Téléphone 2
Attestation Consuel
Attendue à l'étape « Consuel »
À ne pas faire : 06 12 34 56 78 en placeholder — se lit comme une donnée saisie.
Toute zone non renseignée ou inactive porte une trame diagonale très légère et affiche le nom du champ, jamais un exemple. Un exemple grisé (« 06 12 34 56 78 ») se lit comme une donnée déjà saisie — retour utilisateur du 29 juillet.
Quand on peut dire pourquoi c'est vide, on le dit : « Attendue à l'étape Consuel » vaut mieux que « Aucun fichier ».
repeating-linear-gradient(135deg, rgba(15,23,42,.05) 0 1px, transparent 1px 7px)
CA gagné
139 000 €
Fond pointillé bleuté très discret sur les blocs d'agrégat. Il dit « ces chiffres sont calculés, il n'y a rien à éditer ici » — utile dans une app où presque tout le reste s'édite au clic.
Où : bandeau de synthèse, carte chiffre d'affaires, tuiles de KPI du tableau de bord.
La barre de répartition qui l'accompagne reprend exactement les couleurs d'état — jamais un dégradé décoratif.
03
Les assemblages qui reviennent d'un écran à l'autre. Chacun est rendu ici dans sa forme de référence : ce sont eux qu'on recopie, pas qu'on réinvente.
Bordure d'état, titre, ligne de contexte, valeur à droite. Toute la ligne est cliquable.
Toiture photovoltaïque 9 kWc
Pose planifiée · étape 3/6 · il y a 4 jours
42 800 €
Batterie de stockage 10 kWh
Négociation · étape 3/5 · il y a 2 jours
12 400 €
Une ligne qui a l'air cliquable DOIT naviguer — leçon du 4 juin, des lignes en cursor-pointer sans lien mort à l'usage.
Sépare des lignes par état, avec compte et somme. Repliable quand le groupe est clos.
En cours
3 projets · 74 100 €Terminés
3 projets · 96 200 €Le vivant est déplié, le clos est replié. Toujours.
Le seul fond coloré plein autorisé. Un par écran, au maximum.
Bloque la pose
Confirmer la date de pose
En retard de 2 jours · David A.
Fait avancer l'objet d'un cran. Annonce toujours sa conséquence.
Étape suivante
Posé
3 prérequis sur 5 sont prêts.
Le client sera notifié : cette étape lui est visible.
Du texte, pas un champ. Le champ apparaît au clic et part au blur.
Au repos
En saisie
Vide
Menu
Sans droit d'écriture
Jean Roquette
Sans la permission de modifier, la valeur reste du texte simple — pas de zone cliquable morte.
Dans les rails et les vues denses, remplace l'en-tête de carte : la structure se lit en périphérie sans occuper de place.
Accès et contraintes
Code portail
A1947
Stationnement
2 places dans la cour
Bordure de 2 px ici, pas 3 : dans un rail étroit, 3 px pèsent trop.
Un filtre annonce toujours combien il contient — sinon on clique à l'aveugle.
Dit ce qui manque et propose l'action. Jamais une simple phrase en italique.
Aucun projet pour ce client
Créez-en un pour suivre le devis, le chantier et les documents au même endroit.
04
Le cockpit à trois rails répond au problème « une fiche riche à consulter et à travailler ». Il n'a aucun sens sur une liste ou un écran de configuration. Généraliser la refonte ne veut donc pas dire mettre trois colonnes partout : cela veut dire appliquer les mêmes motifs dans le gabarit qui convient.
Trois rails à défilement indépendant : qui / ce sur quoi on travaille / ce qui appelle une décision. Rien d'important ne sort de l'écran.
Pour : fiche contact, fiche projet commerciale, fiche projet chantier. Plus tard, la fiche devis si elle devient une page.
3 écrans faits
Bandeau de chiffres, barre de filtres chiffrés, puis le corps : tableau dense, kanban ou vue métier selon le ?view=. Densité de la variante D, une ligne par objet, bordure d'état.
Pour : contacts, projets, devis, tâches, catalogue, suivi de chantier.
Lot 1 et 2
Navigation de sections à gauche, panneau de réglage à droite. Chaque réglage annonce ce qu'il change et pour qui. Deux rails, pas trois : il n'y a rien d'urgent dans un écran d'admin.
Pour : les onglets de réglages, les rôles, les membres, les champs personnalisés, mon compte.
Lot 4
Les écrans hors gabarit
Quatre familles ne rentrent dans aucun des trois, et c'est normal — elles gardent les motifs et la sémantique, mais leur composition leur est propre : le tableau de bord (tuiles), l'éditeur de devis (saisie plein écran avec récapitulatif collant), l'espace client (registre volontairement plus sobre, c'est le client final qui regarde), et les écrans d'authentification (une carte centrée).
05
Elles ne se voient pas sur une capture d'écran, mais ce sont elles qui font qu'une interface est agréable ou pénible. Chacune vient d'un retour de terrain daté.
Les actions primaires restent visibles
Accepter, Refuser, Envoyer, Passer à l'étape suivante : jamais au survol. Le hover-reveal se réserve aux actions secondaires des tableaux denses. Un testeur n'a pas trouvé comment refuser un devis parce que les boutons étaient en opacity-0 group-hover — 18 juillet.
Un champ vide affiche son nom, pas un exemple
Sur trame (M7). « 06 12 34 56 78 » en placeholder se lisait comme un numéro déjà enregistré — 29 juillet.
Ce qui a l'air cliquable navigue
Une ligne en cursor-pointer avec un survol coloré doit mener quelque part. Affordance morte constatée sur les listes — 4 juin.
Une action structurante annonce sa conséquence
« Marquer vendu démarrera le suivi de chantier », « le client sera notifié », « un motif sera demandé ». En 11 px gris sous le bouton, avant le clic — pas dans une confirmation après coup.
Un compteur accompagne toute collection
Onglets, filtres, en-têtes de carte, groupes. On doit savoir ce qu'il y a derrière avant de cliquer. Et quand l'affichage est plafonné, on le dit : « voir les 7 tâches », pas un silence.
Les chiffres s'alignent
tabular-nums sur tout montant, quantité, date numérique, compteur. Sans lui, une colonne de montants tremble d'une ligne à l'autre.
Rien de configurable n'est écrit en dur
Statuts, libellés, couleurs de statut, étapes, champs métier, catégories : tout vient de la configuration du tenant. Les maquettes montrent un exemple d'organisation, pas un modèle figé. Une clé de statut supprimée s'affiche en gris orphelin, jamais masquée.
Les erreurs sont des sorties
Tout écran d'échec propose l'action qui débloque, dans le bloc d'erreur lui-même : un mot de passe refusé propose le lien par email, une invitation ouverte avec le mauvais compte propose de se déconnecter, un devis expiré propose d'en demander un nouveau. Un écran qui constate sans proposer laisse l'utilisateur sur le trottoir — lot 6 de la refonte.
Les fenêtres modales ont leurs six règles propres
Un objectif par fenêtre ; le titre dit l'action et le bouton principal répète son verbe ; la conséquence sous le bouton ; la sortie toujours possible sauf saisie commencée ; l'erreur reste dans la fenêtre ; pas de fenêtre dans une fenêtre. Trois largeurs seulement — 480, 640, 900. Anatomie et cas rendus dans dialogs-vf.html, détail en DESIGN-SYSTEM.md §18.2.
05 bis
« Mobile-friendly » ne veut rien dire. Chaque surface relève d'un régime, et le régime se décide par surface — pas globalement. Tranché à la clôture de la refonte ; détail et règles techniques en DESIGN-SYSTEM.md §19.
1 — Mobile d'abord
Espace client, devis public, écrans d'authentification. Le client ouvre son lien depuis un email, majoritairement sur téléphone : c'est probablement le cas mobile le plus fréquent en volume. Non négociable.
2 — Mobile conçu
Fiche chantier, fiche contact, tâches, création rapide. Composition propre, pas un reflow : sur la fiche chantier, l'accès au site passe en premier — un poseur la consulte depuis sa camionnette.
3 — Mobile dégradé, et annoncé
Listes denses, kanban, éditeur de devis, réglages, tableau de bord. Consultation lisible, on ne prétend pas y travailler. Un tableau bascule en cartes avec une phrase honnête plutôt que de se désintégrer en silence.
Six règles techniques, à appliquer au portage
h-7 et w-6 h-6 y sont interdits.06
| Interdit | Pourquoi | À la place |
|---|---|---|
| Plusieurs cartes à fond coloré plein | Si tout crie, rien ne crie | Une seule, le reste en bordure d'état |
| La couleur seule pour dire un état | Illisible pour les daltoniens et en noir et blanc | Pastille + libellé (M2) |
| Un placeholder d'exemple | Se lit comme une donnée saisie | Nom du champ sur trame (M7) |
| Une frise sur un objet clos | N'apprend rien, double la hauteur | Registre dense (M6) |
| Une action primaire au survol | Introuvable au doigt et à l'oeil | Bouton permanent |
| Un pictogramme d'en-tête bleu partout | Le bleu perd son sens « ici ça bouge » | Bleu sur l'action, gris sur la référence |
Une classe de taille Tailwind (text-sm) | Sort de l'échelle du design system | text-[13px] — pnpm check:tokens le vérifie en CI |
rounded-2xl sur une carte standard | Rupture de rythme visuel | rounded-xl |
font-bold sur un titre | Trop lourd à l'échelle de l'app | font-semibold tracking-tight |
| Un emoji comme icône | Rendu variable selon la plateforme | Lucide, trait de 1,5 px |