# Que mettre dans un kit de marque et comment le garder rangé

[Canonical HTML page](https://gradiently.design/fr/guide/brand-kit)

Le guide de style dit quoi faire. Le kit de marque, c’est ce que l’on utilise vraiment. Soignez fichiers, formats et dossiers, et chacun crée fidèlement à la marque sans rien demander.

## The short version

- 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é.

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](https://gradiently.design/fr/guide/brand-style-guide) 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 |

Sept éléments. La plupart des kits ont les trois premiers ; les trois suivants sont ceux d’où vient vraiment la cohérence.

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 |

Au minimum : SVG et PNG transparent du logo principal, plus des versions monochromes blanche et noire pour les photos et les dégradés.

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é](https://gradiently.design/fr/guide/logo-on-gradient-background) explique les solutions.

## Couleurs, polices et le reste de l’essentiel

- Bleu nuit: #0e1424
- Farine: #f3e6d0
- Lueur du four: #e0823d
- Croûte: #6b4a2f

Dans un kit, les couleurs ont besoin de noms autant que de codes. On retient « lueur du four » ; personne ne retient #e0823d.

```css
: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%);
}
```

Ajoutez un fichier de couleurs au kit pour la personne qui construit votre site. Cela évite une série de devinettes à partir de captures d’écran.

Pour les polices, notez d’où vient chacune et ce que sa licence autorise. Beaucoup de bonnes polices sont gratuites sur [Google Fonts](https://fonts.google.com) ; les polices commerciales exigent souvent une licence par personne ou par site, alors écrivez-le. [Comment choisir des polices de marque](https://gradiently.design/fr/guide/brand-fonts) 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

Six tailles qui couvrent la plupart des petites marques. Rendez l’arrière-plan pour chaque forme au lieu de rogner une seule image.

## Une structure de dossiers de kit de marque qui reste rangée

```text
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)
```

Des dossiers numérotés gardent l’ordre, un seul fichier « à lire » se place en tête, et les anciens fichiers partent aux archives au lieu de traîner à côté des nouveaux.

### 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](https://gradiently.design/fr/guide/brand-consistency) 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](https://gradiently.design/fr/guide/brand-kit-setup) vous guide pas à pas.

## FAQ

### 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.