Référentiel visuel
Charte graphique ISOmase
La source de vérité visuelle de ISOmase : marque, couleurs, typographies et composants d’interface. Ce qui est écrit ici s’applique partout, du site à l’application.
L'esprit
Six règles non négociables. Tout écart se corrige, il ne se discute pas.
01
Aération d'abord
Fond non-blanc, cartes blanches, marges généreuses. Quand un écran semble chargé, retirer - jamais tasser.
02
La couleur seule ne dit rien
Tout statut ou domaine = couleur + icône ou texte. 8 % des hommes sont daltoniens rouge-vert.
03
Un seul bleu d'action
Le bleu primaire signale ce qui est cliquable. Le vert valide, il ne déclenche jamais. Un seul bouton primaire par écran.
04
Deux typos, graisses plafonnées
Outfit (titres) + Inter (corps). Jamais au-delà de 600 : l'impact vient de la taille, pas de la graisse.
05
La palette fait loi
Aucune couleur, aucun rayon, aucune ombre en dehors de ceux définis ici. Un besoin non couvert enrichit la charte, il ne s'improvise pas dans un coin.
06
Le mouvement sert la lecture
150-300 ms, easing doux, jamais bloquant. Une animation qui se remarque est déjà trop longue.
Logo
Badge blanc, barres bleu/vert égales (isos = égal, les 3 domaines SSE) en escalier ascendant : l'amélioration continue, cœur du MASE. La version fond blanc est toujours privilégiée, sur tous les supports.
Couleur - défaut
Fonds clairs. Fichiers : brand/logo-color.svg, icon-color.svg
Monochrome
Contextes N&B, tampons, fax d’audit. Fichiers : logo-dark.svg, icon-dark.svg
Sur fond coloré
Sidebar app, bande CTA, photos. Fichiers : logo-light.svg, icon-light.svg
- · Zone de protection : au moins la moitié de la hauteur de l’icône.
- · Ne jamais recolorer, déformer, incliner ni ombrer.
- · Le nom s’écrit d’une seule façon, sans variante ni abréviation.
- · À l’écran, le logo est composé en vraie typographie : net à toutes les tailles, jamais une image redimensionnée.
Couleurs
Deux couleurs de marque, pas une de plus : le bleu agit (tout ce qui se clique), le vert valide et célèbre (jamais cliquable). Le reste est neutre et chaud. Mode clair uniquement.
Marque
primary-50
#EEF4FF
Fonds actifs, tint info
primary-100
#DCE7FD
Survols clairs, bordures douces
primary-300
#93B3F5
Décor, dataviz secondaire
primary-500
#2F5FE0
LE bleu - boutons, liens, focus, bande CTA
primary-600
#2348C7
Survol bouton · surface de la sidebar app
primary-700
#1E3A8A
Pressé, texte accentué sur fond clair
Neutres & surfaces
app
#FAFAF9
Fond général des pages (stone chaud)
surface
#FFFFFF
Cartes, champs, modales
surface-hover
#F5F5F4
Survol de surface ou de ligne
line
#E7E5E4
Bordures, séparateurs
content
#1C1917
Titres et corps de texte
content-muted
#57534E
Sous-titres, légendes
brand-green
#10B981
L'autre couleur de marque - logo, accents, KPI, dataviz. Jamais une action
Sémantiques
Chaque famille en trois rôles : solide (pastilles, icônes), soft (fonds de bandeaux), ink (texte sur fond clair).
Succès
Alerte
Danger
Info
Domaines SSE
Constantes dans toute l’app - un animateur doit reconnaître un domaine avant même de lire.
Sécurité
Santé
Environnement
Dataviz
Une série rattachée à un domaine SSE porte la couleur de son domaine, jamais celle de son rang : dans un graphique, la série « Animations Sécurité » est la barre bleu ciel de son badge. Les autres séries puisent ici, dans l’ordre, en écartant les teintes voisines d’un domaine présent.
Typographie
Outfit pour les titres, Inter pour tout le reste. Graisse maximale : 600 - l'impact vient de la taille.
Display XL
Outfit 600 · 60 px (mobile 36) · tracking -2 %
Hero du site vitrine uniquement
Aa
Titre de section
Outfit 600 · 30 px
Sections marketing, moments forts
Trois domaines, un système
Titre d'écran (application)
Outfit 600 · 24 px
Le titre en tête de chaque écran de l'application
Plan d'action
Sous-section
Outfit 500 · 18 px
En-têtes de carte, sous-sections
Actions en retard
Corps
Inter 400 · 14 px (app) / 16 px (vitrine)
Texte courant
Le plan d'action enregistre toutes les actions : origine, pilote, échéance, avancement.
Label
Inter 500 · 13 px
Labels de champs, boutons, badges
Échéance de réalisation
Chiffres d’indicateurs (TF1, TF2, TG…) : Inter avec tabular-nums pour un alignement stable dans les tableaux.
Iconographie
Une seule bibliothèque, et rien d'autre. L'inventaire ci-dessous est exhaustif : tout glyphe employé quelque part dans le produit y figure une fois, sous le sens qu'il porte. Une icône présente dans deux familles dirait deux choses, donc plus rien.
Une seule bibliothèque
Une seule collection, choisie une fois pour toutes. Aucun jeu d'icônes concurrent, aucun pictogramme chiné : ce qui manque se dessine dans la même grille de 24 × 24 px, au même trait et avec les mêmes coins arrondis.
Trois tailles
16 px dans les boutons, les menus et les lignes ; 20 px en en-tête de carte ou de section ; 12 px dans les pastilles. Épaisseur de trait par défaut, jamais retouchée.
L'icône ne remplace pas le mot
Un statut, c'est couleur + icône + libellé. Une icône seule n'est admise que dans une barre d'outils, et porte alors un intitulé lu par les lecteurs d'écran. Purement décorative, elle leur reste invisible.
Un sens, un glyphe
Deux icônes pour la même action, c'est une hésitation que l'utilisateur paie. Avant d'en ajouter une, chercher ici : la table ci-dessous fait foi.
La couleur reste l'exception
Une icône hérite de la couleur de son texte. Seuls les trois domaines SSE et les icônes des bandeaux sémantiques portent une teinte propre.
Exception IA
Tout contexte IA porte notre étincelle propriétaire, et elle seule. C'est cette exclusivité qui en fait une signature : l'étincelle générique reste libre pour le décor de la vitrine.
Modules
15 icônesUne icône, un module, pour toujours. Ce sont les seules qui n’ont pas le droit de changer : elles sont la mémoire spatiale de l’utilisateur dans la sidebar.
Target
Objectifs & indicateurs
ClipboardList
Plan d’action
MessageSquareWarning
Remontées d’information
Megaphone
Animations SSE
ShieldAlert
DUERP
Siren
Événements
SearchCheck
Audits & visites terrain
FolderOpen
Documents
Scale
Veille réglementaire
Building2
Entreprise, organisation
MessagesSquare
Forum
LayoutDashboard
Tableau de bord, accueil
IdCard
Mon dossier (nav membre)
Briefcase
Cabinet, portefeuille de l’accompagnateur
LifeBuoy
Mode support consenti
Cadre de l’app
10 icônesL’habillage : ce qui entoure les modules et ne parle jamais de métier.
UserRound
Profil, compte
Settings
Paramètres
Lock
Verrouillé par la formule
LogOut
Se déconnecter
LogIn
Se connecter, accès activé
PanelLeft
Replier la sidebar
Home
Retour à l’accueil (vitrine)
Compass
Premiers pas, repères
DoorOpen
Entrée, sortie, départ
ChevronsUpDown
Sélecteur d’organisation
Direction et déplacement
10 icônesLes flèches mènent quelque part, les chevrons ouvrent ou parcourent. Ne jamais échanger les deux.
ArrowRight
Continuer, CTA, lien
ArrowLeft
Revenir en arrière
ArrowUp
Remonter, montée en gamme
ArrowRightLeft
Transférer, rattacher ailleurs
ArrowRightToLine
Envoyer en fin de liste
MoveRight
Avant vers après (risque brut vers résiduel)
ChevronRight
Ouvrir, suivant
ChevronLeft
Précédent
ChevronDown
Dérouler une liste
ChevronUp
Replier
Actions
28 icônesUn verbe, un glyphe. Une action qui existe déjà ne reçoit jamais une seconde icône.
Plus
Créer, ajouter
Pencil
Modifier
PenLine
Signer, rédiger
PencilLine
Corriger une valeur
Trash2
Supprimer
Copy
Copier
CopyPlus
Dupliquer
Save
Enregistrer
Check
Valider, option retenue
X
Fermer, retirer
MoreHorizontal
Menu d’actions d’une ligne
Download
Télécharger
Upload
Téléverser
CloudUpload
Zone de dépôt
Search
Rechercher
SlidersHorizontal
Filtres
RefreshCw
Rafraîchir, relancer
RotateCcw
Réinitialiser
Send
Envoyer
Printer
Imprimer
ExternalLink
Ouvrir hors de l’app
Eye
Afficher
EyeOff
Masquer
Camera
Photo, preuve terrain
Mic
Dicter
MousePointerClick
Geste attendu (aide en ligne)
LayoutGrid
Vue en cartes
Loader2
Chargement en cours
Statuts et alertes
13 icônesJamais seules : toujours accompagnées d’un libellé (règle 02 de l’esprit). Les quatre premières sont celles des bandeaux sémantiques.
CircleCheck
Succès, conformité
TriangleAlert
Alerte, vigilance
OctagonAlert
Danger, retard bloquant
Info
Information neutre
CircleAlert
Erreur de champ
CircleHelp
Aide, non déterminé
OctagonX
Abrogé, invalidé
BadgeCheck
Donnée vérifiée à la source
ShieldCheck
Protégé, certifié
ShieldOff
Accès révoqué
Award
Certification obtenue
Crown
Propriétaire de l’organisation
History
Historique, versions
Temps et échéances
10 icônesLe calendrier porte la date, l’horloge porte la durée. Le MASE vit d’échéances : ces glyphes sont les plus lus de l’app.
CalendarClock
Échéance, date limite
CalendarDays
Sélecteur de date
CalendarCheck
Date tenue
CalendarCheck2
Séance réalisée
CalendarPlus
Programmer
CalendarRange
Période couverte
CalendarX2
Date manquée, annulée
AlarmClockCheck
Rappel honoré
Clock
Horaire, heure
Timer
Temps gagné, durée courte
Domaines SSE
3 icônesLes trois seules icônes autorisées à porter la couleur de leur domaine (bleu ciel, rose, vert). Un animateur doit reconnaître le domaine avant même de lire. La feuille sert aussi de famille de risque « atteinte à l’environnement » au DUERP.
HardHat
Sécurité
HeartPulse
Santé
Leaf
Environnement
Familles de risques (DUERP)
22 icônesUne icône par famille de risque de l’unité de travail, fixée une fois pour toutes. Deux familles empruntent ailleurs : « atteinte à l’environnement » prend la feuille, « autre » prend le point d’interrogation.
Footprints
Chute de plain-pied
ArrowDownToLine
Chute de hauteur (aussi : télécharger)
Truck
Circulation interne
Car
Risque routier
Weight
Manutention manuelle
Forklift
Manutention mécanique
FlaskConical
Risque chimique
Biohazard
Risque biologique
Cog
Machines et outillage
Boxes
Chute d’objets
Volume2
Bruit
Thermometer
Ambiances thermiques
Flame
Incendie et explosion
Zap
Risque électrique
Sun
Ambiances lumineuses
Radiation
Rayonnements
Monitor
Travail sur écran
Handshake
Coactivité (aussi : partenariat, vitrine)
Brain
Risques psychosociaux (6 axes)
Waves
Noyade
Vibrate
Vibrations
UserX
Travail isolé
Documents et GED
24 icônesLe dossier range, le fichier contient. Les glyphes de tableau et de graphique appartiennent aux blocs du studio documentaire.
Folder
Dossier
FolderPlus
Nouveau dossier
FolderInput
Ranger, déplacer
FolderLock
Dossier restreint
FolderSearch
Retrouver un dossier
FileText
Document texte
FilePen
Document en rédaction
FileImage
Image jointe
FileSpreadsheet
Tableur, export
FileSearch
Pièce d’analyse
FileDown
Exporter en PDF
FileUp
Importer un fichier
FileWarning
Document obsolète
Files
Volume documentaire
ScrollText
Procédure, texte long
Paperclip
Pièce jointe
Scissors
Saut de page (atelier A4)
Table2
Insérer un tableau
Rows3
Lignes du tableau
Columns3
Colonnes du tableau
BarChart3
Bloc graphique en barres
LineChart
Bloc graphique en courbe
HardDrive
Quota de stockage
ArchiveRestore
Restaurer depuis la corbeille
Éditeur de texte
11 icônesLa barre d’outils de mise en forme du texte (forum, veille, comptes rendus, studio documentaire). Standards universels : ne rien inventer ici.
Bold
Gras
Italic
Italique
Underline
Souligné
Highlighter
Surligner
List
Liste à puces
ListOrdered
Liste numérotée
AlignLeft
Bloc de description
Link2
Lier, insérer un lien
Undo2
Annuler
Redo2
Rétablir
Eraser
Effacer (signature)
Personnes, RH et invitations
13 icônesLa silhouette pleine désigne des comptes, la silhouette ronde une personne physique. Le glyphe de réseau sert l’organigramme comme l’arbre des causes : dans les deux cas, des liens entre des nœuds.
Users
Membres, participants
UsersRound
Effectif, groupe
UserPlus
Inviter, ajouter
UserMinus
Retirer un membre
UserCheck
Présence confirmée
GraduationCap
Formation, habilitation
HandHeart
Suivi médical
Network
Organigramme, arbre des causes
Spline
Lien hiérarchique
MailPlus
Envoyer une invitation
MailCheck
Email confirmé
MailQuestion
Demande en attente
Objectifs et pilotage
12 icônesPas de smileys, pas de feux tricolores : la tendance se lit sur une flèche, l’état sur une pastille de statut.
Gauge
Niveau, jauge
TrendingUp
Tendance à la hausse
TrendingDown
Tendance à la baisse
Minus
Tendance stable
ListTree
Sous-objectifs
ListPlus
Ajouter un relevé
Pin
Épinglé (tableau de bord, forum)
PinOff
Désépingler
ClipboardCheck
Contrôle réalisé
ClipboardPlus
Action depuis un constat
NotebookPen
Compte rendu d’animation
Wrench
Moyen, intervention technique
Ateliers d’analyse
8 icônesLes outils d’analyse d’événement : Ishikawa, arbre des causes, cinq pourquoi.
Fish
Arête d’Ishikawa (5M)
Circle
Fait de l’arbre des causes
Square
Fait encadré, arrêter
MessageCircleQuestionMark
Cinq pourquoi
Flag
Action corrective posée
BookOpen
Méthode, mode d’emploi
Settings2
Réglages de l’atelier
GitBranch
Ramification, origine d’une action
Forum et retours produit
10 icônesLe forum est ouvert à tous, sans compte : ses icônes doivent rester lisibles pour un visiteur qui n’a jamais ouvert l’application.
MessageSquare
Sujet, message
MessageSquarePlus
Proposer une idée
ThumbsUp
Vote utile
Bell
Notifications
BellRing
Alerte de veille
Lightbulb
Idée, suggestion
Bug
Anomalie signalée
Globe
Contenu public
Dices
Pseudonyme au hasard
Wand2
Avatar généré
Vitrine et offre
15 icônesRegistre plus large : ces glyphes illustrent un bénéfice, ils ne commandent rien. Aucun ne doit fuiter dans l’app.
Rocket
Mise en route, démarrage
Sparkles
Éclat décoratif - jamais l’IA
Gift
Offert, bonus
Coins
Coût, budget
Receipt
Facture, dépense
Ticket
Code partenaire
Calculator
Cotation, calcul
Grid3x3
Matrice de cotation
Layers
Niveaux, empilement
MapPin
Terrain, chantier
Smartphone
Saisie mobile
MonitorPlay
Démonstration
BookMarked
Référentiel MASE
BookOpenCheck
Texte lu, traité
Recycle
Boucle d’amélioration
Glyphes propriétaires
5 glyphesDessinés à la main dans la même grille de 24 × 24 px que les autres (même trait, mêmes coins arrondis, couleur héritée du texte), pour se fondre avec le reste plutôt que d’ajouter une seconde collection.
LogoMark
La marque. Jamais recoloré, jamais déformé.
AiSpark
Toute capacité IA. Exclusif : aucune étincelle générique ne le remplace.
LinkedinIcon
Footer vitrine, profil forum.
FacebookIcon
Footer vitrine, profil forum.
XIcon
Diagonales resserrées, pour ne pas se lire comme une fermeture.
204 icônes et 5 glyphes propriétaires en service. Un besoin non couvert se règle en enrichissant cette page, jamais en piochant au hasard : une icône qui n’a pas de sens partagé n’est qu’un dessin.
Boutons
Un seul bouton primaire par écran. Le danger plein est réservé aux confirmations destructives.
Bandeaux sémantiques
Fond soft + texte ink + icône. Jamais de couleur seule.
Notifications éphémères
Le même langage que les bandeaux, en plus fort : fond soft, texte ink, pastille pleine derrière l'icône. Un succès se lit vert et un échec rouge avant même d'être lu ; l'action prend la couleur du message.
Elles apparaissent en haut de l’écran, au centre, là où le regard est déjà. Un seul geste d’attention à l’arrivée, puis elles s’effacent d’elles-mêmes ; survoler retient, la croix ferme.
- Succès : pastille verte de la marque, texte vert encré, action bleue (le vert ne déclenche jamais).
- Erreur : pastille rouge, action rouge ; reste affichée tant qu’on la survole.
- Alerte : pastille ambre, action ambre encrée.
- Information et appels de séance : pastille bleue, fond bleu pâle.
- IA : l’étincelle remplace la pastille, liseré dégradé bleu et vert ; un échec IA reste un échec ordinaire, sans aurora.
- Annuler, « Plus tard », « Fermer » : bouton de contour, jamais plein.
Statuts
Pastille + libellé, toujours. Une seule et même pastille dans tout le produit : jamais de variante dessinée pour l'occasion.
Champs de formulaire
Labels toujours visibles, erreurs sous le champ, focus bleu bien marqué.
Aide contextuelle en 12 px, sous le champ.
Contrôles de saisie
Listes déroulantes, dates et heures sont dessinées par nos soins. Les contrôles fournis par le navigateur changeaient d'aspect d'un poste à l'autre et échappaient à la charte : cinq contrôles maison les remplacent, à l'identique pour tout le monde.
Listes déroulantes - choix unique
Options groupées + ligne d’aide par option.
La première option ne vaut aucune valeur, et reste choisissable.
Version courte : barres d’outils et lignes de tableau.
L’invite « Choisir… » est une indication en gris, jamais une option grisée en tête de liste. Les options se rangent en familles et peuvent porter une ligne d’aide, visible dans la liste seulement. L’option vide reste sélectionnable - « Non cotée » ci-dessus : on doit toujours pouvoir revenir à « aucune valeur ».
Dates et heures
Facultatif : croix d’effacement à droite.
Requis : pas de croix, la date et l’heure se valident par OK.
Heures et minutes par pas de 5.
Un champ d’apparence ordinaire, la date en toutes lettres, et un calendrier maison au clic : semaine française, zoom mois puis années en cliquant le titre (jamais quarante clics de flèche pour une date de naissance), « Aujourd’hui » signalé par un point bleu et la graisse - jamais par la couleur seule. Un champ facultatif porte une croix de remise à zéro, un champ requis n’en a pas.
Filtres d’une vue liste
Au repos - aucun filtre actif
Avec deux filtres actifs - pastille, valeur et remise à zéro
Au repos, la pastille ne porte que le nom du filtre ; active, elle prend les couleurs de la sélection et affiche la valeur choisie, précédée de son point de statut. « Effacer les filtres » n’apparaît que lorsqu’un filtre est actif, et le bouton principal de la vue reste calé à droite. Le libellé vit dans la pastille : aucun intitulé n’est caché au-dessus.
Sélection multiple longue
Participants à l’animation
2 participants sélectionnés
Une liste encadrée de cases à cocher, qui défile, avec une seconde ligne de contexte. La recherche apparaît d’elle-même au-delà de 7 options (dix ici) et le compteur de pied dit en clair où l’on en est. Une recherche ne décoche rien : ce qui est coché reste retenu, même quand la recherche ne l’affiche plus.
Domaines SSE
Les trois domaines en pastilles cochables : la case disparaît au profit d’une coche animée et du badge du domaine, l’état coché reprend les couleurs de la sélection. C’est la seule forme autorisée : plus de « case à cocher + badge » recopié de formulaire en formulaire.
Formulaires longs
Un formulaire long tient en trois zones : l'en-tête et les actions restent visibles, seul le corps défile. Les erreurs s'affichent sous le champ concerné et disparaissent dès la correction, la saisie n'est jamais perdue. En plusieurs étapes s'y ajoutent une jauge de progression (la seule autorisée à porter le dégradé bleu vers vert) et des pastilles cliquables pour revenir en arrière. Le formulaire ci-dessous est le vrai, à l'échelle 1.
À essayer : choisir un type (l’étape avance toute seule), cliquer « Continuer » avec des champs vides (erreurs par champ + secousse du pied), revenir par les pastilles. Pour voir le cas d’une erreur détectée seulement à la fin: déclarez une situation dangereuse avec une description de 10 à 29 caractères. Elle passe l’étape, mais le contrôle final vous ramène sur l’étape fautive, champ signalé et curseur placé dedans. Tout est simulé : rien n’est envoyé ni enregistré.
Cartes KPI
Un seul indicateur mis en avant par écran, en vert profond : celui qui compte. Les autres restent neutres. Les chiffres sont à chasse fixe, pour que les colonnes s'alignent et qu'un total ne danse pas quand il change.
Causeries réalisées
12/12
Objectif annuel atteint
TF1
8,4
12 derniers mois
Actions en cours
23
dont 2 en retard
Remontées ce mois
17
+5 vs mois dernier
Rayons
Quatre valeurs, pas une de plus.
sm 6 px
Mini-badges, éléments denses
md 8 px
Champs, petits boutons
lg 12 px
Boutons, bandeaux
xl 16 px
Cartes, modales
pill 9999 px
Pastilles de statut
Mouvement
Rapide, doux, discret. Le mouvement guide l'œil, il ne se donne pas en spectacle.
Micro (150 ms)
Survols, pressés, changements de teinte. La sensation de réactivité.
Standard (200 ms)
Menus, tooltips, apparitions de panneaux. L'essentiel des transitions.
Entrée (300-700 ms)
Arrivée d'une page ou d'une section (fade + léger slide). Une fois, jamais en boucle.
Ambiance (36-56 s)
Dérive du fond aurora de la vitrine - la seule boucle autorisée. Vous la voyez vivre derrière cette page.
Piloté par le curseur
Parallaxe de décor sur quelques pixels, en profondeurs opposées (page 404). Amorti à 700 ms : le décor suit avec retard, il ne colle jamais au curseur. Rien ne bouge tant que vous ne bougez pas - ce n'est donc pas une boucle.
Déclenché par une action
Survoler un bouton, ou l'atteindre au clavier, peut animer un élément situé ailleurs sur la page. Sur la page 404, le bouton principal remet en place la marche manquante du logo.