Happy Friday!

When building design system components, we can't control exactly where or how they will be used. It's important to make sure that components we build don't impact other components on the page in unexpected ways. We can do this by not allowing the component to act on surrounding whitespace. Another way to say this is: "don't add margin to your components."

---

SPONSORED BY OMLET

Build faster by actually using your components 🚀

Hot out the oven! Omlet is a zero-config component registry and monitoring platform for front-end teams to drive design system adoption. Uncover all your reusable and custom components with analytics and explore how they are used in your product.

---

This concept is called component encapsulation, and it's not new. Max Stoiber wrote about it in 2020 with his blog post Margin considered harmful.

With layout components, it's possible to apply the following without breaking component encapsulation:

• consistent spacing between and around child elements
• direction of child elements (ex: row or column)

Here's how the Braid design system implements a Stack component, which vertically piles elements on top of each other with equal spacing in between.

<Card>
  <Stack space="large">
    <Heading level="3">Heading</Heading>
    <Text>{lipsum1}</Text>
    <Text>{lipsum2}</Text>
  </Stack>
</Card>

---

Talk soon,

Mae