L’essentiel en bref
- Un kit de marque est l’ensemble de fichiers prêts à l’emploi qui permet à chacun de créer fidèlement à la marque : logos, codes couleur, polices, arrière-plans, modèles, images validées et guide de style.
- Les logos doivent figurer dans le kit en SVG pour les écrans, en PNG transparent pour les outils du quotidien, et en versions monochromes noire et blanche.
- Les codes couleur doivent apparaître dans toutes les notations utiles, en général hex et RVB pour les écrans et CMJN pour l’impression.
- Les arrière-plans et les modèles sont les éléments les plus utilisés d’un kit de marque, et les plus souvent oubliés.
- Un kit de marque reste rangé s’il a un seul emplacement, un seul responsable, des noms de fichiers clairs et un dossier d’archives pour tout ce qui est retiré.
Sur cette page
Un kit de marque est l’ensemble des fichiers prêts à l’emploi dont chacun a besoin pour créer quelque chose de fidèle à la marque : fichiers de logo, codes couleur, polices, arrière-plans, modèles, images validées et un court guide de style. Là où le guide de style de marque explique les règles, le kit fournit le matériel. Un bon kit permet à un freelance, à un nouveau collègue ou à un assistant IA de se mettre au travail en quelques minutes, sans vous poser la moindre question.
La liste de contrôle du kit de marque
| Élément | À inclure | Pourquoi c’est important |
|---|---|---|
| Logo | SVG, PNG transparent, versions monochromes noire et blanche, version d’avatar carrée | Chaque outil et chaque fond demandent un fichier différent |
| Couleurs | Noms, codes hex, RVB et CMJN, avec le rôle de chaque couleur | Évite que l’on prélève des couleurs sur des captures d’écran |
| Polices | Noms des polices avec liens de téléchargement ou fichiers, et notes de licence | Évite les polices de substitution qui changent toute l’ambiance |
| Arrière-plans | Arrière-plan signature aux tailles courantes, code CSS, couleur unie de secours | Occupe la plus grande surface de la plupart des designs |
| Modèles | Vos posts, stories, diapositives et en-têtes d’e-mail les plus courants | Le moyen le plus rapide de rester cohérent |
| Images | Photos, illustrations ou jeux d’icônes validés | Empêche les images de banque d’images de s’infiltrer |
| Guide de style | Les règles d’une page, en PDF ou en lien | Explique quand utiliser chaque fichier |
Il est utile de penser à qui ouvre le kit et à ce que chacun cherche en premier :
- Un community manager veut des modèles et des arrière-plans aux bonnes tailles
- Un développeur web veut le logo SVG, les codes couleur en CSS et les sources des polices
- Un imprimeur veut le logo pour l’impression, les valeurs CMJN et les éventuelles couleurs d’accompagnement
- Un nouveau collègue veut le guide d’une page et un bon exemple de chaque format
- Un assistant IA veut les règles en texte brut et les couleurs sous forme de codes
Fichiers de logo : quels formats faut-il
Un logo, plusieurs fichiers. Chaque format résout un problème différent, et le mauvais format est la cause habituelle des logos flous, encadrés ou mal colorés.
| Format | À utiliser pour | À surveiller |
|---|---|---|
| SVG | Sites web, applications et tout ce qui change d’échelle | Certains outils bureautiques et sociaux ne l’acceptent pas |
| PNG, transparent | Diapositives, documents, outils sociaux, e-mail | Exportez en grand, par exemple 2 000 px de large, pour qu’il reste net |
| PDF ou EPS | Impression, signalétique et produits dérivés | À envoyer aux imprimeurs, pas aux réseaux sociaux |
| JPEG | Presque jamais pour des logos | Pas de transparence : il arrive dans une boîte blanche |
Ajoutez une version qui fonctionne aussi sur votre arrière-plan signature. Un logo qui disparaît sur votre propre dégradé est un problème courant et évitable ; placer un logo sur un dégradé explique les solutions.
Couleurs, polices et le reste de l’essentiel
:root {
--night-blue: #0e1424; /* rgb(14 20 36) grounds, 60% */
--flour: #f3e6d0; /* rgb(243 230 208) text and panels, 30% */
--oven-glow: #e0823d; /* rgb(224 130 61) accents only, 10% */
--crust: #6b4a2f; /* rgb(107 74 47) support */
/* Signature background, with the flat fallback first */
--ground: #0e1424;
--ground-gradient: radial-gradient(90% 70% at 50% 110%, #e0823d 0%, #6b4a2f 25%, #1b2238 55%, #0e1424 100%);
}Pour les polices, notez d’où vient chacune et ce que sa licence autorise. Beaucoup de bonnes polices sont gratuites sur Google Fonts ; les polices commerciales exigent souvent une licence par personne ou par site, alors écrivez-le. Comment choisir des polices de marque aide pour le choix lui-même.
Arrière-plans et modèles : les fichiers les plus utilisés
Les logos attirent l’attention, mais ce sont les arrière-plans et les modèles que l’on utilise. Préparez votre arrière-plan signature aux tailles que vous publiez le plus, pour que personne n’étire une image carrée en bannière. Puis construisez les modèles dessus.
Post 4:5
1080 × 1350
Story 9:16
1080 × 1920
Diapositive 16:9
1920 × 1080
Aperçu de lien
1200 × 630
En-tête d’e-mail
1200 × 600
Bannière LinkedIn
1584 × 396
Une structure de dossiers de kit de marque qui reste rangée
brand-kit/
00-read-me-first.pdf (the one-page style guide)
01-logo/
cornerloaf-logo-primary.svg
cornerloaf-logo-primary.png
cornerloaf-logo-white.png
cornerloaf-logo-black.png
cornerloaf-avatar-square.png
print/cornerloaf-logo-primary.pdf
02-colour/
colours.css
colours.pdf (hex, RGB, CMYK, names, jobs)
03-type/
fonts.txt (names, links, licence notes)
04-backgrounds/
ground-1080x1350.png
ground-1080x1920.png
ground-1920x1080.png
05-templates/
06-imagery/
_archive/ (retired files, never deleted)Kit désordonné
- logo-final-v3-NEW-utiliser-celui-ci.png
- Cinq copies du kit sur différents disques
- Anciennes et nouvelles couleurs côte à côte
- Polices nommées mais sans lien
Kit rangé
- brand-logo-white.png, nommé d’après ce qu’il est
- Un seul emplacement, relié depuis partout ailleurs
- Fichiers retirés déplacés dans _archive
- Chaque police avec sa source et sa licence
Comment garder un kit de marque à jour
- 1
Un seul emplacement, un seul responsable
Gardez une seule copie de référence et désignez une personne qui peut la modifier. Tous les autres y accèdent par lien au lieu de télécharger des copies.
- 2
Nommez les fichiers d’après ce qu’ils sont
Marque, élément, variante, format. Jamais « final » ni « nouveau » : cela cesse d’être vrai la semaine suivante.
- 3
Archivez, ne supprimez pas
Quand un élément est retiré, déplacez-le dans un dossier d’archives. Des anciens fichiers à côté des nouveaux, c’est ainsi que les anciennes couleurs reviennent.
- 4
Relisez après chaque changement
Nouveau modèle, nouvelle couleur, nouvelle version du logo : mettez le kit à jour le jour même, puis le guide de style. Voyez la cohérence de marque pour comprendre pourquoi la dérive commence ici.
Gradiently garde un kit de marque dans le Studio, avec vos logos, couleurs et polices à un clic de chaque design, et le Designer l’applique quand il crée ou modifie un travail. Si vous gérez plusieurs marques, chacune a son propre kit et ses propres Marks. Configurer votre kit de marque dans Gradiently vous guide pas à pas.
Les questions qu’on nous pose
Qu’est-ce qu’un kit de marque ?
Un kit de marque est un ensemble de fichiers de marque prêts à l’emploi : logos, codes couleur, polices, arrière-plans, modèles, images validées et un court guide de style.
Quels fichiers de logo faut-il dans un kit de marque ?
Un SVG et un PNG transparent du logo principal, des versions monochromes blanche et noire, une version d’avatar carrée, et un PDF ou EPS pour l’impression.
Quelle différence entre un kit de marque et un guide de style ?
Le guide de style, ce sont les règles ; le kit de marque, ce sont les fichiers. Le kit doit inclure le guide, et le guide doit indiquer où se trouve le kit.
Comment partager un kit de marque avec un freelance ?
Partagez un lien vers l’unique dossier de référence, avec le guide de style en tête. Évitez d’envoyer des copies, qui deviennent vite obsolètes.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
