thecatthatflies/brand-identity

Identité de marque

Une identité de marque est un petit ensemble de décisions qui tiennent partout : une idée, un symbole qui la porte, des couleurs et une typographie qui la reflètent, et des règles qui assurent sa cohérence. L'échec courant est la décoration sans idée : un dégradé informe, un sans-serif générique, une palette choisie selon l'humeur, et un logo qui devient illisible en taille de favicon ou en une seule couleur. Cette compétence produit les décisions sous forme de fichiers et les vérifie dans un moteur de rendu réel.

Appliquez les principes hiérarchisés de interface-guidelines (tout le monde peut l'utiliser > il dit la vérité > il dit ce qu'il veut dire > la réponse vient en premier > les erreurs sont surmontables > il reste en place > le possible est visible > la convention > le polissage) partout où l'identité rencontre une interface. Si cette compétence est installée, son script d'audit vérifie la page de charte graphique générée par celle-ci.

Brief

Répondez à ces questions avant de dessiner quoi que ce soit. Si l'utilisateur est absent, indiquez les hypothèses dans brand.json et continuez.

• Qu'est-ce que c'est, pour qui, et contre qui ? Catégorie, public, deux ou trois concurrents. L'identité doit se distinguer de ceux-ci, pas des marques en général.
• L'idée unique. Une phrase unique sur ce qu'est la marque, qu'un symbole peut porter (« Un four transforme l'argile molle en quelque chose de permanent »). Prenez-la du sujet lui-même, de son matériau, de son processus, de son lieu ou de sa promesse, pas d'un style. Voir references/strategy.md.
• Personnalité : trois traits, chacun avec ce qu'il signifie en pratique et ce qu'il exclut. « Chaleureux : tons terreux et mots simples, jamais trop léché. »
• Où elle doit fonctionner : favicon et icône d'application, écrans de téléphone, signalétique, impression, broderie, avatars de réseaux sociaux, mode sombre, e-mail. Le contexte le plus difficile fixe le plafond de complexité.
• Contraintes : capital existant à conserver (une couleur que les clients connaissent, un nom), budget pour les polices sous licence, marchés culturels (les significations des couleurs et des symboles varient).
• Niveau de complexité du symbole (references/logo.md section 2) : seulement un mot-symbole, un symbole géométrique simple, ou un symbole symbolique complexe. Choisissez selon le contexte et l'idée, pas par ambition. Les symboles complexes nécessitent une version simplifiée pour les petites tailles.

Flux de travail

1. Directions, puis une décision

Développez trois directions qui diffèrent par l'idée, pas seulement par la couleur. Pour chacune : l'idée en une phrase, la méthode du concept de logo (references/logo.md section 3), une esquisse de palette (deux ou trois couleurs de base), un duo typographique, et une phrase sur la sensation obtenue. Notez-les et montrez-les si l'utilisateur est présent ; choisissez-en une et expliquez pourquoi dans le cas contraire. Ne mélangez pas les directions ; un mélange fait généralement perdre l'idée qui rendait chacune efficace.

2. Écrire brand.json

C'est la source de vérité que chaque script lit. Forme minimale :

{
  "name": "Four", "tagline": "Céramiques en petite série, cuites à Leeds.", "url": "https://four.example",
  "idea": "Une phrase que le symbole porte.",
  "personality": [{ "trait": "Chaleureux", "means": "Tons terreux et mots simples, jamais trop léché." }],
  "voice": { "is": ["Simple", "Précis"], "isnt": ["Mièvre", "Commercial"], "examples": [{ "say": "Cuit à 1 260 °C.", "not": "Fabriqué avec amour !" }] },
  "colors": { "primary": "#d9480f", "accent": "#0b7285", "neutral": { "chroma": 0.01 } },
  "type": { "display": { "family": "Fraunces", "weights": [400, 700] }, "text": { "family": "Inter", "weights": [400, 600] }, "scale": { "base": 16, "ratio": 1.25 } },
  "logo": { "primary": "logo/lockup.svg", "mark": "logo/mark.svg", "story": "Pourquoi le symbole ressemble à ça.", "minSizePx": 16 }
}

3. Couleur

Choisissez deux ou trois couleurs de base avec une signification (references/color.md), puis :

node <skill-dir>/scripts/palette.mjs brand.json

Il construit des rampes perceptuelles OKLCH, garde chaque couleur de base exacte à son étape la plus proche, teinte les neutres vers la marque, maintient les couleurs d'état (succès, avertissement, danger, info) séparées de la marque pour que le danger reste toujours perçu comme un danger, mappe les rôles sémantiques pour le clair et le foncé, et vérifie chaque paire visible selon WCAG 2.2. Corrigez les échecs en changeant les couleurs de base ou les rôles, pas en les ignorant. Ouvrez tokens/palette.html et regardez les démos claire et foncée.

4. Typographie

Choisissez une police d'affichage et une police de texte (souvent une seule famille suffit), avec une raison liée à l'idée et au contexte de lecture (references/typography.md). Vérifiez la licence, la couverture linguistique, les graisses, les chiffres tabulaires si les nombres sont importants, et le rendu en 14 à 16 px. Préférez les familles sous licence libre (SIL OFL) sauf si l'utilisateur dispose d'une licence.

5. Logo

Dessinez le symbole en SVG à la main : planifiez la géométrie sur une grille, écrivez les chemins avec intention et faites en sorte que les découpes soient de vrais trous (fill-rule="evenodd" ou chemins combinés), jamais de formes blanches peintes par-dessus. Convertissez le mot-symbole en contours afin qu'il ne dépende pas des polices installées :

node <skill-dir>/scripts/logo.mjs outline --text "Four" --google "Fraunces:700" --tracking -0.01 --out logo/wordmark.svg
node <skill-dir>/scripts/logo.mjs check logo/*.svg
node <skill-dir>/scripts/logo.mjs sheet logo/lockup.svg --mark logo/mark.svg --colors tokens/tokens.json --out logo/sheet.png

Regardez la planche. À 16 et 24 px, le symbole doit encore être reconnaissable ; en noir et blanc, inversé, et sur une image chargée, chaque partie doit survivre. Si les détails disparaissent, simplifiez ou dessinez un symbole séparé pour les petites tailles. Itérez : la plupart des bons symboles nécessitent plusieurs cycles de réduction. Construisez le logo complet (symbole plus mot-symbole) avec un alignement optique, pas mathématique, et définissez un espace de sécurité et une taille minimale. Détails et technique SVG : references/logo.md.

6. Assets et système

node <skill-dir>/scripts/assets.mjs brand.json    # favicons, ICO, Apple touch, icônes PWA et masquables, carte Open Graph, manifeste, balises head
node <skill-dir>/scripts/book.mjs brand.json      # page de charte graphique + type.css

Ajoutez ensuite ce dont le brief a besoin au-delà de cela : avatars de réseaux sociaux, en-tête d'e-mail, motif ou texture tiré du symbole, style d'icône, direction d'illustration ou de photographie (references/system.md). Chaque asset utilise les tokens, pas des valeurs hexadécimales copiées.

7. Vérifier et livrer

• Exécutez l'audit des interface-guidelines sur la page de charte graphique si disponible : node <interface-guidelines>/scripts/audit.mjs brand-book.
• Lisez vous-même la planche logo, la page de palette, la carte Open Graph et les icônes. Corrigez ce qui ne va pas.
• Testez l'identité en contexte : placez le logo et les tokens sur un écran réel du produit (un en-tête et un bouton au minimum), en clair et en foncé.
• Livrez : l'idée, ce qu'est chaque fichier, ce que vous avez vérifié, ce que vous n'avez pas vérifié (recherche de marque, revue culturelle sur les marchés cibles, épreuves d'impression), et les éventuelles exceptions de contraste acceptées avec leurs raisons.

Pièges à éviter

• Pas d'idée, seulement du style. Choisir « moderne, propre, audacieux » n'est pas une idée. Si vous ne pouvez pas dire ce que le symbole signifie en une phrase, il ne signifie encore rien.
• Symboles génériques : un éclair, un swoosh, une étincelle, un hexagone, un orbe dégradé, une initiale dans un cercle sans rien faire. Utilisez-les seulement si l'idée l'exige et que quelque chose en eux est propre à la marque.
• Découpes peintes. Les formes blanches sur un symbole coloré deviennent des blocs solides en une seule couleur, sur des photos et quand il est inversé. logo.mjs check les signale.
• Détail qui disparaît en petit. Les traits fins et les détails internes disparaissent à 16 px. La planche le montre ; fournissez un symbole de petite taille.
• <text> dans un logo SVG. Il s'affiche dans une police de remplacement partout où la police est absente. Convertissez-le en contours.
• Couleur de marque utilisée pour le danger, ou danger comme marque. Une marque rouge a toujours besoin d'une couleur de danger distincte et reconnaissable, et son texte d'erreur doit passer le contraste.
• Signification des couleurs présentée comme un fait. « Le bleu signifie la confiance » est une association faible et culturellement dépendante, pas une loi (references/color.md section 1). Choisissez pour la distinction dans la catégorie et pour l'idée.
• Copie. Ne recréez pas ou n'imitez pas étroitement le symbole, le nom ou l'habillage d'une marque existante. Notez qu'une véritable recherche de marque est une étape de l'utilisateur avant le lancement.
• Imiter une organisation réelle pour un utilisateur qui n'est pas cette organisation n'est pas du branding ; refusez.

Références

Fichier	Quand le lire
references/strategy.md	Pour trouver l'idée, la personnalité, nommer le style, écrire les directions
references/logo.md	Pour tout travail sur le logo : types, niveaux de complexité, méthodes de concept, construction, technique SVG, logos complets, tests
references/color.md	Pour choisir les couleurs de base, preuves de signification des couleurs, OKLCH, rôles, mode sombre, accessibilité
references/typography.md	Pour choisir et associer les polices, licence, échelle, chiffres, chargement web
references/system.md	Pour les icônes, motifs, imagerie, mouvement, voix, assets, tokens, directives