# Spacing & layout — Unless design system

Foundations

# Spacing & layout
  [Grid](/en/design/foundations/spacing/)[Scale](/en/design/foundations/spacing/scale/)[Container](/en/design/foundations/spacing/container/)[Breakpoints](/en/design/foundations/spacing/breakpoints/)
## Responsive breakpoints + what they unlock

The five breakpoints the system reaches for, in Tailwind units, with the layout shift each one triggers.

- `sm`: 640px
- `md`: 768px (section padding lifts to 120px)
- `lg`: 1024px (hero heading hits its two-line target)
- `xl`: 1280px (content cap)
- `2xl`: 1536px (gutters widen, content stays capped)
       [Spacing & layout · Container](/en/design/foundations/spacing/container/)     [Motion · Easing](/en/design/foundations/motion/)