Une identité sans cadre commun
Matrice est un institut d'innovation qui mêle sciences sociales, recherche et prospective pour accompagner la transformation des métiers et des territoires.
Avec la croissance de l'équipe, les supports se multipliaient sans référence partagée : plusieurs versions du logo en circulation, des couleurs choisies au cas par cas, des présentations et des documents construits chacun à leur manière.
L'objectif était de doter Matrice d'une charte complète et d'un design system, et surtout de les rendre faciles à utiliser au quotidien par des collaborateurs qui ne sont pas designers.
Rendre la marque accessible à tous
Une charte en PDF finit souvent oubliée dans un dossier partagé. Il fallait à la fois :
Formaliser une identité solide, présentable à la direction et aux partenaires
Permettre à chaque collaborateur de retrouver un logo, une couleur ou un template en quelques secondes
Poser des fondations réutilisables pour les futurs produits numériques de Matrice
Garantir la cohérence sans dépendre d'un designer pour chaque support
La réponse : une plateforme web interactive, où chaque règle s'accompagne de l'outil qui permet de l'appliquer.
Avant toute question visuelle, nous avons formalisé ce que la marque est, et ce qu'elle n'est pas :
Une vision et un positionnement
Cinq traits de personnalité, chacun mis en regard de sa dérive à éviter
Un univers conceptuel autour du nom, de l'hexagone et de la trame
Les quatre terrains d'action de l'institut
Cette fondation guide ensuite tous les choix, jusqu'au ton employé dans les messages.
Un logo, trois déclinaisons, des règles claires
Le logo existe en version horizontale et verticale, en bleu nuit, en blanc et en dégradé. Chaque déclinaison se télécharge directement en SVG ou en PNG.
Les règles d'utilisation sont montrées plutôt que décrites : bons usages, erreurs fréquentes (déformation, ombre, couleur modifiée, fond chargé), zone de protection et tailles minimales en pixels et en millimètres.
Couleurs, typographies et imagerie
La palette repose sur un bleu nuit principal et dix teintes secondaires, chacune déclinée en quatre nuances. Un clic sur une couleur copie son code. Le dégradé de marque est réservé à quelques usages pour garder sa force.
Trois typographies, trois rôles
Space Grotesk pour les titres et l'identité, IBM Plex Sans pour le texte courant, IBM Plex Serif pour les citations et les accroches.
Iconographie et portraits
La bibliothèque d'icônes Lucide est intégrée en entier : recherche en français et en anglais, choix de l'épaisseur de trait, export SVG ou PNG. Les portraits de l'équipe ont été harmonisés en deux formats, hexagonal et rectangulaire.
Des fondations pour les interfaces
Au-delà de la marque, la charte pose les bases des futurs produits numériques de Matrice :
Une échelle typographique de dix tailles, de 64 à 10 px, avec ses valeurs mobiles
Une échelle d'espacement sur une base de 4 px et quatre arrondis
Des grilles communes au web, au document A4 et à la présentation
Des états d'interaction et des règles de motion
L'ensemble des valeurs exporté en tokens CSS
Chaque page est interactive : on bascule entre desktop et mobile, on sélectionne une valeur pour la voir à taille réelle, on copie un style en un clic.
Des outils plutôt que des règles
Pour que la charte soit réellement utilisée, chaque règle débouche sur une action :
Un générateur de signature e-mail : chacun saisit ses informations et colle sa signature dans Gmail
Des templates prêts à l'emploi : présentation, fond de visio, papier à en-tête, couverture de rapport
Un kit complet téléchargeable en un clic : logos, palette, polices, motifs et portraits
Des exemples de messages et des règles d'écriture pour le ton de la marque
