Part II — Visual Identity · Chapter 10
SDARM Brand Book · 2026
10
Grid &
Composition
The SDARM grid system for every format — digital, print and signage. With an interactive viewer and real composition demos.
Part II · Ch. 10
Interactive viewer
8 sections
In this chapter
10.1
Principles of composition
What the grid solves — and why it matters
10.2
12-column grid
Base system and variations by format
10.3
Official formats
Proportions for digital and print
10.4
Spacing scale
Space tokens — from 4px to 128px
10.5
Logo clear space
Minimum area and positioning
10.6
Post composition
Layout structures for social media
10.7
Margins and bleed
Rules for printed materials
10.8
Rules of composition
What is allowed and what is forbidden
10.1 — Principles of composition

What the grid solves —
and why it matters

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.

Post Square
1 : 1
Instagram · Facebook
Post Portrait
4 : 5
Main feed
Stories / Reels
9 : 16
Stories · Reels
Landscape
16 : 9
Video · Presentation
A4
A4
Print
Proportion
1 : 1
Resolution
1080×1080px
Context
Feed post · Instagram · Facebook
Institutional posts, devotionals, worship photographs
Section 10.3 · Official formats
"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.

xs 4px
Between icon and label
sm 8px
Internal space of buttons
md 16px
Gutter, card padding
lg 24px
Between block elements
xl 32px
Social post margin
2xl 48px
Separation of sections
3xl 64px
Breathing room of an editorial section
4xl 96px
Page section padding
5xl 128px
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
SÍMBOLO NOME DA IGREJA X X X X
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
Sangria: 3mm Área segura: 18mm laterais · 20mm topo · 22mm base 3mm
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."
Hugo Cibalde
Brand Manager
Seventh Day Adventist Reform Movement
General Conference · 2026
← Ch. 09 — Typography
Next chapter
11 — Photography →
SDARM Brand Book · Ch. 10 · Part II — Visual Identity · 2026