Application de la marque Bitwarden

Cette compétence ancre les décisions d'application de marque dans les deux sources canoniques de Bitwarden :

• bitwarden.com/brand — le centre des directives de marque, incluant les logos, le système de radius, la structuration des posts sur les réseaux sociaux, les images produit et les vidéos de stock.
• github.com/bitwarden/brand — le repository source de vérité pour les logos SVG, les icônes produit PNG (plusieurs tailles), la marque shield, la palette de couleurs en plusieurs formats (HEX, HSL, SCSS), les captures d'écran et les ressources médias.

Lors de l'application de la marque dans un vrai travail, traitez le repo comme canonique pour les ressources et le site de marque comme canonique pour les règles d'utilisation. Le matériel de référence détaillé se trouve dans references/brand-assets.md (inventaire des ressources et chemins de fichiers) et references/color-palette.md (palette complète avec notes d'utilisation et noms de variables SCSS).

Les cinq règles qui causent le plus d'erreurs

1. Mettez le B en majuscule dans Bitwarden. Toujours. Le W n'est jamais en majuscule. Le seul endroit où « bitwarden » apparaît en minuscules est à l'intérieur du logo officiel — jamais dans le corps de texte, jamais dans les titres, jamais dans les handles ou les URLs.
2. Palette principale avant palette tertiaire. Le vert, le jaune et le rouge sont tertiaires — utilisez-les avec parcimonie, principalement dans les graphiques produit et pour les communications de succès / avertissement / erreur. Ce ne sont pas des couleurs de titre.
3. Inter pour tout. Produit et site web. Les poids disponibles sont 300 (light), 400 (regular), 500 (medium), 600 (semi-bold) et 700 (bold).
4. La zone de sécurité du logo est non-négociable. Le lockup horizontal a besoin d'une largeur de shield Bitwarden d'espace libre de chaque côté. Le lockup vertical utilise la hauteur du « X » dans le logotype. Les logos serrés cassent le lockup.
5. Système de radius 36px, mais les boutons sont l'exception. Les coins arrondis suivent un radius de 36px sur les surfaces de marque principales. Les boutons sont en dehors de ce système — n'appliquez pas 36px aux boutons.

Utilisation du logo

• Marque par défaut. /logos/logo-horizontal-blue.svg du repo de marque. L'horizontal est le lockup principal/préféré.
• Inverse (pour les fonds sombres). /logos/logo-horizontal-white.svg.
• Lockup vertical. Disponible pour les cas où l'horizontal ne convient pas ; la zone de sécurité utilise la hauteur du « X » dans le logotype.
• Icône produit (le shield). Disponible arrondie et carrée, en PNG 16/32/64/128/256 px plus SVG (/logos/icon.svg, /logos/icon-inverse.svg, /icons/*.png). Le shield lui-même se trouve à /shield/.
• Logos produit. Des lockups uniques existent pour les produits Bitwarden individuels (Password Manager, Secrets Manager, etc.). Utilisez-les « principalement dans le produit ».

Ne recolorisez pas, ne déformez pas, ne faites pas pivoter et ne recomposez pas le logo. Si le SVG fourni ne correspond pas au besoin, contactez les propriétaires de la marque plutôt que d'improviser une variante.

Référence rapide de la palette de couleurs

La palette complète avec tous les noms de variables se trouve dans references/color-palette.md. Cinq couleurs portent la majorité du travail :

La palette tertiaire (Vert #7BF1A8, Jaune #FDC700, Rouge #FF6550) est appliquée avec parcimonie pour les graphiques produit et les états de succès/avertissement/erreur. Le site de marque est explicite sur ce point.

Noms de variables SCSS (du brand-colors/palette.scss du repo de marque) :

• $bitwarden-blue, $deep-blue, $off-white, $true-white, $true-black, $light-grey, $teal-highlight, $light-teal-highlight, $tertiary-green, $tertiary-yellow, $tertiary-red.

Typographie

• Police : Inter (open-source, Google Fonts).
• Poids disponibles : 300 (light), 400 (regular), 500 (medium), 600 (semi-bold), 700 (bold).
• Utilisation : interface utilisateur produit et copie de corps / titre du site web. Le site de marque n'énumère pas les règles poids-par-contexte ; déférez aux responsables produit ou marketing quand un cas insolite se présente.

Iconographie

• Icônes web. Conçues pour un large éventail d'utilisations avec plus de détails que l'icône produit.
• Icône produit (shield). Disponible arrondie et carrée à plusieurs tailles depuis le répertoire /icons/ du repo de marque.

Les chemins des ressources et les tables de taille complètes se trouvent dans references/brand-assets.md.

Capitalisation et marque déposée

• Le « B » dans Bitwarden est en majuscule dans tout le texte de copie.
• Le « W » n'est jamais en majuscule — ni BITWARDEN (dans le corps de texte) ni bitWarden.
• Le seul endroit où « bitwarden » apparaît en minuscules est à l'intérieur du logo officiel lui-même.
• « Bitwarden » est une marque déposée de Bitwarden Inc. — signalez-la quand le contenu est destiné à un public externe et que l'attribution de marque est appropriée.

Composition avec d'autres compétences

• content-style-guide. La marque s'accompagne du guide de style de contenu. Lors de l'examen des surfaces visibles aux utilisateurs, consultez les deux : cette compétence détecte les problèmes de couleur, logo et capitalisation ; le guide de style de contenu détecte la voix, le ton, la casse des phrases et l'accessibilité.
• using-figma. Utilisez get_variable_defs pour vérifier si les couleurs d'une conception sont liées à la bibliothèque et alignées sur la palette de marque ; utilisez get_libraries pour confirmer que la bonne bibliothèque de conception est chargée avant d'affirmer qu'une conception est conforme à la marque.
• preparing-design-handoff. Exposez les résultats de marque dans le cadre de la porte de handoff — signalez-les comme annotations Figma ou comme questions ouvertes dans l'Epic quand quelque chose n'est pas conforme à la marque au moment du handoff. Ne corrigez pas discrètement.
• evolving-design-system-components. Les nouveaux motifs doivent respecter la palette de marque et le système de radius 36px (avec l'exception des boutons). L'examen de gouvernance de la Composant Library détecte les violations évidentes, mais soulevez-les explicitement quand vous parrainez un motif.

Format de sortie pour les vérifications de marque

Quand on vous demande « est-ce conforme à la marque ? », structurez la réponse ainsi :

1. Ce qui est vérifié — quelles surfaces de marque cette conception touche (logo, couleur, typographie, iconographie, capitalisation).
2. Ce qui est conforme à la marque — ce qui fonctionne et doit rester.
3. Ce qui n'est pas conforme à la marque — chaque résultat lié à la règle de marque spécifique qu'il viole (citez la section, ex. « Palette tertiaire surutilisée — le vert apparaît dans trois surfaces non-state, selon la règle tertiary-usage de bitwarden.com/brand »).
4. Corrections proposées — des swaps concrets que le designer peut appliquer, provenant de la palette canonique ou de la ressource.

Gardez les résultats spécifiques. « Le titre utilise #7BF1A8 (vert tertiaire) là où le bleu Bitwarden (#175DDC) est la couleur de marque principale » est mieux que « la couleur est mauvaise ».

Ressources supplémentaires

• references/brand-assets.md — inventaire complet des ressources du repo de marque avec chemins de fichiers (logos, icônes, shield, captures d'écran, ressources médias).
• references/color-palette.md — palette complète avec HEX, HSL, noms de variables SCSS et notes d'utilisation par couleur.