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.
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
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
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.
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
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.