Um único botão vermelho por peça. Se toda ação da tela for um botão sólido vermelho, nenhuma comunica prioridade, e o orçamento de 20% de área vermelha estoura na primeira composição.

Fica sobre branco, dentro do campo claro do vão, com o amarelo em volta. O botão é o único vermelho da composição. Em telas abaixo de 768px os quatro blocos empilham: a busca nunca comprime a ponto de o alvo de toque cair abaixo de 44px.

Dividir um formulário de doze campos em três telas reduz o esforço percebido a cada momento, mesmo que o trabalho total seja idêntico. E o indicador comunica que existe um fim conhecido: a incerteza de "quanto ainda falta" é uma das maiores causas de abandono. Voltar uma etapa nunca apaga o que já foi preenchido.

Mostrar o valor total imediatamente acima do botão reduz a ansiedade de clicar em pagar sem uma confirmação final do que será cobrado. "Não cobramos" em verde transforma uma ausência de taxa em um benefício visível. É o mesmo fato operacional que a marca já usa na comunicação.

A utility bar não é sticky de propósito: rola para fora, e o navbar abaixo assume sozinho o offset de --asa-header-h quando gruda no topo, sem precisar somar duas alturas fixas. Acima de 1024px o menu horizontal aparece; abaixo, só o alternador, que abre o navdrawer.

• Frota
• Tarifas
• Clube Asa
• Dúvidas
• Minha reserva

Mesmo par overlay + painel do modal e do sheet; muda só a direção de entrada, lateral em vez de central ou de baixo.

.asa-layout-2col empilha abaixo de 1024px. Contagem zero desabilita o input do filtro; a opção não some, porque isso mudaria o layout a cada clique. O segundo card mostra [data-state="soldout"]: véu sobre a mídia, CTA disabled, nunca opacity solta em texto.

Filtros combináveis produzem conjunto vazio. Sempre com uma saída de ação, nunca só "nenhum resultado".

Três fatos operacionais em linha, mais a prova social ao vivo como linha opcional. Nunca contador animado.

A foto é de lugar real e de gente, nunca de carro em estúdio. O sistema entrega o slot, o corte de 8° e a legenda; não entrega a fotografia. A foto é conteúdo, não ilustração: onde ela entra, ícone e card saem. Enquanto a foto real não existe, o hachurado de asa-photo marca o lugar e a legenda diz o que falta, como briefing da produção fotográfica. Foto de banco de imagem só como comp de visualização em protótipo, marcada como tal. Nunca em produção, porque não é a Asa.

Rolagem nativa por overflow-x, com o próximo card à mostra (1,15 no celular, 2,2 no tablet, 3,25 no desktop): a borda cortada é a pista de que há mais. Setas nas pontas, sim: são botões, desativados no início e no fim por JS e escondidos sem ele (data-js). Bolinha de paginação, não: "nada gira" cobre indicador que pulsa. O deslize respeita o teto de 400ms.

A grade da home: dois tiles grandes e dois pequenos, nunca quatro iguais. O nome vive sobre a foto num chip branco; é o que faz a foto virar conteúdo em vez de ilustração. Quatro cards iguais com legenda embaixo é o padrão a evitar (ver 15 Composição).

O card de oferta tem ficha fixa: como usar, validade e onde vale, nas três linhas de __facts; sem validade confirmada, ele não é publicado. O selo fica sobre a foto (__badge, no canto que o corte não sobe), nunca acima do título. O código do cupom é asa-coupon: campo somente leitura e botão de copiar, que troca para "Código copiado" por 3s. Regras longas vão no __rules, um disclosure. Os valores do exemplo são ilustrativos. Um cartão para cada hub: /ofertas, /lojas e /blog. O artigo herda o mesmo corte de 8° do card de veículo; nenhum tipo de card do sistema usa uma moldura de foto diferente. A categoria vai na linha de dados, abaixo do título (acima ela seria sobretítulo), e o título é o link que cobre o card inteiro.

Um blog maduro passa de 100 páginas. Página atual em preenchimento ink: é posição, não ação.

h1/h2/h3/p/small soltos não fazem uma página de texto: asa-prose é o bloco que os agrupa com medida e espaçamento fixos.

Para texto longo (política, termos, regras). A tabela dentro de asa-prose tem fio entre linhas e nenhuma caixa; abaixo de 640px cada linha vira um bloco, com o nome da coluna tirado do data-label da célula. asa-toc é o índice de âncoras: gruda ao lado do texto no desktop e marca a seção em leitura com aria-current="true", o mesmo traço vermelho do navbar.

Dúvidas frequentes, com FAQPage na base de SEO. Reaproveita asa-disclosure item a item; o accordion só fecha a borda superior do grupo.

Componente próprio, sem depender de foto para existir. Sem foto da pessoa, não há avatar: o ícone de marca no lugar dela diria que a cliente é a Asa. Na home, os depoimentos vivem ao lado das placas de número, sem card em volta.

H2 em Registro 2 com uma palavra em vermelho (<em>), lide de 18/28 (.asa-lead) na medida de 640px e, à direita, o controle da faixa quando existir. Nada acima do título: o sobretítulo não existe no sistema.

O único lugar do Registro 1 e da marca d'água. O trecho que a Asa assina vai numa placa preta (.asa-hero__mark). A busca é o motor de Motor de busca dentro de um cartão branco; o botão fica dentro da primeira dobra em 375×812. Logo abaixo, não vem a trinca de ícones: vem a faixa-foto.

A emoção vem da foto, o fato vem do texto. Três fatos em Destaque 20/28 e uma linha de corpo denso, numa régua branca que sobe sobre a foto. Sem ícone: três frases não precisam de âncora de leitura. Proporção da foto: 4:3 no celular, 16:9 no tablet, 21:9 no desktop.

É a faixa "como funciona": lista de definições em duas colunas, sem numeração, porque a ordem dos quatro itens não informa nada. O aviso da caução é um cartão branco com borda e a palavra de alerta em --asa-warn; não é um alerta de sistema. Fundo da faixa: cinza mist, para alternar com o branco anterior.

O preto aparece uma vez por página, no momento da prova. As praças são asa-card-place: foto grande com o nome num chip preto, texto e link em amarelo. Abaixo da régua, as placas 4,7 e 9,4 em asa-numberplate--bare e dois depoimentos em asa-testimonial--bare, sem card e sem avatar. Os números aparecem inteiros, nunca em contador.

Pergunta em Destaque 20/28, resposta em corpo, divisor de 1,5px entre elas, sem card. É o asa-disclosure em <details> nativo: abre e fecha sem JS e o ícone troca de glifo, nunca gira. À esquerda, no desktop, o H2 e o caminho para o atendimento.

Faixa curta (.asa-section--short): H2 em Registro 2, uma frase e dois botões. Sem marca d'água, sem H1, sem repetir a frase do hero. O amarelo abre e fecha a página e não aparece no meio dela.