Capítulo · 10
Grid & Composição
Estrutura, margens e proporções nas peças da marca.
Parte II — Identidade Visual · Capítulo 10 · SDARM Brand Book · 2026
Grid & Composição
O sistema de grid da SDARM para todos os formatos — digital, impresso e sinalização. Com visualizador interativo e demos de composição real.
- Parte II · Cap. 10
- Visualizador interativo
- 8 seções
10.1 — Princípios de composição
O que o grid resolve —
e por que importa
Grid não é gaiola. É o sistema que permite que materiais produzidos por pessoas diferentes em países diferentes pareçam criados pela mesma equipe.
Consistência O mesmo grid aplicado em São Paulo e em Lagos produz materiais visualmente coerentes — sem que o designer de um país precise ver o trabalho do outro.
Velocidade Com o grid definido, o designer local não começa do zero. Ele herda uma estrutura que já resolve proporções, margens e hierarquia — e pode focar no conteúdo.
Hierarquia O grid define onde o olho entra na peça, onde vai e onde para. Um layout sem grid força o olho a decidir sozinho — e o olho sempre escolha o caminho errado.
O sistema de grid da SDARM é baseado em 12 colunas — o padrão mais flexível da história do design gráfico. Ele funciona em layouts de 1 coluna (sinalização, banner), 2 colunas (editorial, impresso), 3 colunas (redes sociais, cards) e 4 colunas (grade de produtos, tabelas).
Para materiais digitais, o grid se adapta responsivamente. Para materiais impressos, as proporções são fixas. Para sinalização, usa-se um grid simplificado de 4 zonas.
Seção 10.1 · Princípios de composição
"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 — Grid de 12 colunas
Sistema base e variações
por formato
Selecione o formato e o número de colunas para visualizar o grid em diferentes contextos de uso. As colunas em azul mostram a área ativa; os canais cinzas, o espaçamento entre colunas.
Formato
Post 1:1 · 1080×1080px
Grid para digital Posts e stories 4 colunas com margem de 40px (1080px). Gutter de 16px. Área segura interior com padding adicional de 24px. Reels e vídeo 3 zonas horizontais: topo (20%), conteúdo central (60%), rodapé com logo (20%). Sem grade de colunas vertical. Site e web 12 colunas com max-width 1120px, gutter 24px, margem lateral 56px em desktop, 28px em mobile.
Grid para impresso A4 e A5 Margem superior: 20mm · inferior: 22mm · lateral: 18mm. Sangria de 3mm. Coluna de texto máxima: 120mm (A4). Cartazes A3/A2 6 colunas. Margem 24mm. Gutter 8mm. Sangria 5mm. Título ocupa no mínimo 3 colunas. Sinalização 4 zonas: topo (logo), área principal (ícone + texto), suporte inferior, barra de cor. Margens mínimas de 15% da dimensão menor.
10.3 — Formatos oficiais
Proporções para digital
e impresso
Cada formato tem proporção, resolução e margens específicas. Usar as proporções corretas desde o início evita cortes, recadramentos e perda de qualidade na entrega final.
Post Square
1 : 1 Instagram · Facebook
Post Portrait
4 : 5 Feed principal
Stories / Reels
9 : 16
Landscape
16 : 9 Vídeo · Apresentação
A4
Impresso
Proporção
1 : 1
Resolução
1080×1080px
Contexto
Post feed · Instagram · Facebook
Posts institucionais, devocionais, fotos de culto
Seção 10.3 · Formatos oficiais
"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 — Escala de espaçamento
Tokens de espaço —
do 4px ao 128px
Todos os espaços no sistema são múltiplos de 4. Os tokens abaixo são os valores oficiais — usá-los garante que qualquer material se alinhe com qualquer outro sem ajuste manual.
4px Entre ícone e label xs
8px Espaço interno de botões sm
16px Gutter, padding de card md
24px Entre elementos de bloco lg
32px Margem de post social xl
48px Separação de seções 2xl
64px Respiro de seção editorial 3xl
96px Padding de seção de página 4xl
128px Separação máxima entre blocos 5xl
10.5 — Zona de proteção do logo
Área mínima e
posicionamento
O logo precisa de respiro. A zona de proteção é a área mínima obrigatória ao redor do logotipo — nenhum texto, imagem ou elemento visual pode entrar nessa zona.
Zona de proteção = X ao redor
Definição de X X = altura do símbolo. A zona de proteção ao redor do logo é igual à altura do símbolo em todas as direções. Em posts sociais (1080px), a zona mínima é de 40px ao redor do logo. Em A4, a zona mínima é de 8mm ao redor do logo.
Violações da zona Texto ou slogan tocando o logo — mesmo que seja o slogan oficial da Igreja. Elemento decorativo (linha, forma, foto) invadindo a zona de proteção. Logo posicionado na borda da peça sem margem mínima de uma zona X.
Posicionamento aprovado do logo
Superior esq.
Superior dir.
Inferior esq.
Centro — evitar
O logo no centro cria competição com o conteúdo principal. Use os cantos — preferencialmente superior esquerdo.
10.6 — Composição de posts
Estrutura de layouts
para redes sociais
Três estruturas de composição cobrindo os usos mais frequentes — cada uma com grid, zonas e lógica de hierarquia definidos.
O sábado nos reúne.
Igreja Adventista do Sétimo Dia Movimento de Reforma 1:1 · 1080×1080px Grid 4 col · Margem 40px · Logo: canto sup. esq. · Título: zona inferior · Barra dourada base opcional
- Post institucional · 1:1
Comunhão de sábado.
Fotografia + texto sobre gradiente 4:5 · 1080×1350px 3 col · Foto full-bleed · Gradiente escuro na base · Logo no topo · Título sobre gradiente
- Post fotográfico · 4:5
Ninguém caminha sozinho.
Zona segura entre 20% e 80% 9:16 · 1080×1920px Zona segura 20%–80% · Logo centralizado no topo · Conteúdo na faixa central · CTA base
- Story · 9:16
Seção 10.6 · Composição de posts
"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 — Margens e sangria
Regras para
materiais impressos
Sangria, área segura e margens internas são obrigatórios em todos os arquivos enviados para gráfica. Um arquivo sem sangria gera bordas brancas indesejadas no produto final.
Área de sangria — 3mm além do corte
Área segura — conteúdo nesta zona
A4 · 210×297mm Sangria3mm (todos os lados) Margem superior20mm Margem inferior22mm Margem lateral18mm Gutter de coluna6mm
Cartaz A3 · 297×420mm Sangria5mm (todos os lados) Margem superior24mm Margem inferior28mm Margem lateral24mm Gutter de coluna8mm
10.8 — Regras de composição
O que é permitido
e o que é proibido
Grid é disciplina visual. Desviar do grid não é criatividade — é descuido. As regras abaixo protegem a coerência da marca em qualquer suporte.
Permitido Usar os formatos e proporções oficiais (1:1, 4:5, 9:16, 16:9, A4). Aplicar a escala de espaçamento com tokens múltiplos de 4. Posicionar o logo em cantos — com zona de proteção respeitada. Usar as 3 estruturas de composição aprovadas como base para novos materiais. Ampliar o grid (ex: de 4 para 6 colunas) quando o conteúdo exige — mantendo os valores base.
Proibido Criar layouts sem grid — mesmo que "pareça bem". Redimensionar uma peça de um formato para outro sem redesenhar (ex: esticar um post 1:1 para 9:16). Enviar arquivos para gráfica sem sangria — resultado são bordas brancas no produto final. Posicionar conteúdo essencial fora da zona segura em stories e reels. Usar espaços arbitrários — qualquer valor que não seja múltiplo de 4.