A grade não aparece na tela, mas é ela que faz um layout parecer organizado sem que a pessoa saiba dizer por quê. Elementos de linhas diferentes acabam se alinhando verticalmente porque todos estão ancorados no mesmo sistema de colunas, sem que ninguém precise alinhar par a par.
Confundir goteira com margem é o erro mais comum. O sintoma: conteúdo grudado na borda da tela mas com bastante espaço entre os elementos internos, ou o contrário.
O site da Asa é uma vitrine comercial, e vitrine se lê com conforto. Se o texto esticasse até a largura total da tela, uma linha ficaria comprida demais para ler num monitor grande. Por isso o conteúdo tem um teto de largura, mesmo em telas maiores.
O que precisa sobreviver ao colapso é a hierarquia. Três cards lado a lado viram cards empilhados sem que se perca a noção do que é mais importante na tela.
Grande parte do tráfego chega frio (busca, anúncio, link compartilhado), sem o compromisso prévio que alguém demonstra ao instalar um app. Isso dá à primeira dobra uma dupla responsabilidade: dizer do que se trata e apresentar a próxima ação, antes de qualquer rolagem.
A promessa em display, o formulário de busca completo e o único botão vermelho da tela. Cada rolagem extra antes disso é uma chance a mais de a pessoa desistir.
As placas de 4,7 e 9,4, os cards de veículo e o texto de balcão vêm depois. Eles sustentam a decisão, mas não são o que faz a pessoa ficar nos primeiros segundos.
Splash é padrão de app, onde a pessoa já demonstrou intenção ao instalar. Na web, bloquear a página atrás de uma tela de marca é lido como lentidão, e ainda derruba a métrica de performance que afeta busca.
Espaçamento usa incremento fixo, diferente da tipografia, que usa salto proporcional. São dois tipos de escala resolvendo dois problemas: um vão de 8px entre ícones e um respiro de 72 a 120px entre faixas precisam da mesma previsibilidade de passo.
Cada passo tem uma função fixa dentro da peça, do menor afastamento entre ícones à margem lateral máxima. Por isso o espaçamento nunca é escolhido no improviso.
Quatro valores da escala não são múltiplos de 8: 12, 20, 56 e 90. São exceções deliberadas.
Cada um tem função fixa: 12px é o espaço interno do card de veículo, 90px é a margem lateral máxima da seção. Arredondar esses valores mudaria composições que funcionam, para ganhar uma precisão que ninguém percebe na peça final.
Cortar espaço em branco para caber mais conteúdo é um pedido comum de quem não trabalha com design, e normalmente reduz a hierarquia percebida e a sensação de qualidade. No celular, menos de 72px não separa duas faixas de fundo diferente: a página parece emendada. O respiro é ferramenta de hierarquia.
A mesma lógica de colunas vale dentro do card, do formulário e da busca, e não só no layout da página.
É essa disciplina que faz o rodapé de um card de veículo alinhar com o de outro card na linha de baixo, sem que ninguém tenha planejado esse alinhamento elemento por elemento.
Modelos em SVG com a linha e campos de 8° nas proporções oficiais de mídia: Feed Quadrado (1:1), Feed Retrato (4:5), Stories/Reels (9:16) e Display (16:9).