视觉语言

Ghuo Design 的视觉语言系统包括色彩、字体、图标、布局等各个方面，为产品提供统一的视觉体验。

色彩系统

品牌色

品牌色是体现产品特性和传播理念最直观的视觉元素之一。

#1890FF
蓝色

#722ED1
紫色

功能色

功能色代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等。

#52C41A
成功

#FAAD14
警告

#FF4D4F
错误

#1890FF
信息

中性色

中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线等场景中也非常常见。

字体系统

字体族

我们的字体系统基于系统默认字体，确保在不同平台上都有良好的显示效果。

css

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

布局系统

栅格系统

采用 24 栅格系统，支持响应式布局。

间距规范

统一的间距规范，确保界面的一致性。

4px - 最小间距
8px - 小间距
16px - 中等间距
24px - 大间距
32px - 超大间距

圆角规范

2px - 小圆角（标签、徽章）
4px - 默认圆角（按钮、输入框）
6px - 中等圆角（卡片）
8px - 大圆角（模态框）

阴影规范

浅阴影：0 2px 8px rgba(0, 0, 0, 0.06)
中等阴影：0 4px 12px rgba(0, 0, 0, 0.15)
深阴影：0 8px 24px rgba(0, 0, 0, 0.12)

视觉语言 ​

色彩系统 ​

品牌色 ​

功能色 ​

中性色 ​

字体系统 ​

字体族 ​

字体大小 ​

布局系统 ​

栅格系统 ​

间距规范 ​

圆角规范 ​

阴影规范 ​