FUNDAMENTOS · 03 · ESPAÇO E GRIDUma unidade base de 4px, onze degraus, doze colunas com calha de 24px e um container de 1240px. Nada de valor solto: se um espaço não está na escala, ele está errado.
03.1 · ESCALA DE 4PXAs barras abaixo estão desenhadas no valor real do token, sobre um fundo de ticks de 8px. Dá para contar o degrau com o olho, que é exatamente o ponto.
// a escala pula depois de 16px porque diferença de 4px em espaço grande ninguém enxerga. Onze degraus cobrem o site todo.
03.2 · GRID DE 12 COLUNASDoze colunas no desktop, quatro no mobile, calha constante de 24px. A calha aparece hachurada abaixo de cada coluna: ela é espaço de respiro, nunca área de conteúdo.
Cronograma, curva S e caminho crítico amarrados ao orçamento aprovado. Sete colunas para o conteúdo principal da página.
Ficha técnica, lista de entregáveis, formulário de contato. Cinco mais sete fecham as doze sem sobra de coluna.
Quatro colunas, três cards por linha.
Quatro colunas, três cards por linha.
Quatro colunas, três cards por linha.
clientes atendidos
projetos entregues
em custos orçados
anos de mercado
// no mobile o grid cai para quatro colunas e todo span vira largura cheia. Nenhum bloco atravessa a calha em nenhuma largura.
03.3 · CONTAINERO container trava em 1240px e a calha lateral cresce com a tela, de 20px no celular até 64px no desktop largo. O fundo em blueprint mostra a malha de 24px que sustenta o conteúdo.
Esta caixa está dentro do container real do design system. Redimensione a janela e observe: a caixa para de crescer em 1240px, e a calha lateral continua respirando até o limite de 64px.
// medição ao vivo, lida do CSS computado. Engenharia à vista vale para o próprio design system.
03.4 · LIMITE DE LEITURASessenta e cinco caracteres por linha é o ponto onde o olho ainda acha o começo da linha seguinte sem esforço. Acima disso, a leitura trava.
O Budget Analytics organiza a obra em uma base única: a EAP define a estrutura, cada item recebe composição e insumo, e a medição mensal escreve o realizado sobre o previsto. Com isso, contrato, compra e cronograma passam a falar a mesma língua, e o desvio deixa de aparecer três meses depois, na conciliação, para aparecer na semana em que acontece.
O Budget Analytics organiza a obra em uma base única: a EAP define a estrutura, cada item recebe composição e insumo, e a medição mensal escreve o realizado sobre o previsto. Com isso, contrato, compra e cronograma passam a falar a mesma língua, e o desvio deixa de aparecer três meses depois, na conciliação, para aparecer na semana em que acontece.
// mesma frase sem limite: a linha estica até 1240px e o olho perde o retorno de linha.
// o limite vale para prosa. Tabela de orçamento, curva S e cronograma usam a largura cheia do container, porque ali a linha longa é informação.
03.5 · RESPIRO DE SEÇÃOA zona hachurada é o padding-block da seção, no valor real desta janela. O clamp entrega 64px no celular e 128px no desktop, com a faixa do meio proporcional à largura.
64px · abaixo de 640px de janela
valor desta janela
128px · acima de 1280px de janela
// var(--section-pad) = clamp(4rem, 10vw, 8rem). O card do meio recalcula sozinho quando a janela muda.