Spacing Tokens
Consistent spacing scale for margins, padding, and gaps
4
Tight spacing, icon padding
8
Small gaps, compact layouts
12
Button padding, input spacing
16
Standard padding, card content
24
Section gaps, larger padding
32
Major section spacing
48
Page section margins
64
Large layout spacing
CSS Custom Properties
:root {
--sr-space-4: 4px;
--sr-space-8: 8px;
--sr-space-12: 12px;
--sr-space-16: 16px;
--sr-space-24: 24px;
--sr-space-32: 32px;
--sr-space-48: 48px;
--sr-space-64: 64px;
}