Spacing Scale
EthioWDS uses a consistent spacing scale based on rem units for predictable layouts.
Spacing Scale
The spacing scale uses multiples of 0.25rem (4px) for consistency:
1 unit = 0.25rem (4px)
2 units = 0.5rem (8px)
3 units = 0.75rem (12px)
4 units = 1rem (16px)
The design system exposes spacing as variables (for example, 1 unit = 0.25rem, 4 units = 1rem). Use these in your project for padding, margins, and gaps so layouts stay consistent.
Usage
Use the spacing variables in your project for padding, margins, and gaps. Compact layouts can use smaller units; spacious layouts can use larger ones. Keeping to the scale improves consistency across the site.
Common Spacing Patterns
Section Spacing
3rem spacing between major sectionsComponent Spacing
1rem spacing between related components
Internal Spacing
1rem internal padding within components
Responsive spacing
EthioWDS supports responsive spacing for different screen sizes. Use smaller spacing on mobile and increase spacing on tablet and desktop for a comfortable reading and layout experience.