Divider & Separator

Design a divider and separator system for a product UI. This should cover the simple rules that split content, not decorative lines. Show how the component behaves in common layouts: between cards in a feed, between form sections, inside a settings panel, and between two side-by-side areas.

Include both horizontal and vertical treatments. Show the default line, a lighter version for dense layouts, and a stronger version for more pronounced section breaks. If you add labels, make them feel part of the rule, not pasted on top of it.

The component should disappear into the layout when needed and still hold structure when content gets dense. Pay attention to spacing, alignment, and how the separator sits relative to surrounding text, icons, and controls.

Experiment with different styles of dividers, such as dotted lines, shadows, or even illustrative elements to inject personality into the design.