Spacing
The spacing system for the Archimede Design System.
Spacing Philosophy
Our spacing system is designed to create a consistent rhythm throughout the interface. We use a scale based on 4px increments to ensure consistency and harmony across all components and layouts.
Spacing Scale
4px - Extra Small
4px (0.25rem)
8px - Small
8px (0.5rem)
12px - Medium Small
12px (0.75rem)
16px - Medium
16px (1rem)
24px - Medium Large
24px (1.5rem)
32px - Large
32px (2rem)
48px - Extra Large
48px (3rem)
64px - 2x Large
64px (4rem)
96px - 3x Large
96px (6rem)
128px - 4x Large
128px (8rem)
Spacing Applications
Spacing is used in various contexts throughout the interface. Here are some common applications:
Padding
16px Padding
Padding creates space within an element, between its content and its border.
Margin
Element 1
16px Margin
Element 2
Margin creates space around an element, separating it from other elements.
Usage
Spacing is implemented using Tailwind CSS classes. Here's how to use them:
All sides padding (16px)
Horizontal padding (16px) and vertical padding (8px)
Item 1
Item 2
Item 3
Example
Best Practices
- Use consistent spacing throughout your interface
- Use larger spacing for separating major sections, and smaller spacing for related elements
- Maintain a consistent rhythm by using the spacing scale
- Consider the relationship between elements when determining spacing
- Use padding for creating space within elements and margin for creating space between elements