颜色是组UI界面设计中使用的色彩体系。定义了:品牌色、中立色、功能色三层级色彩,以及衍生出的扩展色板。
需要配色为审视的配色体系,详见图表内容
基础色
主色序列 (brand1)
brand 2.1
浅
bg-brand-light
brand 2.8
深
bg-brand-deep
状态颜色
brand 2.6
Normal
bg-brand
brand 2.5
Hover
bg-brand-hover
brand 2.7
Click
bg-brand-click
中立色
字体
T
@text-Title
#111111
默认标题
text-title
T
@text-Primary
#333333
默认文字/Hover
text-body
P
@text-Secondary
#666666
text-secondary
T
@text-Caption
#999999
text-caption
T
@text-Disable
#C1C1C1
默认禁用/Disable
text-disabled
线条
L
@line1-1
#EBEBEB
边界边框 用于划分区域
border-line-1
L
@line1-2
#DEDEDE
表单边框
border-line-2
L
@line1-4
#737373
强调边框/hover效果
border-line-4
L
@line-Blue
#006EFF
较重要程度/高层级
border-line-blue
填充
F
@filling1-1
#FAFAFA
提示框底色,提示文字背景
bg-fill-1
F
@filling1-2
#F3F4F7
页面内容区块底色
bg-fill-2
F
@filling1-3
#F5F5F5
标签背景、下拉选中背景
bg-fill-3
功能色
成功
@color-success-3
#00B512
bg-success-3
@color-success-4
#00A611
bg-success-4
@color-success-1
#E3F8E8
bg-success-1
@color-success-2
#A8E1A6
bg-success-2
警告-弱
@color-warning-3
#FFA800
bg-warning-3
@color-warning-4
#EA8C00
bg-warning-4
@color-warning-1
#FFF1DB
bg-warning-1
@color-warning-2
#FFD77E
bg-warning-2
警告-强
@color-error-3
#FF2020
bg-error-3
@color-error-4
#CF2E2E
bg-error-4
@color-error-1
#FCEBEA
bg-error-1
@color-error-2
#FDA2A4
bg-error-2
提示
@color-notice-3
#1F56E8
bg-notice-3
@color-notice-4
#1A48C2
bg-notice-4
@color-notice-1
#F3F8FF
bg-notice-1
@color-notice-2
#9FC6FF
bg-notice-2
帮助
@color-help-3
#34E1DC
bg-help-3
@color-help-4
#00C6BF
bg-help-4
@color-help-1
#DAF4F4
bg-help-1
@color-help-2
#92EFEC
bg-help-2
其他
@color-purple-3
#8F44FF
bg-purple-3
@color-purple-4
#5000C8
bg-purple-4
@color-purple-1
#F5EFFF
bg-purple-1
@color-purple-2
#D0B0FF
bg-purple-2
全局设定统一的字体规范,使用非衬线字体在各个操作系统下都有最佳展示效果。
输出建议使用
| 中文字体 |
PingFang SC | Mac/iOS系统 |
Microsoft YaHei | Windows系统 |
| 英文字体 |
Helvetica Neue |首选字体 |
Arial |备选字体 |
font-sans
字号和行高
默认字体为12px,与之对应的行高为 20。
| Font Size |
12 text-xs |
14 text-sm |
16 text-base |
18 text-lg |
20 text-xl |
24 text-2xl |
28 text-3xl |
32 text-4xl |
… |
| LineHeight |
20 leading-xs |
22 leading-sm |
24 leading-base |
28 leading-lg |
30 leading-xl |
32 leading-2xl |
36 leading-3xl |
40 leading-4xl |
… |
字重
字重出现 regular 以及 medium 的两种字体重量,分别对应代码中的 400 和 600。
Regular 400
font-regular
Medium 600
font-medium
字体颜色
| Title Text |
#111111 |
#111111 |
text-title |
| Primary Text |
#333333 |
#333333 |
text-body |
| Secondary Text |
#666666 |
#666666 |
text-secondary |
| Caption Text |
#999999 |
#999999 |
text-caption |
| Disable |
#c1c1c1 |
#c1c1c1 |
text-disabled |
主要按钮与次级按钮共同使用时,通常主要按钮在左侧。
按钮类型
主要按钮(Primary)
bg-brand text-white
次级按钮(Secondary)
border-line-2 text-body
线框按钮(Outline)
border-brand text-brand
危险操作(Danger)
bg-error-3 text-white
提示按钮(Prompt)
bg-warning-3 text-white
反白按钮(Whiteline)
bg-white text-body border-white
文字链接(Text)
文字链接
text-brand
虚线按钮(dashed)
border-dashed border-line-2
元素与元素之间的间距,逻辑单元与逻辑单元之间的间距
1、遵循4px的倍数原则(特殊情况除外)
2、间距 一般为 4px、8px、12px、16px、20px、24px、28px、32px等
| 值 |
4px |
8px |
12px |
16px |
20px |
24px |
28px |
32px |
| Tailwind |
p-1 |
p-2 |
p-3 |
p-4 |
p-5 |
p-6 |
p-7 |
p-8 |