Une charte qui se vérifie.
Couleurs, polices, thèmes et règles d'écran du CRM, et les tests qui les font respecter.
Onze règles d'écran
Chacune dit ce qu'elle impose, puis ce qu'elle apporte. Quand une règle est gardée par un test, la tuile le signale : le test échoue dès que la règle n'est plus respectée.
Toute liste se sélectionne
Chaque liste, tableau ou grille d'enregistrements porte une case par ligne, une case « tout sélectionner » en en-tête et une barre d'actions groupées : compteur, « Tout désélectionner », export CSV. Maj+clic sélectionne une plage. Sur une liste découpée en pages, la sélection porte sur la page affichée ; aller au-delà demande un choix explicite.
Pourquoi : traiter vingt dossiers d'un geste au lieu de répéter vingt fois le même clic, sans jamais toucher une ligne masquée par un filtre.
La recherche pardonne
Toute barre de recherche ignore les majuscules et les accents, cherche dans plusieurs champs à la fois et passe aux identifiants dès qu'on tape un nombre d'au moins trois chiffres : SIREN, SIRET, téléphone, département. Une seule recherche sert tout le CRM.
Pourquoi : on retrouve un dossier comme on le tape, et la même saisie donne le même résultat sur tous les écrans.
Trier sur une clé stable
Toute liste qui s'y prête se trie sur une clé stable, comme un rang ou une date, jamais sur un libellé affiché. L'ordre de traitement ne varie pas : recherche, filtres, tri, puis découpage en pages. Les valeurs vides vont en dernier.
Pourquoi : l'ordre ne bouge pas quand on renomme un statut, et les filtres portent sur toute la liste, y compris les pages qu'on ne voit pas.
Une personne a toujours un visage
Un collaborateur apparaît avec sa photo. Sans photo, ses initiales reposent sur un dégradé qui va de la couleur de son pôle à un bleu d'ancrage, en encre blanche mesurée au milieu du dégradé : au moins 3:1 sur les huit pôles. Une adresse e-mail ne fabrique jamais d'initiales : sans nom, une silhouette neutre.
Pourquoi : on reconnaît ses collègues d'un coup d'œil, partout de la même façon. Un nom manquant reste visible, donc il est corrigé.
Chaque écran est un droit
Toute page du CRM est rattachée à un droit d'accès, accordé ou retiré personne par personne. Un test vérifie qu'aucun écran n'y échappe.
Pourquoi : le secret professionnel. Aucun écran ne naît ouvert à tous par oubli : chaque écran s'ouvre personne par personne.
On ne perd jamais son chemin
Chaque écran affiche la barre latérale et la barre du haut, y compris « accès non accordé », « introuvable » et « chargement ». Un module de plusieurs pages pose ce cadre une seule fois pour toutes ses pages.
Pourquoi : devant une porte fermée, on garde son menu pour repartir ailleurs. C'est précisément là qu'on en a le plus besoin.
Une icône pour agir, un emoji pour dire
Un pictogramme qui déclenche une action ou repère un module vient du jeu d'icônes du CRM : grille de 24×24, trait de 1,5 px, couleur du texte. Un emoji reste permis comme contenu, dans une réaction ou une illustration, jamais comme commande.
Pourquoi : des boutons lisibles et cohérents sur tous les postes et dans tous les thèmes. Un emoji change de dessin d'un système à l'autre.
La couleur dit l'appartenance, l'encre se mesure
Les huit couleurs de pôle marquent l'appartenance (pastilles, bandeaux, cartes), jamais un niveau d'alerte. Le texte posé dessus est mesuré pour atteindre au moins 4,5:1 : blanc sur le bleu Direction, encre #071118 sur les sept autres. Un pôle créé demain recevra une encre calculée.
Pourquoi : des étiquettes lisibles par tous, y compris sur un écran faible. Avant la mesure, quatre pôles affichaient du blanc sous le seuil.
Le thème ne touche que l'écran
Surfaces, textes et filets passent par des jetons communs aux cinq thèmes ; aucune couleur de surface n'est écrite en dur. Un document imprimé ou exporté ignore le thème : couleurs fixes, fond blanc, polices embarquées.
Pourquoi : chacun choisit son confort à l'écran, sans jamais imprimer un courrier client en blanc sur blanc parce qu'il travaillait en thème sombre.
Ce qui se calcule ne se stocke pas
Les états dérivés, comme « en retard » ou « critique », sont calculés à l'affichage et jamais enregistrés. Un calcul impossible affiche un tiret « — », jamais une valeur absurde. Les totaux sont vérifiés contre la somme de leurs parties.
Pourquoi : aucune donnée ne vieillit en silence. Ce que l'écran affiche est vrai au moment où on le lit.
Un mouvement vif, qui veut dire quelque chose
Durées et courbes viennent toutes du même jeu de jetons. Une interaction dure de 120 à 320 ms, une cascade de lignes s'arrête à 12. Vers le haut, un contenu nouveau ; de côté, une notification. Les réglages « réduire les animations » et « réduire la transparence » sont respectés partout.
Pourquoi : un outil qui répond sans faire attendre, et qui reste confortable pour les personnes sensibles au mouvement ou au flou.
Derrière les onze, une seule source par élément. Logo, couleurs de pôle, polices, avatars, case de sélection, barre de recherche : chacun existe une seule fois, et les chiffres de la charte, comme le nombre de pôles ou les contrastes, sont comptés ou mesurés par le code au lieu d'être recopiés à la main. Changer une couleur ou ajouter un pôle se répercute partout d'un coup.
Une encre qui se mesure
Le bleu roi porte la marque. Chaque pôle a sa couleur, et le texte posé dessus se choisit par la mesure, jamais à l'œil.
Couleurs de marque
Cinq couleurs de base. Dans chaque pastille, « Aa » est écrit avec l'encre la plus lisible.
Les huit pôles
« Aa » est écrit avec l'encre retenue, dont le contraste figure en gras. Seuil visé : 4,5:1, le niveau AA des règles d'accessibilité du web. Encre : #071118.
Méthode : rapport de contraste calculé par la formule de luminance relative des règles d'accessibilité du web. Valeurs reprises de la charte du CRM, où un test vérifie que chaque pôle atteint au moins 4,5:1 avec son encre, puis recalculées par un second chemin indépendant le 23 octobre 2026 : les seize valeurs des pôles, le bleu nuit et l'encre sur blanc concordent au centième.
Statuts d'écran
Quatre couleurs réservées à l'état d'un élément à l'écran. Elles n'apparaissent jamais dans un document client.
La couleur d'un pôle dit l'appartenance, jamais l'urgence. Un retard se signale avec la couleur de statut « Urgent », quel que soit le pôle concerné. À l'inverse, un bouton rouge de suppression garde son texte blanc : ce rouge signale un danger et ne désigne aucun pôle.
Deux polices, hébergées par le cabinet
Une police pour les titres, une autre pour le texte. Les fichiers sont servis par le cabinet, sans appel à un service extérieur.
Unbounded
Aa
Police variable, de la graisse 200 à la graisse 900. Titres de page, de section et de carte.
Zalando Sans
Aa
Deux graisses, 400 et 700. Texte courant, libellés, tableaux et formulaires.
-
Titres en Unbounded, texte en Zalando Sans
Jamais l'inverse. La hiérarchie d'un écran se lit au premier regard, sur tous les postes.
-
Hébergées par le cabinet
Les fichiers de police sont servis avec l'outil lui-même : aucun appel à un service extérieur, aucune dépendance aux polices installées sur le poste.
-
Un repli prévu
Si une police ne se charge pas, une police de repli prend le relais et le texte reste lisible. Un document imprimé ou exporté embarque ses propres polices.
-
Les noms en capitales
Raison sociale et nom de famille toujours en MAJUSCULES, prénom en casse normale, prénom et nom toujours séparés. Exemples fabriqués : Prénom NOM et [CLIENT].
-
La marque s'écrit CHILAH
En capitales, partout où l'on nomme le cabinet.
Cinq thèmes, un seul jeu de jetons
Chacun choisit son confort de lecture. Toutes les surfaces passent par les mêmes jetons : aucune couleur de surface n'est écrite en dur.
Verre sombre
Un décor marine profond, éclairé de halos bleu roi. La lumière vient du fond, et les panneaux sont en verre sombre.
Verre clair
Du verre dépoli posé sur un fond bleuté lumineux, du #e8f0ff au #cfe0ff.
Verre neutre
Une variante froide et désaturée, en gris anthracite, du #2a2e35 au #0c0d10.
Sombre classique
Fond #0a0f1a, cartes opaques #0c1220, aucun flou. Une porte de sortie pour les écrans denses.
Clair classique
Fond #f7faff, cartes blanches, barre latérale #0d2966, aucun flou.
-
Un curseur de transparence
Par personneDans les thèmes en verre, chacun règle la transparence de 0, opaque, à 1, verre complet, qui est le réglage par défaut. Le choix est mémorisé sur son compte.
-
Le système a le dernier mot
AccessibilitéQuand le réglage système « réduire la transparence » est actif, le curseur est forcé à 0 et le flou disparaît, quel que soit le choix de la personne.
-
L'impression ignore le thème
DocumentsUn document imprimé ou exporté garde toujours ses couleurs fixes, sur fond blanc. Sans cette règle, qui travaille en thème sombre imprimerait du texte blanc sur du papier blanc.
Un mouvement vif et sobre
Toutes les durées et toutes les courbes viennent d'un seul jeu de jetons. Aucun écran n'écrit sa propre valeur.
Durées
| Jeton | Durée | Usage |
|---|---|---|
| instantané | 0 ms | Neutralisation complète, quand le système demande de réduire les animations. |
| rapide | 120 ms | Survol, focus, appui. |
| base | 200 ms | Défaut de l'interface : notifications, infobulles, accordéons. |
| lent | 320 ms | Panneaux, tiroirs, fenêtres. |
| plus lent | 480 ms | Entrées de page, séquences orchestrées. |
| ambiance | 800 ms | Mouvements de fond, filigrane du picto, dégradés. |
Courbes
| Jeton | Valeur | Usage |
|---|---|---|
| standard | (0.2, 0, 0, 1) | Courbe par défaut. |
| entrée | (0, 0, 0, 1) | Apparition d'un élément : décélération franche. |
| sortie | (0.3, 0, 1, 1) | Disparition d'un élément : accélération. |
| accentuée | (0.2, 0, 0, 1.2) | Mise en avant d'une action principale : léger dépassement contrôlé. |
-
Une interaction dure de 120 à 320 ms
Assez pour suivre le geste, jamais assez pour faire attendre.
-
Une cascade s'arrête à 12 lignes
Au-delà, les lignes apparaissent d'un coup : on ne fait jamais attendre sur une longue liste.
-
Le mouvement veut dire quelque chose
Vers le haut, un contenu nouveau. De côté, une notification.
-
« Réduire les animations » est respecté partout
Le réglage du système est appliqué une fois pour tout l'outil, sans dépendre de chaque écran. Les fonds animés ne bougent que si le système l'autorise.
Démonstration
Chaque bouton fait glisser la pastille avec sa courbe. La démonstration dure 480 ms, le jeton « plus lent », pour bien voir la différence.
Démonstration désactivée : votre système demande de réduire les animations.
Les briques communes
Chaque élément récurrent existe une seule fois, et tous les écrans l'utilisent. Une amélioration profite partout d'un coup.
Coquille de navigation
Le menu par pôle et la barre du haut sur tous les écrans, même sur « accès non accordé », « introuvable » ou « chargement ».
Tableau de référence
Tri par colonne, en-tête qui reste visible au défilement, ligne qui s'ouvre au clavier, case de sélection, découpage en pages de 10, 20 ou 50 lignes à la demande.
Barre de sélection
Elle apparaît dès qu'une ligne est cochée : compteur, « Tout désélectionner », actions groupées et export CSV de la sélection, protégé contre les formules piégées.
Recherche
Insensible aux majuscules et aux accents, elle cherche dans plusieurs champs à la fois. Dès trois chiffres, elle passe aux identifiants : SIREN, SIRET, téléphone, département.
Avatar
La photo, sinon les initiales sur un dégradé qui va de la couleur du pôle au bleu #3d5a99, en encre blanche d'au moins 3:1. Une adresse e-mail ne fabrique jamais d'initiales : sans nom, une silhouette.
Initiales fabriquées pour l'exemple. Finance est le cas le plus serré : 3,25:1 au milieu du dégradé.
Icônes
Un trait de 1,5 px sur une grille de 24×24, dans la couleur du texte. Un emoji reste du contenu, une réaction ou une illustration, jamais une commande.
État vide
Le picto CHILAH en filigrane, un titre, puis les actions utiles : un écran vide dit quoi faire ensuite. En cas d'erreur, une variante calme, jamais alarmante.
Pastille « vue client »
Quand une liste est recentrée sur un seul client, une pastille bleu roi le rappelle au-dessus des filtres. Un clic sur la croix rend la liste complète.
Logo
Le mot-symbole et le picto, dessinés en vectoriel et d'une seule couleur qui suit le fond : blanc, encre #071118 ou bleu roi #1e61f4. Nets à toute taille.