Spacing Systems - 4pt & 8pt Grid
Spacing is the most overlooked yet most impactful element of UI design. The difference between amateur and professional UI often comes down to spacing consistency - professionals use a systematic spacing scale derived from a base unit, which creates rhythm, harmony, and predictability. The 8-point grid system is the dominant spacing system in product design, used by Material Design, Apple Human Interface Guidelines, and essentially every major design system. Understanding and applying it transforms your designs from 'generally organized' to 'clearly professional.'
The 8-Point Grid System
The 8-point grid system uses multiples of 8 as all spacing values. Instead of arbitrary spacing (margin: 13px, padding: 22px), all spacing values are chosen from the scale: 4, 8, 16, 24, 32, 40, 48, 64, 80, 96, 128px. Why 8? It divides evenly into common screen widths (360px, 375px, 390px, 768px, 1440px), allowing crisp rendering without fractional pixels. It also aligns naturally with iOS and Android's base units. It's large enough to create visible spatial relationships while small enough for fine-grained control at the 4px sub-unit. The 4px sub-unit: within the 8pt system, 4px is the minimum spacing value - used for very tight relationships like the gap between an icon and its label, or the padding inside a pill tag. Used sparingly for relationships that need just a whisper of space, not a full 8px. The practical scale with semantic names: xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=32px, 2xl=48px, 3xl=64px. These semantic names are what your design tokens reference - never hard-coded pixel values.
12 cols. CSS Grid for 2D.
Spacing in Component Design
- Internal padding (component breathing room): Space inside a component between the boundary and its contents. Standard button padding: 8-12px vertical, 16-24px horizontal. Form field padding: 12-16px vertical, 12-16px horizontal. Card padding: 16-24px on all sides. Consistent internal padding is what makes components feel 'finished' vs 'cramped'
- Gap (space between sibling elements): Space between elements within the same container. Gap between form label and input: 4-8px. Gap between stacked form fields: 16-24px. Gap between cards in a grid: 16-24px. The gap between related elements should be significantly smaller than the gap between unrelated sections
- Margin (space between sections): Space between major content sections. Section margin: 48-96px on desktop, 32-64px on mobile. This generous spacing creates clear visual separation between distinct content areas
- Auto Layout in Figma: Use Figma's Auto Layout to apply spacing systematically - set padding values and gap values within components to match your spacing scale. When all components use Auto Layout with scale-consistent values, the entire design automatically maintains spatial harmony
- Common mistake: Random spacing everywhere. A design where some buttons have 12px padding, others have 15px, others have 20px - all slightly different - looks unprofessional even when you can't articulate why. Consistency is what users perceive as 'quality'
White Space as a Design Element
White space (negative space) is the intentional empty area between and around design elements. It's not wasted space - it's active space that creates focus, communicates relationships, and establishes breathing room. Apple's entire design aesthetic is built around generous white space - it's why Apple products feel premium. White space creates hierarchy: the element with the most surrounding white space is perceived as most important. White space enables focus: a complex medical form becomes more approachable when generous spacing separates sections, reducing perceived cognitive load even when the same information is present. There are two types of white space in UI. Micro white space is the small gaps between characters, words, and lines - it affects readability. Macro white space is the large areas between major content sections - it affects the feeling of the entire page (spacious vs cramped). Common mistake: filling every available pixel with content. Designers who feel compelled to fill empty space haven't internalized that white space is a design element with semantic meaning. When a page feels 'too empty,' the answer is almost never to add more content - it's to reconsider whether the content is being spaced and sized optimally.
Tip
Tip
Practice Spacing Systems 4pt 8pt Grid in small, isolated examples before integrating into larger projects. Breaking concepts into small experiments builds genuine understanding faster than reading alone.
Practice Task
Note
Practice Task - (1) Write a working example of Spacing Systems 4pt 8pt Grid from scratch without looking at notes. (2) Modify it to handle an edge case (empty input, null value, or error state). (3) Share your solution in the Priygop community for feedback.
Quick Quiz
Common Mistake
Warning
A common mistake with Spacing Systems 4pt 8pt Grid is skipping edge case testing - empty inputs, null values, and unexpected data types. Always validate boundary conditions to write robust, production-ready ui ux code.
Key Takeaways
- Spacing is the most overlooked yet most impactful element of UI design.
- Internal padding (component breathing room): Space inside a component between the boundary and its contents. Standard button padding: 8-12px vertical, 16-24px horizontal. Form field padding: 12-16px vertical, 12-16px horizontal. Card padding: 16-24px on all sides. Consistent internal padding is what makes components feel 'finished' vs 'cramped'
- Gap (space between sibling elements): Space between elements within the same container. Gap between form label and input: 4-8px. Gap between stacked form fields: 16-24px. Gap between cards in a grid: 16-24px. The gap between related elements should be significantly smaller than the gap between unrelated sections
- Margin (space between sections): Space between major content sections. Section margin: 48-96px on desktop, 32-64px on mobile. This generous spacing creates clear visual separation between distinct content areas