O amarelo assume 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".
body: isso é branco.
A fatia de 15% é o cinza mist (#F4F4F3): superfície de composição e camada flutuante, neutra, sem viés de matiz amarelo.
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, mas ela só vale se o contraste resultante continuar suficiente para leitura. Todos os pares abaixo foram calculados, não estimados. O mínimo AA é 4,5:1 para texto normal e 3:1 para texto grande (≥18,66px em negrito, ou ≥24px).
| Par | Amostra | Razão | Veredito | Onde o sistema usa |
|---|---|---|---|---|
Branco sobre --asa-red |
Reservar |
4,68:1 | AA texto normal | Botão primário, etiqueta de benefício, rodapé |
Preto sobre --asa-yellow |
Promessa |
11,45:1 | AAA | Todo texto sobre a superfície amarela |
Amarelo sobre --asa-black |
4,7 |
11,45:1 | AAA | Placa de número, prova social |
| Preto sobre cinza mist | Corpo |
16,60:1 | AAA | Composição e camada flutuante |
Branco sobre --asa-green |
Confirmado |
7,68:1 | AAA | Etiqueta de confirmação de reserva |
#4A4C50 sobre cinza mist |
Secundário |
7,82:1 | AAA | Corpo secundário, lead de seção |
#5A5C60 sobre cinza mist |
Legenda |
6,09:1 | AA | Legenda, glosa, specs do card |
--asa-red-dark sobre cinza mist |
RÓTULO |
5,64:1 | AA texto normal | Rótulo mono, mensagem de erro, foco |
--asa-red sobre cinza mist |
R$ 189 |
4,26:1 | Só texto grande | Preço e número em display, nunca em legenda |
O par mede 2,94:1, abaixo do mínimo de 3:1 para texto grande. É o único par da paleta que reprova, e por isso não entra na matriz.
A composição resolve isso sozinha: o campo amarelo carrega a promessa, o campo claro carrega o preço. O preço vive sobre cinza mist (4,26:1, aprovado em texto grande) ou sobre branco; o título em amarelo usa a tinta preta, e a palavra de ênfase herda a cor do título.
Ele continua válido. O que a pessoa lê é o rótulo branco sobre o vermelho do próprio botão: 4,68:1, aprovado.
A ressalva é a fronteira entre o botão e o fundo amarelo, que fica em 2,94:1. Como o botão é identificado pelo rótulo e pela forma preenchida, e não pela borda, isso não impede o uso. Não coloque um botão vermelho vazado sobre amarelo, porque aí a fronteira passa a ser a única pista.
#E80911 texto grande4,26:1 sobre cinza mist#C4070E texto pequeno5,64:1 sobre cinza mistRótulo pequeno sobre fundo claro usa o vermelho escuro. O cálculo mostra por quê: é a diferença entre reprovar e passar em AA.
#FEC42B é o único amarelo do sistema. O #FFCA00 do manual antigo foi descontinuado e não deve aparecer em nenhuma peça nova.
Nenhuma peça passa de aproximadamente 20% de área vermelha. Passar disso devolve a marca ao estado que a v3.2 existe para corrigir.
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 token literal, não transparência.
Nenhum cinza claro, nenhum amarelo. Só #FFFFFF: é o que sustenta os 4,68:1 medidos.
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 OLED. O #141517 mantém 16,60:1 sobre cinza mist, folga de sobra sobre o mínimo, com leitura mais confortável.