v1.2
Design System/Grid e Composição

GRID E COMPOSICAO.

Cada formato tem zonas definidas. Ignorar as zonas de segurança garante que elementos importantes sumam sob a interface das plataformas. Grid não é sugestão — é infraestrutura.

1:1
Post Quadrado
1080 × 1080 px
Margem de segurança
60px em todos os lados — zona onde texto e elementos críticos devem ficar
Zona de título
Superior ou inferior — Bebas Neue, nunca centralizado sem intenção
Zona de dado/métrica
Centro visual — elemento principal, máximo 1 por post
Zona de rodapé
Últimos 80px — logo, username, CTA discreto
Uma mensagem central por post
Grid invisível: 12 colunas, gutter 16px
Noise overlay obrigatório (4% opacidade)
Exportar em PNG — nunca JPEG para posts com texto
9:16
Reels & Stories
1080 × 1920 px
Zona UI superior (250px)
Reservada para interface do Instagram — foto de perfil, nome, data. Nenhum elemento importante aqui.
Zona segura superior
250px–400px — conteúdo pode começar aqui com segurança
Zona central (400–1520px)
Área principal — 1120px de altura disponível para conteúdo
Zona UI inferior (1520px+)
Reservada para botões de interação (curtir, comentar, share, follow). Nada importante abaixo de 1520px.
Safe zone: 120px lateral, 250px topo, 400px base
Texto principal entre 400px e 1400px verticalmente
Logo no terço superior ou inferior — nunca nas zonas de UI
Exportar em MP4 (vídeo) ou PNG (foto estática)
Fluido
Web — Desktop
max-width: 1200px
Container máximo
1200px — conteúdo nunca ultrapassa essa largura
Padding lateral
40px — em todos os containers de conteúdo
Gap entre cards
2px — gap fixo, identidade visual, nunca mais
Colunas de conteúdo
Grid de 12 colunas — texto corre em 8 (2/3), sidebar em 3 (1/4)
Gap entre cards: sempre 2px — não 8px, não 16px
Texto corrido: max-width 680px para legibilidade
Padding de seção: 64–96px vertical (--space-3xl/4xl)
Mobile: padding lateral cai para 20px, colunas para 1
MENOS ELEMENTOS = MAIS IMPACTO

Espaco negativo nao e vazio — e pressao visual acumulada. Cada elemento que entra na composicao compete por atencao. A disciplina de remover e mais dificil que a de adicionar. Post com 1 elemento e mais forte que post com 5.

Uma mensagem por composicao. Se voce precisa falar 3 coisas, faca 3 posts. Nao 1 post com 3 mensagens.

Nao preencha espacos vazios. A tendencia de adicionar elementos "para nao desperdicar espaco" e o maior erro de composicao.

Texto respira. Paragrafo com line-height 1.65–1.75. Heading com margin-bottom 24px no minimo.

Nao comprima margens. Reduzir padding para caber mais conteudo e sinal de que o conteudo precisa ser cortado.

Posts — dimensoes e exportacao
/* Instagram Feed */
Post quadrado:      1080 × 1080px — ratio 1:1
Post retrato:       1080 × 1350px — ratio 4:5
Post paisagem:      1080 × 566px  — ratio 1.91:1

/* Reels e Stories */
Vertical:           1080 × 1920px — ratio 9:16
Safe zone lateral:  120px cada lado
Safe zone topo:     250px (UI do app)
Safe zone base:     400px (botoes de interacao)

/* Exportacao */
Fotos/posts:        PNG, 72dpi, sRGB
Impressao/PDF:      PNG ou PDF, 300dpi, CMYK
Web — breakpoints e grid
/* Breakpoints */
Mobile:   < 768px  — 1 coluna, padding 20px
Tablet:   768–1024px — 2 colunas, padding 32px
Desktop:  > 1024px — 12 colunas, padding 40px

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Grid de cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;   /* SEMPRE 2px — identidade visual */
}

/* Texto corrido */
.prose {
  max-width: 680px;
}