Swiss Grid System Spacing
Our spacing system is based on an 8px base unit, following Swiss grid system principles. This provides:
- Consistent, predictable spacing across all components
- Mathematical harmony (all values divisible by 4 and 8)
- Generous negative space for clarity and focus
- Scalable spacing that maintains proportions
Formula: Each spacing value = base unit (8px) × multiplier. For example, lg = 8px × 3 = 24px.
Spacing Scale
xsCommon Usage:
- • Icon padding
- • Tight inline elements
- • Minor adjustments
smCommon Usage:
- • Compact element spacing
- • List item gaps
- • Form element spacing
mdCommon Usage:
- • Default element spacing
- • Card padding
- • Section gaps
lgCommon Usage:
- • Generous padding
- • Component separation
- • Subsection gaps
xlCommon Usage:
- • Major component spacing
- • Section padding
- • Layout gaps
2xlCommon Usage:
- • Large section spacing
- • Hero section padding
- • Major layout gaps
3xlCommon Usage:
- • Spacious section padding
- • Major layout divisions
- • Hero sections
4xlCommon Usage:
- • Extra spacious sections
- • Landing page hero
- • Maximum whitespace
5xlCommon Usage:
- • Maximum section spacing
- • Full-page layouts
- • Exceptional whitespace
Tailwind CSS Mapping
Our spacing tokens align with Tailwind's spacing scale for seamless integration:
| Token | Tailwind Class | Value | Example |
|---|---|---|---|
xs | p-1, m-1, gap-1 | 4px | className="p-1" |
sm | p-2, m-2, gap-2 | 8px | className="gap-2" |
md | p-4, m-4, gap-4 | 16px | className="p-4" |
lg | p-6, m-6, gap-6 | 24px | className="p-6" |
xl | p-8, m-8, gap-8 | 32px | className="gap-8" |
2xl | p-12, m-12, gap-12 | 48px | className="py-12" |
3xl | p-16, m-16, gap-16 | 64px | className="mb-16" |
4xl | p-24, m-24, gap-24 | 96px | className="py-24" |
5xl | p-32, m-32, gap-32 | 128px | className="py-32" |
Best Practices
1. Embrace Negative Space
Swiss design emphasizes generous whitespace. Use larger spacing values (xl, 2xl, 3xl) liberally for major sections. Whitespace is not wasted space—it creates clarity and focus.
2. Consistent Vertical Rhythm
Maintain consistent spacing between elements on the same hierarchy level. For example, if one section uses mb-8, all peer sections should use the same spacing.
3. Scale Appropriately
Larger elements warrant larger spacing. Hero sections should use 3xl or 4xl padding, while compact UI elements like buttons should use sm or md spacing.
4. Avoid Arbitrary Values
Stick to the defined spacing scale. Avoid arbitrary pixel values like p-[13px]. If a spacing value doesn't exist in the scale, choose the closest one or consider if it's truly needed.
Live Examples
Compact Layout (sm spacing)
Default Layout (md spacing)
Spacious Layout (xl spacing)