Responsive design
One product, every screen
North products are used at desks, in meeting rooms, on tablets in the field and on phones in corridors. Design mobile-first, enhance for larger screens, and keep the same hierarchy everywhere.
- Content and actions are the same on every device; only the layout changes. No “desktop-only” features without a reason.
- Design at the breakpoints, test in between: layouts must hold at every width from 320px up.
- Touch is not only for phones: tablets and touch laptops need 44px targets too.
Breakpoints
| Name | Min width | Device class | Columns | Gutter / margin | Navigation |
|---|---|---|---|---|---|
| base | 0 | Phones (portrait) | 4 | 16 / 16px | Burger + drawer, or bottom tab bar |
| sm | 640px | Large phones, small tablets (portrait) | 4–8 | 16 / 24px | Burger + drawer |
| md | 960px | Tablets (landscape), small laptops | 8 | 24 / 32px | Icon rail or top bar |
| lg | 1280px | Laptops, desktops | 12 | 32 / 64px | Persistent sidebar or top bar |
| xl | 1600px | Wide monitors, meeting-room screens | 12 (content max 1280px, centred) | 32 / auto | Persistent sidebar |
These are tokens (--n-breakpoint-*; Tailwind sm: md: lg: xl:). Use min-width media queries; prefer container queries for components that live in panels of varying width.
Collapsing strategy
| Element | Desktop | Tablet | Phone |
|---|---|---|---|
| App navigation | Sidebar 240–280px | Icon rail 64px | Burger drawer or bottom tabs |
| Page header actions | All visible | Primary + overflow menu | Primary only; rest in overflow |
| Card grids | 3–4 up | 2 up | 1 up |
| Two-pane (list + detail) | Side by side | Detail as drawer | Separate screens with back |
| Forms | One column, max 560px | Same | Full width; sticky action bar at the bottom |
| Tables | Full | Hide low-priority columns | Cards or horizontal scroll with sticky first column |
| Dialogs | Centred, 480–640px | Centred | Full-screen sheet or bottom sheet |
| Tabs | All visible | Scrollable | Scrollable or select |
| Mai (assistant) | Docked panel | Overlay drawer | Full-screen |
Typography across sizes
Headlines scale; body copy doesn't
- Body text stays 16px on every device (never smaller on phones).
- Display and heading sizes scale fluidly between the phone and desktop values with
clamp(). - Line length stays under 75 characters at every width.
- Arabic follows the same rules with its size ratio.
| Style | Phone | Desktop | CSS |
|---|---|---|---|
| Display XL | 44px | 96px | clamp(44px, 6.2vw + 20px, 96px) |
| Heading 1 | 32px | 48px | clamp(32px, 2.5vw + 22px, 48px) |
| Heading 2 | 26px | 36px | clamp(26px, 1.6vw + 20px, 36px) |
| Body | 16px | 16–18px | fixed |
Touch and input
- Minimum target 44px × 44px on touch; 8px between adjacent targets.
- Use
@media (pointer: coarse)to enlarge controls; never rely on hover to reveal essential actions on touch. - Primary actions within thumb reach on phones: bottom of the screen in a sticky bar.
- Respect safe areas on notched phones:
padding: env(safe-area-inset-*)for fixed headers and bottom bars. - Support keyboard and pointer on tablets with keyboards: focus rings and shortcuts still apply.
Images and media
- Serve responsive images (
srcset,sizes) at 1× and 2×; illustrations and logos as SVG. - Keep aspect ratios fixed (
aspect-ratio) so pages don't jump; crop withobject-fit: coverand choose a focal point. - Product screenshots never crop critical UI; on phones show a cropped detail instead of a shrunken full window.
- Hero art: night sky and Aurora artwork scale from code; on phones the star moves up and right so text has room.
Testing checklist
- Widths: 320, 375, 768, 1024, 1280, 1440 and 1920px, plus the in-betweens by dragging.
- Orientation: phones and tablets in both portrait and landscape.
- Zoom: 200% browser zoom and the largest system text size; nothing overlaps or is cut off.
- Input: touch only, keyboard only, mouse.
- Languages: English and Arabic (RTL), with real copy.
- Modes: light and dark.
Code
/* mobile-first */
.grid { display: grid; gap: var(--n-space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .grid { grid-template-columns: repeat(3, 1fr); gap: var(--n-space-8); } }
@media (pointer: coarse) { .n-btn { min-height: 44px; } }
h1 { font-size: clamp(32px, 2.5vw + 22px, 48px); }
<!-- Tailwind -->
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">…</div>Dos and don'ts
Do
- Design mobile-first and test between breakpoints.
- Keep body text at 16px on phones.
- Make touch targets 44px.
- Collapse with intent: decide what each element does at each size.
Don't
- Hide features on mobile without a reason.
- Rely on hover on touch devices.
- Shrink desktop screenshots onto phones.
- Use fixed pixel widths for layout.
Last updated on 14 October 2026