Gallery
See what others have created
sheeshable
@sheeshable
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.
What to deliver
- Design a horizontal divider for separating stacked content blocks
- Design a vertical separator for splitting adjacent fields or panels
- Show at least one labeled divider for a section break
- Show at least one inset or indented divider used in a nested layout
- Include default, subtle, and strong visual weights
Experiment with different styles of dividers, such as dotted lines, shadows, or even illustrative elements to inject personality into the design.