It is critical to separate Layout Grid spacing (the global scaffold that positions cards on a page) from Component Spacing (the internal anatomy of a component):
24px on desktop, 16px on mobile), and outer page margins.16px), the gap between an icon and button text (8px), or the space between avatar and user name (12px).Rule of Component Isolation: A component should never declare external margins on its root container (margin-top: 24px). Spacing between components is the responsibility of the parent layout container (using CSS Flexbox gap or CSS Grid gap).
Level 3 · Design Tokens & Foundations