Brand Guidelines 完整指南
本文档包含 Anthropic 品牌色彩和排版的完整技术实现。如果您是初次接触,建议先阅读 📋 概览。
品牌色彩系统
完整色彩规格
主色调
| 颜色名称 | HEX | RGB | 用途说明 |
|---|---|---|---|
| Dark | #141413 | RGB(20, 20, 19) | 主要文字、深色背景、高对比度元素 |
| Light | #faf9f5 | RGB(250, 249, 245) | 浅色背景、深色背景上的文字 |
| Mid Gray | #b0aea5 | RGB(176, 174, 165) | 次要文字、分隔线、辅助图标 |
| Light Gray | #e8e6dc | RGB(232, 230, 220) | 卡片背景、区域分隔、微妙边框 |
强调色
| 颜色名称 | HEX | RGB | 用途说明 |
|---|---|---|---|
| Orange | #d97757 | RGB(217, 119, 87) | 主要 CTA、链接、重要强调 |
| Blue | #6a9bcc | RGB(106, 155, 204) | 次要交互、信息提示、图表 |
| Green | #788c5d | RGB(120, 140, 93) | 成功状态、环保主题、平衡强调 |
色彩应用规则
文字色彩选择
def select_text_color(background_color):
"""
根据背景色选择最佳文字颜色
背景亮度 > 128 → 使用深色文字
背景亮度 ≤ 128 → 使用浅色文字
"""
# 计算亮度 (简化公式)
brightness = (bg.r * 299 + bg.g * 587 + bg.b * 114) / 1000
if brightness > 128:
return DARK # #141413
else:
return LIGHT # #faf9f5
图形色彩循环
ACCENT_COLORS = [ORANGE, BLUE, GREEN]
def apply_shape_colors(shapes):
"""
为非文字图形应用强调色
轮流使用橙/蓝/绿以保持视觉兴趣
"""
for i, shape in enumerate(shapes):
if not is_text_shape(shape):
color = ACCENT_COLORS[i % 3]
shape.fill.solid()
shape.fill.fore_color.rgb = color
字体系统
字体规格
Poppins (标题字体)
特征:
- 几何无衬线字体
- 现代、清晰、友好
- 适合大尺寸显示
推荐用法:
- H1/H2 标题
- 导航菜单
- 重点强调文字
- 尺寸:24pt 及以上
字重选择:
- Light (300): 副标题、轻量强调
- Regular (400): 标准标题
- SemiBold (600): 重要标题
- Bold (700): 特别强调
Lora (正文字体)
特征:
- 现代衬线字体
- 优雅、可读性强
- 适合长文本
推荐用法:
- 正文段落
- 列表项
- 说明文字
- 尺寸:10-18pt
字重选择:
- Regular (400): 标准正文
- Italic (400): 引用、强调
- Bold (700): 段落重点
字体回退策略
FONT_FALLBACK = {
'headings': ['Poppins', 'Arial', 'Helvetica', 'sans-serif'],
'body': ['Lora', 'Georgia', 'Times New Roman', 'serif']
}
def apply_font(text_frame, is_heading):
"""
应用字体,支持自动回退
"""
font_family = FONT_FALLBACK['headings' if is_heading else 'body']
for font in font_family:
if is_font_available(font):
text_frame.font.name = font
break
实现技术
Python-PPTX 实现
色彩应用
from pptx.util import RGBColor
from pptx.enum.text import PP_ALIGN
# 定义品牌色彩
BRAND_COLORS = {
'dark': RGBColor(20, 20, 19),
'light': RGBColor(250, 249, 245),
'mid_gray': RGBColor(176, 174, 165),
'light_gray': RGBColor(232, 230, 220),
'orange': RGBColor(217, 119, 87),
'blue': RGBColor(106, 155, 204),
'green': RGBColor(120, 140, 93)
}
# 应用到文字
paragraph.font.color.rgb = BRAND_COLORS['dark']
# 应用到形状填充
shape.fill.solid()
shape.fill.fore_color.rgb = BRAND_COLORS['orange']
# 应用到形状轮廓
shape.line.color.rgb = BRAND_COLORS['dark']
shape.line.width = Pt(2)
字体应用
from pptx.util import Pt
def apply_brand_fonts(presentation):
"""
为整个演示文稿应用品牌字体
"""
for slide in presentation.slides:
for shape in slide.shapes:
if not shape.has_text_frame:
continue
for paragraph in shape.text_frame.paragraphs:
# 判断是否为标题
is_heading = paragraph.font.size >= Pt(24)
# 应用字体
if is_heading:
paragraph.font.name = 'Poppins'
else:
paragraph.font.name = 'Lora'
使用示例
示例 1:品牌化现有 PPT
from pptx import Presentation
# 加载演示文稿
prs = Presentation('original.pptx')
# 应用品牌色彩
for slide in prs.slides:
# 设置背景
background = slide.background
fill = background.fill
fill.solid()
fill.fore_color.rgb = BRAND_COLORS['light']
# 处理所有形状
for shape in slide.shapes:
if shape.has_text_frame:
# 应用文字色彩
for paragraph in shape.text_frame.paragraphs:
paragraph.font.color.rgb = BRAND_COLORS['dark']
# 应用字体
if paragraph.font.size >= Pt(24):
paragraph.font.name = 'Poppins'
else:
paragraph.font.name = 'Lora'
else:
# 应用强调色到图形
if shape.shape_type == MSO_SHAPE.RECTANGLE:
shape.fill.solid()
shape.fill.fore_color.rgb = BRAND_COLORS['orange']
# 保存
prs.save('branded.pptx')
示例 2:创建品牌化图表
import matplotlib.pyplot as plt
# 使用品牌色彩
plt.style.use('seaborn-v0_8-whitegrid')
fig, ax = plt.subplots(figsize=(10, 6))
# 设置背景色
fig.patch.set_facecolor('#faf9f5')
ax.set_facecolor('#faf9f5')
# 绘制数据(使用品牌强调色)
ax.plot(x, y1, color='#d97757', linewidth=3, label='产品 A')
ax.plot(x, y2, color='#6a9bcc', linewidth=3, label='产品 B')
ax.plot(x, y3, color='#788c5d', linewidth=3, label='产品 C')
# 设置文字色彩和字体
ax.set_xlabel('时间', fontsize=14, color='#141413', fontfamily='Poppins')
ax.set_ylabel('销量', fontsize=14, color='#141413', fontfamily='Poppins')
ax.set_title('季度销售趋势', fontsize=20, color='#141413',
fontfamily='Poppins', weight='semibold')
# 设置图例
ax.legend(facecolor='#e8e6dc', edgecolor='#b0aea5')
# 网格线
ax.grid(color='#e8e6dc', linestyle='-', linewidth=0.5)
plt.savefig('branded_chart.png', dpi=300, facecolor='#faf9f5')
示例 3:Web 界面品牌化
/* CSS 变量定义品牌色彩 */
:root {
--brand-dark: #141413;
--brand-light: #faf9f5;
--brand-mid-gray: #b0aea5;
--brand-light-gray: #e8e6dc;
--brand-orange: #d97757;
--brand-blue: #6a9bcc;
--brand-green: #788c5d;
}
/* 字体导入 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Lora:wght@400;700&display=swap');
/* 全局样式 */
body {
font-family: 'Lora', Georgia, serif;
background-color: var(--brand-light);
color: var(--brand-dark);
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', Arial, sans-serif;
font-weight: 600;
}
/* 按钮样式 */
.btn-primary {
background-color: var(--brand-orange);
color: var(--brand-light);
font-family: 'Poppins', Arial, sans-serif;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 4px;
transition: all 0.3s ease;
}
.btn-primary:hover {
background-color: #c86647;
box-shadow: 0 4px 12px rgba(217, 119, 87, 0.3);
}
/* 链接样式 */
a {
color: var(--brand-orange);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: #c86647;
text-decoration: underline;
}
可访问性考虑
对比度验证
所有文字和背景组合必须符合 WCAG AA 标准:
| 组合 | 对比度 | WCAG 等级 |
|---|---|---|
| Dark (#141413) on Light (#faf9f5) | 18.5:1 | AAA ✅ |
| Orange (#d97757) on Light (#faf9f5) | 3.8:1 | AA (大文字) ✅ |
| Blue (#6a9bcc) on Light (#faf9f5) | 3.2:1 | AA (大文字) ⚠️ |
| Light (#faf9f5) on Orange (#d97757) | 3.8:1 | AA (大文字) ✅ |
建议:
- 小文字 (<18pt) 使用 Dark/Light 组合
- 强调色主要用于大文字、按钮、图形
- 重要信息不仅依赖颜色(添加图标、粗体)
质量检查清单
在应用品牌后确认:
- [ ] 所有标题 (24pt+) 使用 Poppins 字体
- [ ] 所有正文使用 Lora 字体
- [ ] 文字颜色为 Dark 或 Light(根据背景)
- [ ] 图形使用橙/蓝/绿强调色
- [ ] 背景为 Light 或 Light Gray
- [ ] 对比度符合 WCAG 标准
- [ ] 视觉层级清晰
- [ ] 品牌一致性贯穿始终
常见问题
Q: 如何在本地环境安装 Poppins 和 Lora 字体?
A:
macOS:
# 下载字体
wget https://fonts.google.com/download?family=Poppins
wget https://fonts.google.com/download?family=Lora
# 解压并安装
unzip Poppins.zip -d ~/Library/Fonts/
unzip Lora.zip -d ~/Library/Fonts/
Windows:
- 访问 Google Fonts
- 下载 Poppins 和 Lora
- 右键
.ttf文件 → "安装"
Linux:
sudo apt install fonts-google-lora
sudo fc-cache -f -v
Q: Python-PPTX 检测不到已安装字体怎么办?
A: Python-PPTX 依赖系统字体配置:
- 确认字体已正确安装
- 重启 Python 环境
- 使用回退字体(Arial/Georgia)
Q: 如何处理已有品牌色彩的文档?
A: 提供选项:
- 完全覆盖:替换所有颜色
- 混合模式:仅替换中性色,保留强调色
- 不应用:跳过已有品牌的文档