index-en-US.md 7.4 KB
localeCode: en-US order: 17 category: Basic title: Tokens icon: doc-token
brief: 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.
Color conversion
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
Link color
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.
@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
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