Divider
The divider is a linear, lightweight component that serves to segment, organize, and refine, used for logically organizing content elements and page structure.
Judgment Rules
Is a clear visual grouping required?
Are there already clear visual differences?
Use spacing
Use spacing
Content complexity?
Use spacing
Module Divider
Yes
No
complex
No
Yes
Simple
Core Principles
*Restrained aesthetics: Use only when spacing cannot clearly express hierarchy *Invisible order: Divider lines must never become the main protagonist of the interface
Terms of Use
Color Rules
The color of the dividing line on any layer is fixed to: line-base
Thickness Rule
Global use of 0.5px thick dividers
Spacing rules
The spacing above and below the divider and the content should strictly follow the component spacing.
Usage scenario
Width Rules
When to extend the divider to the edges and when not to: When the content above and below the divider belongs to the same module, do not extend it, and keep it the same width as the module. When the content above and below the divider belongs to two unrelated modules, use the full-width style so the divider is as wide as the screen.