brand-identity

品牌标识

通过代码创建能够传达品牌价值的协调统一的视觉识别系统。

前提条件

创建品牌标识之前，请检查是否已有设计背景信息：

• 阅读 .agents/design-context.md（参见 design-context），了解现有品牌名称、颜色、字体、风格原型、受众和品牌标记。仅更新用户希望更改的内容。
• 确定品牌所属行业、目标受众和个性特征（3–5 个形容词）。
• 委派深入工作：使用 color-palette 技能生成完整的色阶，并使用 typography 技能生成字体比例尺。下方的变量（--brand-100、--brand-500 等）即为该共享基础色阶。

---

第 1 步：标志设计原则

核心规则

1. 简洁：在 16x16px（网站图标尺寸）下仍须易于识别。去除所有不能传达意义的元素。
2. 易记：只保留一个鲜明特征，不要三个，也不要五个，只要一个。
3. 可缩放：必须适用于从 16px 网站图标到广告牌的各种尺寸。避免使用在小尺寸下会消失的细线条。
4. 适用性广：必须适用于浅色背景、深色背景和照片。
5. 历久弥新：避免追逐潮流（当前流行的渐变、特定插画风格）。简洁、几何的形状经久不衰。

CSS/SVG 标志技巧

使用简单的几何 SVG 标记（48x48 viewBox、圆角矩形 + 内部形状）。对于纯 CSS 标记：在彩色圆角方形上使用 display: grid; place-items: center，并用 ::after 伪元素绘制内部形状。

最终标志应以 SVG 交付，并将文字转换为路径（或绘制为形状）——绝不要依赖网页字体，也不要在标志文件中使用 <text>。AI 图像生成（image-generation 技能、Gemini）适合探索概念方向和情绪板，但生成的是栅格图像，文字效果不可靠；请将选定的方向重新绘制为简洁的 SVG。

---

第 2 步：标志变体

每个品牌至少需要 4 种标志形式：

1. 主要标志（组合式）：图标与字标并排（flex, gap: 0.75rem）。图标为 40px，字标使用标题字体，字号为 1.25rem/700。
2. 次要标志（堆叠式）：图标位于字标上方（flex-direction: column, text-align: center）。
3. 图标标记：仅使用符号——适用于网站图标、应用图标和头像。
4. 纯字标：仅含文字的版本，用于行内场景。

响应式模式：默认显示完整标志，在 max-width: 480px 时切换为仅显示图标。

---

第 3 步：品牌色彩系统

品牌色彩系统不只是调色板。请按以下结构组织：

色彩角色

角色	数量	用途
主色	1	品牌主色。用于行动号召和关键 UI 元素。
辅助色	1	辅助强调色，与主色互补。
中性色	1 套色阶	用于文字、边框和背景的灰色。
语义色	4	成功、警告、错误、信息。
表面色	2–3	背景层。

实现

:root {
  /* Brand */
  --color-primary: oklch(0.55 0.15 250);
  --color-primary-light: oklch(0.70 0.10 250);
  --color-primary-dark: oklch(0.40 0.15 250);

  --color-secondary: oklch(0.60 0.18 330);
  --color-secondary-light: oklch(0.75 0.12 330);

  /* Surfaces (semantic names shared with design-system) */
  --bg-primary: oklch(0.99 0.005 250);
  --bg-secondary: oklch(0.97 0.005 250);
  --bg-raised: oklch(1.00 0 0);

  /* Text */
  --text-primary: oklch(0.20 0.02 250);
  --text-secondary: oklch(0.50 0.01 250);  /* ~5.8:1 on bg-primary */
  --text-inverse: oklch(0.97 0.005 250);
}

将所有最终颜色转换为十六进制格式，用于指南页面和 design-context（color-palette 技能提供颜色转换和对比度脚本），并验证每组文字与背景的搭配。

---

第 4 步：字体系统

品牌字体选择

品牌个性	字体风格	示例
传统	衬线字体	Playfair Display、Lora
现代 / 简洁	新怪诞风格 / 几何无衬线字体	Inter、DM Sans、Manrope
友好 / 温暖	圆润无衬线字体	Nunito、Quicksand
技术感	等宽字体或怪诞风格字体	JetBrains Mono、Space Grotesk
奢华	细衬线字体 / 无衬线字体	Cormorant、Outfit
活泼	展示字体或手写字体	Bricolage Grotesque、Caveat

字体栈定义

:root {
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif; /* design-context: Heading Font */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

始终包含系统备用字体。通用字体族必须始终放在最后。

---

第 5 步：品牌图案和纹理元素

细微的图案能增添视觉层次，提升品牌辨识度。

点阵图案

.brand-pattern-dots {
  background-image: radial-gradient(
    circle,
    var(--brand-200) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
}

斜线

.brand-pattern-lines {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    var(--brand-100) 10px,
    var(--brand-100) 11px
  );
}

网格图案

.brand-pattern-grid {
  background-image:
    linear-gradient(var(--brand-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--brand-100) 1px, transparent 1px);
  background-size: 32px 32px;
}

渐变噪点纹理

.brand-texture {
  position: relative;
}

.brand-texture::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
}

---

第 6 步：Logo 间距和留白区域

最小留白

Logo 周围的留白区域应等于 Logo 图形标记的高度（或字标中某个特定字母的高度，例如字母 “x”）。

.logo-container {
  /* Clear zone = logo height on all sides */
  padding: var(--logo-clearzone, 2rem);
}

/* Minimum size constraints */
.logo-primary {
  min-width: 120px;  /* Never render smaller than this */
}

.logo-icon-mark {
  min-width: 24px;   /* Absolute minimum for icon-only */
}

使用规则（请记录这些规则）

1. 不要旋转 Logo。
2. 不要将 Logo 改为批准配色集之外的颜色。
3. 不要拉伸或扭曲。
4. 不要将 Logo 放在杂乱的背景上，除非使用容器。
5. 保持最小留白不小于图形标记的高度。

---

第 7 步：品牌指南文档结构

构建品牌指南页面或系统时，请包含以下章节：

章节

1. 品牌故事：使命、愿景、价值观（每项 1 段）。
2. Logo：所有变体、留白规则、最小尺寸、误用示例。
3. 颜色：主色、辅助色、语义色板及其 hex/oklch/rgb 值。
4. 字体排印：字体系列、字号比例、搭配规则。
5. 图像：摄影风格、插画风格、图标风格。
6. 语言风格与语气：写作指南（尽管这超出了视觉设计的范畴）。
7. 图案与纹理：背景处理方式。
8. 应用示例：展示所有元素如何组合运用。

在 <main class="brand-guide"> 中使用语义化章节（<section id="logo">、<section id="colors"> 等）。使用样例展示区（浅色／深色背景变体、display: grid; place-items: center; min-height: 200px）来展示 Logo。色板使用自动适配网格（minmax(160px, 1fr)）。

---

第 8 步：生成网站图标和应用图标

网站图标尺寸

格式	尺寸	用途
ICO	32x32	浏览器标签页（旧版）
PNG	180x180	Apple 触控图标
PNG	192x192	Android 主屏幕
PNG	512x512	Android 启动画面、PWA
SVG	任意	现代浏览器，可缩放

SVG 网站图标（现代最佳方案）

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #4f46e5; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #818cf8; }
    }
  </style>
  <rect width="32" height="32" rx="6"/>
  
  <path d="M11 8h6a4 4 0 0 1 0 8h-6zm0 8h7a4 4 0 0 1 0 8h-7z" fill="none" stroke="white" stroke-width="3" stroke-linejoin="round"/>
</svg>

请使用设计上下文中的主色 hex 值（深色模式下使用浅主色），而不是示例颜色。

Web 清单文件

{
  "name": "Brand Name",
  "short_name": "Brand",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#4f46e5",
  "background_color": "#ffffff"
}

---

第 9 步：保持社交媒体头像一致性

平台一致性规则

1. 方形／圆形头像使用图标标记（而非完整 Logo）。
2. 添加内边距，避免图形标记触及圆形裁剪边缘。
3. 使用品牌主色作为背景。

/* Avatar-safe logo layout */
.social-avatar {
  width: 400px;
  height: 400px;
  background: var(--brand-500);
  display: grid;
  place-items: center;
  border-radius: 50%; /* Preview circular crop */
}

.social-avatar .logo-mark {
  width: 55%;  /* Leave ~22.5% padding on each side */
  height: 55%;
  color: white;
}

平台尺寸

平台	建议上传尺寸
X/Twitter	400x400px
LinkedIn	400x400px
Instagram	320x320px
GitHub	500x500px
Slack	512x512px

---

第 10 步：品牌应用示例

名片

3.5x2in，使用 flex column，justify-content: space-between。姓名使用展示字体，字号 14pt／700；职位使用品牌色、字号 9pt、大写；联系方式使用灰色、字号 8pt。

电子邮件签名

基于表格布局：Logo 图形标记（48px）带有品牌色 border-right，姓名／职位／联系方式堆叠显示在相邻单元格中。使用 Arial，仅使用内联样式。

---

第 11 步：验证并保存

1. 渲染一张校样表（临时 HTML）：在浅色、深色和品牌色背景上展示所有 Logo 变体；以 16、32、48 和 180px 展示图标标记；在模拟浏览器标签页中展示网站图标；在圆形裁切区域内展示头像。截取屏幕截图（npx playwright screenshot --full-page "file://$PWD/brand-proof.html" proof.png），并用 Read 查看。检查：图标标记在 16px 时仍清晰可辨，没有线条消失，在所有背景上对比度都足够，没有任何内容触及圆形裁切边缘。
2. 提出回写到 .agents/design-context.md，仅更新已更改的字段：品牌标识（名称、标语）、色彩系统行（十六进制值）、字体排印字体、设计风格原型和品牌标记（Logo 描述、图标风格）。显示差异，并在保存前征求确认。

---

快速参考：品牌标识检查清单

1. 定义品牌个性（3-5 个形容词）。
2. 选择主品牌色和辅助品牌色。
3. 选择字体搭配（标题字体 + 正文字体）。
4. 设计 Logo 标记，并创建全部 4 种变体。
5. 定义留白区和最小尺寸。
6. 生成完整的色彩系统（色阶、语义色、中性色）。
7. 创建品牌图案/纹理。
8. 构建网站图标和应用图标。
9. 创建社交媒体头像。
10. 在品牌指南页面中记录所有内容。
11. 渲染校样表、检查，并将品牌信息保存到 design-context。