Appearance
全局样式
简约蓝设计系统的全局样式规范，包括色彩、字体、阴影、图表色等设计元素。
一、色彩系统
所有颜色统一归集展示，便于设计和开发使用。
主色
主色用于品牌识别和关键操作。
主色01
#0659D6
主色02
#0C6BF9
主色03
#438EFF
主色04
#81B0F9
主色05
#C8DBFA
主色06
#E6EEFA
功能色 - 绿色
成功、通过等正向状态。
绿01
#009A29
绿02
#00B42A
绿03
#23C343
绿04
#7BE188
绿05
#AFF0B5
绿06
#E1F7E3
功能色 - 橙色
警告、待处理等提示状态。
橙01
#D25F00
橙02
#FF7D00
橙03
#FF9A2E
橙04
#FFCF8B
橙05
#FFE4BA
橙06
#FAF2E3
功能色 - 红色
错误、危险等负向状态。
红01
#CB272D
红02
#F53F3F
红03
#FF6C62
红04
#FBACA3
红05
#FDCDC5
红06
#FCEAE6
图表色
图表色用于数据可视化，共10种颜色。每种颜色包含6个基础色块和5个渐变色。
图表色-主色
主色-1
#0659D6
主色-2
#0C6BF9
主色-3
#438EFF
主色-4
#3388FF (50%)
主色-5
#3388FF (20%)
主色-6
#3388FF (10%)
渐变-1
线性渐变
渐变-2
线性渐变
渐变-3
垂直渐变
渐变-4
垂直渐变
渐变-5
垂直渐变
图表色-橙色
橙色-1
#D76C1A
橙色-2
#FF8E38
橙色-3
#F1A062
橙色-4
#FF8E38 (50%)
橙色-5
#FF8E38 (20%)
橙色-6
#FF8E38 (10%)
渐变-1
线性渐变
渐变-2
线性渐变
渐变-3
垂直渐变
渐变-4
垂直渐变
渐变-5
垂直渐变
图表色-紫色
紫色-1
#722ED1
紫色-2
#9254DE
紫色-3
#B37FEB
紫色-4
#9254DE (50%)
紫色-5
#9254DE (20%)
紫色-6
#9254DE (10%)
渐变-1
线性渐变
渐变-2
线性渐变
渐变-3
垂直渐变
渐变-4
垂直渐变
渐变-5
垂直渐变
图表色-红色
红色-1
#CB272D
红色-2
#F53F3F
红色-3
#FF6C62
红色-4
#F53F3F (50%)
红色-5
#F53F3F (20%)
红色-6
#F53F3F (10%)
渐变-1
线性渐变
渐变-2
线性渐变
渐变-3
垂直渐变
渐变-4
垂直渐变
渐变-5
垂直渐变
图表色-青绿
青绿-1
#00B8D4
青绿-2
#14C9C9
青绿-3
#37D4CF
青绿-4
#14C9C9 (50%)
青绿-5
#14C9C9 (20%)
青绿-6
#14C9C9 (10%)
渐变-1
线性渐变
渐变-2
线性渐变
渐变-3
垂直渐变
渐变-4
垂直渐变
渐变-5
垂直渐变
图表色-黄色
黄色-1
#F7BA1E
黄色-2
#FADC19
黄色-3
#FFEC3D
黄色-4
#FADC19 (50%)
黄色-5
#FADC19 (20%)
黄色-6
#FADC19 (10%)
渐变-1
线性渐变
渐变-2
线性渐变
渐变-3
垂直渐变
渐变-4
垂直渐变
渐变-5
垂直渐变
图表色-水蓝
水蓝-1
#0E7AC7
水蓝-2
#3491FA
水蓝-3
#65B8FF
水蓝-4
#3491FA (50%)
水蓝-5
#3491FA (20%)
水蓝-6
#3491FA (10%)
渐变-1
线性渐变
渐变-2
线性渐变
渐变-3
垂直渐变
渐变-4
垂直渐变
渐变-5
垂直渐变
图表色-水红
水红-1
#D91AD9
水红-2
#F754F7
水红-3
#FF8EFF
水红-4
#F754F7 (50%)
水红-5
#F754F7 (20%)
水红-6
#F754F7 (10%)
渐变-1
线性渐变
渐变-2
线性渐变
渐变-3
垂直渐变
渐变-4
垂直渐变
渐变-5
垂直渐变
图表色-绿色
绿色-1
#009A29
绿色-2
#00B42A
绿色-3
#23C343
绿色-4
#00B42A (50%)
绿色-5
#00B42A (20%)
绿色-6
#00B42A (10%)
渐变-1
线性渐变
渐变-2
线性渐变
渐变-3
垂直渐变
渐变-4
垂直渐变
渐变-5
垂直渐变
图表色-主白
主白-1
#E8E8E8
主白-2
#F5F5F5
主白-3
#FFFFFF
主白-4
#F5F5F5 (50%)
主白-5
#F5F5F5 (20%)
主白-6
#F5F5F5 (10%)
渐变-1
线性渐变
渐变-2
线性渐变
渐变-3
垂直渐变
渐变-4
垂直渐变
渐变-5
垂直渐变
图表色使用指南
应用原则
- 主色优先：图表色-主色作为首选，用于最重要的数据系列
- 对比搭配：使用橙色、紫色等与主色形成对比，便于区分不同数据
- 语义明确：红色表示负向，绿色表示正向，黄色表示警告
- 色彩数量：建议单个图表使用3-5种颜色，避免过多颜色造成视觉混乱
- 无障碍设计：确保颜色对比度符合WCAG标准，考虑色盲用户体验
二、阴影规范
S级阴影（轻量）
用于轻微的层次区分。
S1级阴影
0px 2px 3px 0px rgba(103, 121, 156, 0.08)
S2级阴影
0px 3px 6px 0px rgba(103, 121, 156, 0.12)
标准阴影
用于常规组件的层次区分。
1级阴影
0px 6px 16px 0px rgba(103, 121, 156, 0.1)
2级阴影
0px 10px 20px 0px rgba(103, 121, 156, 0.12)
三、字体规范
字体家族
系统默认使用 PingFang SC 字体。
css
font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;字体大小与行高
标题 H1 - 36px
font-size: 36px; line-height: 50px; font-weight: Medium;
标题 H4 - 20px
font-size: 20px; line-height: 28px; font-weight: Medium;
标题 H6 - 16px
font-size: 16px; line-height: 22px; font-weight: Medium;
标题 H7 - 14px
font-size: 14px; line-height: 20px; font-weight: Medium;
正文 T4 - 16px
font-size: 16px; line-height: 160%; font-weight: Regular;
正文 T3 - 14px
font-size: 14px; line-height: 160%; font-weight: Regular;