---
url: https://brand.okrado.com/layout/responsive/
title: Responsive behaviour
description: Grid, breakpoints and what changes below 640 px.
kind: reference
owner: hmdmsd
updated: 2026-11-03
review_by: 2027-02-28
audience:
  - designer
  - developer
---

# Responsive behaviour

> Grid, breakpoints and what changes below 640 px.

| 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](https://brand.okrado.com/foundations/spacing/).