Spacing

Consistent spacing system based on a 4px grid for harmonious layouts

4px Grid System

Our spacing system is built on a 4px base unit, creating a consistent rhythm throughout the design. This mathematical approach ensures visual harmony and makes spacing decisions predictable and scalable.

Spacing Scale

--spacing-xs
4px
--spacing-sm
8px
--spacing-md
16px
--spacing-lg
24px
--spacing-xl
32px
--spacing-2xl
48px
--spacing-3xl
64px

Padding Examples

Padding Applications

Padding creates internal space within elements.

padding: var(--spacing-sm); (8px)

Small Padding

padding: var(--spacing-md); (16px)

Medium Padding

padding: var(--spacing-lg); (24px)

Large Padding

padding: var(--spacing-xl); (32px)

Extra Large Padding

Margin Examples

Margin Applications

Margin creates external space between elements.

No Margin
Medium Margin (16px)
Extra Large Margin (32px)

Gap Spacing

Small Gap

1
2
3
4

gap: var(--spacing-sm);

Medium Gap

1
2
3
4

gap: var(--spacing-md);

Large Gap

1
2
3
4

gap: var(--spacing-lg);

Common Use Cases

Component Spacing

Buttons, inputs, and form elements typically use --spacing-md for internal padding and --spacing-sm to --spacing-md for gaps between elements.

Card Layouts

Cards use --spacing-xl for padding, creating comfortable reading space. Card grids use --spacing-lg to --spacing-xl for gaps.

Section Spacing

Major sections use --spacing-2xl to --spacing-3xl for vertical separation, creating clear content hierarchy.

Inline Elements

Icons and inline elements use --spacing-xs to --spacing-sm for subtle separation without breaking flow.

Navigation

Navigation items use --spacing-md for padding and --spacing-sm for gaps, balancing density with usability.

Modals & Overlays

Modal content uses --spacing-xl to --spacing-2xl for padding, creating focus and breathing room.

Implementation

Using Spacing Variables

Always use spacing variables instead of hardcoded pixel values for consistency.

/* ✅ Correct Usage */ padding: var(--spacing-md); margin-bottom: var(--spacing-lg); gap: var(--spacing-sm); /* ❌ Avoid Hardcoded Values */ padding: 16px; margin-bottom: 24px; gap: 8px; /* Combining Spacing */ padding: var(--spacing-md) var(--spacing-xl); margin: var(--spacing-lg) auto;

Responsive Spacing

Adjust spacing for different screen sizes while maintaining proportions.

/* Mobile */ padding: var(--spacing-md); gap: var(--spacing-sm); /* Tablet and up */ @media (min-width: 768px) { padding: var(--spacing-lg); gap: var(--spacing-md); } /* Desktop */ @media (min-width: 1024px) { padding: var(--spacing-xl); gap: var(--spacing-lg); }

Best Practices

  • Consistency: Use the same spacing values for similar elements throughout the application
  • Hierarchy: Larger spacing for major sections, smaller for related elements
  • Breathing Room: Don't be afraid of whitespace - it improves readability
  • Touch Targets: Ensure interactive elements have at least --spacing-xl (32px) tap area on mobile
  • Optical Adjustments: Sometimes visual balance requires slight adjustments to mathematical spacing
  • Performance: Use CSS variables for easy theme switching and maintenance