Spacing
Spacing system, layout, and grid
Consistent spacing is essential for creating rhythm, balance, and clear relationships between UI elements.
The 4px Grid
Atlas uses a base-4 grid system for all spacing, margins, and padding. This ensures all measurements are predictable and align perfectly.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Spacing Scale
Our spacing scale provides a predefined set of values to use across the application.
- xxs (4px): Tiny adjustments.
- xs (8px): Close relationships between elements.
- sm (16px): Standard component padding.
- md (24px): Spacing between related groups.
- lg (32px): Section separation.
- xl (48px): Major structural separation.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Layout Grids
For page-level layout, we use a responsive 12-column grid system with fluid margins and fixed gutters.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.