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.

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.

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

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

Secondary color - Secondary

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

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

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

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

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

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

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

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.

Color with stroke attribute in interface

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

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

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

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

Determines the size of different levels of text

Determine the thickness of different levels of text

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.

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

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

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

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

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

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

It is used to describe the sequence of interface elements

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.

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