Programa Visual — Grid

Camada 5 do PVD (parcial) · Marca: BAZEá (slug: bazea)

Terceiro subconjunto fechado da Camada 5, depois de 05-programa-visual-cor.md e 05-programa-visual-tipografia.md. Cobre o sistema de grid — a estrutura de colunas, módulos, gutters e proporção de margem que organiza tudo que a marca produz. Fechado por Alan em 2026-08-16, a partir do ensaio entregas/bazea-o04.html (o mesmo arquivo da tipografia, atualizado no lugar — cor e tipografia continuam retrospectivamente rastreáveis a bazea-o03.html/bazea-o04.html como o processo que as fechou).

Depende de: Camada 5 — cor e tipografia, ambas já fechadas. Alimenta: Camada 6 (Precisão Digital), toda peça gráfica futura, e qualquer aplicação física da marca.

---

1. Contexto

Alan pediu explicitamente que o grid fosse baseado em Grid Systems in Graphic Design, de Josef Müller-Brockmann (Niggli, 1981) — o texto fundador do método suíço de grid que ainda rege a maior parte do design editorial e de identidade corporativa. Esse é o primeiro item da Camada 5 fechado a partir de fonte externa citável, e não só de evidência medida do território — o método muda em relação à cor e à tipografia: em vez de amostrar SBC ou comparar candidatas, aqui o trabalho é traduzir um sistema de 1981, pensado para papel impresso em cícero e ponto, para uma marca que vive primeiro em tela.

Duas fontes secundárias entraram para ancorar a tradução: o Design System do Governo Federal (gov.br/ds), como precedente real de grid responsivo em português, e uma medição própria em PT-BR, porque a regra central do livro (largura de coluna por contagem de palavras) não tinha ainda sido verificada com o corpo de texto real da doutrina.

2. As três fontes

2.1 Müller-Brockmann — filosofia e método

A filosofia (p.10) não é estética, é ethos profissional. O uso do grid como sistema de ordenação é "Ausdruck einer bestimmten geistigen Haltung" — expressão de uma postura mental específica: o trabalho do designer torna-se construtivo e orientado ao futuro. É "Wille zur Objektivität, anstelle der Subjektivität" — vontade de objetividade no lugar de subjetividade. Grid não é decisão de gosto; é disciplina que se impõe ao designer, não o contrário.

O porquê prático (p.13): "Ordnung in der Gestaltung unterstützt die Glaubwürdigkeit der Information und schafft Vertrauen" — ordem na composição sustenta a credibilidade da informação e cria confiança. Esse é o mesmo argumento da Camada 1 (substância antes de aparência, recusa à charlatanice) vindo de uma disciplina inteiramente diferente — mais uma convergência independente, como a Camada 1 tem exigido de cor e tipografia.

O mecanismo de construção (p.51-58): a altura de uma coluna é dividida em N campos de tamanho igual; o espaço entre eles é definido como o espaço ocupado por uma linha vazia — ou seja, o módulo vertical do grid nasce direto da entrelinha do corpo de texto, não de um número arbitrário. Isso amarra o grid à tipografia já fechada em vez de tratá-los como sistemas independentes.

A regra de largura de coluna (p.30) é por palavra, não por caractere: "According to a well-known empirical rule there should be 7 words per line for a text of any length. If we want to have 7–10 words per line, the length of the line can readily be calculated." Isso importa porque a convenção web comum (medida em ch, caractere médio) não é a mesma métrica — ver seção 4.

Proporção de margem, nunca margem igual (p.39-41): o livro rejeita explicitamente margens do mesmo tamanho — "margins of the same size can never result in an interesting page design; they always create an impression of indecision". O exemplo de margem "bem proporcionada" (fig. 4) usa a razão 1 : 1 : 1,5 : 2 entre margem interna, superior, externa e inferior.

A combinatória de 12 (p.52): uma página pode ser desenhada com um número de colunas e depois subdividida ou recombinada — o autor descreve explicitamente dividir uma composição em 3 colunas que, por sua vez, se tornam 6; ou combinar 4 com 8 no mesmo layout. A lógica de uma base que se reagrupa em múltiplos (1, 2, 3, 4, 6, 12) é o ancestral direto do grid de 12 colunas que a web usa hoje.

Identidade corporativa (p.136) — a regra que impede fabricar sem base real: "Before a grid can be devised for a corporate image, all the firm's documents to which the design is going to apply must be made available." O grid de uma marca não nasce de uma folha em branco — nasce do inventário real do que a marca precisa produzir. Essa frase é a que rege a seção 5 deste documento.

Design tridimensional (p.141) — o grid de uma sala ou vitrine depende de quatro entradas físicas, nessa ordem: (a) o tamanho do espaço, (b) a quantidade de informação em texto e imagem a ser exibida, (c) o tamanho e a quantidade dos produtos a apresentar, (d) o mobiliário necessário. Sem essas quatro respostas, não existe grid ambiental para calcular — só principio de método.

Fonte: Josef Müller-Brockmann, Grid Systems in Graphic Design (Niggli, 1981), edição bilíngue inglês/alemão, páginas citadas conforme numeração impressa do livro.

2.2 gov.br/ds — precedente real de grid responsivo

O Design System do Governo Federal (gov.br/ds/fundamentos-visuais/grid) é o precedente mais próximo, em português, de tradução do método de grid para tela responsiva multi-dispositivo. Ele define:

E o princípio que sustenta os valores ("Eficiência e Clareza"): gutter e margem devem ser múltiplos de 8, porque a maioria das resoluções de tela reais divide por 8 — preservando proporção entre dispositivos sem recalcular tudo a cada faixa.

Fonte: gov.br/ds, seções "Sistema de Grid" e "Espaçamento", consultadas em 2026-08-16.

2.3 Medição própria — largura de coluna em PT-BR

A regra do livro (7–10 palavras por linha) nunca tinha sido verificada com texto real da marca. Método: quatro parágrafos genuínos da doutrina (Camada 1, não lorem ipsum), renderizados em Work Sans 16px/1,6 — a tipografia de corpo já fechada — em oito larguras candidatas, contando palavras por linha via Range.getClientRects() no navegador.

A janela que respeita a regra do livro fica entre ~400 e ~460px. Para comparação: a convenção que os ensaios usavam até aqui (60ch em Work Sans 16px) mede 597px — cerca de 12,3 palavras por linha, 25% acima do teto do livro. As nove larguras diferentes em ch espalhadas pelo bazea-o04.html antes desta revisão (60, 62, 56, 54, 50, 42, 36, 34, 32) eram todas escolhidas no olho, nenhuma derivada de regra — exatamente o "impression of indecision" que Müller-Brockmann descreve para margens desiguais sem proporção.

3. A tensão resolvida — duas escalas, dois trabalhos

O módulo vertical do livro (uma linha vazia = a entrelinha do corpo) dá 25,6px (16px × 1,6, já fechado pela tipografia). Isso não é múltiplo de 8 — entra em conflito direto com a escala do gov.br.

A resolução: não são o mesmo problema.

• Módulo tipográfico (25,6px) rege o ritmo vertical de texto corrido — onde o livro é a autoridade, porque nasce de dentro do texto para fora.
• Escala de espaçamento (base 8px) rege gutter, padding e margin de componentes de interface — onde o gov.br é a autoridade, porque nasce da tela física para dentro.

Mesma disciplina (nada escolhido no olho), duas escalas que raramente precisam coincidir no mesmo pixel.

4. Sistema aprovado

4.1 Breakpoints e colunas — adotados do gov.br, com uma margem mobile ajustada

Divergência registrada e justificada: o gov.br usa 8px de margem mínima em mobile — adequado para UI de serviço densa. Um site editorial de leitura longa não deve colar conteúdo na borda; usamos 16px (que já é o próprio gutter do gov.br nessa faixa, então continua dentro da escala de 8, só troca de papel).

Combinatória de 12: subdivide limpo em 1, 2, 3, 4, 6 e 12 colunas — usar essas subdivisões para variação de layout, não frações arbitrárias.

4.2 Medida de leitura — substitui as nove larguras em ch

460px (≈ 29rem) é a largura de parágrafo de corpo, ponto final. Substitui toda largura em ch escolhida no olho nos ensaios anteriores. Dá 9,6 palavras por linha em Work Sans 16px — dentro da janela de 7–10 do livro, próximo do teto por decisão consciente (mais perto de 10 do que de 7, porque a doutrina tem parágrafos longos e um teto muito conservador fragmentaria demais o texto corrido).

4.3 Módulo vertical — ritmo de texto

25,6px (a entrelinha do corpo, 16px × 1,6). Espaçamento vertical entre blocos de texto corrido sobe em múltiplos de meia-linha (12,8px) quando precisar de ajuste fino, e em múltiplos inteiros do módulo (25,6px, 51,2px...) para separação entre parágrafos e seções de leitura.

4.4 Escala de espaçamento — UI e componentes

Base 8, geométrica moderada, adotada do gov.br: 8 · 16 · 24 · 32 · 40 · 48 · 64 · 80 (px). Rege gutter de grid, padding de componente, gap entre elementos de interface — tudo que não é ritmo de texto corrido.

4.5 Proporção de margem — quando a página tem margem própria (não só container centralizado)

1 : 1 : 1,5 : 2 entre margem interna, superior, externa e inferior (Müller-Brockmann, fig. 4, p.41). Nunca margens iguais nos quatro lados quando a peça permitir hierarquia — cartão, capa, página impressa, tela com respiro próprio.

5. Extensão multi-mídia — o princípio que atravessa tudo

Alan pediu que o grid funcione "desde um app, passando por aplicações digitais, gráficas, totalmente responsivo até uma fachada ou brinde de boas-vindas". A resposta do método não é um número universal — é a regra de identidade corporativa da seção 2.1: o grid nasce do inventário real de peças, não de uma folha em branco. O que atravessa todo meio é a proporção, não o pixel:

• combinar/subdividir uma base de 12;
• módulo vertical amarrado à tipografia do meio (linha de texto em tela, linha de texto impressa, altura de letra em fachada);
• margem em proporção hierárquica, nunca igual nos quatro lados;
• nenhum grid fechado sem que o "porquê" desse valor específico esteja registrado.

5.1 Digital — app, ensaios, site (fechado, seção 4)

Números concretos acima. Aplica-se hoje a entregas/bazea-o04.html e a qualquer interface da Camada 6.

5.2 Gráfica impressa — mesma lógica, aguardando peça real

A base de 12 colunas e a proporção de margem 1:1:1,5:2 se aplicam sem alteração — é literalmente o meio original do livro. O que muda é a unidade (ponto/cícero em vez de px) e o módulo vertical (entrelinha do corpo definida para o meio impresso, que pode não ser 16px/1,6 se a tipografia de página impressa tiver corpo diferente do de tela). Não fechado com números finais porque, seguindo a própria regra do livro (seção 2.1, identidade corporativa), fechar formato final exige uma peça real — cartão, papel timbrado, proposta — que ainda não existe como projeto.

5.3 Ambiental — fachada, vitrine, sinalização

Método de quatro entradas do livro (seção 2.1, design tridimensional): tamanho do espaço, volume de informação, tamanho/quantidade dos elementos, mobiliário necessário. Nenhuma dessas quatro respostas existe ainda — não há fachada real para medir. Registrar aqui o método impede duas coisas erradas: inventar uma medida em metros para uma parede que não existe, ou tratar esse item como "sem grid" quando na verdade só falta o brief físico que o alimenta.

5.4 Brinde / objeto físico

Mesmo raciocínio de 5.3: a proporção (12, hierarquia de margem, módulo ligado ao elemento tipográfico do objeto) se aplica a qualquer objeto; a medida final depende do objeto real — copo, caderno, embalagem — que ainda não foi definido.

6. Recusado por doutrina, não por gosto

• Grid de 8 colunas como base universal — é o que muitos frameworks CSS populares usam por padrão, mas o próprio gov.br o reserva para tablet, não para desktop. 12 divide mais limpo (1/2/3/4/6/12) e é a base que o próprio Müller-Brockmann usa no exemplo de combinatória (p.52).
• Módulo único para texto e para UI — tentador por simplicidade, mas amarra a escala de espaçamento de componentes (que precisa de múltiplos de 8 por causa de resolução de tela) à entrelinha do corpo (que não é múltiplo de 8). Ver seção 3.
• Margens iguais nos quatro lados — recusado explicitamente pelo livro, não por preferência da BAZEá.
• Fabricar medidas de fachada ou brinde sem projeto real — contradiria a própria regra de identidade corporativa do livro (seção 2.1) que este documento está seguindo. Método registrado, número não.

7. Em aberto

1. Retrofit de espaçamento legado — bazea-o04.html ainda tem valores de padding/gap fora da escala de 8px em seções herdadas de bazea-o02.html/bazea-o03.html (as camadas 1–4 do dossiê). A medida de leitura (460px) já foi aplicada globalmente; o retrofit completo de espaçamento decorativo é trabalho futuro, não bloqueia o fechamento do grid.
2. Formato de peça gráfica impressa — cartão de visita, papel timbrado ou proposta real, para fixar o módulo vertical do meio impresso (seção 5.2).
3. Brief de fachada/sinalização — tamanho do espaço, mobiliário, volume de informação (seção 5.3).
4. Brief de brinde/objeto físico — qual objeto, para fixar medida final (seção 5.4).
5. Componentes, motion, fotografia, iconografia, logotipo — não iniciados (herdado de 05-programa-visual-tipografia.md).

---

Rastreabilidade → Elemento (PROGRAMA), seed