Spacing
Commure UI's spacing system is built on a 4px base unit, scaled through consistent multiples. This ensures predictable rhythm, clean alignment, and visual harmony across all layouts.
FigmaScale
The Commure UI spacing scale is built on a 4px base unit. All values are multiples of 4, ensuring predictable rhythm and clean alignment across layouts.
Named tokens
Named aliases map readable labels to specific scale values. Use these in components to express intent rather than hardcoded pixel values.
Best Practices
Do
- •Always use tokens from the scale — never hardcode pixel values.
- •Use named tokens (small, normal, large) to express semantic intent in components.
- •Keep structure neutral — use spacing for grouping, not for visual decoration.
- •Scale up (large, xlarge) for page-level regions; scale down (xsmall, small) inside dense components.
Don't
- •Don't use arbitrary px values that fall outside the 4px grid.
- •Don't mix scale tokens and hardcoded values in the same component.
- •Don't use spacing tokens to compensate for missing alignment — fix layout structure instead.
FAQs
Q. Why use a 4px grid?
A. 4px aligns with device pixel densities and provides consistent vertical rhythm across all component densities.
Q. Can I use custom pixel values?
A. No. Always use existing tokens to maintain consistency and predictability of rhythm.
Q. How does spacing relate to typography?
A. Line spacing and flow text root proportionally to the scale. Use normal (16px) as the baseline gap between text and UI elements.