O que é o sistema de espaçamento Fibonacci?
Em vez de escolher margens e espaços a olho (12px aqui, 15px ali, 40px mais à frente), fixas uma única escala de onde sai cada distância. Usamos a sequência de Fibonacci: 8, 13, 21, 34, 55, 89 e 144 pixels. Cada valor é a soma dos dois anteriores, e a razão entre valores consecutivos aproxima-se da proporção áurea (1:1,618), a mesma que aparece nas nervuras das folhas, nas conchas e na arquitetura clássica.
Essa sequência é definida uma vez no código como tokens de design e reutilizada em todo o lado. Um título fica a 34px do seu cabeçalho, uma secção respira 89px, duas colunas dividem-se pela proporção áurea. Assim cada distância não é uma decisão avulsa, mas uma posição numa escala fixa.
Porque a proporção afeta a confiança e a visibilidade
Os visitantes raramente o nomeiam, mas sentem-no: uma página com um ritmo coerente parece cuidada e fiável, enquanto um espaçamento arbitrário parece inquieto e amador. Para uma empresa de serviços essa primeira impressão é conversão: a confiança traduz-se diretamente em pedidos.
Há também um ganho técnico. Uma única escala de espaçamento significa menos decisões de design, um desenvolvimento mais rápido e um layout mais previsível, o que ajuda a evitar conteúdo que se desloca (um sinal de Core Web Vitals). E para os motores de resposta com IA, o ofício demonstrável conta como sinal de autoridade: um site que fundamenta sistematicamente o seu próprio design transmite experiência.
Como o aplicamos e como o verificamos
No jongma.dev cada distância vem dos tokens Fibonacci e a secção hero divide o texto e a visualização de dados pela proporção áurea. Não é decoração acrescentada depois, mas o alicerce do layout, tal como no nosso método construímos o templo: primeiro o alicerce, depois a estrutura.
Para provar que encaixa, sobrepomos uma camada de proporção de linhas finas sobre a página real: linhas horizontais marcam o ritmo vertical, uma linha vertical a divisão de colunas áurea, e cada distância medida cai no valor mais próximo da sequência. Design que se pode medir, não apenas olhar.
· Maricio Jongma, Jongma Development