# Responsive design

North brand guidelines for AI agents · https://identity.north.ae/AGENTS/responsive · Updated 2026-10-14
Use when: Laying out pages or apps for phones, tablets, desktops and large screens.
Rules that always apply: https://identity.north.ae/AGENTS

## Breakpoints (min-width, mobile-first)
| Name | Min | Devices | Columns | Gutter/margin | Navigation |
|---|---|---|---|---|---|
| base | 0 | phones | 4 | 16/16 | burger drawer or bottom tabs |
| sm | 640px | large phones, small tablets | 4–8 | 16/24 | burger drawer |
| md | 960px | tablets landscape, small laptops | 8 | 24/32 | icon rail or top bar |
| lg | 1280px | laptops, desktops | 12 | 32/64 | persistent sidebar |
| xl | 1600px | wide monitors | 12, content max 1280px centred | 32/auto | persistent sidebar |
- Prefer container queries for components inside panels. Layouts must hold at every width from 320px.

## Collapsing strategy
| Element | Desktop | Tablet | Phone |
|---|---|---|---|
| App navigation | sidebar 240–280 | icon rail 64 | burger drawer / bottom tabs |
| Header actions | all | primary + overflow | primary only |
| Card grids | 3–4 up | 2 up | 1 up |
| List + detail | side by side | detail drawer | separate screens |
| Forms | max 560px | same | full width + sticky action bar |
| Tables | full | hide low-priority columns | cards or scroll with sticky first column |
| Dialogs | centred 480–640 | centred | full-screen / bottom sheet |
| Tabs | all | scroll | scroll or select |
| Mai | docked panel | overlay drawer | full screen |

## Type, touch, media
- Body stays 16px; headings scale with clamp(): display-xl clamp(44px, 6.2vw + 20px, 96px); heading-1 clamp(32px, 2.5vw + 22px, 48px); heading-2 clamp(26px, 1.6vw + 20px, 36px). Line length < 75 characters.
- Touch targets ≥ 44px with 8px spacing; @media (pointer: coarse) enlarges controls; no hover-only actions on touch; primary actions in thumb reach (sticky bottom bar); env(safe-area-inset-*) for fixed bars.
- Responsive images (srcset/sizes, SVG for logos/illustrations), fixed aspect-ratio, object-fit cover with focal point; never shrink full product windows onto phones (show a cropped detail).
- Test: 320, 375, 768, 1024, 1280, 1440, 1920; both orientations; 200% zoom; touch/keyboard/mouse; English and Arabic; light and dark.