品牌指南应用 brand-guidelines

---

名称: 品牌指南 描述: 将品牌颜色和字体应用于各种材料。当品牌颜色、样式指南、视觉格式或公司设计标准适用时使用。确保品牌内容的一致性。 来源: anthropics/skills 许可证: Apache-2.0

品牌指南应用

目的

将一致的品牌样式应用到任何材料：文档、演示文稿、网页或营销材料。

核心品牌元素

颜色

使用CSS变量定义品牌调色板：

:root {
  --brand-primary: #1a73e8;
  --brand-secondary: #34a853;
  --brand-accent: #ea4335;
  --brand-dark: #202124;
  --brand-light: #f8f9fa;
  --brand-text: #3c4043;
  --brand-text-muted: #5f6368;
}

字体

/* 标题主要字体 */
--font-display: 'Product Sans', 'Google Sans', system-ui;

/* 正文字体 */
--font-body: 'Roboto', 'Inter', -apple-system, sans-serif;

/* 代码等宽字体 */
--font-mono: 'Roboto Mono', 'Fira Code', monospace;

/* 字体大小尺度 */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;

间距

--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;

应用示例

按钮

.btn-primary {
  background: var(--brand-primary);
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 500;
}

卡片

.card {
  background: white;
  border: 1px solid var(--brand-light);
  border-radius: 8px;
  padding: var(--space-6);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

标题

h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--brand-dark);
  font-weight: 500;
}

文档模板

Google文档

• 标题1: 显示字体，24pt，品牌深色
• 标题2: 显示字体，18pt，品牌主色
• 正文: 正文字体，11pt，品牌文本色
• 链接: 品牌主色，带下划线

演示文稿

• 标题幻灯片: 白色文字在品牌主色背景上
• 内容幻灯片: 品牌深色文字在白色背景上
• 强调元素: 品牌次色或强调色

最佳实践

1. 一致性: 使用确切的品牌颜色，绝不近似
2. 对比度: 确保文本可读性的最小对比度为4.5:1
3. 层级: 使用大小和粗细来建立重要性
4. 留白: 充足的间距感觉更高级
5. Logo使用: 在Logo周围保持清晰空间