AI Summary
→ WHAT IT COVERS Mark Dalgleish explains why components should have zero surrounding white space and advocates for dedicated layout components to handle spacing, improving design system maintainability and designer-developer collaboration in React applications. → KEY INSIGHTS - **Text Baseline Alignment:** Browser text naturally centers on line height, creating invisible space above and below characters. Use CSS transforms and negative margins to crop text nodes so they only occupy visual space, enabling predictable component spacing. - **Layout Component Architecture:** Separate all layout concerns into dedicated components like Stack, Inline, Tiles, and Columns. Remove margins and padding from leaf components entirely, allowing designers to compose interfaces by explicitly defining space between elements rather than around them. - **Responsive Props Pattern:** Implement array-based props that accept multiple values corresponding to breakpoint definitions, enabling developers to specify different spacing and column counts per screen size without writing media queries, matching how designers think about responsive behavior. - **Space as First-Class Concept:** Treat space between elements as a collection property, not individual gaps. A stack of cards should have one space value applied to the group, not separate spacers between each item, reducing maintenance and matching designer mental models. → NOTABLE MOMENT Dalgleish reveals that designers manually maintain equal spacing between grouped items without realizing they conceptually think in nested collections with inherited spacing values, not individual gaps, which fundamentally changed how his team approached layout component design. 💼 SPONSORS None detected 🏷️ React Components, Design Systems, CSS Layout, Component Architecture