brand-systems

品牌系统

品牌是一个可见的承诺。品牌系统是确保始终如一地兑现这一承诺的规则。

何时使用此技能

• 创建新的品牌形象
• 为现有品牌形象重塑品牌或焕新
• 编写品牌指南文档
• 将零散的品牌元素系统化
• 培训他人应用品牌规范

品牌系统组成部分

1. 策略层（基础）

定位陈述

For [target audience]
Who [statement of need]
[Brand] is a [category]
That [key benefit]
Unlike [competitors]
We [key differentiator]

品牌支柱

1. 宗旨：我们为何存在（超越利润）
2. 愿景：我们正在创造的未来
3. 使命：我们将如何实现愿景
4. 价值观：我们的信念（3-5 项核心价值观）

品牌个性

定义 3-5 个形容词，并提供行为示例：

特质	含义	不代表什么
大胆	清晰地表明立场	咄咄逼人／鲁莽
平易近人	温暖、亲切	不专业
创新	面向未来	哗众取宠

品牌原型

从以下选出主要原型（以及可选的次要原型）：

原型	核心渴望	语气特征
智者	真相	博学、善于分析
天真者	安全	乐观、简单
探索者	自由	勇于冒险、真实
统治者	掌控	权威、精致
创造者	创新	富有想象力、具备远见
照料者	服务	关怀、支持
魔法师	转变	富有远见、有魅力
英雄	精通	勇敢、坚定
叛逆者	解放	反叛、颠覆
恋人	亲密	热情、感性
小丑	享乐	活泼、不拘一格
凡人	归属	友好、谦逊

---

2. 视觉识别层

Logo 系统

Logo 类型：

类型	描述	示例
文字标志	以名称作为 Logo	Google、Coca-Cola
字母标志	首字母	IBM、HBO
符号	抽象标记	Nike、Apple
组合标志	符号 + 文字标志	Adidas、Lacoste
徽章	符号内含文字	Starbucks、NFL

Logo 要求：

• 在 16px 网站图标尺寸下仍清晰可用
• 适用于深色和浅色背景
• 黑白环境下仍易于识别
• 不使用会导致印刷效果不佳的渐变
• 明确规定留白规则

Logo 组合形式：

[Symbol]        [Symbol][Wordmark]       [Wordmark]
                                          [Symbol]
  Symbol          Horizontal              Stacked
  Only            Lockup                  Lockup

留白： 定义 Logo 周围的最小留白（通常为 Logo 元素的高度）：

   ┌──────────────────────────────┐
   │                              │
   │    ┌──────────────────┐      │
   │    │                  │      │
   │    │      LOGO        │      │  ← Clear space = 'X'
   │    │                  │      │    (defined by logo element)
   │    └──────────────────┘      │
   │                              │
   └──────────────────────────────┘

色彩调色板

主调色板：

Primary:
  Name: [Descriptive name, e.g., "Trust Blue"]
  Hex: #2563eb
  RGB: 37, 99, 235
  HSL: 221, 83%, 53%
  Tailwind: blue-600

  Usage: CTAs, links, primary actions
  Accessible on: white (5.17:1), gray-50 (4.95:1)

扩展调色板：

• 主色阶（50-950）
• 次要颜色（含色阶）
• 强调色（高对比度）
• 中性色阶（灰色调）
• 语义色（成功、警告、错误、信息）

色彩比例：

60% - Dominant (backgrounds, large areas)
30% - Secondary (supporting elements)
10% - Accent (highlights, CTAs)

深色模式注意事项：

Light Mode          Dark Mode
white           →   gray-900
gray-50         →   gray-800
gray-900        →   white
blue-600        →   blue-400

字体系统

字体级数：

const typeScale = {
  xs:     '0.75rem',    // 12px - captions
  sm:     '0.875rem',   // 14px - secondary text
  base:   '1rem',       // 16px - body
  lg:     '1.125rem',   // 18px - lead text
  xl:     '1.25rem',    // 20px - h4
  '2xl':  '1.5rem',     // 24px - h3
  '3xl':  '1.875rem',   // 30px - h2
  '4xl':  '2.25rem',    // 36px - h1
  '5xl':  '3rem',       // 48px - display
  '6xl':  '3.75rem',    // 60px - hero
};

字体搭配原则：

方式	示例	效果
对比	衬线标题 + 无衬线正文	经典、编辑风
互补	几何风格标题 + 人文风格正文	现代、友好
超级家族	同一字体家族，不同字重	统一、系统化

推荐搭配：

• 编辑风：Playfair Display + Source Sans Pro
• 现代：Outfit + Inter
• 技术风：Space Grotesk + IBM Plex Sans
• 优雅：Cormorant Garamond + Lato
• 初创风：Cal Sans + Geist

影像与图标

摄影风格：

• 拍摄主题指南
• 色彩处理（自然、饱和、柔和）
• 构图偏好
• 氛围与光线
• 应避免的内容

图标系统：

Style: [Outlined | Filled | Duotone]
Stroke weight: [1.5px | 2px | 2.5px]
Corner radius: [0 | 2px | rounded]
Grid: [24x24 | 16x16]
Source: [Lucide | Heroicons | Phosphor | Custom]

插画风格（如适用）：

• 风格参考
• 色彩运用
• 线条粗细
• 细节程度
• 角色指南

---

3. 语气层

语气特征

定义 3-4 个恒定的个性特征：

We are:
1. [Trait 1] - [What this means in practice]
2. [Trait 2] - [What this means in practice]
3. [Trait 3] - [What this means in practice]

We are NOT:
1. [Anti-trait 1]
2. [Anti-trait 2]
3. [Anti-trait 3]

语气变化

品牌声音始终一致；语气根据情境调整：

情境	语气调整	示例
欢迎	亲切、热情	"欢迎！很高兴你能加入我们。"
错误	冷静、乐于助人	"出了点问题。以下是解决方法。"
成功	欢庆、简短	"完成！你的更改已上线。"
教程	耐心、鼓励	"让我们一起逐步了解。"
法律	清晰、直接	"继续即表示你同意我们的条款。"

写作指南

• 句子长度偏好
• 主动语态与被动语态
• 标点风格
• 大小写规则
• 应使用／避免使用的词语
• 行话使用规范

---

4. 系统层

设计令牌

// tokens.js
export const tokens = {
  colors: { /* color definitions */ },
  typography: { /* font definitions */ },
  spacing: {
    xs: '0.25rem',   // 4px
    sm: '0.5rem',    // 8px
    md: '1rem',      // 16px
    lg: '1.5rem',    // 24px
    xl: '2rem',      // 32px
    '2xl': '3rem',   // 48px
    '3xl': '4rem',   // 64px
  },
  radii: {
    sm: '0.25rem',
    md: '0.5rem',
    lg: '0.75rem',
    xl: '1rem',
    full: '9999px',
  },
  shadows: { /* shadow definitions */ },
  transitions: {
    fast: '150ms ease-out',
    normal: '200ms ease-out',
    slow: '300ms ease-out',
  },
};

组件模式

记录常见的组件模式：

## Button

### Variants
- Primary: Main actions
- Secondary: Alternative actions
- Ghost: Tertiary actions
- Destructive: Dangerous actions

### Sizes
- sm: Compact contexts
- md: Default
- lg: Prominent placement

### States
- Default
- Hover
- Active/Pressed
- Focus (keyboard)
- Disabled
- Loading

布局模式

• 网格系统（12 列、间距）
• 断点
• 容器宽度
• 区块间距

---

5. 应用层

接触点指南

记录品牌在以下场景中的应用：

• 网站
• 移动应用
• 电子邮件模板
• 社交媒体个人资料
• 演示文稿模板
• 印刷材料
• 包装（如适用）
• 环境／标识

应做与不应做

正确与错误用法的示例：

✓ DO                         ✗ DON'T
─────────────────────────────────────────
Logo on white background     Logo on busy photo
Logo with clear space        Logo crowded by elements
Primary button for CTA       Multiple primary buttons
Consistent icon style        Mixed icon styles

---

品牌画布（快速参考）

# [Brand Name] Brand Canvas

## Who We Are
Purpose: [Why we exist]
Vision: [Future we're creating]
Mission: [How we'll get there]

## Who We Serve
[Target audience description]

## What Makes Us Different
[Key differentiators]

## How We Sound
Voice: [3-4 adjectives]
Archetype: [Primary archetype]

## How We Look
Colors: [Primary, Secondary, Accent]
Typography: [Display font + Body font]
Style: [Visual approach in 2-3 words]

## Our Promise
[The one thing we deliver]

---

资源

当品牌任务需要比上述摘要更深入的信息时，请阅读相应文件。

• assets/brand-canvas-template.md：可填写的品牌画布
• references/logo-design.md：Logo 设计原则
• references/color-palettes.md：品牌色彩理论
• references/typography-pairing.md：字体搭配指南
• references/brand-voice.md：品牌声音开发框架