跳到主要内容

全局 Design Tokens 汇总

颜色 Color
​

1）主题色 Brand
​

color.brand.1000
#FA2C19 100%
品牌色
color.brand.700
#FA2C19 70%
品牌色，用于按钮描边、标签描边
color.brand.400
#FA2C19 40%
品牌色，用于选择器描边
color.brand.300
#FA2C19 30%
品牌色，用于禁用按钮
color.brand.100
#FA2C19 10%
品牌色，用于面性次要按钮背景

2）中性色 Neutral
​

H. 文字、图标颜色 Text & Icon
​

color.gray.texticon.900
#000000 90%
强调信息：一般用于标题，内容主要文本
color.gray.texticon.700
#000000 70%
主要信息：一般用在不那么需要强化文本颜色的场景
color.gray.texticon.550
#000000 55%
次要信息：第三级文本色一般用于描述性文本
color.gray.texticon.400
#000000 40%
弱化信息：例如表单的输入提示文本
color.gray.texticon.250
#000000 25%
极弱化信息：例如禁用色文本等
color.gray.texticon.invert
#FFFFFF 100%
白色，文字反色色彩

B. 遮罩 Mask
​

color.gray.mask.800
#000000 80%
一级弹窗蒙层颜色、文字提示背景色
color.gray.mask.300
#000000 30%
二级弹窗蒙层颜色

C. 描边 Border
​

color.gray.border.250
#000000 25%
次要按钮描边
color.gray.border.100
#000000 10%
容器描边、禁用按钮描边
color.gray.border.50
#000000 5%
分割线

D. 背景 Background
​

color.gray.background.100
#000000 10%
禁用按钮背景色
color.gray.background.40
#000000 4%
背景灰色
color.gray.background.20
#000000 2%
背景浅灰色
color.gray.background.default
#FFFFFF 100%
默认背景颜色

3）功能色 Function
​

H. 营销 Marketing
​

color.function.marketing.1000
#FA2C19 100%
营销色，默认取品牌色，支持单独定义
color.function.marketing.700
#FA2C19 70%
营销色，用于按钮描边、标签描边
color.function.marketing.400
#FA2C19 40%
营销色,用于选择器描边
color.function.marketing.300
#FA2C19 30%
营销色,用于禁用按钮
color.function.marketing.100
#FA2C19 10%
营销色,用于面性次要按钮背景

B. 警示 Warning
​

color.function.warning.1000
#FFA300 100%
警示色
color.function.warning.700
#FFA300 70%
警示色,用于按钮描边、标签描边
color.function.warning.400
#FFA300 40%
警示色,用于选择器描边
color.function.warning.300
#FFA300 30%
警示色,用于禁用按钮
color.function.warning.100
#FFA300 10%
警示色,用于面性次要按钮背景

C. 醒目 Striking
​

color.function.striking.1000
#FF6600 100%
醒目色
color.function.striking.700
#FF6600 70%
醒目色,用于按钮描边、标签描边
color.function.striking.400
#FF6600 40%
醒目色,用于选择器描边
color.function.striking.300
#FF6600 30%
醒目色,用于禁用按钮
color.function.striking.100
#FF6600 10%
醒目色,用于面性次要按钮背景

D. 成功 Success
​

color.function.success.1000
#07C160 100%
成功色
color.function.success.700
#07C160 70%
成功色,用于按钮描边、标签描边
color.function.success.400
#07C160 40%
成功色,用于选择器描边
color.function.success.300
#07C160 30%
成功色,用于禁用按钮
color.function.success.100
#07C160 10%
成功色,用于面性次要按钮背景
color.function.link.1000
#2A6AE9 100%
链接色
color.function.link.700
#2A6AE9 70%
链接色,用于按钮描边、标签描边
color.function.link.400
#2A6AE9 40%
链接色,用于选择器描边
color.function.link.300
#2A6AE9 30%
链接色,用于禁用按钮
color.function.link.100
#2A6AE9 10%
链接色,用于面性次要按钮背景

F. 错误 Error
​

color.function.error.1000
#FF2E2E 100%
错误色
color.function.error.700
#FF2E2E 70%
错误色,用于按钮描边、标签描边
color.function.error.400
#FF2E2E 40%
错误色,用于选择器描边
color.function.error.300
#FF2E2E 30%
错误色,用于禁用按钮
color.function.error.100
#FF2E2E 10%
错误色,用于面性次要按钮背景

字体 Font
​

1）字号 FontSize
​

fontSize.t1
18px
fontSize.t2
20px
fontSize.t3
22px
fontSize.t4
24px
fontSize.t5
26px
fontSize.t6
28px
fontSize.t7
30px
fontSize.t8
32px
fontSize.t9
34px
fontSize.t10
36px
fontSize.t11
38px
fontSize.t12
40px
fontSize.t13
42px
fontSize.t14
44px
fontSize.t15
46px
fontSize.t16
48px
fontSize.t20
56px
fontSize.t22
60px
fontSize.t28
72px

2）行高 LineHeight
​

A. 单行 Single
​

lineHeight.single.t1
20px
lineHeight.single.t2
24px
lineHeight.single.t3
24px
lineHeight.single.t4
28px
lineHeight.single.t5
28px
lineHeight.single.t6
32px
lineHeight.single.t7
32px
lineHeight.single.t8
36px
lineHeight.single.t9
36px
lineHeight.single.t10
40px
lineHeight.single.t11
40px
lineHeight.single.t12
44px
lineHeight.single.t16
52px
lineHeight.single.t20
60px
lineHeight.single.t22
68px
lineHeight.single.t28
80px

B. 多行 Multiline
​

lineHeight.multiline.t1
28px
lineHeight.multiline.t2
32px
lineHeight.multiline.t3
36px
lineHeight.multiline.t4
40px
lineHeight.multiline.t5
44px
lineHeight.multiline.t6
44px
lineHeight.multiline.t7
48px
lineHeight.multiline.t8
52px
lineHeight.multiline.t9
56px
lineHeight.multiline.t10
60px
lineHeight.multiline.t11
60px
lineHeight.multiline.t12
64px
lineHeight.multiline.t16
76px
lineHeight.multiline.t20
92px
lineHeight.multiline.t22
96px
lineHeight.multiline.t28
116px

3）字重 FontWeight
​

fontWeight.regular
400
fontWeight.semibold
600

空间 Spacing
​

1）元素间距 Gap
​

spacing.gap.g1
4px
spacing.gap.g2
8px
spacing.gap.g3
12px
spacing.gap.g4
16px
spacing.gap.g5
20px
spacing.gap.g6
24px
spacing.gap.g7
28px
spacing.gap.g8
32px
spacing.gap.g9
36px
spacing.gap.g10
40px
spacing.gap.g12
48px
spacing.gap.g15
60px

2）横向间距 Horizontal
​

spacing.horizontal.h1
4px
spacing.horizontal.h2
8px
spacing.horizontal.h3
12px
spacing.horizontal.h4
16px
spacing.horizontal.h5
20px
spacing.horizontal.h6
24px
spacing.horizontal.h7
28px
spacing.horizontal.h8
32px
spacing.horizontal.h9
36px
spacing.horizontal.h10
40px
spacing.horizontal.h12
48px
spacing.horizontal.h15
60px

3）纵向间距 Vertical
​

spacing.vertical.v1
4px
spacing.vertical.v2
8px
spacing.vertical.v3
12px
spacing.vertical.v4
16px
spacing.vertical.v5
20px
spacing.vertical.v6
24px
spacing.vertical.v7
28px
spacing.vertical.v8
32px
spacing.vertical.v9
36px
spacing.vertical.v10
40px
spacing.vertical.v12
48px
spacing.vertical.v15
60px

圆角 Radius
​

borderRadius.r0
0
borderRadius.r1
4px
borderRadius.r2
8px
borderRadius.r3
12px
borderRadius.r4
16px
borderRadius.r5
20px
borderRadius.r6
24px
borderRadius.r7
28px
borderRadius.r8
32px
borderRadius.r9
36px
borderRadius.round
999px