Skip to main content

📐 Spacing & Layout

Spacing scale​

Define and use the system scale (e.g., 4px/8px ramp):

  • spacing.xs / sm / md / lg / xl / 2xl (document exact values used).

Grid & Breakpoints​

  • Grid columns, gutters, margins per breakpoint.
  • Common containers/page gutters for desktop/tablet/mobile.

Usage​

  • Component padding should map to spacing tokens (no ad-hoc pixel values).
  • Maintain vertical rhythm (consistent spacing between sections).
  • Favor auto-layout with tokenized spacing.

Do’s / Don’ts​

  • ✅ Use spacing tokens for gaps/padding
  • ✅ Align to grid at breakpoints
  • ❌ Arbitrary pixel values
  • ❌ Mixed spacing units in the same component