Spacing
A spacing system built on a 4px base unit — providing consistent rhythm across all components and layouts.
4px Base Unit
Layout uses 4px multiples for consistent rhythm — component internals and precision work use 2px steps in the 0–14px range.
Spacing Scale
Click to copy — 0–14px in 2px steps (component internals & fine-tuning), 16px+ in 4px steps (layout & section spacing).
Visual Scale
2pxgap-0.54pxgap-16pxgap-1.58pxgap-210pxgap-2.512pxgap-314pxgap-3.516pxgap-420pxgap-5Component Spacing
Recommended spacing values for each component
Button
px-4h-*gap-2Input
px-3/4h-*Card
px-4 sm:px-6pt-5 sm:pt-6pb-3 sm:pb-4gap-2Modal
p-6gap-3Badge
h-6px-2gap-1Alert
p-4gap-2.5Layout Spacing
Recommended spacing patterns for page and section layouts — combine primitive tokens with responsive breakpoints.
Symmetric
DefaultX = Y same padding — for dashboards and apps
p-4 md:p-6 lg:p-8 xl:p-10| Breakpoint | Padding |
|---|---|
| Mobile | 16px |
| Tablet (md) | 24px |
| Desktop (lg) | 32px |
| Large (xl) | 40px |
Reading
Y > X more vertical spacing — for documents and blogs
px-4 md:px-6 lg:px-8 xl:px-10py-5 md:py-8 lg:py-10 xl:py-12| Breakpoint | X | Y |
|---|---|---|
| Mobile | 16px | 20px |
| Tablet (md) | 24px | 32px |
| Desktop (lg) | 32px | 40px |
| Large (xl) | 40px | 48px |
Section
Large section gaps within a page (responsive)
gap-4 md:gap-6 lg:gap-8| Breakpoint | Gap |
|---|---|
| Mobile | 16px |
| Tablet (md) | 24px |
| Desktop (lg) | 32px |
Element
Between elements within a section
gap-4Inline
Between horizontally arranged elements
gap-2Interactive Demo
p-14px
p-28px
p-416px
p-624px
p-832px