智能对话
可发布/下载高级技能登录
品

品牌视觉规范系统

作者：鹿Sir开发工具v1

品牌视觉规范系统生成技能。帮助建立完整的品牌设计系统，包括色彩体系、字体规范、间距布局、组件模式、动效规范和响应式设计。适用于品牌设计系统搭建、UI组件规范制定、前端开发协作。

下载量
264
点赞
66
价格
免费

技能文档

---
name: pinxue-shijue-guifan
description: 品牌视觉规范系统生成技能。帮助建立完整的品牌设计系统，包括色彩体系、字体规范、间距布局、组件模式、动效规范和响应式设计。适用于品牌设计系统搭建、UI组件规范制定、前端开发协作。
title: 品牌视觉规范系统
category: 开发工具
---

# 品牌视觉规范系统

本技能帮助设计师和开发者建立一套完整、一致、可复用的品牌视觉规范系统。

---

## 一、色彩体系

### 1.1 主色（Primary Colors）

主色是品牌的核心识别色，用于关键交互元素、品牌标识和重要信息传达。

| 色阶 | HSL | HEX | 用途 |
|------|-----|-----|------|
| Primary-50 | hsl(220, 100%, 97%) | #F0F4FF | 浅背景、悬浮态 |
| Primary-100 | hsl(220, 100%, 93%) | #D9E4FF | 选中态背景 |
| Primary-200 | hsl(220, 100%, 85%) | #B3C9FF | 次要图形 |
| Primary-300 | hsl(220, 100%, 77%) | #8CADFF | 图表辅助色 |
| Primary-400 | hsl(220, 100%, 69%) | #6694FF | 图标高亮 |
| Primary-500 | hsl(220, 100%, 60%) | #337BFF | 主色标准值 |
| Primary-600 | hsl(220, 100%, 50%) | #0062FF | 按钮默认态 |
| Primary-700 | hsl(220, 100%, 42%) | #0050D4 | 按钮悬浮态 |
| Primary-800 | hsl(220, 100%, 35%) | #003DAA | 深色强调 |
| Primary-900 | hsl(220, 100%, 25%) | #002B7A | 深色背景文字 |

### 1.2 中性色（Neutral Colors）

中性色用于文字、背景、边框、分割线等基础界面元素。

| 色阶 | HSL | HEX | 用途 |
|------|-----|-----|------|
| Neutral-0 | hsl(0, 0%, 100%) | #FFFFFF | 纯白背景 |
| Neutral-50 | hsl(220, 20%, 98%) | #F9FAFB | 页面背景 |
| Neutral-100 | hsl(220, 17%, 95%) | #F0F2F5 | 卡片背景 |
| Neutral-200 | hsl(220, 14%, 90%) | #E2E5EA | 分割线 |
| Neutral-300 | hsl(220, 12%, 80%) | #C7CBD3 | 禁用边框 |
| Neutral-400 | hsl(220, 10%, 65%) | #9BA2AE | 占位文字 |
| Neutral-500 | hsl(220, 10%, 50%) | #737A87 | 次要文字 |
| Neutral-600 | hsl(220, 12%, 40%) | #5A6170 | 常规文字 |
| Neutral-700 | hsl(220, 15%, 30%) | #404754 | 标题文字 |
| Neutral-800 | hsl(220, 18%, 20%) | #2A2F3A | 重要文字 |
| Neutral-900 | hsl(220, 22%, 12%) | #171C26 | 标题/正文 |

### 1.3 语义色（Semantic Colors）

语义色传达特定状态信息，不可随意替换。

| 语义 | 色值 | HEX | 用途 |
|------|------|-----|------|
| 成功 Success | hsl(145, 65%, 42%) | #22A85A | 成功提示、通过状态 |
| 成功浅 | hsl(145, 60%, 95%) | #EDFAF1 | 成功提示背景 |
| 警告 Warning | hsl(38, 95%, 52%) | #F5A623 | 警告提示、注意状态 |
| 警告浅 | hsl(38, 90%, 95%) | #FEF6E8 | 警告提示背景 |
| 错误 Error | hsl(0, 78%, 55%) | #EE3B3B | 错误提示、危险操作 |
| 错误浅 | hsl(0, 75%, 96%) | #FDECEC | 错误提示背景 |
| 信息 Info | hsl(210, 90%, 52%) | #1E88E5 | 信息提示、帮助说明 |
| 信息浅 | hsl(210, 85%, 95%) | #E8F2FD | 信息提示背景 |

### 1.4 色彩使用原则

- 主色占界面面积不超过 10%
- 中性色占界面面积 70%-80%
- 语义色仅在需要传达状态时使用
- 同一屏幕语义色不超过 2 种
- 深色模式下主色明度提高 10%-15%

---

## 二、字体规范

### 2.1 字体家族

```css
/* 中文优先字体栈 */
--font-family-base:
  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
  "WenQuanYi Micro Hei", sans-serif;

/* 英文/数字字体栈 */
--font-family-latin:
  "Inter", "SF Pro Display", "Helvetica Neue",
  "Arial", sans-serif;

/* 等宽字体（代码/数据） */
--font-family-mono:
  "JetBrains Mono", "Fira Code", "SF Mono",
  "Menlo", "Consolas", monospace;
```

### 2.2 字重定义

| 字重名称 | 数值 | 用途 |
|----------|------|------|
| Regular | 400 | 正文、说明文字 |
| Medium | 500 | 强调正文、标签 |
| SemiBold | 600 | 小标题、按钮文字 |
| Bold | 700 | 标题、关键数据 |

### 2.3 字体比例（Type Scale）

基于 1.25 倍率（Major Third）的字体比例系统：

| 层级 | 字号 | 行高 | 字重 | 用途 |
|------|------|------|------|------|
| Display | 48px / 3rem | 1.2 | Bold 700 | 大屏展示标题 |
| H1 | 36px / 2.25rem | 1.25 | Bold 700 | 页面主标题 |
| H2 | 28px / 1.75rem | 1.3 | Bold 700 | 区块标题 |
| H3 | 22px / 1.375rem | 1.35 | SemiBold 600 | 子标题 |
| H4 | 18px / 1.125rem | 1.4 | SemiBold 600 | 卡片标题 |
| Body-LG | 16px / 1rem | 1.6 | Regular 400 | 大正文 |
| Body | 14px / 0.875rem | 1.6 | Regular 400 | 标准正文 |
| Body-SM | 13px / 0.8125rem | 1.5 | Regular 400 | 小正文 |
| Caption | 12px / 0.75rem | 1.5 | Regular 400 | 说明文字、时间戳 |
| Overline | 11px / 0.6875rem | 1.4 | Medium 500 | 标签、分类名 |

### 2.4 段落排版规范

- 中文正文行高：1.6 - 1.8
- 段落间距：正文字号 × 0.8
- 中文段落首行不缩进（互联网产品规范）
- 每行字数建议：28-42 个中文字符
- 标题与正文间距：标题字号 × 0.5

---

## 三、间距与布局

### 3.1 间距比例系统

基于 4px 基础单元的间距系统：

| 名称 | 数值 | 用途 |
|------|------|------|
| space-xxs | 4px (0.25rem) | 图标与文字间距 |
| space-xs | 8px (0.5rem) | 紧凑元素间距 |
| space-sm | 12px (0.75rem) | 表单元素内间距 |
| space-md | 16px (1rem) | 组件内间距 |
| space-lg | 24px (1.5rem) | 组件间距 |
| space-xl | 32px (2rem) | 区块内间距 |
| space-xxl | 48px (3rem) | 区块间距 |
| space-xxxl | 64px (4rem) | 页面区块分隔 |

### 3.2 容器系统

```css
/* 容器最大宽度 */
--container-sm: 640px;    /* 小屏 */
--container-md: 768px;    /* 中屏 */
--container-lg: 1024px;   /* 大屏 */
--container-xl: 1280px;   /* 超大屏 */
--container-xxl: 1440px;  /* 超超大屏 */

/* 容器内间距 */
--container-padding: 16px;  /* 移动端 */
--container-padding-md: 24px;  /* 平板 */
--container-padding-lg: 32px;  /* 桌面 */
```

### 3.3 栅格系统

- 列数：12 列
- 列间距（Gutter）：24px（桌面）、16px（移动）
- 边距（Margin）：随容器内间距

### 3.4 断点定义

| 断点名称 | 范围 | 典型设备 |
|----------|------|----------|
| xs | < 576px | 手机竖屏 |
| sm | 576px - 767px | 手机横屏 |
| md | 768px - 991px | 平板 |
| lg | 992px - 1199px | 小笔记本 |
| xl | 1200px - 1399px | 桌面显示器 |
| xxl | >= 1400px | 大屏显示器 |

```css
/* 断点媒体查询 */
@media (min-width: 576px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 992px) { /* lg */ }
@media (min-width: 1200px) { /* xl */ }
@media (min-width: 1400px) { /* xxl */ }
```

---

## 四、组件模式

### 4.1 按钮（Buttons）

**类型层级：**
- Primary Button：主色填充，用于页面主操作
- Secondary Button：主色边框 + 透明底，用于次要操作
- Text Button：纯文字 + 主色，用于低优先级操作
- Danger Button：错误色填充，用于危险操作

**尺寸规范：**

| 尺寸 | 高度 | 内间距 | 字号 | 圆角 |
|------|------|--------|------|------|
| Large | 48px | 24px 32px | 16px | 8px |
| Medium | 40px | 16px 24px | 14px | 6px |
| Small | 32px | 12px 16px | 13px | 4px |
| Mini | 24px | 8px 12px | 12px | 4px |

**状态：** Default → Hover → Active → Focus → Disabled

```css
/* 按钮代码示例 */
.btn-primary {
  background-color: var(--color-primary-600);
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background-color: var(--color-primary-700);
  box-shadow: 0 4px 12px rgba(0, 98, 255, 0.3);
}

.btn-primary:active {
  background-color: var(--color-primary-800);
  transform: translateY(1px);
}

.btn-primary:disabled {
  background-color: var(--color-neutral-200);
  color: var(--color-neutral-400);
  cursor: not-allowed;
}
```

### 4.2 卡片（Cards）

**结构：** 封面图/图标 + 标题 + 描述 + 操作区

**规范：**
- 内间距：24px（标准）、16px（紧凑）
- 圆角：12px（标准）、8px（紧凑）
- 阴影：`0 2px 8px rgba(0, 0, 0, 0.08)`
- 悬浮阴影：`0 8px 24px rgba(0, 0, 0, 0.12)`
- 边框：1px solid Neutral-200（可选）

```css
.card {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}
```

### 4.3 导航（Navigation）

**顶部导航栏：**
- 高度：64px（桌面）、56px（移动）
- 背景：白色 + 底部阴影
- Logo 区域：左侧，高度不超过 40px
- 导航项间距：32px
- 当前项：底部 2px 主色下划线

**侧边导航：**
- 宽度：展开 240px、收起 64px
- 菜单项高度：48px
- 菜单项内间距：12px 16px
- 选中态：主色浅底 + 主色文字

### 4.4 输入框（Inputs）

**尺寸：**

| 尺寸 | 高度 | 字号 | 内间距 |
|------|------|------|--------|
| Large | 48px | 16px | 16px |
| Medium | 40px | 14px | 12px |
| Small | 32px | 13px | 8px |

**状态样式：**
- Default：1px border Neutral-300
- Hover：1px border Primary-400
- Focus：2px border Primary-500 + 外发光
- Error：1px border Error + 错误提示文字
- Disabled：背景 Neutral-100，文字 Neutral-400

```css
.input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-neutral-300);
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.input:hover {
  border-color: var(--color-primary-400);
}

.input:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(51, 123, 255, 0.15);
  outline: none;
}

.input--error {
  border-color: var(--color-error);
}
```

### 4.5 弹窗（Modals）

**尺寸规范：**

| 类型 | 宽度 | 用途 |
|------|------|------|
| Small | 400px | 确认对话框 |
| Medium | 560px | 表单弹窗 |
| Large | 720px | 复杂内容弹窗 |
| FullScreen | 100vw - 64px | 全屏预览 |

**规范：**
- 圆角：16px
- 内间距：标题区 24px、内容区 24px、底部操作区 16px 24px
- 遮罩层：rgba(0, 0, 0, 0.45) + 毛玻璃 blur(4px)
- 关闭按钮：右上角，24px 图标区域

---

## 五、视觉特效

### 5.1 阴影系统

| 层级 | 值 | 用途 |
|------|-----|------|
| Shadow-SM | 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) | 卡片默认 |
| Shadow-MD | 0 4px 12px rgba(0,0,0,0.08) | 悬浮卡片 |
| Shadow-LG | 0 8px 24px rgba(0,0,0,0.12) | 弹窗、下拉菜单 |
| Shadow-XL | 0 16px 48px rgba(0,0,0,0.16) | 全屏遮罩元素 |

### 5.2 渐变

```css
/* 主色渐变 */
--gradient-primary: linear-gradient(135deg, #337BFF 0%, #0062FF 100%);

/* 背景渐变 */
--gradient-bg: linear-gradient(180deg, #F0F4FF 0%, #FFFFFF 100%);

/* 成功渐变 */
--gradient-success: linear-gradient(135deg, #22A85A 0%, #1D9A50 100%);
```

### 5.3 圆角系统

| 名称 | 数值 | 用途 |
|------|------|------|
| radius-none | 0 | 无圆角 |
| radius-sm | 4px | 小元素（标签、徽标） |
| radius-md | 6px | 按钮、输入框 |
| radius-lg | 8px | 小卡片 |
| radius-xl | 12px | 卡片、弹窗 |
| radius-xxl | 16px | 大弹窗 |
| radius-full | 9999px | 圆形/胶囊形 |

---

## 六、动效规范

### 6.1 基础动画参数

| 属性 | 值 | 用途 |
|------|-----|------|
| duration-instant | 100ms | 微交互（开关、复选框） |
| duration-fast | 200ms | 常规交互（按钮、链接） |
| duration-normal | 300ms | 展开/折叠、淡入淡出 |
| duration-slow | 400ms | 弹窗、页面切换 |
| duration-slower | 500ms | 复杂过渡动画 |

### 6.2 缓动函数

```css
/* 标准缓动 - 大多数场景 */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

/* 减速缓动 - 进入视图 */
--ease-decelerate: cubic-bezier(0, 0, 0.2, 1);

/* 加速缓动 - 离开视图 */
--ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

/* 弹性缓动 - 弹出元素 */
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
```

### 6.3 关键帧动画

```css
/* 淡入上移 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 缩放弹出 */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 骨架屏闪烁 */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
```

### 6.4 微交互规范

- 按钮点击：缩放至 0.98 + 100ms
- 卡片悬浮：上移 2px + 阴影增强，300ms
- 页面切换：淡入 + 上移 8px，300ms
- 下拉展开：高度过渡 + 淡入，200ms
- Toast 弹出：从顶部滑入 + 淡入，300ms

---

## 七、响应式设计原则

### 7.1 移动优先策略

所有样式从移动端开始编写，通过 `min-width` 媒体查询逐步增强：

```css
/* 基础样式 - 移动端 */
.container {
  padding: 16px;
}

/* 平板增强 */
@media (min-width: 768px) {
  .container {
    padding: 24px;
    max-width: 720px;
    margin: 0 auto;
  }
}

/* 桌面增强 */
@media (min-width: 1200px) {
  .container {
    padding: 32px;
    max-width: 1200px;
  }
}
```

### 7.2 内容适配策略

| 策略 | 说明 | 适用场景 |
|------|------|----------|
| 内容缩放 | 同一布局随屏幕缩放 | 文字、图片 |
| 内容重排 | 多列变为单列 | 卡片列表、表单 |
| 内容隐藏 | 非核心内容在小屏隐藏 | 辅助信息、装饰元素 |
| 内容替换 | 用更适合的组件替换 | 导航（顶部→底部） |
| 内容折叠 | 手风琴式折叠 | 侧边栏、筛选器 |

### 7.3 触控规范

- 最小触控区域：44px × 44px
- 按钮间距：至少 8px
- 滑动区域：至少 48px 高度
- 边缘安全区：底部至少 16px（避免 iOS Home Indicator）

---

## 八、设计规范 Do's and Don'ts

### 8.1 Do's（推荐做法）

- 使用设计令牌（Design Tokens）管理所有视觉变量
- 保持色彩对比度符合 WCAG 2.1 AA 标准（正文 4.5:1，大文字 3:1）
- 所有交互元素提供 Hover、Focus、Active 状态
- 使用系统字体栈确保跨平台一致性
- 动效时长控制在 100ms-500ms 之间
- 间距使用 4px 倍数系统保持一致性
- 为深色模式提供独立的色彩映射
- 组件状态变化提供视觉反馈

### 8.2 Don'ts（禁止做法）

- 不要在同一个界面使用超过 3 种主色调
- 不要使用纯黑（#000000）作为文字颜色
- 不要仅用颜色传达信息（需配合图标或文字）
- 不要在正文使用小于 12px 的字号
- 不要混用不同的圆角值（同类型组件保持一致）
- 不要使用超过 3 层的阴影叠加
- 不要在没有减动效偏好设置的情况下使用超过 500ms 的动画
- 不要在移动端使用 hover 态作为唯一交互反馈

---

## 九、快速参考代码

### 9.1 CSS 变量定义

```css
:root {
  /* 主色 */
  --color-primary-50: #F0F4FF;
  --color-primary-100: #D9E4FF;
  --color-primary-500: #337BFF;
  --color-primary-600: #0062FF;
  --color-primary-700: #0050D4;

  /* 中性色 */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F9FAFB;
  --color-neutral-100: #F0F2F5;
  --color-neutral-200: #E2E5EA;
  --color-neutral-300: #C7CBD3;
  --color-neutral-500: #737A87;
  --color-neutral-700: #404754;
  --color-neutral-900: #171C26;

  /* 语义色 */
  --color-success: #22A85A;
  --color-warning: #F5A623;
  --color-error: #EE3B3B;
  --color-info: #1E88E5;

  /* 字体 */
  --font-family-base: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-family-latin: "Inter", "SF Pro Display", "Helvetica Neue", sans-serif;
  --font-family-mono: "JetBrains Mono", "Fira Code", "SF Mono", monospace;

  /* 字号 */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 0.875rem; /* 14px */
  --text-lg: 1rem;       /* 16px */
  --text-xl: 1.125rem;   /* 18px */
  --text-2xl: 1.375rem;  /* 22px */
  --text-3xl: 1.75rem;   /* 28px */
  --text-4xl: 2.25rem;   /* 36px */

  /* 间距 */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* 阴影 */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.16);

  /* 动效 */
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}
```

### 9.2 深色模式变量

```css
@media (prefers-color-scheme: dark) {
  :root {
    --color-neutral-0: #1A1D26;
    --color-neutral-50: #1F222D;
    --color-neutral-100: #252833;
    --color-neutral-200: #2E3140;
    --color-neutral-700: #C7CBD3;
    --color-neutral-900: #F0F2F5;

    --color-primary-500: #5C96FF;
    --color-primary-600: #337BFF;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
  }
}
```

---

## 十、实施检查清单

在实施品牌视觉规范时，逐项检查以下要点：

- [ ] 所有颜色值使用 CSS 变量引用，无硬编码色值
- [ ] 字体栈在目标平台均已测试
- [ ] 字号层级清晰，最小可读字号 ≥ 12px
- [ ] 间距系统统一使用 4px 倍数
- [ ] 所有交互组件具有完整的状态样式
- [ ] 动效时长在 100ms-500ms 范围内
- [ ] 支持 `prefers-reduced-motion` 减动效偏好
- [ ] 深色模式色彩对比度达标
- [ ] 触控目标 ≥ 44px × 44px
- [ ] 响应式断点覆盖所有目标设备

---

本规范为通用品牌视觉系统框架，可根据具体品牌调性调整色值、字体和间距参数。建议将 CSS 变量导出为 Design Tokens JSON，供设计和开发团队共同维护。

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。

浏览技能市场

支持平台：Qoder · QoderWork · Claude · Codex 等 AI 编程助手