Dividers

Dividers are UI elements — thin lines that group content in lists and layouts. Horizontal and vertical rules serve different purposes depending on context.

Definition

Dividers separate content into clear groups without enclosing controls in full borders. Use them sparingly — too many dividers clutter the UI.

Variants

Variant	Usage
Full width	Larger sections of unrelated content; header vs body; interactive vs non-interactive areas
Inset	Related content aligned with panel inline padding (e.g. between list items)
Vertical	Side-by-side regions (toolbar groups, split layouts) — same low-contrast line treatment

Examples

Section one content

Section two content

Inset divider aligns with panel padding

Left pane

Right pane

Guidelines

Prefer low-contrast dividing lines over full borders between adjacent sections.
Use divider color at 1px width.
Vertical spacing between sections uses 9px.
In notification lists: full-bleed divider between header and content; inset dividers between items.