Separator

Separator draws a thin rule that divides content groups — between list items, sections, or toolbar clusters — horizontally or vertically. It's a lightweight visual boundary, decorative by default (so it's skipped by assistive tech) but able to carry a semantic separator role when the division is meaningful. When the goal is just breathing room, use spacing; when it's a named section boundary, a heading communicates more.

Separate only when grouping isn't already clear. Whitespace usually does the job; add a rule when adjacent groups would otherwise blur together (toolbar clusters, a menu's sections). A page sliced by lines everywhere reads busier, not clearer.

Pick the right semantics. Leave it decorative when it's purely visual; mark it a real separator only when it represents a genuine content boundary that a screen-reader user should perceive. Don't use a separator as a heading substitute.

Match orientation and weight to context. Vertical separators divide inline clusters (toolbar groups), horizontal ones divide stacked sections. Keep it a hairline on a token border color — a heavy divider competes with the content it's meant to organize.