55 lines
1.7 KiB
Markdown
55 lines
1.7 KiB
Markdown
---
|
||
title: "Visual Identity System"
|
||
type: concept
|
||
tags: [brand, design, visual, identity]
|
||
last_updated: 2026-05-15
|
||
sources: [design-brand-guardian]
|
||
---
|
||
|
||
## Definition
|
||
|
||
视觉识别系统是品牌视觉元素的内聚性设计规范，包含 Logo、Color Palette、Typography 和 Spacing 四个核心维度。该系统必须作为整体设计，而非孤立元素集合。
|
||
|
||
## Core Components
|
||
|
||
### Logo System
|
||
- Primary Logo：主要标志及使用规范
|
||
- Logo Variations：水平、堆叠、图标版本
|
||
- Clear Space：最小间距要求
|
||
- Minimum Sizes：最小复制尺寸
|
||
- Usage Guidelines：使用注意事项
|
||
|
||
### Color System
|
||
- Primary Palette：主品牌色（含 hex/RGB/CMYK 值）
|
||
- Secondary Palette：辅助色
|
||
- Neutral Palette：中性色（灰阶系统）
|
||
- Accessibility：WCAG 合规组合
|
||
|
||
### Typography
|
||
- Primary Typeface：品牌标题字体
|
||
- Secondary Typeface：正文字体
|
||
- Hierarchy：尺寸和字重规范
|
||
- Web Implementation：字体加载和降级方案
|
||
|
||
### Spacing System
|
||
基于 rem 单位的间距系统：
|
||
- `--brand-space-xs: 0.25rem`
|
||
- `--brand-space-sm: 0.5rem`
|
||
- `--brand-space-md: 1rem`
|
||
- `--brand-space-lg: 2rem`
|
||
- `--brand-space-xl: 4rem`
|
||
|
||
## Design Principles
|
||
|
||
- **内聚性**：所有视觉元素协同工作形成统一系统
|
||
- **可扩展性**：在不同应用场景和尺寸下保持有效性
|
||
- **无障碍**：色彩对比符合 WCAG 标准
|
||
- **文化敏感性**：在不同市场具有文化适当性
|
||
|
||
## Connections
|
||
|
||
- [[Brand-Foundation-Framework]] → Visual Identity System 是其视觉表达
|
||
- [[design-brand-guardian]] → 定义了 Visual Identity System 的设计规范
|
||
- [[design-ux-architect]] → 提供 CSS 设计系统的技术实现规范
|
||
- [[Theme-Toggle]] → Visual Identity System 必须支持 light/dark/system 三态
|