Pixel / Spacing
Spacing Scale
Base unit: 4px. All else follows.
Tailwind tokens · rem values · pixel equivalents at 16px root
space-px0.0625rem1px
Border territory. Nothing else lives here.
space-0.50.125rem2px
Use it. Don't announce it.
space-10.25rem4px
The atom. Every system starts here.
space-20.5rem8px
The base unit. Most things should start here.
space-30.75rem12px
Fine.
space-41rem16px
One rem. Body rhythm. Memorize this.
space-51.25rem20px
Comfortable gap. Underused.
space-61.5rem24px
Section breathing room. Use it often.
space-82rem32px
A statement. You are separating things.
space-102.5rem40px
Intentional. Make sure it was.
space-123rem48px
Major break. Belongs between sections.
space-164rem64px
Hero territory. Use sparingly.
space-205rem80px
Are you certain?
space-246rem96px
Landing page syndrome, stage one.
space-328rem128px
Stage two. Reconsider.
space-4010rem160px
Stage three. Close the laptop.
The grid in practice
4
8
12
16
24
32
40
48
64
Every bar is a multiple of 4. This is what a grid looks like.