applying-bitwarden-branding

应用 Bitwarden 品牌规范

本技能以 Bitwarden 的两个权威来源为依据，指导品牌应用决策：

• bitwarden.com/brand — 品牌指南中心，包含徽标组合、圆角系统、社交媒体帖子框架、产品图片和 B-roll。
• github.com/bitwarden/brand — 权威资源仓库，包含 SVG 徽标、PNG 产品图标（多种尺寸）、盾牌标志、多种格式（HEX、HSL、SCSS）的调色板、屏幕截图和媒体资源。

在实际工作中应用品牌规范时，应将仓库视为资源的权威来源，将品牌网站视为使用规则的权威来源。详细参考资料位于 references/brand-assets.md（资源清单和文件路径）和 references/color-palette.md（完整调色板及使用说明和 SCSS 变量名称）。

最容易避免错误的五条规则

1. Bitwarden 中的 B 必须大写。 始终如此。W 永远不要大写。只有在官方徽标组合中才会出现小写的“bitwarden”——正文、标题、账号名或 URL 中都不能这样写。
2. 优先使用主调色板，而非三级调色板。 绿色、黄色和红色属于三级色，应谨慎使用，主要用于产品图形以及成功／警告／错误提示。不要将它们用于标题颜色。
3. 所有场景均使用 Inter。 产品和网站均如此。可用字重为 300（细体）、400（常规）、500（中等）、600（半粗体）和 700（粗体）。
4. 徽标安全区不容妥协。 横版徽标组合的四周都需要留出一个 Bitwarden 盾牌宽度的空白区域。竖版徽标组合的安全区以字标中“X”的高度为准。徽标过于拥挤会破坏徽标组合。
5. 采用 36px 圆角系统，但按钮例外。 品牌主要界面的圆角均遵循 36px 圆角规范。按钮不属于该系统——不要为按钮应用 36px 圆角。

徽标使用

• 默认标志。 品牌仓库中的 /logos/logo-horizontal-blue.svg。横版是主要／首选徽标组合。
• 反白版（用于深色背景）。 /logos/logo-horizontal-white.svg。
• 竖版徽标组合。 可用于不适合使用横版的场景；安全区以字标中“X”的高度为准。
• 产品图标（盾牌）。 提供圆角和方形两种版本，包含 16/32/64/128/256 px PNG 以及 SVG（/logos/icon.svg、/logos/icon-inverse.svg、/icons/*.png）。盾牌本身位于 /shield/。
• 产品徽标。 Bitwarden 的各个产品（密码管理器、Secrets Manager 等）均有专属徽标组合。这些徽标“主要用于产品内部”。

不要更改徽标颜色、扭曲、旋转或重新组合。如果提供的 SVG 不适用，请联系品牌负责人，而不要自行设计变体。

色彩方案速查

包含所有变量名称的完整色彩方案见 references/color-palette.md。以下 5 种颜色承担了大部分工作：

颜色	HEX	用途
Bitwarden Blue	#175DDC	主要品牌色。用于标题、主要 CTA 和强调元素。
Deep Blue	#0C3276	次要品牌色。用于密集界面和页眉。
Off White	#F3F6F9	默认浅色表面。
True Black	#000000	浅色表面上的默认文本颜色。
Teal Highlight	#2CDDE9	强调和突出显示——与蓝色搭配使用。

三级色彩方案（Green #7BF1A8、Yellow #FDC700、Red #FF6550）仅少量用于产品图形和成功／警告／错误状态。品牌网站对此有明确说明。

SCSS 变量名称（来自品牌仓库的 brand-colors/palette.scss）：

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

字体排印

• 字体： Inter（开源，Google Fonts）。
• 可用字重： 300（Light）、400（Regular）、500（Medium）、600（Semi-bold）、700（Bold）。
• 用途： 产品 UI 和网站正文／标题文案。品牌网站未列出不同场景对应的字重规则；遇到特殊情况时，请咨询产品或营销负责人。

图标

• Web 图标。 专为广泛用途设计，细节比产品图标更多。
• 产品图标（盾牌）。 品牌仓库的 /icons/ 目录中提供多种尺寸的圆角版和方形版。

资源路径和完整尺寸表见 references/brand-assets.md。

大小写和商标

• 所有文案中，Bitwarden 的“B”均大写。
• “W”绝不大写——正文文案中不能写成 BITWARDEN，也不能写成 bitWarden。
• “bitwarden”仅在官方 Logo 组合标识中使用小写。
• “Bitwarden”是 Bitwarden Inc. 的注册商标——面向外部的内容在适当需要标注商标归属时，应注明这一点。

与其他技能配合使用

• content-style-guide。 品牌规范与内容风格并行。审核面向用户的界面时，请同时参照两者：此技能检查颜色、Logo 和大小写问题；内容风格指南检查语气、风格、句首大小写和无障碍性。
• using-figma。 使用 get_variable_defs 检查设计中的颜色是否绑定到资源库并符合品牌色彩方案；使用 get_libraries 确认已加载正确的设计资源库，再判断设计是否符合品牌规范。
• preparing-design-handoff。 在交接审核环节中列出品牌相关发现——如果交接时发现不符合品牌规范，请将其标注为 Figma 注释，或在 Epic 中列为待解决问题。不要悄悄修复。
• evolving-design-system-components。 新模式必须遵循品牌色彩方案和 36px 圆角体系（按钮除外）。组件资源库治理审核会发现明显违规，但在负责推广某个模式时，仍应明确指出这些问题。

品牌检查的输出格式

收到“是否符合品牌规范？”的提问时，请按以下结构作答：

1. 检查内容 — 列出此设计涉及的品牌元素（Logo、颜色、排版、图标、大小写）。
2. 符合品牌规范之处 — 说明哪些方面表现良好，应予以保留。
3. 不符合品牌规范之处 — 将每项问题与其违反的具体品牌规则对应起来（注明章节，例如：“过度使用三级调色板——根据 bitwarden.com/brand 的三级颜色使用规则，绿色出现在三个非状态元素中”）。
4. 修改建议 — 提供设计师可直接采用的具体替换方案，并注明其来源为规范调色板或素材。

检查结果应具体明确。“标题使用了 #7BF1A8（三级绿色），但品牌主色是 Bitwarden Blue（#175DDC）”比“颜色不对”更有帮助。

其他资源

• references/brand-assets.md — 品牌仓库素材完整清单，包含文件路径（Logo、图标、盾牌、屏幕截图、媒体素材）。
• references/color-palette.md — 完整调色板，包含 HEX、HSL、SCSS 变量名称及各颜色的使用说明。