基础 · Tokens
设计变量
Semi Design Tokens

为什么要使用变量

变量实际上是将设计中的基础元素与具体的样式进行解耦。
对于设计师来说,如果产品的风格需要迭代更新,比如需要更新 危险 的功能色,即 color-danger,只需要修改其对应的颜色默认值,既可以完成整套产品的 UI 迭代。
对于研发来说,为了配合产品风格的更新迭代,使用 Design Token 时可以更快速地完成所有组件的样式更新,而无需一处处地进行修改,这也是为什么在开发的过程尤其需要注意使用变量而不是固定的数默认值。如果产品的风格有多个平台共用的话,也能事半功倍。
特别地,对于有暗色模式需求的平台,需要使用 Semi Design 的颜色变量才能实现一键切换明暗色的效果。因此这里向大家详细地介绍 Semi Design 的 Design Token 体系以及如何使用它们。

基础色

基于品牌色动态生成,包含 160 个颜色在内的,16 个不同色相的梯度色盘。通常情况下,我们用使用基础色中的颜色来进一步定义功能色。你可以在 Semi DSM 配置你的产品品牌色,动态生成新的基础色盘。
Red 0254,242,237
AAA
Red 1254,221,210
AAA
Red 2253,183,165
AAA
Red 3251,144,120
AAA
Red 4250,102,76
AAA
Red 5249,57,32
AA LargeAA
Red 6213,37,21
AAAA Large
Red 7178,20,12
AAA
Red 8142,8,5
AAA
Red 9106,1,3
AAA
Pink 0253,236,239
AAA
Pink 1251,207,216
AAA
Pink 2246,160,181
AAA
Pink 3242,115,150
AAA
Pink 4237,72,123
AA LargeAA
Pink 5233,30,99
AA LargeAA
Pink 6197,19,86
AAAA Large
Pink 7162,11,72
AAA
Pink 8126,5,58
AAA
Pink 990,1,43
AAA
Purple 0247,233,247
AAA
Purple 1239,202,240
AAA
Purple 2221,155,224
AAA
Purple 3201,111,209
AA LargeAA
Purple 4180,73,194
AA LargeAA
Purple 5158,40,179
AAAA Large
Purple 6135,30,158
AAA
Purple 7113,22,138
AAA
Purple 892,15,117
AAA
Purple 973,10,97
AAA
Violet 0243,237,249
AAA
Violet 1226,209,244
AAA
Violet 2196,167,233
AAA
Violet 3166,127,221
AA LargeAA
Violet 4136,91,210
AAAA Large
Violet 5106,58,199
AAAA Large
Violet 687,47,179
AAA
Violet 770,37,158
AAA
Violet 854,28,138
AAA
Violet 940,20,117
AAA
Indigo 0236,239,248
AAA
Indigo 1209,216,240
AAA
Indigo 2167,179,225
AAA
Indigo 3128,144,211
AA LargeAA
Indigo 494,111,196
AAAA
Indigo 563,81,181
AAAA Large
Indigo 651,66,161
AAA
Indigo 740,52,140
AAA
Indigo 831,40,120
AAA
Indigo 923,29,99
AAA
Blue 0234,245,255
AAA
Blue 1203,231,254
AAA
Blue 2152,205,253
AAA
Blue 3101,178,252
AAA
Blue 450,149,251
AA LargeAA
Blue 50,119,250
AA LargeAA
Blue 60,98,214
AAAA Large
Blue 70,79,179
AAA
Blue 80,61,143
AAA
Blue 90,44,107
AAA
Light Blue 0233,247,253
AAA
Light Blue 1201,236,252
AAA
Light Blue 2149,216,248
AAA
Light Blue 398,195,245
AAA
Light Blue 448,172,241
AAA
Light Blue 50,149,238
AA LargeAA
Light Blue 60,123,202
AA LargeAA
Light Blue 70,99,167
AAAA Large
Light Blue 80,75,131
AAA
Light Blue 90,53,95
AAA
Cyan 0229,247,248
AAA
Cyan 1194,239,240
AAA
Cyan 2138,221,226
AAA
Cyan 388,203,211
AAA
Cyan 444,184,197
AAA
Cyan 55,164,182
AA LargeAA
Cyan 63,134,152
AA LargeAA
Cyan 71,105,121
AAAA Large
Cyan 80,77,91
AAA
Cyan 90,50,61
AAA
Teal 0228,247,244
AAA
Teal 1192,240,232
AAA
Teal 2135,224,211
AAA
Teal 384,209,193
AAA
Teal 439,194,176
AAA
Teal 50,179,161
AAA
Teal 60,149,137
AA LargeAA
Teal 70,119,111
AAAA Large
Teal 80,89,85
AAA
Teal 90,60,58
AAA
Green 0236,247,236
AAA
Green 1208,240,209
AAA
Green 2164,224,167
AAA
Green 3125,209,130
AAA
Green 490,194,98
AAA
Green 559,179,70
AAA
Green 648,149,59
AA LargeAA
Green 737,119,47
AAAA Large
Green 827,89,36
AAA
Green 917,60,24
AAA
Light Green 0243,248,236
AAA
Light Green 1227,240,208
AAA
Light Green 2200,226,165
AAA
Light Green 3173,211,126
AAA
Light Green 4147,197,91
AAA
Light Green 5123,182,60
AAA
Light Green 6100,152,48
AA LargeAA
Light Green 778,121,38
AAAA Large
Light Green 857,91,27
AAA
Light Green 937,61,18
AAA
Lime 0242,250,230
AAA
Lime 1227,246,197
AAA
Lime 2203,237,142
AAA
Lime 3183,227,91
AAA
Lime 4167,218,44
AAA
Lime 5155,209,0
AAA
Lime 6126,174,0
AAA
Lime 799,139,0
AA LargeAA
Lime 872,104,0
AAAA Large
Lime 947,70,0
AAA
Yellow 0255,253,234
AAA
Yellow 1254,251,203
AAA
Yellow 2253,243,152
AAA
Yellow 3252,232,101
AAA
Yellow 4251,218,50
AAA
Yellow 5250,200,0
AAA
Yellow 6208,170,0
AAA
Yellow 7167,139,0
AA LargeAA
Yellow 8125,106,0
AAAA Large
Yellow 983,72,0
AAA
Amber 0254,251,235
AAA
Amber 1252,245,206
AAA
Amber 2249,232,158
AAA
Amber 3246,216,111
AAA
Amber 4243,198,65
AAA
Amber 5240,177,20
AAA
Amber 6200,138,15
AAA
Amber 7160,102,10
AAAA Large
Amber 8120,70,6
AAA
Amber 980,43,3
AAA
Orange 0255,248,234
AAA
Orange 1254,238,204
AAA
Orange 2254,217,152
AAA
Orange 3253,193,101
AAA
Orange 4253,166,51
AAA
Orange 5252,136,0
AAA
Orange 6210,103,0
AA LargeAA
Orange 7168,74,0
AAAA Large
Orange 8126,49,0
AAA
Orange 984,29,0
AAA
Grey 0249,249,249
AAA
Grey 1230,232,234
AAA
Grey 2198,202,205
AAA
Grey 3167,171,176
AAA
Grey 4136,141,146
AA LargeAA
Grey 5107,112,117
AAAA Large
Grey 685,91,97
AAAA Large
Grey 765,70,76
AAA
Grey 846,50,56
AAA
Grey 928,31,35
AAA

颜色转换

search

功能色

从基础色盘中引用,应用在包括界面背景,文本图标,链接,描边在内的各类用户界面元素上。

主要颜色 - primary

用户界面主强调色及各交互态颜色,通常用于主操作按钮等

次要颜色 - secondary

次要颜色 - secondary

第三颜色 - tertiary

用户界面中非强调色及各交互态颜色,通常用于常规、非强调功能操作按钮等

信息 - info

通常用于表达客观、中立信息,在带有上述语义的场景下使用

成功 - success

通常用于表达成功、完成、开启状态,在带有上述语义的场景下使用

警示 - warning

通常用于表达警告、不安全状态,在带有上述语义的场景下使用

危险 - danger

通常用于表达危险状态,在带有上述语义的场景下使用

文本与图标颜色 - text

四个不同层级的文本/图标颜色,依次代表产品界面中最主要、次主要、稍次要和最次要的内容
用于产品中超链接的文本

背景色 - bg

应用中各级背景色,包括容器、菜单、导航栏等。在暗色模式下,我们通常用背景色来区分前后层级

填充色 - fill

对于一个元素,如果其所处的容器背景颜色不固定,且这个元素的填充色与最上层背景色的对比度比较小,使用填充色作为 backgroundColor,确保这个元素不会“融于”某一级别背景颜色中,如表单控件。

描边色 - border

界面中带有描边属性的颜色

禁用态 - disabled

用于界面中各类表达禁用的元素填充,如背景、文本、描边、填充等

常量色 - static

界面中不跟随主题及明暗模式切换的颜色

拟阴影色 - shadow

浅阴影,通过 border 模拟的扁平阴影效果,主要用在 Table 组件

字体排版

字体排版用来传达信息内容,并界面看起来有秩序

字号

决定不同层级文本的大小

字重

决定不同层级文本的粗细

字体

应用中各级文本使用的字体,为减少打包体积,默认英文字体 Inter 需要单独引入
业务侧如果想使用,需要在你的 CSS 中增加font-face声明(不自带在Semi中,是由于该字体略大,默认加载可能会影响业务首屏速度),由业务自行决定是否需要使用

圆角

使用圆角来描述容器与界面元素的轮廓,从一定程度决定产品的视觉调性

阴影

阴影通常用来表达界面元素的层级,阴影越重的元素距离用户越近

尺寸

尺寸变量被应用在各个组件及内部元素中,用来调整控件的大小、描边的粗细、图标的尺寸等

高度

描边尺寸

图标尺寸

间距

间距变量被应用在各个组件内部,或组件与组件之间,用来调整产品整体的密集和紧凑程度

z-index

用来描述界面元素的前后顺序关系

尚未支持的变量

目前,Semi 尚未支持以下类别的全局变量,如果你有相关需求,可以通过issue进行反馈,详细描述你的预期需求,我们会在评估后进行处理
段落行高 line height
字间距 letter spacing
时长 duration
媒体查询 media query

定制

如果你需要定制全局变量样式,请前往 Semi DSM ,制作你自己的主题并发布

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED