Botão principal · LAY-03 e LAY-06
O ponto coral da tela
Um por tela. Coral com texto escuro, 16px em 600. Na versão grande (capa, abertura, fechamento), o texto passa a 20px em Black e vira branco: só assim o branco sobre coral é aceito como texto grande.
| Versão | Classes | Fundo | Texto | Contraste |
|---|---|---|---|---|
| Principal | btn btn-coral | Coral #EE6A4A | Neutro 800, 16px, 600 | 4,98:1 |
| Principal grande | btn btn-coral btn-grande | Coral #EE6A4A | Branco, 20px, Black 900, +0,01em | 3,09:1 (texto grande) |
Botão secundário · LAY-07
Bloco neutro, sem disputar o coral
Fundo sólido e texto em Oneck. Branco sobre Oneck e Areia; Areia sobre branco, com a classe sobre-branco. Nunca contorno vazado, nunca coral.
| Fundo da tela | Classes | Fundo do botão | Texto | Contraste |
|---|---|---|---|---|
| Oneck ou Areia | btn btn-secundario | Branco | Oneck 500, 16px, 600 | 5,28:1 |
| Branco | btn btn-secundario sobre-branco | Areia 200 | Oneck 500, 16px, 600 | 4,50:1 |
Estados · LAY-08
Um anel, nunca outra cor
Passar o mouse e chegar pelo teclado (tecla Tab) mostram o mesmo anel: 2px, afastado 3px do botão, na cor de contraste do fundo. Neutro 800 sobre branco e Areia; branco sobre Oneck. A cor do botão não muda, então o contraste do texto continua o mesmo. Transição de 0,2 s. Passe o mouse nos botões de cima; abaixo, o anel fixo para comparar.
Fora de .hero e section.oneck, um bloco em Oneck precisa da classe sobre-oneck no contêiner dos botões para o anel sair branco.
Ícone · LAY-09
Só quando ajuda a entender o destino
Remix Icon de linha, à esquerda do texto, 1,2 vez o tamanho da letra e na cor do texto. WhatsApp, download e e-mail ganham ícone; "Saiba mais" não.
Não fazer
Fora disto, deixa de ser o botão da Oneck
Em 16px, branco sobre coral fica em 3,1:1 e reprova. Branco só no botão grande.
O coral é um ponto por tela. O segundo vira secundário.
O secundário é um bloco sólido, não um contorno.
Coral 600 com texto escuro cai para 3,62:1. O hover é o anel.
O design é flat (COR-01).
Botão é sempre pílula (LAY-02).
Código
Pronto em _base/base.css
Em página HTML do sistema, basta usar as classes. Em outro projeto, copie o bloco de botões de _base/base.css junto com os tokens de cor e tipografia.
<!-- principal e secundário sobre Areia ou Oneck --> <a class="btn btn-coral" href="#">Consultar minha marca</a> <a class="btn btn-secundario" href="#">Ver o que fazemos</a> <!-- secundário sobre fundo branco --> <a class="btn btn-secundario sobre-branco" href="#">Ver o que fazemos</a> <!-- principal grande, com ícone --> <a class="btn btn-coral btn-grande" href="#"><i class="ri-whatsapp-line" aria-hidden="true"></i>Falar no WhatsApp</a> <!-- bloco em Oneck fora de .hero e section.oneck: anel branco --> <div class="acoes sobre-oneck"> ... </div>