Spacing, Icon size, Corner radius
Introduction
Spacing, Icon size, Corner radius are key parts of the design system, you can find them in variables.
To define them, we have the following principles: 1. Widely used in design. 2. The number of Spacing, Icon size, and Corner radius should be as small as possible.
Rules of use
Please try to keep the number of Spacing, Icon size, and Corner radius below 16.
90% principle: If Spacing, Icon size, Corner radius used in a single product accounts for less than 10%, please do not include it in the design system.
Their values are multiples of 4.
How to use
Spacing, Icon size, Corner radius can be added, modified and deleted. Modifying them will affect all components and pages, please proceed with caution.
Notes
A dashed border indicates that the value is not available yet.
The fill color from dark to light represents the frequency of use from high to low.
Different products will have different frequency of use, here is the Snow Dashboard UI Kit↗ as a reference.
Spacing
80
48
40
32
28
24
20
16
12
8
4
0
Icon size
80
48
40
32
28
24
20
16
12
8
4
0
Corner radius
80
48
40
32
28
24
20
16
12
8
4
0