O amarelo é o fundo das peças; o vermelho aparece só onde há uma ação, um preço ou a assinatura. Cada cor aqui tem função escrita. Não existe cor disponível "para usar quando precisar".
É a lógica do 60-30-10 adaptada a quatro papéis. O princípio é o mesmo: uma cor domina a superfície e cria um fundo de descanso, uma segunda estrutura o texto, e a de maior impacto aparece na menor área, exatamente onde importa que o olho vá primeiro. A fatia de 15% é o cinza mist: superfície de composição e camada sobreposta.
Arquivo .ASE para carregar as amostras com 1 clique no Illustrator, Photoshop e InDesign, além de tokens em JSON e tabela de equivalências com CMYK e Pantone.
Escolher um cinza escuro em vez de preto puro é uma decisão de conforto visual, e só funciona porque foi testada. Toda combinação de cor usada pelo sistema garante boa leitura, exceto uma: vermelho como texto direto sobre amarelo, a única combinação que a Asa não permite.
Branco sobre vermelho: botão primário, etiqueta de benefício, rodapé.
Preto sobre amarelo: todo texto sobre a superfície amarela.
Na prática o corte de 8° já separa a peça em dois campos: a promessa no campo amarelo, o preço no campo claro (cinza mist ou branco).
É válido. O que a pessoa lê é o rótulo branco sobre o vermelho do próprio botão, e essa combinação funciona bem.
O botão é identificado pelo rótulo e pela forma preenchida. Por isso, nunca use um botão vermelho vazado (sem preenchimento) sobre amarelo: aí a borda vira a única pista.
#E80911texto grande, preço, número em display#C4070Etexto pequeno, rótulo, hover e erroEm tamanho reduzido, o vermelho escuro garante uma leitura mais nítida que o vermelho de marca; por isso rótulos pequenos e mensagens de erro usam sempre essa variação mais escura.
#FEC42B é o único amarelo do sistema. Nenhum outro amarelo, inclusive o #FFCA00, entra em peça da Asa.
Nenhuma peça passa de aproximadamente 20% de área vermelha. Acima disso o vermelho deixa de sinalizar ação e vira fundo.
Uma peça sem nenhum vermelho perde a assinatura. Sempre existe pelo menos um elemento vermelho, normalmente o único botão de ação.
Nada de opacity ou color-mix em texto sobre fundo colorido: tinta cheia sempre. Estado desabilitado usa uma cor sólida própria, nunca transparência.
Nenhum cinza mist, nenhum cinza claro, nenhum amarelo. Só #FFFFFF: é a única combinação testada e aprovada sobre vermelho.
Nenhum gradiente, nenhuma forma orgânica de fundo, nenhum blur decorativo e nenhuma sombra em lugar nenhum. Elevação se resolve com borda de 1,5px e contraste de fundo.
O preto da marca é #141517, não #000000. Preto puro sobre branco puro cria o contraste máximo possível, o que em tela tende a cansar a vista em leitura longa e a gerar uma leve vibração nas bordas do texto, especialmente em telas OLED. O #141517 já garante ótima leitura sobre qualquer fundo claro da paleta, com uma sensação mais confortável.