Back to Details

brand-identity

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Brand Identity

品牌识别（Brand Identity）

Design or evaluate the visual artifacts that express a brand: logo system, color, typography, imagery, iconography, and motion. Stack-agnostic. Tool-agnostic.
This skill assumes a brand direction is already approved (positioning, mood, name). If not, run 
brand-ideation
first.
设计或评估用于表达品牌的视觉成果：Logo 系统、色彩、字体、图像、图标和动效。不限定技术栈，不限定工具。
此 skill 假定品牌方向已经获得批准（定位、基调、名称）。如果尚未确定，请先运行 
brand-ideation
。

When to use

适用场景

  • Designing a logo system
  • Defining a brand color palette
  • Choosing brand typography
  • Developing iconography or illustration style
  • Defining imagery direction (photography, illustration)
  • Establishing motion principles
  • Auditing an existing identity for cohesion or gaps
  • 设计 Logo 系统
  • 定义品牌色彩组合
  • 选择品牌字体
  • 制定图标或插画风格
  • 定义图像方向（摄影、插画）
  • 建立动效原则
  • 审查现有识别体系的一致性或缺失项

When NOT to use

不适用场景

  • Brand direction is not yet defined (use 
    brand-ideation
    )
  • Documenting a finished system (use 
    brand-style-guide
    )
  • Defining voice and tone (use 
    brand-voice
    )
  • Building UI components from an existing brand (use 
    design-standards
    or 
    design-system
    )
  • 尚未定义品牌方向（使用 
    brand-ideation
    ）
  • 记录已完成体系（使用 
    brand-style-guide
    ）
  • 定义品牌声音与语气（使用 
    brand-voice
    ）
  • 基于现有品牌构建 UI 组件（使用 
    design-standards
    或 
    design-system
    ）

Required inputs

必需输入

  • The brand name and approved positioning
  • The mood direction (from ideation, or supplied as references)
  • Audience and category context
  • Application contexts (web, print, packaging, motion - whatever applies)
  • Constraints (parent brand requirements, regulatory marks, accessibility minimums)
  • 品牌名称和已批准的定位
  • 基调方向（来自创意探索，或以参考资料的形式提供）
  • 受众和品类背景
  • 应用场景（Web、印刷、包装、动效——按需选择）
  • 限制条件（母品牌要求、法规标识、无障碍最低标准）

The framework: 5 elements

框架：5 个要素

A complete identity has five elements. Each element should reinforce the others. Inconsistency between them is the most common identity failure.
完整的识别体系包含五个要素，每个要素都应强化其他要素。它们之间不一致是品牌识别失败的最常见原因。

1. Logo system

1. Logo 系统

Most brands need not one logo but a system of marks for different contexts.
Components of a logo system:
  • Primary mark. The main logo. Used wherever there is room.
  • Wordmark. Just the typography, no symbol. Used in tight horizontal contexts.
  • Symbol or glyph. Just the symbol, no type. Used in app icons, favicons, social avatars.
  • Lockup variations. Horizontal, stacked, square - whichever apply.
  • Monogram. The initial(s) styled as a mark. Optional but useful for small contexts.
Design principles:
  • Legible at 16 pixels. Test the logo at favicon size. If it falls apart, redesign.
  • Reproducible in single-color. If the logo only works in full color, it cannot be screen-printed, embroidered, or rendered in browser favicons.
  • Distinctive silhouette. Squint at it. Can you still tell what it is? If it looks like every other logo in the category at silhouette, redesign.
  • Construction grid. Every curve and angle is intentional. Document the construction.
Common failure:
  • Designing only the primary mark and discovering at launch that the wordmark, glyph, and small-size variants do not exist.
大多数品牌需要的并非单个 Logo，而是一套适用于不同场景的标识系统。
Logo 系统的组成部分：
  • 主标识（Primary Mark）。 核心 Logo，用于空间充足的场景。
  • 文字标（Wordmark）。 仅使用字体，不含符号。用于横向空间受限的场景。
  • 符号或图形字形（Symbol/Glyph）。 仅使用符号，不含文字。用于应用图标、favicon、社交头像。
  • 组合锁定变体（Lockup Variations）。 横向、堆叠、方形——按需采用。
  • 字母组合标识（Monogram）。 将首字母设计成标识。可选，但在小尺寸场景中很有用。
设计原则：
  • 在 16 像素下清晰可辨。 在 favicon 尺寸下测试 Logo。如果视觉结构散乱，应重新设计。
  • 可单色复现。 如果 Logo 只有在完整色彩下才能成立，就无法用于丝网印刷、刺绣或浏览器 favicon。
  • 轮廓具有辨识度。 眯起眼睛观察，轮廓是否仍然清晰？如果在剪影上与同品类其他 Logo 无异，应重新设计。
  • 构建网格。 每条曲线和每个角度都应经过有意设计，并记录其构建方式。
常见失败：
  • 只设计主标识，直到发布时才发现文字标、图形符号和小尺寸变体并不存在。

2. Color system

2. 色彩系统

A color system is more than a palette. It is the rules for how color carries meaning.
Components:
  • Primary color. The signature color most associated with the brand.
  • Secondary colors. 1 to 3 supporting colors that extend the palette.
  • Neutrals. The grays and tints that make up most of the surface area.
  • Semantic colors. Success, warning, error, info - if the brand operates in product UI.
  • Accent colors. Used sparingly for highlight and emphasis.
Per color, document:
  • Hex, RGB, HSL, CMYK (if print is in scope), and Pantone (if brand-critical print exists)
  • WCAG AA contrast against the other colors in the system
  • Allowed and disallowed pairings (some brand colors look terrible together)
  • Usage notes (when to use, when not to use)
Design principles:
  • Test for accessibility. WCAG AA requires 4.5:1 contrast for normal text, 3:1 for large text. If the brand color cannot pass either against white, you have a problem.
  • Test for color blindness. Around 8 percent of men have some form of color blindness. Critical UI signals should not rely on color alone.
  • Define neutrals carefully. Neutrals are 80 percent of the surface area in most brand applications. They carry more weight than the brand color.
  • Limit the palette. A 30-color palette is unmanageable. 5 to 8 carefully chosen colors beats a sprawling system.
色彩系统不只是调色板，而是一套关于颜色如何传递信息的规则。
组成部分：
  • 主色（Primary Color）。 与品牌关联度最高的标志性颜色。
  • 辅助色（Secondary Colors）。 用于扩展调色板的 1 至 3 种支撑色。
  • 中性色（Neutrals）。 构成大部分界面的灰色和淡色。
  • 语义色（Semantic Colors）。 成功、警告、错误、信息——如果品牌用于产品 UI。
  • 强调色（Accent Colors）。 谨慎用于突出重点和强化强调。
每种颜色需要记录：
  • Hex、RGB、HSL、CMYK（如果涉及印刷）以及 Pantone（如果存在品牌关键印刷场景）
  • 与系统内其他颜色搭配时的 WCAG AA 对比度
  • 允许和禁止的配色组合（有些品牌颜色组合在一起会非常难看）
  • 使用说明（何时使用、何时不使用）
设计原则：
  • 进行无障碍测试。 WCAG AA 要求普通文字的对比度达到 4.5:1，大号文字达到 3:1。如果品牌颜色与白色搭配时无法满足其中任一要求，就说明存在问题。
  • 进行色盲测试。 约 8% 的男性存在某种形式的色觉障碍。关键 UI 信号不应只依赖颜色传达。
  • 谨慎定义中性色。 在大多数品牌应用中，中性色占据界面的 80%。它们比品牌色发挥的作用更大。
  • 限制调色板规模。 30 种颜色难以管理。精心选择 5 至 8 种颜色，优于构建庞大且松散的颜色体系。

3. Typography

3. 字体

Type is the second-most-recognizable element of a brand after the logo.
Components of a type system:
  • Display typeface. For headlines and brand moments.
  • Body typeface. For long-form reading. Often the same as display, sometimes different.
  • Monospace typeface (if applicable for technical brands).
  • Type scale. The set of sizes used across applications. Typically 5 to 8 steps.
  • Type weights and styles. Which weights and italics are part of the system.
Design principles:
  • Pairing. If using two typefaces, they must work together at body and display sizes. Common pattern: serif display + sans body, or geometric sans display + humanist sans body.
  • Web licensing. Confirm web licensing covers expected pageviews. Some popular typefaces have prohibitive web licenses.
  • Variable fonts are increasingly the right call for performance and flexibility.
  • Fallback stack. Specify system fallbacks for when the brand font fails to load. The fallback should be visually similar.
  • Open-source alternatives. Document open-source equivalents for situations where licensing is impractical (third-party tools, embedded contexts).
字体是仅次于 Logo、品牌辨识度第二高的元素。
字体系统的组成部分：
  • 标题字体（Display Typeface）。 用于标题和品牌关键场景。
  • 正文字体（Body Typeface）。 用于长文本阅读。通常可以与标题字体相同，也可以有所区别。
  • 等宽字体（Monospace Typeface）。 如果技术类品牌适用。
  • 字号体系（Type Scale）。 各应用场景中使用的字号集合，通常包含 5 至 8 个层级。
  • 字重和样式（Type Weights and Styles）。 确定系统包含哪些字重和斜体样式。
设计原则：
  • 字体搭配。 如果使用两种字体，它们必须在正文字号和标题字号下协调工作。常见组合是衬线标题字体搭配无衬线正文字体，或几何无衬线标题字体搭配人文无衬线正文字体。
  • 网络授权（Web Licensing）。 确认网络授权涵盖预期的页面浏览量。有些常用字体的网络授权条款非常严格。
  • 可变字体（Variable Fonts） 越来越适合兼顾性能和灵活性。
  • 回退字体栈（Fallback Stack）。 为品牌字体加载失败的情况指定系统回退字体，并确保其在视觉上尽可能相似。
  • 开源替代方案。 在授权不切实际的情况下（第三方工具、嵌入式场景），记录对应的开源字体。

4. Imagery and illustration

4. 图像与插画

Imagery direction is often underspecified, leading to brand drift over time.
Photography direction:
  • Subject matter. What does the brand show?
  • Composition style. Tight crops, wide environments, candid, posed?
  • Lighting. Bright and natural, dramatic and directional, soft and diffused?
  • Color treatment. True color, warm shifted, desaturated, high-contrast?
  • What to reject. Stock photo aesthetics, specific cliches in the category.
Illustration direction:
  • Style. Flat, dimensional, hand-drawn, geometric, abstract, representational?
  • Color use. Full palette, restricted palette, brand colors only?
  • Line treatment. Bold and outlined, soft and shaded, no outlines?
  • Subject matter. What gets illustrated and what does not?
Iconography:
  • Style. Filled or outline. Rounded or sharp. Single weight or variable.
  • Grid. Pixel-perfect grid (often 24x24 or 16x16 base).
  • Stroke weight. Consistent across the icon set.
  • Set. Which icons exist, and how new icons get added consistently.
图像方向经常定义不足，导致品牌随着时间推移逐渐偏离原有定位。
摄影方向：
  • 主题内容。 品牌应该展示什么？
  • 构图风格。 紧凑裁切、宽幅环境、抓拍还是摆拍？
  • 光线。 明亮自然、戏剧化定向，还是柔和漫射？
  • 色彩处理。 真实色彩、暖色偏移、去饱和还是高对比度？
  • 明确排除项。 避免图库照片风格和品类中的特定俗套。
插画方向：
  • 风格。 扁平、立体、手绘、几何、抽象还是具象？
  • 色彩使用。 使用完整调色板、受限调色板，还是只使用品牌色？
  • 线条处理。 粗重描边、柔和阴影，还是无描边？
  • 主题内容。 哪些内容需要插画呈现，哪些不需要？
图标设计：
  • 风格。 实心或描边、圆角或锐角、单一粗细或可变粗细。
  • 网格。 像素级精确网格，通常以 24x24 或 16x16 为基础。
  • 描边粗细。 整个图标集保持一致。
  • 图标集。 明确包含哪些图标，以及如何以一致方式添加新图标。

5. Motion

5. 动效

If the brand lives in any digital product, marketing video, or animated touchpoint, motion is part of the identity.
Motion principles to define:
  • Easing curves. Default easings used across animations. Linear, ease-in-out, custom.
  • Duration scale. Fast (100ms), medium (200-300ms), slow (500ms+) and when each applies.
  • Choreography. How elements enter, exit, and respond to interaction.
  • Brand moments. Signature animations (logo build, page transitions, loaders).
Design principles:
  • Restraint. Most motion in product UI should be quick and subtle. Reserve dramatic motion for brand moments.
  • Reduced motion. Always provide a 
    prefers-reduced-motion
    alternative for users with vestibular sensitivities.
  • Performance. Animations must be 60fps on the target devices. Profile before shipping.
如果品牌存在于任何数字产品、营销视频或动画触点中，动效就是识别体系的一部分。
需要定义的动效原则：
  • 缓动曲线（Easing Curves）。 各类动画默认使用的缓动方式，例如 Linear、ease-in-out 或自定义曲线。
  • 时长体系（Duration Scale）。 快速（100ms）、中等（200-300ms）、缓慢（500ms 以上），以及各自的适用场景。
  • 编排（Choreography）。 元素如何进入、退出以及响应交互。
  • 品牌时刻（Brand Moments）。 标志性动画，例如 Logo 构建过程、页面转场和加载动画。
设计原则：
  • 克制。 产品 UI 中大多数动效应快速且微妙。 dramatic motion 应仅用于品牌时刻。
  • 减少动态效果（Reduced Motion）。 始终为前庭功能敏感的用户提供 
    prefers-reduced-motion
    替代方案。
  • 性能。 动画必须在目标设备上保持 60fps。发布前应进行性能分析。

Workflow

工作流程

  1. Confirm brand direction. Positioning, mood, audience. If unclear, return to 
    brand-ideation
    .
  2. Audit applications. List every place the brand will appear (web, print, packaging, app, social, signage, video). The application contexts drive what the system needs to handle.
  3. Element-by-element design. Start with logo and color, since these constrain typography. Then type. Then imagery, iconography, motion.
  4. Stress-test. Apply the system to 3 to 5 mock applications (homepage, social post, business card, product UI, signage). Where does it break? Iterate.
  5. Document. Each element with rules, examples, and dos/don'ts. This becomes the input to 
    brand-style-guide
    .
  6. Get sign-off before broad rollout. Identity changes after rollout are 10x the cost of changes during design.
  1. 确认品牌方向。 检查定位、基调和受众。如果不清晰，请返回 
    brand-ideation
    。
  2. 审查应用场景。 列出品牌将出现的所有位置（Web、印刷、包装、应用、社交媒体、标识牌、视频）。应用场景决定体系需要处理的内容。
  3. 逐要素设计。 从 Logo 和色彩开始，因为它们会约束字体选择；然后处理字体、图像、图标和动效。
  4. 压力测试。 将体系应用到 3 至 5 个模拟场景（首页、社交帖子、名片、产品 UI、标识牌），检查其在哪些地方失效，并持续迭代。
  5. 记录。 为每个要素记录规则、示例以及建议和禁忌。这些内容将成为 
    brand-style-guide
    的输入。
  6. 广泛发布前获得批准。 全面发布后更改识别体系的成本，是设计阶段更改成本的 10 倍。

Failure patterns

失败模式

  • Designing logos in isolation from application. A logo that looks great on a hi-res mockup but illegible at favicon size is a design failure.
  • Picking a brand color without contrast testing. A brand color that fails WCAG AA against white means UI built on the brand will be inaccessible by default.
  • Specifying typography without checking web licensing. Discovering at deploy that the foundry charges per-pageview for the chosen typeface is a budget-buster.
  • Skipping imagery direction. Without it, the brand becomes whatever stock photos the next person picks.
  • Treating motion as decoration. Inconsistent motion erodes brand cohesion as fast as inconsistent color.
  • Designing only primary states. What does the brand look like in error? In dark mode? In a localization where the wordmark needs to flip direction? These are not edge cases; they are the brand.
  • 脱离应用场景单独设计 Logo。 一个在高清样机上表现良好、但在 favicon 尺寸下难以辨认的 Logo，属于设计失败。
  • 选择品牌色时未进行对比度测试。 品牌色与白色搭配时未达到 WCAG AA，意味着基于该品牌构建的 UI 默认无法满足无障碍要求。
  • 指定字体时未检查网络授权。 上线后才发现字体厂商按页面浏览量收费，会直接造成预算超支。
  • 忽略图像方向。 如果没有明确方向，品牌最终会变成由下一位随意挑选的图库照片所定义的样子。
  • 将动效视为装饰。 不一致的动效会像不一致的色彩一样，迅速削弱品牌的一致性。
  • 只设计主要状态。 品牌在错误状态、深色模式或文字标需要改变方向的本地化场景中是什么样子？这些并非边缘情况，而是品牌体验的组成部分。

Output format

输出格式

Default output is a structured set of files:
  • identity/logo/
    - All logo variants (SVG primary, plus PNG/JPG exports at common sizes)
  • identity/colors.md
    - Color system with hex codes, contrast ratios, usage rules
  • identity/typography.md
    - Type system with scale, weights, fallbacks
  • identity/imagery.md
    - Imagery direction with reference examples
  • identity/iconography/
    - Icon set or icon style spec
  • identity/motion.md
    - Motion principles
  • identity/applications/
    - 3 to 5 application mockups stress-testing the system
These feed directly into 
brand-style-guide
.
默认输出是一组结构化文件：
  • identity/logo/
    - 所有 Logo 变体（SVG 主文件，以及常见尺寸的 PNG/JPG 导出文件）
  • identity/colors.md
    - 包含十六进制代码、对比度和使用规则的色彩系统
  • identity/typography.md
    - 包含字号体系、字重和回退字体的字体系统
  • identity/imagery.md
    - 包含参考示例的图像方向
  • identity/iconography/
    - 图标集或图标样式规范
  • identity/motion.md
    - 动效原则
  • identity/applications/
    - 用于压力测试体系的 3 至 5 个应用场景模型
这些文件可直接用于 
brand-style-guide
。

Reference files

参考文件

  • references/identity-system-spec.md
     - Detailed spec template for documenting each element.
  • references/contrast-and-accessibility.md
     - Accessibility checks for color and type, with the math.
  • references/identity-system-spec.md
     - 用于记录各要素的详细规范模板。
  • references/contrast-and-accessibility.md
     - 色彩和字体的无障碍检查及相关计算方法。