HomeOverviewFoundationsComponentsGuidelinesPatterns

Spacing System

Consistent spacing scale for margins, padding, and gaps

Spacing Philosophy

MUZISYSTEM uses a consistent spacing scale based on a 4px base unit. This creates visual rhythm and hierarchy while maintaining flexibility for different layouts and component sizes.

All spacing values are defined as CSS variables and should be used instead of hard-coded pixel values to ensure consistency across the design system.

Spacing Scale

Base unit: 4px

--space-0
0px
No spacing
--space-1
4px
Minimal spacing, tight layouts
--space-2
8px
Small gaps, compact components
--space-3
12px
Default gaps, standard spacing
--space-4
16px
Medium spacing, section padding
--space-6
24px
Large spacing, component separation
--space-8
32px
Extra large spacing, major sections
--space-12
48px
Section headers, major breaks
--space-16
64px
Page sections, hero spacing

Usage Guidelines

When to use each spacing value

Padding

  • --space-2 - Buttons, badges, chips
  • --space-3 - Inputs, small cards
  • --space-4 - Cards, modals
  • --space-6 - Large cards, sections
  • --space-8 - Page containers

Margins & Gaps

  • --space-1 - Icon spacing, tight lists
  • --space-2 - Form field spacing
  • --space-3 - Default gaps
  • --space-4 - Component spacing
  • --space-6 - Section spacing

Code Examples

How to use spacing tokens in your code

/* CSS */
.card {
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  gap: var(--space-3);
}

/* React/JSX */
<div style={{ 
  padding: 'var(--space-4)',
  marginBottom: 'var(--space-6)',
  gap: 'var(--space-3)'
}}>
  Content
</div>

Best Practices

  • Use tokens - Always use spacing tokens instead of hard-coded values
  • Be consistent - Use the same spacing values for similar elements
  • Follow the scale - Don't create custom spacing values outside the scale
  • Responsive spacing - Adjust spacing for different screen sizes when needed
  • Visual hierarchy - Use larger spacing to separate major sections