Components

Layouts & Spacing

Layout defines the overarching structure and arrangement of UI elements on a screen, ensuring logical organization and responsiveness across devices using defined grids and container patterns.
Spacing refers to the meticulously consistent application of whitespace between these elements, typically via a predefined scale of tokens, to enhance readability, establish visual hierarchy, and create a clear, uncluttered user experience.

Together, they form the skeletal framework that ensures visual harmony and intuitive navigation throughout an entire product ecosystem.

Layout & Spacing - Penpot preview