Back to docsRecipe

Spacing system

A consistent 4px-based spacing scale that keeps every layout breathing the same rhythm. No magic numbers, no one-off padding.

Scale

xs4px0.25rem
sm8px0.5rem
md16px1rem
lg24px1.5rem
xl32px2rem
2xl48px3rem
3xl64px4rem

Usage

Every gap, padding, and margin in Meridian pulls from this scale. Tailwind classes map directly — p-4 is 16px, gap-6 is 24px. Never use arbitrary values like p-[13px].

Rule

  • •Outer section padding: always py-20 or py-24
  • •Card internal padding: p-6 (24px)
  • •Stack gaps between siblings: space-y-4 or space-y-6