Layout

Tailwind spacing and token-backed radius. Shape scale: Principles.

Spacing

Border radius

Breakpoints, control heights & shadowsShow
  • sm640px — Two-column grids
  • md768px — Sidebar layouts
  • lg1024px — Design-system sidebar visible
  • xl1280px — Wide marketing grids
  • 2xl1536px — Max content width contexts
  • size-936px — Compact buttons (Button md)
  • size-1040px — Icon controls, inputs
  • size-1144px — Minimum touch target (mobile nav)
  • size-1248px — Logo hit area, large icon buttons
  • shadow-smResting cards
  • shadow-mdHover lift on buttons
  • shadow-lgFloating chrome (dock, nav)
  • shadow-noneFlat surfaces on busy backgrounds