Spacing
To ensure consistency in page layout, when placing content elements in different areas, the spacing should be uniform. We have set the spacing between components horizontally and vertically.
Spacing Principle
Spacing Principle
The layout of MEXC's information is relatively complex, requiring consideration of subtle layout changes for multilingual and multi-device experiences. Therefore, we define the spacing as a multiple of 4, with all spacings being 4*n, where n is a natural number and all are even.
Space val = 4n [n=natural numbers]
Spacing parameter
Value
Token
Sizing
0px
0
2 pixels
2
4px
4
8px
8
12px
12
16px
16
24px
24
32px
32
40px
40
48px
48
64px
64
96px
96
160px
160
Basic Guide to App Spacing
Basic Guide to Web Spacing
Layout parameters and usage methods
Designers should adhere to spacing guidelines and apply spacing tokens to ensure consistency and a rational layout of information on the page.
App & H5 page padding: 16px (only the App homepage is 20px)
Minimum left and right padding for Web/iPad pages: 24px
Usage:
Add the Grid component Token of Foundation Library 4.0 (Beta) in the layout grid on the right side of the Figma properties sidebar.
Line spacing
1.25 times, default line height, and sentence breaking arrangement.
狗是一种驯化动物。以其忠诚和信任而闻名，它在世界许多家庭中都可以作为受欢迎的客人出现。
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
它可以作为受欢迎的客人在许多地方找到
households across the world.
狗是一种驯化动物。以其忠诚和信任而闻名，它在世界许多家庭中都可以作为受欢迎的客人出现。
狗是一种驯化动物。以其忠诚和信任而闻名，它在世界许多家庭中都可以作为受欢迎的客人出现。
The line spacing is 1.25 times the font size, suitable for: paragraph content in more complex scenarios; display of large font text.
Regular paragraph text, displayed with the default line height in most scenarios.
Specially designed paragraph text for: specially customized paragraph reading experience design; display of large font text.
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
它可以作为受欢迎的客人在许多地方找到
households across the world.
狗是一种驯化动物。以其忠诚和信任而闻名，它在世界许多家庭中都可以作为受欢迎的客人出现。
22px
8px
1.25 times
Default line height (font size +8)
Segment sentences and lines, arranged by element spacing.
1.25 times (1.25 times the font size)
Note example
Do not use spacing outside of the spacing specification system.
The sun shines brightly
Qualification has been met
8px
16px
Do
The sun shines brightly
Qualification has been met
6px
10px
Don't
The spacing layout should be designed strictly according to the Gestalt principles, with related elements being close together and unrelated elements being separated.
The sun shines brightly
Qualification has been met
Do
The sun shines brightly
Qualification has been met
Don't