Spacing in Design Systems

Show Notes

Spacing out some rectangles on a web page is easy right? It kinda is. There are lots of ways, anyway. But doing it in a way that keeps you sane is another matter. For example, who’s job is it to do the spacing, the elements themselves or the parent element? How do you prevent spacing where you don’t actually want it, like on the “last” element? Do you use utility classes so you can only apply spacing on elements you hand-apply them to, or is that too off-path for your CMS? Are specially crafted CSS selectors better? Which directions does the spacing apply to? Do you use elements with the entire job of being spacers?