As prioridades desta página vêm da comparação com 24 sites do setor (dez locadoras globais, cinco agências de viagem online, três de mobilidade e as quatro concorrentes que disputam o mesmo cliente em Recife e Fortaleza). Ela diz o que entra na biblioteca para o portal ser construível, e em que ordem.
Modal, popover, dropdown, sheet, scrim e escala de z-index.
É uma camada inteira da arquitetura, pré-requisito de seis peças: autocomplete, calendário, menu, minha reserva, filtros no mobile e consentimento. Os 7 primitivos estão documentados em 06 · Componentes.
Barra utilitária, navbar e gaveta mobile. asa-doc-nav é o chrome desta documentação.
asa-docs.css não vai para produção. asa-utilitybar + asa-navbar + asa-navdrawer são o menu real, em 06 · Componentes.
E ela é generosa: padding de seção até 120px, alvo de 44px, respiro largo.
A vitrine (asa-filters) está em 06 · Componentes. .asa-dense é opt-in por escopo: quem monta a tela decide onde aplicar.
Cada um com o motivo que o justifica. A ordem das camadas é ordem de dependência: sem a primeira, nenhuma das outras se sustenta.
| Componente | Motivo | Plataforma | Fase |
|---|---|---|---|
| asa-overlay | Primitivo de modal, sheet e consentimento | Ambos | ✓ Construído |
| asa-modal | Em /minha-reserva, ver, alterar e cancelar sem sair da página | Ambos | ✓ Construído |
| asa-sheet | Filtros no mobile: o botão "Filtrar" da tela 3 do app precisa de destino | Mobile | ✓ Construído |
| asa-popover | Superfície do autocomplete, do menu e do calendário | Ambos | ✓ Construído |
| asa-menu | Menu de duas camadas; "Minha reserva ▸" abre submenu | Ambos | ✓ Construído |
| asa-disclosure | Cupom colapsado e "⊕ Devolver em outro local": o secundário fica fechado até ser pedido | Ambos | ✓ Construído |
| asa-skiplink | Acessibilidade: pular para o conteúdo por teclado | Ambos | ✓ Construído |
| Componente | Motivo | Plataforma | Fase |
|---|---|---|---|
| asa-utilitybar | Idioma, moeda, central e Minha reserva fora do menu principal | Web | ✓ Construído |
| asa-navbar | Menu visível no desktop e Minha reserva no header | Ambos | ✓ Construído |
| asa-navdrawer | Substituto mobile do menu horizontal | Mobile | ✓ Construído |
| asa-combobox | Quatro tipos de lugar na busca: aeroporto com IATA, cidade, bairro e destino | Ambos | ✓ Construído |
| asa-datepicker asa-timeselect | A diária de 27h só é vendável se a hora entrar na busca | Ambos | ✓ Construído |
| asa-chip | Quatro usos: chips do motor, de intenção, de sazonalidade, de filtro rápido | Ambos | ✓ Construído |
| asa-booking-lookup | Localizar reserva pelo código, no header, no widget e em /minha-reserva | Ambos | ✓ Construído |
| asa-tabs | Abas de linha de negócio: cada aba troca o formulário do motor | Ambos | ✓ Construído |
| asa-footer | Hub de links no rodapé, com abas Aeroportos, Cidades e Destinos | Ambos | ✓ Construído |
| asa-breadcrumb | Arquitetura de ~70 páginas em 4 níveis, com BreadcrumbList | Ambos | ✓ Construído |
| asa-tabbar | Navegação do app, definida em 12 · App nativo | Mobile | ✓ Construído |
| Componente | Motivo | Plataforma | Fase |
|---|---|---|---|
| asa-filters | Filtros combináveis, com contagem ao lado de cada opção | Ambos | ✓ Construído |
| asa-resultbar | Total de resultados e ordenação na mesma linha | Ambos | ✓ Construído |
| asa-speclist | Os cinco atributos do carro: lugares, malas, câmbio, ar, km livre | Ambos | ✓ Construído |
| asa-rating | Nota dentro de cada card, no ponto de decisão | Ambos | ✓ Construído |
| asa-emptystate | Filtros combináveis dão conjunto vazio; a tela precisa de saída | Ambos | ✓ Construído |
| asa-shelf | Prateleiras contextuais ("Disponível neste fim de semana em Recife"), com setas desabilitadas nas pontas e espiada do próximo card; pontos são proibidos | Ambos | ✓ Construído |
| asa-card-destination | Landing pages de destino ("Para onde você vai"). Variante --overlay com o nome sobre a foto e grade asa-destgrid | Ambos | ✓ Construído |
| asa-card-offer asa-card-store asa-card-article | Hub /ofertas, /lojas e blog | Ambos | ✓ Construído |
| asa-pagination | Cerca de 120 páginas com o blog maduro | Ambos | ✓ Construído |
| Componente | Motivo | Plataforma | Fase |
|---|---|---|---|
| asa-summary | Resumo da reserva fixo durante o funil, um ponto forte da Asa | Ambos | ✓ Construído |
| asa-upsell | Oferta de upgrade com prova social ("escolhido por 4 em cada 10 clientes") | Ambos | ✓ Construído |
| asa-comparison | Proteções comparadas lado a lado, em tabela | Ambos | ✓ Construído |
| asa-addon | Adicionais: flexibilidade, pneus e vidros, combustível, entrega, GPS | Ambos | ✓ Construído |
| asa-pricebreakdown | O preço final precisa ser detalhado linha a linha; sem isso é promessa não verificável | Ambos | ✓ Construído |
| asa-paymethod | 12x sem juros, desconto no Pix e combinação de meios | Ambos | ✓ Construído |
| asa-card-booking asa-tasklist | Reserva e pendências resolvidas na mesma tela ("TUDO RESOLVIDO SEM SAIR DAQUI") | Ambos | ✓ Construído |
| asa-reassurance | Trinca de reasseguro logo abaixo do motor de busca | Ambos | ✓ Construído |
| asa-consent | Banner de consentimento: exigência jurídica e do Consent Mode | Ambos | ✓ Construído |
| asa-stickybar | Barra fixa do cupom, em vez de um slide de carrossel que passa | Ambos | ✓ Construído |
| asa-figure | Foto real de lugar e gente, no lugar de carro em estúdio | Ambos | ✓ Construído |
| asa-prose | Cerca de 70 páginas de conteúdo longo, além de h1/h2/h3/p/small | Ambos | ✓ Construído |
| asa-accordion asa-testimonial | FAQ com schema; "HISTÓRIAS REAIS" com nome e cidade | Ambos | ✓ Construído |
| asa-upload asa-codeinput | Check-in "Asa Express": a maior oportunidade de coerência entre promessa e produto | Ambos | ✓ Construído |
| asa-card-plan | Clube Asa | Ambos | ✓ Construído |
O que parece faltar e não é componente: toast, tooltip, ordenação, toggle de one-way, formulário PJ, seletor de idioma, favoritos, stepper de quantidade. O motivo de cada um está no documento em Markdown.
Estender, sem recriar. Três carregam o peso do portal e têm as partes de produto; das outras onze, cinco estão prontas e seis seguem pendentes.
Tem __tabs, __row (o grid de campos), __chips e __aside. Ver 06 · Componentes.
Tem __badge, __policy, __actions (dois CTAs), [data-state="soldout"] e --horizontal. Consome asa-speclist e asa-rating diretamente. Ver 06 · Componentes.
Tem __daily, __installment e __pix. __value é o total do período: sempre vermelho, sem variante.
asa-tagasa-choice--cardasa-alertasa-btn (--icon/--link)asa-photo (modo foto real, ver asa-figure)asa-stepper ("Editar" por etapa), asa-numberplate--inline, asa-field (cupom inline), asa-icon (catálogo formal dos ícones novos, hoje usados inline e ainda fora de 05-icones.html) e asa-skeleton/asa-avatar (forma de card, foto e iniciais).
Treze colisões, todas resolvidas por critério e por um princípio único: melhor prática de UX e CRO acima de preservar o status quo, mesmo quando isso reescreve uma página do próprio sistema.
Quatro candidatos a vermelho por card (preço, selo, CTA e rótulo de categoria), vezes 32.
O efeito von Restorff (um sinal só funciona enquanto for raro) confirma o que 07 · Hierarquia ensina: o preço é o maior elemento e o único colorido. Lei de precedência: preço em --asa-action; selo em asa-tag--outline; CTA de listagem em asa-btn--outline (vermelho cheio só na tela de instância única); rótulo de categoria em --asa-ink-3.
Uma proporção só serve para peça publicitária e um funil de 8 telas.
Ela varia por <body data-page-mode>: marketing mantém ~40/25/20/15; transactional (motor, vitrine, funil, checkout) usa modo foco, porque menos cor decorativa é o achado mais replicado de CRO em conversão; informational (regras, taxas, fraude, blog) fica quase neutro, porque página jurídica que parece anúncio perde credibilidade.
Componentes de produto precisam de tamanhos que os cinco degraus de conteúdo não têm.
A escala de conteúdo fica intocada. Ao lado dela existe uma escala de UI com piso de 12px inegociável: --asa-fs-subtitle (17px) e --asa-fs-body-dense (14px) são degraus legítimos; nada fica em 11px (asa-tag e __category usam 12px).
A regra proíbe clip-path em container interativo, porque o triângulo removido leva junto botão, link e anel de foco. O portal é quase todo container interativo. Na prática o ângulo assinatura sai do funil e da vitrine. Saída: expressá-lo por divisor entre seções e pelo corte da mídia dentro do card. Quem monta a tela confere se o resultado ainda é assinatura suficiente.
Com o fundo branco, um popover branco sobre branco separado por borda de 14% é invisível. Saída limpa: o cinza mist (--asa-mist) é a superfície flutuante do sistema. Dá à superfície clara trabalho funcional, e reatribui a cota de 15%.
Pix (turquesa), Google e bandeiras de cartão entram no checkout e na home. O sistema não tem regra para cor de terceiro, e esses manuais restringem monocromatização. Tem componente jurídico.
Se o rating aparece em 32 cards, o amarelo da marca passa a significar "avaliação": o ativo cromático mais forte da Asa reduzido a cor de rating. Saída: rating sem estrela, ou estrela em preto.
Com um preço por peça, a regra se confere no olho. A home tem preço na prateleira, nos cards de destino, no clube e na barra de cupom, então a regra é verificável: nenhum componente com preço pode ser instanciado dentro de .asa-bg-surface.
32 retângulos cinzas parados por 1,5s parecem página quebrada. O sistema já resolveu isso uma vez, no botão: três pontos em fade a 400ms. Basta promover ao nível de lista. Zero regra quebrada.
Oito cabeçalhos de seção idênticos, 38 cards iguais e 79 blocos em caixa alta numa home: o olho aprende o molde na segunda seção e para de ler. Regra: uma topologia por seção, fundos alternados, cards só onde há produto, marca d'água uma vez por página. Ver 15 · Composição e a sexta ferramenta de 07 · Hierarquia.
Três ficam em aberto: densidade contra o alvo de 44px, microcópia em caixa alta (fica 40% mais larga) e cinco superfícies sticky sem sombra. Todas resolvíveis por critério, detalhadas no Markdown.
Nenhuma delas é opinião: as três são regra que o próprio sistema declara, e o CSS as cumpre linha a linha.
:focus e [aria-invalid] dividem a mesma cor de borda, --asa-action-hover. Num campo focado e inválido (o estado normal de quem errou e voltou para corrigir) o erro continua visível porque tem um segundo canal, a espessura: 2px contra 1.5px, mais a mensagem com ícone ligada por aria-describedby. É a mesma redundância de sinais do botão primário.
Piso de 12px em tela, sem exceção: label de campo, etiqueta e a legenda do placeholder de foto usam o degrau Etiqueta. Texto menor que isso é defeito, em qualquer componente.
O bloco de prefers-reduced-motion zera as quatro durações e também scroll-behavior, que é propriedade de elemento e não custom property, por isso precisa da própria regra. Num site cheio de âncoras (FAQ, destinos, hub do rodapé), isso é conformidade.
body { overflow-x: hidden } é causa conhecida de quebra em position: sticky, e o portal depende de sticky em cinco lugares; a correção é uma linha (overflow-x: clip). E scroll-margin-top: 70px está calibrado para a navbar desta documentação; o header de produto terá ~110px e precisa virar token.
Listar isto é tão útil quanto listar componentes: impede que o design system vire depósito do que está pendente em outras frentes.
A tabela incoerente (C+ mais barato que B+, Commander a R$982/dia) é RMS, não interface. Mas bloqueia a entrega de ordenação por preço: o filtro novo exporia o problema em vez de resolvê-lo. Embutir proteção e taxa no preço exibido é decisão comercial e jurídica; 12x e Pix dependem de adquirente e gateway.
As ~70 URLs, slugs, IATA e schema; toda a análise de Semrush e mídia paga; a pauta do blog; o sitemap duplicado. Zero impacto em componente. Multi-idioma, no sistema, é só um item do menu.
Central 0800, distribuição em OTA, carro reserva pós-sinistro, transfer, afiliados, precificação do clube. A base de dados do autocomplete é dado: o componente é só a casca. O "escolhido por 4 em cada 10" é dado operacional real.
"Trocar carro em estúdio por lugar e gente" é direção de arte e produção fotográfica no Nordeste. O sistema entrega o slot, o corte de 8° e a legenda; não entrega a foto. Enquanto ela não existe, o hachurado de asa-photo marca o lugar e nomeia a foto que falta; foto de banco entra só como comp marcado em protótipo, nunca em produção; e asa-figure é o modo da foto real. O texto da LGPD precisa de parecer jurídico; o componente é só o recipiente.
Preço vermelho e único no card; proporção de cor varia por data-page-mode; escala de UI com dois degraus nomeados e piso de 12px. Detalhe em Tensões.
Antes de entregar ordenação por preço. É dependência de negócio bloqueando entrega de design.
Tokens, camada flutuante, navegação, motor de busca, vitrine, funil e pós-venda/confiança: sete elos, todos catalogados em 06 · Componentes.
Navegação estendida (asa-footer, asa-breadcrumb, asa-tabs, asa-tabbar), conteúdo (asa-shelf, os quatro asa-card-*, asa-pagination, asa-prose, asa-accordion, asa-testimonial) e conta (asa-upload, asa-codeinput, asa-card-plan), todos em 06 · Componentes. A biblioteca de produto está completa.
Antes da primeira tela, não depois. Se a convenção não nascer no design system, cada tela inventa a sua e o funil oficial do GA4 não fecha.
A biblioteca tem cerca de 65 componentes. É o tamanho de um design system de produto, e é o que o portal exige. O documento completo, com o motivo de cada peça e a lista do que não é componente, está em MAPA-COMPONENTES_DESIGN-SYSTEM.md.