ogt-docs-define-branding

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

OGT Docs - Define Branding

OGT 文档 - 品牌定义

Complete guide for creating brand definition documents.

创建品牌定义文档的完整指南。

Overview

概述

Brand definitions establish how your product looks, sounds, and feels across all touchpoints. They ensure consistent brand expression from website to emails to product UI.

mermaid

mindmap
  root((Brand<br/>Definitions))
    Visual Identity
      Logo
      Colors
      Typography
      Imagery
      Iconography
    Voice & Tone
      Brand voice
      Tone variations
      Writing style
      Vocabulary
    Guidelines
      Usage rules
      Do's and Don'ts
      Templates
      Examples
    Assets
      Logo files
      Color codes
      Font files
      Templates

品牌定义确立了你的产品在所有接触点上的视觉呈现、语气风格和整体感知。它们确保从网站、邮件到产品UI的品牌表达保持一致。

mermaid

mindmap
  root((Brand<br/>Definitions))
    Visual Identity
      Logo
      Colors
      Typography
      Imagery
      Iconography
    Voice & Tone
      Brand voice
      Tone variations
      Writing style
      Vocabulary
    Guidelines
      Usage rules
      Do's and Don'ts
      Templates
      Examples
    Assets
      Logo files
      Color codes
      Font files
      Templates

When to Use This Skill

何时使用此技能

Use

ogt-docs-define-branding

when:

Establishing brand identity for a new product
Documenting existing brand guidelines
Creating brand consistency rules
Defining voice and tone
Organizing brand assets

在以下场景使用

ogt-docs-define-branding

：

为新产品建立品牌标识
记录现有品牌指南
创建品牌一致性规则
定义语气风格
整理品牌资产

Folder Structure

文件夹结构

docs/definitions/branding/
├── visual_identity/
│   ├── definition.md           # Visual identity overview
│   ├── logo/
│   │   ├── definition.md       # Logo usage rules
│   │   ├── variations.md       # Logo variations
│   │   ├── clearspace.md       # Clear space requirements
│   │   └── misuse.md           # What NOT to do
│   ├── colors/
│   │   ├── definition.md       # Color system overview
│   │   ├── primary.md          # Primary palette
│   │   ├── secondary.md        # Secondary palette
│   │   ├── semantic.md         # Semantic colors
│   │   └── accessibility.md    # Color accessibility
│   ├── typography/
│   │   ├── definition.md       # Type system overview
│   │   ├── typefaces.md        # Font families
│   │   ├── scale.md            # Type scale
│   │   └── usage.md            # When to use what
│   ├── imagery/
│   │   ├── definition.md       # Image style
│   │   ├── photography.md      # Photo guidelines
│   │   ├── illustration.md     # Illustration style
│   │   └── icons.md            # Iconography
│   └── .version
│
├── voice_and_tone/
│   ├── definition.md           # Voice overview
│   ├── brand_voice.md          # Core voice attributes
│   ├── tone_spectrum.md        # Tone variations
│   ├── writing_style.md        # Writing guidelines
│   ├── vocabulary.md           # Words we use/avoid
│   └── .version
│
├── brand_guidelines/
│   ├── definition.md           # Guidelines overview
│   ├── usage_rules.md          # General rules
│   ├── applications/           # Application examples
│   │   ├── website.md
│   │   ├── email.md
│   │   ├── social.md
│   │   ├── product_ui.md
│   │   └── print.md
│   └── .version
│
└── assets/
    ├── definition.md           # Asset inventory
    ├── logo_files.md           # Logo file locations
    ├── font_files.md           # Font file locations
    ├── templates.md            # Template locations
    └── .version

docs/definitions/branding/
├── visual_identity/
│   ├── definition.md           # 视觉识别概述
│   ├── logo/
│   │   ├── definition.md       # Logo使用规则
│   │   ├── variations.md       # Logo变体
│   │   ├── clearspace.md       # 留白要求
│   │   └── misuse.md           # 禁用场景
│   ├── colors/
│   │   ├── definition.md       # 色彩系统概述
│   │   ├── primary.md          # 主色调 palette
│   │   ├── secondary.md        # 辅助色调 palette
│   │   ├── semantic.md         # 语义色彩
│   │   └── accessibility.md    # 色彩无障碍性
│   ├── typography/
│   │   ├── definition.md       # 字体系统概述
│   │   ├── typefaces.md        # 字体家族
│   │   ├── scale.md            # 字体层级
│   │   └── usage.md            # 使用场景
│   └── .version
│
├── voice_and_tone/
│   ├── definition.md           # 语气概述
│   ├── brand_voice.md          # 核心语气属性
│   ├── tone_spectrum.md        # 语气范围
│   ├── writing_style.md        # 写作指南
│   ├── vocabulary.md           # 词汇规范
│   └── .version
│
├── brand_guidelines/
│   ├── definition.md           # 品牌指南概述
│   ├── usage_rules.md          # 通用规则
│   ├── applications/           # 应用示例
│   │   ├── website.md
│   │   ├── email.md
│   │   ├── social.md
│   │   ├── product_ui.md
│   │   └── print.md
│   └── .version
│
└── assets/
    ├── definition.md           # 资产清单
    ├── logo_files.md           # Logo文件位置
    ├── font_files.md           # 字体文件位置
    ├── templates.md            # 模板位置
    └── .version

Brand Definition Types

品牌定义类型

1. Visual Identity

1. 视觉识别

Defines how your brand looks.

定义品牌的视觉呈现。

Example: visual_identity/colors/

示例：visual_identity/colors/

colors/
├── definition.md
├── primary.md
├── secondary.md
├── semantic.md
└── accessibility.md

colors/
├── definition.md
├── primary.md
├── secondary.md
├── semantic.md
└── accessibility.md

definition.md

markdown

undefined

markdown

undefined

Definition: Color System

定义：色彩系统

Overview

概述

The {Product} color system is designed for clarity, accessibility, and brand recognition. Our palette balances vibrant brand colors with functional UI colors.

{Product}色彩系统专为清晰度、无障碍性和品牌辨识度设计。我们的调色板在鲜明的品牌色与功能性UI色彩之间取得平衡。

Color Philosophy

色彩理念

Bold but accessible: Colors meet WCAG AA standards
Consistent: Same colors across all touchpoints
Purposeful: Each color has a specific role
Dark-mode ready: Colors work in both light and dark themes

鲜明且无障碍：色彩符合WCAG AA标准
一致性：所有接触点使用相同色彩
目的性：每种色彩都有特定作用
适配深色模式：色彩在亮色和暗色主题下均适用

Palette Overview

调色板概述


┌─────────────────────────────────────────────────────────────┐
│ PRIMARY │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Primary │ │ Primary │ │ Primary │ │
│ │ 500 │ │ 600 │ │ 700 │ │
│ └─────────┘ └─────────┘ └─────────┘ │
├─────────────────────────────────────────────────────────────┤
│ SECONDARY │
│ ┌─────────┐ ┌─────────┐ │
│ │Secondary│ │ Accent │ │
│ └─────────┘ └─────────┘ │
├─────────────────────────────────────────────────────────────┤
│ SEMANTIC │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Success │ │ Warning │ │ Error │ │ Info │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
├─────────────────────────────────────────────────────────────┤
│ NEUTRAL │
│ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │
│ │50 │ │100│ │200│ │300│ │400│ │500│ │600│ │700│ │800│ │
│ └───┘ └───┘ └───┘ └───┘ └───┘ └───┘ └───┘ └───┘ └───┘ │
└─────────────────────────────────────────────────────────────┘


┌─────────────────────────────────────────────────────────────┐
│ PRIMARY │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Primary │ │ Primary │ │ Primary │ │
│ │ 500 │ │ 600 │ │ 700 │ │
│ └─────────┘ └─────────┘ └─────────┘ │
├─────────────────────────────────────────────────────────────┤
│ SECONDARY │
│ ┌─────────┐ ┌─────────┐ │
│ │Secondary│ │ Accent │ │
│ └─────────┘ └─────────┘ │
├─────────────────────────────────────────────────────────────┤
│ SEMANTIC │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Success │ │ Warning │ │ Error │ │ Info │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
├─────────────────────────────────────────────────────────────┤
│ NEUTRAL │
│ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │
│ │50 │ │100│ │200│ │300│ │400│ │500│ │600│ │700│ │800│ │
│ └───┘ └───┘ └───┘ └───┘ └───┘ └───┘ └───┘ └───┘ └───┘ │
└─────────────────────────────────────────────────────────────┘

Primary Colors

主色调

Brand Primary

品牌主色

The primary color is the most recognizable element of our visual identity. Use it for primary actions, key UI elements, and brand moments.

主色是我们视觉识别中最具辨识度的元素。用于主要操作按钮、关键UI元素和品牌展示场景。

Primary Blue

主蓝色

Token	Hex	RGB	HSL	Usage
`primary-50`	#EFF6FF	239, 246, 255	214, 100%, 97%	Backgrounds
`primary-100`	#DBEAFE	219, 234, 254	214, 95%, 93%	Hover states
`primary-200`	#BFDBFE	191, 219, 254	213, 97%, 87%	Borders
`primary-300`	#93C5FD	147, 197, 253	212, 96%, 78%	Disabled
`primary-400`	#60A5FA	96, 165, 250	213, 94%, 68%	Links
`primary-500`	#3B82F6	59, 130, 246	217, 91%, 60%	Primary
`primary-600`	#2563EB	37, 99, 235	221, 83%, 53%	Hover
`primary-700`	#1D4ED8	29, 78, 216	224, 76%, 48%	Pressed
`primary-800`	#1E40AF	30, 64, 175	226, 71%, 40%	Dark mode
`primary-900`	#1E3A8A	30, 58, 138	224, 64%, 33%	Dark mode hover

标识	十六进制	RGB值	HSL值	使用场景
`primary-50`	#EFF6FF	239, 246, 255	214, 100%, 97%	背景色
`primary-100`	#DBEAFE	219, 234, 254	214, 95%, 93%	悬停状态
`primary-200`	#BFDBFE	191, 219, 254	213, 97%, 87%	边框色
`primary-300`	#93C5FD	147, 197, 253	212, 96%, 78%	禁用状态
`primary-400`	#60A5FA	96, 165, 250	213, 94%, 68%	链接色
`primary-500`	#3B82F6	59, 130, 246	217, 91%, 60%	主要操作色
`primary-600`	#2563EB	37, 99, 235	221, 83%, 53%	悬停色
`primary-700`	#1D4ED8	29, 78, 216	224, 76%, 48%	点击按压色
`primary-800`	#1E40AF	30, 64, 175	226, 71%, 40%	深色模式
`primary-900`	#1E3A8A	30, 58, 138	224, 64%, 33%	深色模式悬停

Usage Guidelines

使用指南

Do

正确做法

Use
```
primary-500
```
for primary buttons
Use
```
primary-600
```
for button hover states
Use
```
primary-100
```
for highlighted backgrounds
Use
```
primary-400
```
for links on white backgrounds

使用
```
primary-500
```
作为主要按钮颜色
使用
```
primary-600
```
作为按钮悬停状态
使用
```
primary-100
```
作为高亮背景
在白色背景上使用
```
primary-400
```
作为链接色

Don't

错误做法

Don't use primary colors for error states
Don't use primary-500 on primary backgrounds (contrast)
Don't modify primary colors with opacity
Don't use more than 2 primary shades in one component

不要将主色调用于错误状态
不要在主色调背景上使用
```
primary-500
```
（对比度不足）
不要修改主色调的透明度
不要在单个组件中使用超过2种主色调变体

CSS Variables

CSS变量

css

:root {
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
}

undefined

css

:root {
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
}

undefined

Tailwind Config

Tailwind 配置

javascript

colors: {
  primary: {
    50: '#EFF6FF',
    100: '#DBEAFE',
    // ... etc
  }
}

undefined

javascript

colors: {
  primary: {
    50: '#EFF6FF',
    100: '#DBEAFE',
    // ... 其他变体
  }
}

undefined

accessibility.md

markdown

undefined

markdown

undefined

Color Accessibility

色彩无障碍性

WCAG Requirements

WCAG 要求

AA Compliance (Required)

AA合规性（必填）

Normal text: 4.5:1 contrast ratio
Large text (18pt+): 3:1 contrast ratio
UI components: 3:1 contrast ratio

普通文本：4.5:1的对比度
大文本（18pt+）：3:1的对比度
UI组件：3:1的对比度

AAA Compliance (Recommended)

AAA合规性（推荐）

Normal text: 7:1 contrast ratio
Large text: 4.5:1 contrast ratio

普通文本：7:1的对比度
大文本：4.5:1的对比度

Contrast Matrix

对比度矩阵

On White (#FFFFFF)

在白色背景（#FFFFFF）上

Color	Hex	Ratio	Small Text	Large Text
primary-500	#3B82F6	3.1:1	❌	✅
primary-600	#2563EB	4.5:1	✅	✅
primary-700	#1D4ED8	5.8:1	✅	✅
gray-600	#4B5563	5.9:1	✅	✅
gray-700	#374151	8.6:1	✅	✅

颜色	十六进制	对比度	小文本	大文本
primary-500	#3B82F6	3.1:1	❌	✅
primary-600	#2563EB	4.5:1	✅	✅
primary-700	#1D4ED8	5.8:1	✅	✅
gray-600	#4B5563	5.9:1	✅	✅
gray-700	#374151	8.6:1	✅	✅

On Primary-500 (#3B82F6)

在primary-500背景（#3B82F6）上

Color	Hex	Ratio	Small Text	Large Text
white	#FFFFFF	3.1:1	❌	✅
primary-50	#EFF6FF	2.8:1	❌	❌

Note: Use white text on primary-600+ for AA compliance.

颜色	十六进制	对比度	小文本	大文本
white	#FFFFFF	3.1:1	❌	✅
primary-50	#EFF6FF	2.8:1	❌	❌

注意：在primary-600及更深的主色调上使用白色文本以满足AA合规性。

Color Blindness Considerations

色盲适配注意事项

Safe Combinations

安全配色组合

Blue + Orange (distinguishable in all types)
Blue + Yellow
Purple + Yellow

蓝色 + 橙色（所有色盲类型均可区分）
蓝色 + 黄色
紫色 + 黄色

Avoid Relying On

避免单独依赖

Red vs Green alone (use icons/text)
Subtle shade differences for meaning

仅使用红色与绿色区分（需配合图标/文本）
用细微色调差异传达含义

Testing Tools

测试工具

Figma: Color Blind plugin
Chrome: DevTools → Rendering → Emulate vision deficiencies
Online: Coblis, Color Oracle

---

Figma：Color Blind插件
Chrome：开发者工具 → 渲染 → 模拟视觉缺陷
在线工具：Coblis, Color Oracle

---

2. Voice and Tone

2. 语气风格

Defines how your brand sounds.

定义品牌的语言风格。

Example: voice_and_tone/

示例：voice_and_tone/

voice_and_tone/
├── definition.md
├── brand_voice.md
├── tone_spectrum.md
├── writing_style.md
└── vocabulary.md

voice_and_tone/
├── definition.md
├── brand_voice.md
├── tone_spectrum.md
├── writing_style.md
└── vocabulary.md

brand_voice.md

markdown

undefined

markdown

undefined

Brand Voice

品牌语气

Voice Attributes

语气属性

Our voice has four core attributes that should come through in all communications.

我们的语气包含四个核心属性，应体现在所有沟通内容中。

1. Clear

1. 清晰

We explain complex things simply. No jargon, no buzzwords, no fluff.

Do: "Your deploy finished in 3 seconds." Don't: "Leveraging our proprietary pipeline optimization, your deployment has been successfully processed."

我们用简单的语言解释复杂内容。避免行话、流行语和冗余表述。

正确示例："你的部署在3秒内完成。" 错误示例："借助我们的专有管道优化技术，你的部署已成功处理。"

2. Confident

2. 自信

We know our product is good. We state things directly without hedging.

Do: "The fastest way to ship." Don't: "We believe we might be one of the faster options available."

我们深知产品的优势。直接陈述，不模棱两可。

正确示例："最快的交付方式。" 错误示例："我们相信我们可能是目前较快的选择之一。"

3. Helpful

3. 乐于助人

We're here to help you succeed, not to show off. We anticipate questions.

Do: "Deploys failed? Here's how to fix the 3 most common issues." Don't: "Deploy failed. Check the logs."

我们的目标是帮助你成功，而非炫耀。提前预判用户疑问。

正确示例："部署失败？以下是修复3种常见问题的方法。" 错误示例："部署失败。查看日志。"

4. Human

4. 人性化

We're people talking to people. Warm, not robotic. Personality allowed.

Do: "Nice work! Your site is live." Don't: "Deployment successful. Status: Active."

我们是人与人之间的沟通。亲切自然，而非机械生硬。允许展现个性。

正确示例："做得好！你的网站已上线。" 错误示例："部署成功。状态：活跃。"

Voice Spectrum

语气范围


├─────────────────────────────────────────────────────────────┤
│ MORE SERIOUS MORE PLAYFUL │
│ ◆─────────────────────●─────────────────────────────◆ │
│ Legal, Security Marketing, Docs Social, Success │
├─────────────────────────────────────────────────────────────┤
│ MORE FORMAL MORE CASUAL │
│ ◆────────────●──────────────────────────────────────◆ │
│ Enterprise General Community │
├─────────────────────────────────────────────────────────────┤


├─────────────────────────────────────────────────────────────┤
│ 更正式 更活泼 │
│ ◆─────────────────────●─────────────────────────────◆ │
│ 法律、安全 营销、文档 社交、客户成功 │
├─────────────────────────────────────────────────────────────┤
│ 更严肃 更随意 │
│ ◆────────────●──────────────────────────────────────◆ │
│ 企业客户 普通用户 社区用户 │
├─────────────────────────────────────────────────────────────┤

Voice by Context

不同场景下的语气

Context	Clarity	Confidence	Helpfulness	Human
Marketing	High	Very High	Medium	High
Documentation	Very High	High	Very High	Medium
Error Messages	Very High	Medium	Very High	Medium
Success Messages	High	High	Medium	Very High
Legal/Security	Very High	Very High	High	Low
Social Media	High	Medium	Medium	Very High

undefined

场景	清晰度	自信度	乐于助人	人性化
营销	高	极高	中	高
文档	极高	高	极高	中
错误提示	极高	中	极高	中
成功提示	高	高	中	极高
法律/安全	极高	极高	高	低
社交媒体	高	中	中	极高

undefined

vocabulary.md

markdown

undefined

markdown

undefined

Vocabulary Guide

词汇指南

Words We Use

我们使用的词汇

Product Terms

产品术语

Concept	We Say	We Don't Say
Publishing	Deploy, Ship	Push, Release, Publish
Users	You, Developers	Users, Customers
Our product	{Product}	The platform, The solution
Projects	Projects	Apps, Applications, Sites
Teams	Teams	Organizations, Workspaces

概念	我们的表述	避免使用的表述
发布	Deploy, Ship	Push, Release, Publish
用户	You, Developers	Users, Customers
我们的产品	{Product}	The platform, The solution
项目	Projects	Apps, Applications, Sites
团队	Teams	Organizations, Workspaces

Technical Terms

技术术语

Concept	We Say	We Don't Say
Speed	Fast, Quick, Instant	Performant, Optimized
Problems	Issues, Problems	Errors, Failures
Fix	Fix, Resolve	Remediate, Address
Start	Start, Begin	Initialize, Commence

概念	我们的表述	避免使用的表述
速度	Fast, Quick, Instant	Performant, Optimized
问题	Issues, Problems	Errors, Failures
修复	Fix, Resolve	Remediate, Address
开始	Start, Begin	Initialize, Commence

Action Words

动作词汇

We Say	We Don't Say
Get started	Sign up now
Learn more	Click here
Try it free	Start free trial
See how	Discover

我们的表述	避免使用的表述
Get started	Sign up now
Learn more	Click here
Try it free	Start free trial
See how	Discover

Words We Avoid

我们避免的词汇

Corporate Jargon

企业行话

Leverage
Synergy
Paradigm
Disrupt
Revolutionary
Best-in-class
World-class
Cutting-edge

Leverage
Synergy
Paradigm
Disrupt
Revolutionary
Best-in-class
World-class
Cutting-edge

Hedge Words

不确定表述

Might
Maybe
Possibly
We think
We believe

Might
Maybe
Possibly
We think
We believe

Complexity

复杂表述

Utilize (use "use")
Implement (use "add", "set up")
Functionality (use "features")
Capabilities (use "features", "can")

Utilize（使用"use"）
Implement（使用"add", "set up"）
Functionality（使用"features"）
Capabilities（使用"features", "can"）

Inclusive Language

包容性语言

Gender

性别

Use "they/them" for unknown individuals
Avoid "guys" → use "everyone", "folks", "team"
Avoid gendered roles → "developer" not "dev guy"

对未知个体使用"they/them"
避免使用"guys" → 使用"everyone", "folks", "team"
避免性别化称谓 → 使用"developer"而非"dev guy"

Ability

能力适配

Avoid "simply", "easily", "just" (implies difficulty is user's fault)
Use "select" not "click" (works for keyboard users too)
Describe actions, not mechanisms

避免使用"simply", "easily", "just"（暗示用户能力不足）
使用"select"而非"click"（适配键盘操作用户）
描述操作行为，而非操作方式

Global

全球化适配

Avoid US-centric references
Use international date formats in docs
Don't assume timezone

---

避免美国本土参考内容
在文档中使用国际日期格式
不要假设时区

---

3. Brand Guidelines

3. 品牌指南

Defines usage rules and applications.

定义使用规则和应用场景。

Example: brand_guidelines/applications/product_ui.md

示例：brand_guidelines/applications/product_ui.md

markdown

undefined

markdown

undefined

Brand in Product UI

产品UI中的品牌规范

Overview

概述

The product UI is where users spend the most time with our brand. Consistency here builds trust and familiarity.

产品UI是用户与品牌接触最多的场景。保持一致性有助于建立信任和熟悉感。

Logo Usage in Product

产品中的Logo使用

Header/Navigation

头部/导航栏

Use logomark only (no wordmark)
Size: 32px height
Color: Primary on light, White on dark

仅使用Logo图形（不包含文字标识）
尺寸：32px高度
颜色：亮色主题用主色调，暗色主题用白色

Loading/Empty States

加载/空状态

Use logomark with subtle animation
Max size: 48px

使用带有轻微动画的Logo图形
最大尺寸：48px

Favicon

网站图标（Favicon）

Use simplified logomark
Sizes: 16px, 32px, 180px (Apple touch)

使用简化版Logo图形
尺寸：16px, 32px, 180px（苹果触摸图标）

Colors in Product

产品中的色彩规范

Light Theme

亮色主题

Element	Color Token	Hex
Background	neutral-50	#F9FAFB
Surface	white	#FFFFFF
Border	neutral-200	#E5E7EB
Text primary	neutral-900	#111827
Text secondary	neutral-600	#4B5563
Primary action	primary-600	#2563EB

元素	颜色标识	十六进制
背景	neutral-50	#F9FAFB
表层	white	#FFFFFF
边框	neutral-200	#E5E7EB
主要文本	neutral-900	#111827
次要文本	neutral-600	#4B5563
主要操作	primary-600	#2563EB

Dark Theme

暗色主题

Element	Color Token	Hex
Background	neutral-900	#111827
Surface	neutral-800	#1F2937
Border	neutral-700	#374151
Text primary	neutral-50	#F9FAFB
Text secondary	neutral-400	#9CA3AF
Primary action	primary-500	#3B82F6

元素	颜色标识	十六进制
背景	neutral-900	#111827
表层	neutral-800	#1F2937
边框	neutral-700	#374151
主要文本	neutral-50	#F9FAFB
次要文本	neutral-400	#9CA3AF
主要操作	primary-500	#3B82F6

Typography in Product

产品中的字体规范

Font Stack

字体栈

css

font-family:
  "Inter",
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  Roboto,
  Oxygen,
  Ubuntu,
  sans-serif;

undefined

css

font-family:
  "Inter",
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  Roboto,
  Oxygen,
  Ubuntu,
  sans-serif;

undefined

Type Scale

字体层级

Size	Use
12px	Captions, labels
14px	Body text, inputs
16px	Emphasis, subheads
20px	Section headers
24px	Page titles

大小	使用场景
12px	说明文字、标签
14px	正文文本、输入框
16px	强调文本、子标题
20px	章节标题
24px	页面标题

Voice in Product

产品中的语气规范

Success Messages

成功提示

Tone: Celebratory but brief

Do: "Deployed! Your changes are live." Don't: "Deployment completed successfully."

语气：庆祝但简洁

正确示例："部署完成！你的修改已上线。" 错误示例："部署成功完成。"

Error Messages

错误提示

Tone: Helpful and clear

Do: "Couldn't deploy. The build failed on line 42 of index.js." Don't: "Error: BUILD_FAILED"

语气：有帮助且清晰

正确示例："部署失败。构建在index.js的第42行出错。" 错误示例："Error: BUILD_FAILED"

Empty States

空状态

Tone: Encouraging and actionable

Do: "No projects yet. Create your first project to get started." Don't: "No data."

语气：鼓励且有行动指引

正确示例："还没有项目。创建你的第一个项目开始使用吧。" 错误示例："无数据。"

Confirmation Dialogs

确认对话框

Tone: Clear about consequences

Do: "Delete this project? This can't be undone." Don't: "Are you sure you want to proceed with deletion?"

---

语气：清晰说明后果

正确示例："删除此项目？此操作无法撤销。" 错误示例："你确定要继续删除吗？"

---

Signal Files for Brand Definitions

品牌定义的标识文件

Signal	Meaning
`.draft`	In progress
`.approved`	Approved by brand/design
`.approved_by_design`	Design lead approved
`.approved_by_founder`	Founder approved (major changes)
`.version`	Schema version
`.last_updated`	Last significant update

标识文件	含义
`.draft`	进行中
`.approved`	已通过品牌/设计团队批准
`.approved_by_design`	已通过设计负责人批准
`.approved_by_founder`	已通过创始人批准（重大变更）
`.version`	架构版本
`.last_updated`	最后一次重大更新时间

Quality Checklist

质量检查清单

Before requesting review:

All color values include Hex, RGB, and HSL
Typography includes web-safe fallbacks
Accessibility requirements met (WCAG AA)
Do/Don't examples for every guideline
Dark mode considerations included
Asset file locations documented
Voice examples cover all major contexts
Vocabulary lists are comprehensive

undefined

提交审核前请确认：

所有色彩值包含十六进制、RGB和HSL格式
字体规范包含Web安全备选字体
满足无障碍性要求（WCAG AA）
每个指南都包含正确/错误示例
考虑了深色模式适配
记录了资产文件的位置
语气示例覆盖所有主要场景
词汇列表全面

undefined

ogt-docs-define-branding

Original

Translation

OGT Docs - Define Branding

OGT 文档 - 品牌定义

Overview

概述

When to Use This Skill

何时使用此技能

Folder Structure

文件夹结构

Brand Definition Types

品牌定义类型

1. Visual Identity

1. 视觉识别

Example: visual_identity/colors/

示例：visual_identity/colors/

definition.md

definition.md

Definition: Color System

定义：色彩系统

Overview

概述

Color Philosophy

色彩理念

Palette Overview

调色板概述

Related Documents

相关文档

primary.md

primary.md

Primary Colors

主色调

Brand Primary

品牌主色

Primary Blue

主蓝色

Usage Guidelines

使用指南

Do

正确做法

Don't

错误做法

CSS Variables

CSS变量

Tailwind Config

Tailwind 配置

accessibility.md

accessibility.md

Color Accessibility

色彩无障碍性

WCAG Requirements

WCAG 要求

AA Compliance (Required)

AA合规性（必填）

AAA Compliance (Recommended)

AAA合规性（推荐）

Contrast Matrix

对比度矩阵

On White (#FFFFFF)

在白色背景（#FFFFFF）上

On Primary-500 (#3B82F6)

在primary-500背景（#3B82F6）上

Color Blindness Considerations

色盲适配注意事项

Safe Combinations

安全配色组合

Avoid Relying On

避免单独依赖

Testing Tools

测试工具

2. Voice and Tone

2. 语气风格

Example: voice_and_tone/

示例：voice_and_tone/

brand_voice.md

brand_voice.md

Brand Voice

品牌语气

Voice Attributes