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, não porque alguém alinhou 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 é conteúdo comercial. Um container fluido deixaria uma linha de texto esticar até 3000px num monitor grande. Grid fluido resolve dashboard; aqui ele produziria linhas ilegíveis.
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.
Espaçamento usa incremento fixo, diferente da tipografia, que usa salto proporcional. São dois tipos de escala resolvendo dois problemas: um gap de 8px entre ícones e um respiro de 72 a 120px entre faixas precisam da mesma previsibilidade de passo.
--asa-space-1--asa-space-2--asa-space-3--asa-space-4--asa-space-5--asa-space-6--asa-space-7--asa-space-8--asa-space-9--asa-space-10--asa-space-11Os tokens são nomeados por índice: o índice é estável, e o valor por trás dele pode evoluir sem renomear nada no produto inteiro.
O vão vertical entre duas faixas é --asa-section-pad-y, clamp(72px, 8vw, 120px), e não um passo da escala de espaço. 90px (--asa-space-11) é a margem lateral máxima, nunca o respiro entre seções.
O mínimo é 72px: no celular, menos que isso não separa duas faixas de fundo diferente, a troca de cor fica fazendo o trabalho sozinha e a página parece emendada. Os quatro valores que não são múltiplos de 8 (12, 20, 56 e 90) fazem parte da escala porque circulam nas peças aprovadas; o 90 tem um papel só, a margem lateral.
--asa-section-pad-yclamp(72px, 8vw, 120px)--asa-section-pad-xclamp(20px, 6vw, 90px)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. O respiro é ferramenta, não sobra.
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.
A grade organiza dentro da faixa; o ritmo organiza entre elas. Cada seção escolhe uma topologia (duas colunas, prateleira, lista, grade de cards) e fica com ela: misturar duas na mesma faixa é o que faz a página parecer montada de pedaços. O detalhe está em 15 · Composição.
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).