Separator
A 1px rule: ink when it opens or closes something, a hairline for repetition.
Ink: opens or closes
Hairline: repeats
Left Right
Anatomy
| Weight | 1px, always |
|---|---|
| Ink | structure that opens or closes something: section heads, the top and head of a table, a field’s rule, a layer’s frame, the rule under tabs |
| Hairline | --border, for repetition: table rows, index rows, captions, menu items |
| Vertical | a hairline between two things side by side |
| Hover | a rule already on the page is where hover develops (Motion, 11); a separator never changes colour on its own |
Decisions
-
Frames off
A straight line organises the page; it never boxes one item. Rules stay, boxes go, and the only four-sided frame is a layer over the page.
-
Two weights
Ink opens or closes, a hairline repeats: the weight says which.
-
No radius, no shadow
border-radius is 0 everywhere and there are no box-shadows.