品牌系统 是做什么的?
一个完整、即用型的视觉和编辑参考系统:色彩、排版、渐变、组件、Logo 规则、对外语气和交付物结构。适用于所有面向客户、潜在客户或外部受众的输出。
这些值是默认值。当某个项目有自己的品牌指南时,请先读取该指南并替换令牌(调色板、字体、Logo):但布局规则、语气和交付物结构仍然有效。
整体精神:手段经济、留白慷慨、高可读性排版、瑞士/包豪斯美学。
参考文件:
references/tokens.css和references/tokens.json:以下令牌,可直接导入。references/charte.png(及.svg):包含配套卡片上的调色板、排版和组件。
1. 调色板
| 角色 | 十六进制颜色 | 说明 |
|---|---|---|
| Logo 颜色 | #295FEC | 仅用于 Logo |
| 主要 (CTA、链接、强调) | #3D65E8 | 界面、强调文本、按钮 |
| 全局浅色背景 | #EBEFF7 | 内容幻灯片背景、横幅 |
| 近似白色背景 (渐变基底) | #F8F9FB | 带渐变的幻灯片和页面基底 |
| 表面、卡片 | #FFFFFF | 卡片、区块、框架 |
| 轻微表面区块 | #F0F2F7 | 网格中的卡片 |
| 主要文本 | #111827 | 正文、深色标题 |
| 次要文本 | #6B7280 | 标签、说明、元数据 |
| 状态绿色 | #22C55E | 积极的指标 |
每个媒体仅一个强调色级别:主要颜色。
2. 背景渐变
一个柔和的径向渐变,应用于浅色表面和幻灯片。它应保持微妙:在最初一瞥时几乎不可见。
background: radial-gradient(
ellipse at 85% 10%,
rgba(180, 215, 245, 0.55) 0%,
rgba(200, 230, 252, 0.25) 35%,
transparent 65%
), #F8F9FB;
/* 两个对角变体 */
background:
radial-gradient(ellipse at 90% 5%, rgba(165, 210, 245, 0.45) 0%, transparent 50%),
radial-gradient(ellipse at 5% 95%, rgba(165, 210, 245, 0.25) 0%, transparent 45%),
#F8F9FB;
在 PPTX 中:幻灯片背景 #F8F9FB,在右上角添加径向渐变填充,起始颜色 #B4D7F5,不透明度 55%,渐变为透明。
3. 组件
按钮
- 主要操作:药丸形状(圆角 999 px),主要背景色,白色文本,右侧箭头图标。
- 次要操作:药丸形状,白色背景,细边框,深色文本,右侧箭头图标。
卡片
- 白色或轻微表面背景,圆角 16 px,柔和阴影,无明确边框。
- 元数据:年份采用次要文本,后跟点分隔符(例如“2024 · 项目名称”)。
- 标题为半粗体,正文为常规体,底部链接为次要文本。
4. 排版
| 用途 | 字体 | 字重 |
|---|---|---|
| 主要标题 | Inter | Black 900 或 ExtraBold 800 |
| 副标题、标签 | Inter | SemiBold 600 |
| 正文 | Inter | Regular 400 |
| 元数据、说明 | Inter | Regular 400,次要文本 |
首选后备字体:Public Sans。系统后备字体:Geist、SF Pro、Helvetica Neue。禁止使用衬线或装饰性字体。
5. 图标
Phosphor Icons 或 Lucide,根据上下文使用 Regular 或 Light 字重。交付物中禁止使用表情符号。
6. Logo
项目的 Logo 随项目一起提供:此技能不附带任何 Logo 文件。适用于任何 Logo 的使用规则:
- 幻灯片、彩色背景封面: Logo 位于左上角,如有白色版本则使用,符号高度为 36-40 px。
- 内容幻灯片、浅色背景: 仅在页脚使用符号或完整 Logo,高度 20-24 px,次要文本,左下角对齐。
- Word 文档: Logo 位于第一页页眉,左对齐,高度 28-32 px,不拉伸。
- 网页内容: 内联 SVG 符号,32 px,并带有指向网站的链接。
- 保护边距: 每边至少为符号高度的一倍,此区域内不得有任何文本或图形元素。
- 禁止事项: 变形或拉伸 Logo;将其重新着色为除其指定颜色或白色以外的颜色;使用模糊或低分辨率版本;将其放置在对比度不足的背景上。
7. 对外语气
- 平等对等,绝不居高临下,绝不商业推销。
- 精确且立足实际:真实案例、指标、可观察的机制。
- 通俗易懂但不简化。专业性体现在精确性上,而非夸大其词。
- 同时应用
sober-writing以实现编辑姿态,应用francais-parfait以实现法语文本。
在所有外部文档中禁止出现的内容:“充满热情”、“结果导向”、“价值创造者”、第三人称自我吹捧的简介、没有背景或证据的技能列表、以及承诺很多但解释很少的机构语气。
8. 交付物结构
商业提案、一页纸
- 客户的背景和挑战,无需关于自我的介绍。
- 干预的角度及其机制。
- 交付物和里程碑。
- 价格和条款。
- 相关参考(类似案例)。
案例研究
- 起始情况:指标、约束、组织。
- 所做的决定及其原因。
- 可衡量的结果。
- 原本可以做得不同的地方。
专业简介(80-100 字)
- 以角色和差异化的角度开头。
- 两到三个具体证据:客户、结果、背景。
- 以当前的可用性或专业领域结束。
拓展邮件:针对收件人的具体主题行;正文 80-120 字,包含对其情况的一个观察、一个直接建议和一个明确的行动号召。
Word 文档:页眉中的 Logo,页脚中的项目联系信息,正文使用 Inter 或 Public Sans,标题为半粗体,仅一个强调色,无装饰性点缀。
9. 与 slides 和 pptx 结合
三个技能,三个角色:
| 技能 | 角色 |
|---|---|
brand-system(当前) | 身份:调色板、排版、渐变、组件、Logo、语气 |
slides | 页面布局:十五种布局、叙事结构、标题 |
pptx(Anthropic 的技能,需单独安装) | .pptx 文件的技术生成 |
生成演示文稿的步骤:
- 读取
brand-system以固定令牌(或将其替换为项目的令牌)。 - 读取
slides以选择演示文稿结构和页面布局,并应用这些令牌。 - 读取
pptx以生成文件,应用前两者的值。 - 使用
slides的验证功能,逐张幻灯片检查结果(导出为图像)。
10. 所有交付物前的检查清单
- 定位基于证据,而非限定词。
- 语气对等,而非商业推销。
- Logo 遵守其使用规则和边距。
- Logo 颜色和界面强调色不同:#295FEC 用于前者,#3D65E8 用于后者。
- 仅使用 Inter 或 Public Sans 字体。
- 无表情符号、无全角破折号、无空洞的时髦词汇。
- 已应用
sober-writing,对于法语文本已应用francais-parfait。