Tokens 设计变量 - Semi Design

基础 · Tokens

设计变量

Semi Design Tokens

为什么要使用 Design Token

Design Token 设计变量实际上是将设计中的基础元素与具体的样式进行解耦。

对于设计师来说，如果产品的风格需要迭代更新，比如需要更新危险的功能色，即 color-danger，只需要修改其对应的颜色默认值，既可以完成整套产品的 UI 迭代。

对于研发来说，为了配合产品风格的更新迭代，使用 Design Token 时可以更快速地完成所有组件的样式更新，而无需一处处地进行修改，这也是为什么在开发的过程尤其需要注意使用变量而不是固定的数默认值。如果产品的风格有多个平台共用的话，也能事半功倍。

特别地，对于有暗色模式需求的平台，需要使用 Semi Design 的颜色变量才能实现一键切换明暗色的效果。因此这里向大家详细地介绍 Semi Design 的 Design Token 体系以及如何使用它们。

基础色

基于品牌色动态生成，包含 160 个颜色在内的，16 个不同色相的梯度色盘。通常情况下，我们用使用基础色中的颜色来进一步定义功能色。你可以在 Semi DSM 配置你的产品品牌色，动态生成新的基础色盘。

Light

Dark

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,100,250

AAAA Large

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

Red 0108,9,11

AAA

Red 1144,17,16

AAA

Red 2180,32,25

AAAA Large

Red 3215,51,36

AAAA Large

Red 4251,73,50

AA LargeAA

Red 5252,114,90

AAA

Red 6253,153,131

AAA

Red 7253,190,172

AAA

Red 8254,224,213

AAA

Red 9255,243,239

AAA

Pink 092,7,48

AAA

Pink 1128,14,65

AAA

Pink 2164,23,81

AAA

Pink 3199,34,97

AAAA Large

Pink 4235,47,113

AA LargeAA

Pink 5239,86,134

AA LargeAA

Pink 6243,126,159

AAA

Pink 7247,168,188

AAA

Pink 8251,211,220

AAA

Pink 9253,238,241

AAA

Purple 074,16,97

AAA

Purple 194,23,118

AAA

Purple 2115,31,138

AAA

Purple 3137,40,159

AAA

Purple 4160,51,179

AAAA Large

Purple 5181,83,194

AA LargeAA

Purple 6202,120,209

AAA

Purple 7221,160,225

AAA

Purple 8239,206,240

AAA

Purple 9247,235,247

AAA

Violet 064,27,119

AAA

Violet 176,36,140

AAA

Violet 288,46,160

AAA

Violet 3100,57,181

AAA

Violet 4114,70,201

AAAA Large

Violet 5136,101,212

AA LargeAA

Violet 6162,136,223

AAA

Violet 7190,173,233

AAA

Violet 8221,212,244

AAA

Violet 9241,238,250

AAA

Indigo 023,30,101

AAA

Indigo 132,41,122

AAA

Indigo 241,54,142

AAA

Indigo 352,68,163

AAA

Indigo 464,83,183

AAAA Large

Indigo 595,113,197

AAAA

Indigo 6129,145,212

AA LargeAA

Indigo 7167,180,226

AAA

Indigo 8209,216,241

AAA

Indigo 9237,239,248

AAA

Blue 05,49,112

AAA

Blue 110,70,148

AAA

Blue 219,92,184

AAAA Large

Blue 329,117,219

AAAA

Blue 441,144,255

AA LargeAA

Blue 584,169,255

AAA

Blue 6127,193,255

AAA

Blue 7169,215,255

AAA

Blue 8212,236,255

AAA

Blue 9239,248,255

AAA

Light Blue 00,55,97

AAA

Light Blue 10,77,133

AAA

Light Blue 23,102,169

AAAA Large

Light Blue 310,129,204

AA LargeAA

Light Blue 419,159,240

AAA

Light Blue 564,180,243

AAA

Light Blue 6110,200,246

AAA

Light Blue 7157,220,249

AAA

Light Blue 8206,238,252

AAA

Light Blue 9235,248,254

AAA

Cyan 04,52,61

AAA

Cyan 17,79,92

AAA

Cyan 210,108,123

AAAA Large

Cyan 314,137,153

AA LargeAA

Cyan 419,168,184

AAA

Cyan 556,187,198

AAA

Cyan 698,205,212

AAA

Cyan 7145,223,227

AAA

Cyan 8198,239,241

AAA

Cyan 9231,247,248

AAA

Teal 02,60,57

AAA

Teal 14,90,85

AAA

Teal 27,119,111

AAAA Large

Teal 310,149,136

AA LargeAA

Teal 414,179,161

AAA

Teal 551,194,176

AAA

Teal 694,209,193

AAA

Teal 7142,225,211

AAA

Teal 8196,240,232

AAA

Teal 9230,247,244

AAA

Green 018,60,25

AAA

Green 128,90,37

AAA

Green 239,119,49

AAAA Large

Green 350,149,61

AA LargeAA

Green 462,179,73

AAA

Green 593,194,100

AAA

Green 6127,209,132

AAA

Green 7166,225,168

AAA

Green 8208,240,209

AAA

Green 9236,247,236

AAA

Light Green 038,61,19

AAA

Light Green 159,92,29

AAA

Light Green 281,123,40

AAAA Large

Light Green 3103,153,52

AA LargeAA

Light Green 4127,184,64

AAA

Light Green 5151,198,95

AAA

Light Green 6176,212,129

AAA

Light Green 7201,227,167

AAA

Light Green 8228,241,209

AAA

Light Green 9243,248,237

AAA

Lime 049,70,3

AAA

Lime 175,105,5

AAAA Large

Lime 2103,141,9

AA LargeAA

Lime 3132,176,12

AAA

Lime 4162,211,17

AAA

Lime 5174,220,58

AAA

Lime 6189,229,102

AAA

Lime 7207,237,150

AAA

Lime 8229,246,201

AAA

Lime 9243,251,233

AAA

Yellow 084,73,3

AAA

Yellow 1126,108,6

AAAA Large

Yellow 2168,142,10

AA LargeAA

Yellow 3210,175,15

AAA

Yellow 4252,206,20

AAA

Yellow 5253,222,67

AAA

Yellow 6253,235,113

AAA

Yellow 7254,245,160

AAA

Yellow 8254,251,208

AAA

Yellow 9255,254,236

AAA

Amber 081,46,9

AAA

Amber 1121,75,15

AAA

Amber 2161,107,22

AAAA

Amber 3202,143,30

AAA

Amber 4242,183,38

AAA

Amber 5245,202,80

AAA

Amber 6247,219,122

AAA

Amber 7250,234,166

AAA

Amber 8252,246,210

AAA

Amber 9254,251,237

AAA

Orange 085,31,3

AAA

Orange 1128,53,6

AAA

Orange 2170,80,10

AAAA Large

Orange 3213,111,15

AA LargeAA

Orange 4255,146,20

AAA

Orange 5255,174,67

AAA

Orange 6255,199,114

AAA

Orange 7255,221,161

AAA

Orange 8255,239,208

AAA

Orange 9255,249,237

AAA

Grey 028,31,35

AAA

Grey 146,50,56

AAA

Grey 265,70,76

AAA

Grey 385,91,97

AAAA Large

Grey 4107,112,117

AAAA Large

Grey 5136,141,146

AA LargeAA

Grey 6167,171,176

AAA

Grey 7198,202,205

AAA

Grey 8230,232,234

AAA

Grey 9249,249,249

AAA

颜色转换

功能色

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

主要颜色 - primary

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

次要颜色 - secondary

第三颜色 - tertiary

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

信息 - info

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

成功 - success

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

警示 - warning

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

危险 - danger

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

文本与图标颜色 - text

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

链接色 - link

用于产品中超链接的文本

背景色 - bg

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

填充色 - fill

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

描边色 - border

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

禁用态 - disabled

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

常量色 - static

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

拟阴影色 - shadow

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

字体排版

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

字号

决定不同层级文本的大小

字重

决定不同层级文本的粗细

字体

应用中各级文本使用的字体，为减少打包体积，默认英文字体 Inter 需要单独引入

业务侧如果想使用，需要在你的 CSS 中增加font-face声明（不自带在Semi中，是由于该字体略大，默认加载可能会影响业务首屏速度），由业务自行决定是否需要使用


@font-face {
  font-family: "Inter";
  src: url("https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/slepweh7nupqpognuhbo/Inter-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Inter-Bold";
  src: url("https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/slepweh7nupqpognuhbo/Inter-Bold.ttf") format("truetype");
}

圆角

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

阴影

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

尺寸

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

高度

描边尺寸

图标尺寸

间距

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

z-index

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

动画

尚未支持的变量

目前，Semi 尚未支持以下类别的全局变量，如果你有相关需求，可以通过issue进行反馈，详细描述你的预期需求，我们会在评估后进行处理

段落行高 line height

字间距 letter spacing

媒体查询 media query

定制

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