Asa Rent a Car SISTEMA DE DESIGN
v3.2 · B2C · 2026

O sistema saiu do PDF.
Agora ele é código.

A identidade da Asa, escrita em CSS: escala, proporção de cor, geometria, componentes com todos os estados, as telas de produto e as faixas que montam uma página inteira, com a tipografia real. O teste é um só: duas pessoas diferentes montam a mesma peça e o resultado é o mesmo.

0traços alterados no logo
8°o único ângulo do sistema
5degraus tipográficos, nada entre eles
20%teto de área vermelha por peça
Pular para o conteúdo

Leia na ordem. Cada seção depende da anterior.

A ordem não é editorial, é de dependência real de construção: não dá para decidir componente antes de ter cor e tipografia, nem tokenizar antes de ter as decisões que os tokens representam.

Para quem implementa

Comece em 10 Tokens. São quatro arquivos CSS sem build, sem dependência e sem framework: dá para colar em React, WordPress ou HTML puro do mesmo jeito.

Os arquivos são asa-tokens, asa-base, asa-components e asa-utilities, nesta ordem. A ordem importa: sem build, é a cascata por origem que dispensa !important.

Para quem desenha

Comece em 03 Cor e 04 Tipografia. São as duas seções que carregam as regras não negociáveis. O resto do sistema é consequência delas.

Se você só tem cinco minutos, leia a regra dos 8° em 01 Fundamentos e o teto de 20% de vermelho em 03 Cor. São as duas coisas que, sozinhas, fazem uma peça parecer ou não parecer da Asa.

Para quem decide

Vá direto a 08 Fluxo de reserva e 12 App nativo. São as telas de produto e as decisões de fluxo que ainda dependem de definição de negócio.

Uma pendência segue aberta: o nível de verificação exigido no pagamento da caução, que depende do gateway escolhido. Está registrada em 09 Segurança.

Central de Ativos da Marca (Downloads)

Baixe o Brand Kit Completo com logotipos em vetor (.svg), fontes BR Omny (.otf), 287 ícones Feather em 1.5px, amostras Adobe (.ase) e templates de grid.

Baixar Brand Kit (.zip)

Quinze seções, da marca à página.

01 · Fundamentos A marca, as duas variantes e a regra dos 8°

Os ativos de marca que não se tocam, as duas variantes (B2B em vermelho, B2C em amarelo) e a geometria proprietária que transforma uma imagem qualquer em imagem da Asa.

02 · Grid 12 colunas, gutter 24, e a primeira dobra

Container, breakpoints, escala de espaçamento e a altura segura de 680px onde a proposta de valor e o CTA precisam caber sem rolagem.

03 · Cor Amarelo é ambiente. Vermelho pede resposta.

Oito cores com função escrita, a proporção 40-25-20-15, a matriz de contraste calculada e os pares que o sistema proíbe.

04 · Tipografia BR Omny real, cinco degraus, dois registros

A fonte da marca renderizando de verdade. O Registro 1 (caixa alta itálica) vive só no H1, no preço e na placa; o título de seção é Registro 2, com uma palavra em vermelho.

05 · Ícones Uma biblioteca só, traço de 1.5px

Feather, traço de 1.5px alinhado à borda de card, e o ícone de perfil como única exceção de marca. Ícone só em controle e em lista longa.

06 · Componentes Tudo, com todos os estados

A maior seção: botão, campo com cinco estados, seleção, motor de busca, vitrine, funil, pós-venda, camada flutuante e as faixas de página da home, do hero ao fechamento.

07 · Hierarquia Seis ferramentas, lado a lado com o erro

Escala, proximidade, espaço em branco, alinhamento, cor e variação, cada uma com o par certo/errado, para virar checklist em vez de julgamento estético.

08 · Fluxo de reserva Oito telas, da busca ao "minha reserva"

As telas de produto compostas a partir dos componentes, com a decisão de fluxo anotada em cada uma: estado na URL, modal ou página, e onde a conta é criada.

09 · Segurança Caução, step-up e consentimento LGPD

Onde pedir o segundo fator, como separar o consentimento essencial do de marketing, e por que esses textos são o teste real da promessa de "sem letra miúda".

10 · Tokens Primitivo, semântico e como consumir

O mapa completo de variáveis e o motivo de existir uma camada semântica: é o que permite a variante B2B trocar de tema sem reabrir um único componente.

11 · Movimento Teto de 400ms e o que nunca anima

Quatro durações, um easing, e a lista curta do que o sistema proíbe: rotação, bounce, contador de número e qualquer pulso.

12 · App nativo O que muda quando sai do navegador

O app ainda não existe. As decisões de fluxo mobile estão tomadas, inclusive a de não ter gamificação, para que ele nasça reaproveitando o sistema.

13 · Roadmap O que falta para o portal web e mobile

As prioridades de construção, na ordem de dependência: o que já está na biblioteca, o que ainda falta e onde o portal colide com as regras duras da marca.

14 · Downloads Biblioteca de Ativos & Brand Kit

Baixe o Brand Kit Completo (.zip), vetores do logo, fontes BR Omny, 287 ícones Feather, amostras de cores Adobe (.ase) e templates de grid.

15 · Composição de página Como uma página inteira fica com cara de Asa

Faixas de largura total, uma estrutura por seção, foto antes de ícone, respiro de 120px e o checklist que mede os vícios de template antes de cada entrega. A home é o exemplo vivo.

Três coisas para saber antes de abrir as páginas.

A fonte é real

Toda página carrega a BR Omny de verdade, em cinco faces. O que você vê aqui é o que a marca entrega em produção.

Cinco das catorze faces da família: Regular, Medium, Bold, Black e Black Italic. As outras nove não têm uso no sistema; carregá-las seria peso morto na página.

O 8° é verificável

Uma fórmula única entrega 8° reais em qualquer proporção de caixa. Nenhum corte do sistema é uma porcentagem fixa.

A subida é medida em unidade de largura (14.05cqw, a tangente de 8°), numa variável só. O ângulo pode ser conferido com régua na tela.

Precisa de servidor

Fonte via @font-face é bloqueada em file://. Abrir os arquivos com duplo clique faz a página cair no fallback e perder a marca.

# na pasta asa-design-system python3 -m http.server 8765

Não trabalha com código? Peça para alguém do time técnico rodar o comando acima uma vez. Depois disso é só abrir o link no navegador, como qualquer site. Sem servidor, dá para ler o conteúdo mesmo assim (a página cai para uma fonte padrão do sistema), só a tipografia real da marca que não aparece.

Próxima seção 01 · Fundamentos →