> For the complete documentation index, see [llms.txt](https://docs.airops.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.airops.com/docs/fr/contexte/brand-kit/visual-guidelines.md). # Consignes visuelles Définissez des règles visuelles et des modèles de cas d'utilisation dans votre Brand Kit Les directives visuelles structurent les couleurs, la typographie, les logos et les règles visuelles de votre marque afin que les éléments générés par l’IA restent conformes à la marque. Avec le Brand Kit MCP, vous pouvez configurer votre identité visuelle (par exemple, la renseigner via Claude) et la récupérer tout aussi facilement, afin que chaque résultat soit fondé non seulement sur ce qu’il faut dire, mais aussi sur la manière de le présenter. L’onglet Directives visuelles est organisé en **Logos**, **Couleurs**, **Typographie**, et des **modèles de cas d’usage**. Les modèles regroupent les instructions et les exemples pour un type d’élément donné, au lieu de stocker chaque image de référence dans une seule collection à plat. *** ## Cas d’usage Les directives visuelles peuvent être lues et écrites via MCP, de sorte qu’ n’importe quel outil d’IA connecté puisse produire des visuels conformes à la marque. Voici quelques exemples. **Générez des rapports et des one-pagers conformes à la marque.** Un outil d’IA connecté via MCP récupère vos couleurs exactes, vos polices, votre échelle typographique et vos règles de logo, puis les applique lors de la génération d’un rapport, d’un one-pager ou d’un résumé de données. Les rapports de performance AEO, par exemple, peuvent être entièrement brandés dès le départ. **Produisez des visualisations de données avec la palette de votre marque.** Lorsque la palette de couleurs de vos graphiques, les règles d’utilisation des couleurs et le modèle de visualisation de données sont stockés dans les directives visuelles, un agent d’IA peut les récupérer pour créer des graphiques, diagrammes et tableaux de bord conformes à votre marque. Remplissages unis, couleurs d’accent spécifiques, polices correctes pour les étiquettes d’axe. **Créez des présentations qui ressemblent à votre marque.** Claude ou un autre outil connecté à MCP peut récupérer votre échelle typographique complète, les variantes de logo et les palettes de couleurs pour générer des diapositives qui respectent votre identité visuelle. **Appliquez la bonne direction créative à chaque élément.** Une image d’accroche peut nécessiter une création éditoriale expressive, tandis qu’une carte de citation peut spécifier une mise en page sobre et un emplacement précis du logo. Chaque cas d’usage comporte ses propres instructions et exemples, de sorte que les consignes pour un type d’élément ne soient pas appliquées sans distinction à un autre. *** ## Comment configurer les directives visuelles Au lieu de saisir manuellement chaque couleur, police et règle, **vous pouvez utiliser Claude via MCP pour lire vos directives de marque existantes**, qu’il s’agisse d’un PDF, d’un deck de présentation ou de tout autre document, et écrire directement les champs structurés dans votre Brand Kit. C’est la façon la plus rapide de renseigner les directives visuelles. Vous pouvez également ajouter des champs manuellement via l’onglet Directives visuelles : 1. Accédez à l’ **onglet Directives visuelles** dans votre Brand Kit 2. Sous **Logos**, ajoutez des variantes avec des fichiers de logo, des couleurs d’arrière-plan et des instructions d’utilisation. Définissez les tailles et les règles d’utilisation du logo. 3. Sous **Couleurs**, créez des palettes avec des groupes nommés et des couleurs individuelles. Ajoutez des règles d’utilisation des couleurs. 4. Sous **Typographie**, enregistrez des polices avec leur contexte d’utilisation et des téléversements de fichiers de police. Définissez votre échelle typographique. Ajoutez des règles d’utilisation de la typographie. 5. Créez des modèles de cas d’usage tels que **Image d’accroche**, **Visualisation de données**, et **Carte de citation**. Ajoutez des instructions et des exemples de référence à chaque modèle. 6. Enregistrez vos modifications > **Conseil**: Vous pouvez renseigner les directives visuelles via MCP à partir de vos directives de marque ou de vos ressources visuelles. [En savoir plus sur le Brand Kit MCP →](https://docs.airops.com/mcp/tools) *** ## Exemple Une entreprise pourrait configurer ses directives visuelles comme ceci : **Logos :** Quatre variantes pour différentes surfaces (clair, sombre, vert forêt, vert néon). Plusieurs niveaux de taille, du grand (sections d’accroche) au minimum (pieds de page et favicons). Règles couvrant l’espace de protection, l’absence d’étirement et l’association avec l’arrière-plan. **Couleurs :** Cinq palettes couvrant la marque principale, la hiérarchie du texte, les traits, le mode sombre et une palette dédiée aux graphiques. Règles imposant des angles vifs partout et des remplissages unis pour les graphiques. **Typographie :** Trois polices avec fichiers hébergés. Une sérif pour les titres, une sans-serif pour le corps, une monospace pour les libellés. Une échelle typographique complète de Display jusqu’à Caption. Règles limitant la sérif aux titres et exigeant une monospace en majuscules pour les libellés. **Modèles de cas d’usage :** Un modèle d’image d’accroche avec des consignes d’illustration éditoriale et des références de page d’accueil ; un modèle de visualisation de données avec des exemples de graphiques et des règles de mise en page ; et un modèle de carte de citation avec des consignes sur la typographie, l’attribution et le placement du logo. *** ## Détails de la section ### Logos **Variantes de logo** Définissez différentes versions de votre logo pour différents contextes d’arrière-plan. | Champ | Description | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Nom** | Un nom descriptif pour cette variante (par ex. « Couleur sur blanc », « Blanc inversé sur noir quasi absolu »). | | **Couleur d’arrière-plan** | La couleur hexadécimale pour laquelle cette variante est conçue (par ex. `#ffffff`, `#002910`). | | **Instructions d’utilisation** | Quand et comment utiliser cette variante. Incluez les règles d’espace de protection, les restrictions et la logique d’association avec l’arrière-plan. | | **Fichier du logo** | Téléversez l’image de votre logo (SVG, PNG, JPG, GIF ou WebP). | **Tailles du logo** Définissez les tailles de rendu autorisées afin que les outils d’IA n’affichent jamais votre logo trop petit ou trop grand. | Champ | Description | | ------------------------------ | ---------------------------------------------------------------------------------------- | | **Nom** | Un libellé pour ce niveau de taille (par ex. « Grand », « Minimum »). | | **Largeur** | Largeur en pixels (facultatif si la hauteur est définie). | | **Hauteur** | Hauteur en pixels (facultatif si la largeur est définie). | | **Instructions d’utilisation** | Où cette taille doit être utilisée (par ex. « sections d’accroche », « pieds de page »). | **Règles d’utilisation du logo** Règles libres régissant le traitement du logo. | Champ | Description | | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Règle** | Le texte de la règle (par ex. « L’espace de protection minimum équivaut à la hauteur du A sur tous les côtés », « Ne jamais étirer, faire pivoter ni recolorer le logo »). | *** ### Couleurs **Palettes de couleurs** Regroupez les couleurs de votre marque en palettes nommées. Chaque palette contient des couleurs individuelles avec des valeurs hexadécimales et des instructions d’utilisation. Vous pouvez créer plusieurs palettes pour séparer les usages, par exemple : Principal, Texte, Traits, Mode sombre et Graphiques. | Champ | Description | | ------------------------------ | --------------------------------------------------------------------------------------------------------------------- | | **Nom de la palette** | Un nom pour ce groupe de couleurs (par ex. « Principal », « Graphiques »). | | **Nom de la couleur** | Un nom descriptif pour chaque couleur (par ex. « Vert d’interaction », « Texte secondaire »). | | **Valeur de couleur** | La valeur hexadécimale (par ex. `#00ff64`). | | **Instructions d’utilisation** | Quand et où utiliser cette couleur (par ex. « états de survol et accents interactifs », « légendes et métadonnées »). | **Règles d’utilisation des couleurs** Règles libres régissant l’utilisation des couleurs. | Champ | Description | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Règle** | Le texte de la règle (par ex. « Toutes les grandes surfaces doivent utiliser le vert foncé #002910 », « Uniquement des angles vifs, border-radius: 0 », « Visualisation de données : uniquement des remplissages unis, pas de dégradés »). | *** ### Typographie **Polices** Enregistrez les polices de caractères utilisées par votre marque. | Champ | Description | | ------------------------------ | --------------------------------------------------------------------------------------------------------------------- | | **Nom** | Le nom de la police exactement tel qu’il doit être référencé (par ex. « Saans », « Serrif VF »). | | **Instructions d’utilisation** | Les contextes auxquels cette police s’applique, les polices de secours et les substituts spécifiques à la plateforme. | | **Lien Google Fonts** | Une URL Google Fonts, si la police y est hébergée. | | **Fichier de police** | Téléversez un fichier de police personnalisé (par ex. .woff2). Les agents peuvent les charger via @font-face. | **Échelle typographique** Définissez votre échelle typographique complète en associant à une police des configurations précises de taille, de graisse et d’interligne. | Champ | Description | | ------------------------------ | ---------------------------------------------------------------------------------------------- | | **Police** | À quelle police enregistrée appartient cette taille de texte. | | **Nom** | Un libellé pour cette étape de l’échelle (par ex. « Display », « H1 », « Body », « Caption »). | | **Graisse** | Graisse de police (par ex. « 400 », « 600 »). | | **Taille** | Taille de police en pixels. | | **Interligne** | Interligne en pixels. | | **Instructions d’utilisation** | Où cette taille de texte doit être appliquée. | **Règles d’utilisation de la typographie** Règles libres régissant le traitement typographique. | Champ | Description | | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Règle** | Le texte de la règle (par ex. « Serrif VF est réservé aux grands titres éditoriaux », « Les libellés monospace doivent toujours être en majuscules, 11–12 px, graisse 500 »). | *** ### Modèles de cas d’usage Créez un modèle distinct pour chaque type d’élément visuel produit par votre équipe. Chaque cas d’usage comporte ses propres instructions et exemples, afin qu’un outil d’IA puisse récupérer des consignes correspondant au résultat demandé au lieu d’interpréter un amas plat d’images sans rapport. Les modèles courants incluent : * **Image d’accroche :** Composition, rapport hauteur/largeur, traitement du sujet, style d’illustration ou de photographie, et exemples d’images d’accroche réussies. * **Visualisation de données :** Palette de graphiques, étiquetage, traitement de la grille et des axes, style d’annotation, et exemples de graphiques conformes à la marque. * **Carte de citation :** Hiérarchie typographique, emplacement de l’attribution, traitement de l’arrière-plan, emplacement du logo, et exemples de cartes sociales approuvées. Ajoutez d’autres cas d’usage pour les éléments créés par votre équipe, comme des captures d’écran produit, des couvertures de rapport ou des diapositives de titre de présentation. Pour chacun, fournissez : * **Instructions** qui décrivent la composition souhaitée, le style, les éléments requis et les motifs à éviter. * **Exemples** qui montrent le cas d’usage appliqué avec succès et fournissent à un outil d’IA une référence visuelle concrète. Utilisez les sections structurées Logos, Couleurs et Typographie pour les règles qui s’appliquent à tous les éléments. Concentrez les instructions du modèle sur ce qui est spécifique à ce cas d’usage visuel. *** ## FAQ **Comment accéder aux directives visuelles dans mes outils d’IA ?** Les directives visuelles sont disponibles via le Brand Kit MCP. Connectez-le à Claude, Cursor ou tout outil compatible MCP pour lire et écrire votre identité visuelle par programmation. Les variables Workflow Liquid ne sont pas encore disponibles pour les champs des directives visuelles. **Puis-je renseigner les directives visuelles à l’aide de l’IA ?** Oui. Avec le Brand Kit MCP, vous pouvez demander à Claude de lire votre PDF de directives de marque existant et d’écrire directement les champs structurés dans votre Brand Kit. **Quels cas d’usage cela débloque-t-il ?** Tout outil d’IA connecté via MCP peut récupérer votre identité visuelle pour produire des rapports, des présentations, des one-pagers et des visualisations de données conformes à la marque, avec vos couleurs, polices et règles exactes. **Quelle est la différence entre les instructions de cas d’usage et les autres consignes structurées ?** Les instructions d’un modèle décrivent comment produire un type d’élément, comme une Image d’accroche ou une Carte de citation. Les instructions au niveau du champ expliquent quand utiliser un logo, une couleur ou une police particulière, tandis que les règles d’utilisation par catégorie définissent des garde-fous plus larges qui s’appliquent à tous les éléments. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.airops.com/docs/fr/contexte/brand-kit/visual-guidelines.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.