Layout & Grids
Digital |
Web & Email Modular Grid System
Shared principles
Regardless of the technical environment, our digital grid relies on the exact same philosophical foundation: Modules, Gutters, and Snapping logic.
Gutters are sacred
Content must never bleed into the gutters. They function exclusively as structural whitespace.
Grid matrix & snapping
The snapping logic dictates that every UI element, text block, or image must align perfectly to the precise edges of the grid modules.
Mobile stacking logic
On mobile devices, horizontal multi-column layouts are completely removed in favor of a strict vertical hierarchy. Content spans 100% of the active grid.
Web grid system
The Web Grid uses a fluid, responsive 12-column architecture. The maximum content width is constrained to 1140px to ensure optimal reading line lengths.
Desktop web layout (1140px)
The desktop layout heavily utilizes a 2+8+2 logic for optimal reading lengths, identical to email. However, because it runs natively in the browser, it can seamlessly break out into all 12 columns for full-bleed media.
Tablet web layout (768px – 1023px)
Mobile web layout (≤767px)
Web specifications
| Parameter | Desktop (≥1024px) | Tablet (768px – 1023px) | Mobile (≤767px) |
|---|---|---|---|
| Columns | 12 | 8 | 4 |
| Gutter | 24px | 24px | 16px |
| Outer padding | 40px | 32px | 20px |
Email grid system
The Email Grid is built to survive archaic rendering engines. It operates within a strict 600px maximum wrapper. To maintain elegance, the central content on desktop utilizes only 8 columns.
Desktop email layout (600px)
Tablet email layout (480px)
Mobile email layout (375px)
Email specifications
| Parameter | Desktop (600px max) | Tablet (480px max) | Mobile (375px max) |
|---|---|---|---|
| Layout logic | 2 + 8 + 2 whitespace | 1 + 6 + 1 whitespace | 100% full-width |
| Columns | 12 | 8 | 4 |
| Outer padding | 40px | 32px | 20px |
Core differences
While the visual philosophy (modules, gutters) remains identical, the technical execution and spatial constraints differ dramatically between Web and Email.
Web execution
- Technology Modern CSS Grid (display: grid), Flexbox, CSS variables.
- Container & scale Wide 1140px maximum content area. Browsers scale smoothly and natively across all dimensions.
- Column usage All 12 columns are actively used for content across the entire layout.
Email execution
- Technology HTML Tables, inline CSS. Frameworks like MJML are required for Outlook compatibility.
- Container & scale Strict 600px maximum width wrapper to prevent layouts from breaking in archaic clients.
- Column usage Only the central 8 columns hold content; outer columns act as mandatory protected whitespace.
Download the technical data sheet