Pular para o conteúdo

Três ativos de marca e nove decisões de sistema.

O logo, as duas cores e a família tipográfica são ativos de marca: ficam como estão. Tudo o resto, da escala tipográfica aos tokens, é decisão de sistema, e está documentado aqui. É isso que faz duas peças da Asa feitas por pessoas diferentes se parecerem.

Ativos de marca: não se toca
Símbolo da asa e wordmarkfixo
Vermelho #E80911 e Amarelo #FEC42Bfixo
BR Omny como família únicafixo

São os três ativos de reconhecimento da marca. Inverter a proporção entre as cores não mexe em um traço do logo. Se for preciso vetor, não vetorize a partir dos PNGs: baixe os originais abaixo.

Baixar Vetores Oficiais (.zip)
Decisões de sistema, e onde cada uma está
Escala tipográfica e hierarquia04
Proporção e função de cada cor03
Grade, densidade e respiro02
Ângulo e recorte proprietários01
Componentes com todos os estados06
Telas de produto e fluxo de reserva08
Tokens prontos para implementar10

Duas variantes, e a única diferença é quem manda na superfície.

v3.1 e v3.2 são idênticas em escala, grade, geometria e componentes. Elas divergem em uma coisa só: a proporção de cor. É por isso que trocar de variante, na implementação, significa trocar a camada semântica de tokens, e nenhum componente.

v3.1 · B2B
Superfície dominantevermelho 40%
Cor de açãoamarelo
Fundo claro#FFF2F2
Prova socialbloco amarelo

Reservada a materiais B2B: propostas de frota, contratos corporativos, apresentações comerciais. Nenhum produto digital usa esta variante.

v3.2 · B2C · canônica
Superfície dominanteamarelo 40%
Cor de açãovermelho 20%
Fundo claro#F4F4F3 (cinza mist)
Prova socialbloco preto

É a variante de todo produto voltado ao consumidor: site, mídia paga, WhatsApp, Instagram e perfil do Google. Também é a que corresponde à loja física real, que já é amarela.

Por que o amarelo domina
Vermelho em área cheia cansa

Usado como papel de parede, o vermelho perde exatamente a força que precisa ter quando marca um preço ou um botão. A 20%, ele mantém o peso de sinal.

Amarelo é a temperatura do atendimento

O balcão real da Asa é amarelo: parede, bancada, prateleira e uniforme. A v3.2 alinha o digital ao que o cliente encontra quando desembarca.

A assinatura não se perde

Uma peça sem nenhum vermelho perde a marca. Por isso sempre existe pelo menos um elemento vermelho, normalmente o único botão de ação da composição.

O ângulo e o vão saem de dentro do próprio logo.

São os dois sinais que fazem uma imagem qualquer virar imagem da Asa, sem depender do logo estar presente. O ângulo é a inclinação da asa e do wordmark. O vão é o espaço entre as lâminas, que vira o corte que divide toda peça em dois campos.

O ângulo · 8°

Sempre subindo para a direita. É o único ângulo do sistema: recorte, divisória, seta, itálico. Nada a 45°, nada arredondado.

Valor8deg · tan = 0,14054
Direçãosobe à direita
Token--asa-rise: 14.05cqw

A subida é medida em unidade de largura, não de altura. É o que garante 8° reais em qualquer proporção de caixa; a demonstração está logo abaixo.

O vão · dois campos

O corte não é decorativo. Ele carrega significado fixo, e inverter esse significado quebra o sistema mesmo com o ângulo certo.

Campo de cima (amarelo)o que a Asa promete
Campo de baixo (escuro/claro)o que o cliente recebe

Headline, benefício e promessa de tempo em cima. Preço, prova, condição e ação embaixo. É a mesma estrutura em todas as proporções de peça: é template, e não pede arte nova por campanha.

Prova do ângulo · a mesma classe em três proporções
[ 1:1 ]
quadrado · 8,00°
[ 16:9 ]
paisagem · 8,00°
[ 4:5 ]
retrato · 8,00°

Nas três, a mesma classe .asa-cut__media. Se a subida fosse uma porcentagem de altura, o quadrado cortaria a 8°, a paisagem a 4,5° e o retrato a 11°, e ninguém conseguiria auditar isso a olho.

Como usar
<!-- o wrapper estabelece o container: é dele que sai a largura --> <div class="asa-cut"> <div class="asa-cut__media asa-photo asa-photo--16x9"></div> </div> /* as três receitas, todas derivadas da mesma variável */ .asa-cut__over /* base sobe à direita: toda fotografia */ .asa-cut__under /* topo sobe à direita: campo escuro */ .asa-cut__fill /* camada decorativa sob conteúdo clicável */

Regra dura: nunca aplique o recorte num container que tenha botão, link ou campo dentro. O triângulo removido leva junto o conteúdo e o anel de foco. Quando o bloco é interativo, o corte vai em .asa-cut__fill e o conteúdo passa por cima, intacto.

O 8° é do recorte e do trajeto, nunca do elemento.

Nunca Texto com transform: rotate

A inclinação do texto já vem do itálico da própria BR Omny: é o mesmo corte do wordmark. Girar o elemento por cima disso duplica a inclinação e desalinha a linha de base.

Nunca Bloco de cor girado

O ângulo entra pelo recorte da forma. Um bloco girado deixa cantos vazados e quebra o alinhamento com a grade de 12 colunas.

Nunca Logo animado, girado ou remontado

O logo entra por opacidade em 200ms e permanece. Não gira, não se monta traço por traço, não pulsa, e nenhum traço dele pode ser alterado.

Sempre A asa sozinha em dois lugares só, e uma vez por página

Marca d'água a 13% de opacidade sobre amarelo, ou dentro do recorte circular do ícone de perfil. A marca d'água aparece uma vez por página, no hero: repetida no CTA final ela vira papel de parede. Fora isso, a assinatura é sempre o lockup completo.

Anterior← 00 · Início Próxima seção02 · Grid →