Member-only story
A simple tip for managing ‘odd’ elements in your design system
I read a recent question about how to maintain consistency when dealing with objects that don’t line up neatly to your design system’s grid, e.g. a 1px line divider, or an icon that’s 23px tall and 17px wide.
Our design language system (DLS) is built on a “hard” 8-point grid, which makes it easy to determine when something is out of alignment. As a result, we handle ‘odd’ shaped elements differently than some other design teams:
We put them in a box!
For us, that means the smallest object in our DLS is 8 x 8 px.
For example, here’s what a 1px divider line looks like in our system:
The 1px black line is perfectly centered in an 8 px by 8 px box, so technically the line itself “breaks” the grid. However, since the line is encapsulated within a transparent 8x8 px box, it immediately offers advantages compared to some other solutions to address this problem:
- Eliminates uneven spacing between elements above and below the line
- Eliminates the need for hacky solutions (e.g. using shadows)
- Makes element grouping painless
Of course, the primary drawback to this approach is when you need to put two lines very close together, e.g. a double-line…
