Separator
A separator is a thin line or subtle divider used to create visual boundaries between content or interface elements. It helps users understand grouping, hierarchy, and structure within layouts.
Philosophy
Separators exist to create clarity through contrast and space.
They define visual separation without drawing too much attention.
They improve scannability by grouping related items.
They maintain a sense of order and rhythm across components.
Anatomy
Variants
Horizontal
Divides content stacked vertically.
Vertical
Divides content horizontally.
States
Idle
May appear dynamically when grouping changes.
Usage tips
Dos
Use separators to clarify relationships, not to decorate.
Keep color neutral and consistent with system colors.
Use spacing and hierarchy before adding dividers.
Don’ts
Don’t overuse; too many lines make layouts heavy.
Don’t use dark or high-contrast colors.
Don’t mix horizontal and vertical separators inconsistently.
Real-world example
