Basic · Tokens
Tokens
Semi Design Tokens

Why use variables

Variables actually decouple the basic elements of design from specific styles. For designers, if the style of the product needs to be updated iteratively, for example, the dangerous function color, namely color danger, needs to be updated, they only need to modify its corresponding color default value to complete the UI iteration of the whole product. For R & D, in order to adapt to the iteration of product style update, design token can update the style of all components more quickly without modifying everywhere. This is why we need to pay special attention to using variables instead of fixed default values in the development process. If the style of the product is shared by multiple platforms, it can get twice the result with half the effort. In particular, for platforms with dark mode requirements, Semi Design's color variable is needed to achieve the effect of one click switching between light and dark. Therefore, here we will introduce the design token system of Semi Design in detail and how to use them.

Basic color

Based on the dynamic generation of brand color, including 160 colors, 16 different hue gradient color disk. In general, we use the color in the base color to further define the function color. You can use your brand color in the theme store to dynamically generate a new basic color disk.
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

Color conversion

search

Functional color

From the basic color disk reference, including the interface background, text icons, links, stroke and other user interface elements.

Primary color

User interface main tone and interactive colors, usually used for main operation button, etc

Secondary color - Secondary

Secondary color - Secondary

The third color - Tertiary

In the user interface, non emphasis color and interactive color are usually used for general and non emphasis function operation buttons

Information - info

It is usually used to express objective and neutral information in the context with the above semantics

Success - success

It is usually used to express the success, completion and opening status, and is used in scenarios with the above semantics

Warning

It is usually used to express warning and unsafe state, and is used in scenarios with the above semantics

Danger - danger

It is usually used to express the dangerous state, and is used in the scene with the above semantics

Text and icon colors - text

Four different levels of text / icon colors represent the most important, secondary, minor and minor contents in the product interface
Text used for hyperlinks in products

Background color - BG

All levels of background color in the application, including container, menu, navigation bar, etc. In dark mode, we usually use the background color to distinguish the front and back levels

Fill color - fill

For an element, if the background color of its container is not fixed, and the contrast between the filling color of the element and the top background color is small, use the filling color as the background color to ensure that the element will not "melt" into a certain level of background color, such as a form control.

Stroke border

Color with stroke attribute in interface

Disabled state - Disabled

It is used to fill all kinds of forbidden elements in the interface, such as background, text, stroke, fill, etc

Constant color static

The interface does not follow the theme and light and dark mode switching color

Quasi shadow color - Shadow

Shallow shadow, a flat shadow effect simulated by border, is mainly used in the table component

Typesetting

Typesetting is used to convey information content, and the interface looks orderly

Trade name

Determines the size of different levels of text

Word weight

Determine the thickness of different levels of text

Font

In order to reduce the packing volume, the default English font inter needs to be introduced separately
If you want to use it on the business side, you need to add a font face statement in your CSS (it is not included in Semi, because the font is slightly larger, and the default loading may affect the speed of the first screen of the business). It is up to the business to decide whether to use it or not.

Fillet

Fillet is used to describe the outline of container and interface elements, which determines the visual tonality of product to a certain extent

Shadow

Shadow is usually used to express the level of interface elements. The heavier the shadow, the closer the element is to the user

Dimensions

The size variable is used in various components and internal elements to adjust the size of the control, stroke thickness, icon size, etc

Height

Stroke size

Icon size

Spacing

The spacing variable is applied in each component or between components to adjust the density and compactness of the whole product

z-index

It is used to describe the sequence of interface elements

Animation

Variables not yet supported

Currently, Semi does not support global variables in the following categories. If you have related requirements, you can give feedback through issue and describe your expected needs in detail.
Line height
Letter spacing
Duration
Media query

Customization

If you need to customize the global variable style, please go to Semi DSM, make your own theme and publish it

© 2021 - 2022 Semi Design. All rights reserved.

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

Designed & Developed with love by Douyin FE & MED