Spacing
Consistent spacing scale based on 4px increments.
Scale
space-1 4px
space-2 8px
space-3 12px
space-4 16px
space-5 20px
space-6 24px
space-8 32px
space-10 40px
space-12 48px
Usage Guidelines
| Context | Spacing |
|---|---|
| Label to input | space-1 (4px) |
| Between form fields | space-4 (16px) |
| Card padding | space-5 to space-6 (20-24px) |
| Section spacing | space-8 to space-10 (32-40px) |
Usage
.my-card {
padding: var(--sw-space-6);
gap: var(--sw-space-4);
margin-bottom: var(--sw-space-8);
}