Skip to content

Responsive behaviour

Breakpoint Columns Margin Gutter
Desktop, 1080 px and up 12 fluid, 80 px at 1440 24
Tablet, 640 to 1079 px 8 32 to 48 20
Mobile, below 640 px 4 20 16

Below 640 px:

  • A short dialog becomes a bottom sheet; a long or multi-field form goes full screen.
  • Targets are at least 44 px.
  • The shell’s sidebar becomes a drawer.
  • Every screen is checked at 375 px.

The base unit is 4 px and spacing comes only from the scale.

Owner
Okrado founders
Updated
Review by
Markdown version
/layout/responsive.md