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 barra fina do topo rola para fora da tela conforme a página desce; só o menu principal fica fixo. Em telas largas o menu horizontal aparece por completo; em telas de celular, vira um ícone que abre o menu lateral.

• 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.

Em telas menores, o filtro e a lista de resultados empilham em vez de ficar lado a lado. Uma categoria com contagem zero fica desabilitada em vez de desaparecer: assim o layout não muda a cada clique. O segundo card mostra um carro esgotado: véu sobre a foto e botão de reserva desabilitado.

Quando os filtros combinados não encontram nenhum carro, a tela sempre oferece uma saída de ação, nunca só um aviso de "nenhum resultado".

A linha de prova social ao vivo (quantidade de reservas recentes) é opcional e sempre estática, nunca um contador animado.

A foto da Asa é de lugar real e gente de verdade, nunca de carro em estúdio. O sistema entrega o espaço, o corte de 8° e a legenda; enquanto a foto real não existir, o hachurado é o correto a mostrar.

Rolagem horizontal nativa, com o próximo card à mostra (1,15 card 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, e ficam desativados no início e no fim da fila. 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 sempre mostra como usar, a validade e onde vale; oferta sem validade confirmada não é publicada. O selo fica sobre a foto, nunca acima do título, e o código do cupom vem num campo com o botão de copiar. As regras ficam recolhidas em "Regras". Os valores do exemplo são ilustrativos. Cartões para as páginas de ofertas, lojas e blog. O card de 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 vem abaixo do título, junto da data, e o card inteiro é clicável.

Útil para blog e listagens longas. A página atual usa preenchimento escuro sólido: é uma posição, não um botão de ação.

O bloco de texto corrido usado em artigos e páginas institucionais, com largura de linha e espaçamento pensados para leitura confortável.

Para textos longos, como política, termos e regras. A tabela não tem caixa em volta, só um fio entre as linhas, e no celular cada linha vira um bloco com o nome da coluna na frente. O índice fica ao lado do texto no computador e marca a seção que está sendo lida.

Usa o mesmo componente de pergunta/resposta que aparece em outras partes do sistema, agrupado numa única lista de perguntas frequentes.

Um depoimento real de cliente, com nome e origem. O componente funciona mesmo sem uma foto do cliente, com um avatar simples no lugar.

H2 em Registro 2 com uma palavra em vermelho, lide de 18/28 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. A busca é o motor de Motor de busca dentro de um cartão branco; o botão fica dentro da primeira dobra no celular. 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 laranja escuro. 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 cartões de lugar: foto grande com o nome num chip preto, texto e link em amarelo. Abaixo da régua, as placas 4,7 e 9,4 e dois depoimentos, 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 mesmo acordeão das peças que aparecem por cima da tela: abre e fecha, e o ícone troca de glifo, nunca gira. À esquerda, no desktop, o H2 e o caminho para o atendimento.

Faixa curta: 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.