A grid is not a cage. It is the system that allows materials produced by different people in different countries to look as though they were created by the same team.
Consistency
The same grid applied in São Paulo and in Lagos produces visually coherent materials — without the designer in one country ever having to see the work of the other.
Speed
With the grid defined, the local designer does not start from zero. They inherit a structure that already resolves proportions, margins and hierarchy — and can concentrate on the content.
Hierarchy
The grid defines where the eye enters the piece, where it goes and where it stops. A layout without a grid forces the eye to decide on its own — and the eye always chooses the wrong path.
The SDARM grid system is based on 12 columns — the most flexible standard in the history of graphic design. It works in layouts of 1 column (signage, banner), 2 columns (editorial, print), 3 columns (social media, cards) and 4 columns (product grid, tables).
For digital materials, the grid adapts responsively. For printed materials, the proportions are fixed. For signage, a simplified grid of 4 zones is used.
Base unit
The base unit of the system is 8px. All values of spacing, margin, padding and component size are multiples of 8. This guarantees perfect alignment between elements even without visible guides — because everything "snaps" to the same invisible grid.
Section 10.1 · Principles of composition
"Cinematic overhead shot of a designer desk with printed layout grids, ruler and pencil, hands aligning a sheet, modest long-sleeve clothing, warm side light, film grain, low saturation, no text visible, 4:3"
10.2 — 12-column grid
Base system and variations by format
Select the format and the number of columns to see the grid in different contexts of use. The columns in blue show the active area; the gray channels, the spacing between columns.
Format
Post 1:1 · 1080×1080px
Grid for digital
Posts and stories
4 columns with a 40px margin (1080px). 16px gutter. Interior safe area with an additional 24px of padding.
Reels and video
3 horizontal zones: top (20%), central content (60%), footer with the logo (20%). No vertical column grid.
Website and web
12 columns with max-width 1120px, 24px gutter, 56px side margin on desktop, 28px on mobile.
Grid for print
A4 and A5
Top margin: 20mm · bottom: 22mm · sides: 18mm. 3mm bleed. Maximum text column: 120mm (A4).
A3/A2 posters
6 columns. 24mm margin. 8mm gutter. 5mm bleed. The title occupies at least 3 columns.
Signage
4 zones: top (logo), main area (icon + text), lower support, color bar. Minimum margins of 15% of the smaller dimension.
10.3 — Official formats
Proportions for digital and print
Each format has its own proportion, resolution and margins. Using the correct proportions from the start avoids cropping, reframing and loss of quality in the final delivery.
"Documentary photo of printed posters and cards in different sizes arranged neatly on a large wooden table, warm ambient light, film grain, low saturation, no text visible, 16:9"
10.4 — Spacing scale
Space tokens — from 4px to 128px
Every space in the system is a multiple of 4. The tokens below are the official values — using them guarantees that any material aligns with any other without manual adjustment.
xs4px
Between icon and label
sm8px
Internal space of buttons
md16px
Gutter, card padding
lg24px
Between block elements
xl32px
Social post margin
2xl48px
Separation of sections
3xl64px
Breathing room of an editorial section
4xl96px
Page section padding
5xl128px
Maximum separation between blocks
Why multiples of 4?
Most screens use whole pixels. Multiples of 4 guarantee that elements never sit at fractional positions (e.g. 13.5px) — which would cause blurring on low-density screens. Besides that, multiples of 4 are naturally divisible by 2, creating symmetrical proportions without calculation.
10.5 — Logo clear space
Minimum area and positioning
The logo needs room to breathe. Clear space is the mandatory minimum area around the logotype — no text, image or visual element may enter that zone.
Clear space = X all around
Definition of X
X = the height of the symbol. The clear space around the logo is equal to the height of the symbol in every direction.
In social posts (1080px), the minimum zone is 40px around the logo.
In A4, the minimum zone is 8mm around the logo.
Violations of the zone
Text or a slogan touching the logo — even if it is the official slogan of the Church.
A decorative element (line, shape, photograph) entering the clear space.
The logo positioned at the edge of the piece without a minimum margin of one X zone.
Approved positioning of the logo
Top left
Top right
Bottom left
Center — avoid
The logo in the center competes with the main content. Use the corners — preferably the top left.
10.6 — Post composition
Layout structures for social media
Three composition structures covering the most frequent uses — each one with its grid, zones and hierarchy logic defined.
Institutional post · 1:1
The Sabbath gathers us.
Seventh Day Adventist Reform Movement Church
1:1 · 1080×1080px
4 col grid · 40px margin · Logo: top left corner · Title: lower zone · Optional gold bar at the base
Photographic post · 4:5
Sabbath fellowship.
Photography + text over a gradient
4:5 · 1080×1350px
3 col · Full-bleed photograph · Dark gradient at the base · Logo at the top · Title over the gradient
Story · 9:16
No one walks alone.
Safe zone between 20% and 80%
9:16 · 1080×1920px
Safe zone 20%–80% · Logo centered at the top · Content in the central band · CTA at the base
Safe zone for video and stories
In stories and reels, the platform overlays interface elements (avatar, text, icons) on the upper and lower bands. The safe zone is always between 20% and 80% of the total height — no essential content outside that band. That means: the first 384px and the last 384px of a 1920px story are risk zones.
Section 10.6 · Post composition
"Close-up of hands positioning a photograph on a printed poster mockup over a grid sheet, warm window light, shallow depth of field, film grain, low saturation, no text visible, 4:5"
10.7 — Margins and bleed
Rules for printed materials
Bleed, safe area and internal margins are mandatory in every file sent to the printer. A file without bleed produces unwanted white edges in the final product.
Bleed area — 3mm beyond the trim
Safe area — content in this zone
A4 · 210×297mm
Bleed3mm (all sides)
Top margin20mm
Bottom margin22mm
Side margin18mm
Column gutter6mm
A3 poster · 297×420mm
Bleed5mm (all sides)
Top margin24mm
Bottom margin28mm
Side margin24mm
Column gutter8mm
10.8 — Rules of composition
What is allowed and what is forbidden
A grid is visual discipline. Departing from the grid is not creativity — it is carelessness. The rules below protect the coherence of the brand on any medium.
Allowed
Use the official formats and proportions (1:1, 4:5, 9:16, 16:9, A4).
Apply the spacing scale with tokens that are multiples of 4.
Position the logo in the corners — with the clear space respected.
Use the 3 approved composition structures as the basis for new materials.
Extend the grid (e.g. from 4 to 6 columns) when the content requires it — keeping the base values.
Forbidden
Creating layouts without a grid — even if it "looks fine".
Resizing a piece from one format to another without redesigning it (e.g. stretching a 1:1 post to 9:16).
Sending files to the printer without bleed — the result is white edges in the final product.
Positioning essential content outside the safe zone in stories and reels.
Using arbitrary spaces — any value that is not a multiple of 4.
The grid does not limit. It frees.
Freedom with structure
With the grid defined, the designer can concentrate on what really matters — the message, the photograph, the text. The structure is already resolved. Improvisation is no longer necessary.
Automatic coherence
When all materials follow the same spacing system, they look as though they were created by the same team — even when they were produced in different countries, by different people.
Scale without friction
A well-defined grid system makes it possible to create 10 different posts in a day without losing visual coherence. That is only possible when the structural decisions have already been taken in advance.
Brand Manager's Note
"In every local print shop, on every field communication computer, on every phone of a youth leader who makes posts — the grid has to be present. Not as an abstract rule, but as a habit. It is the difference between communicating and merely publishing."