Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Padrão de cores

Desde já, muito obrigado por toda a ajuda.

Durante a criação da minha paleta de cores, eu me deparei com uma situação que não sei como resolver:

Eu criei um token básico para indicar a cor primária do meu design system que é muito próxima a cor magenta. Isso aconteceu porque, a cor da logo em questão tem ênfase no magenta.

Porém, ao criar as cores da paleta, alguns tons ficaram muito semelhantes/próximos a cor vermelha, que normalmente é utilizado para alertas ou ações de perigo/erro. Neste caso, como eu posso realizar um balanceamento entre essas paletas de cores?

Alguns cenários/componentes eu consegui criar utilizando outra paleta, mas isso nem sepre será 100% efetivo ou possível.

Assim, ao criar um botão com a minha cor primária (magenta) ficaria muito próximo de uma mensagem de erro (de um input) ou de um botão de exclusão (que pode ser utilizada uma cor vemelha), de um toggle e etc.

  1. Na experiência de vocês, como eu poderia fazer para manter a paleta de cores no tom magenta, mas manter o contraste visual dos itens críticos/perigosos?
  2. Quais técnicas eu poderia aplicar?
1 resposta
solução!

Oii, Ricardo! Tudo bem?

Obrigada por compartilhar suas dúvidas no fórum, pode ajudar outros(as) colegas também!

Para começar, ajustar o contraste e a saturação das cores pode fazer uma grande diferença. O magenta pode continuar como cor principal, mas é bom ajustar o vermelho para que ele se destaque mais. Um tom mais claro ou mais escuro para diferentes estados de um botão, por exemplo, e reservar um vermelho mais vibrante para alerta. Para mensagens de erro ou alerta, você pode usar bordas ou ícones que complementem o vermelho. Isso reforça a função do elemento, mesmo que a cor seja parecida com o magenta. Além das cores, outros elementos visuais como animações, mudanças de forma ou texto explicativo são ótimos para indicar estados de erro ou alerta. Sempre utilize ferramentas de acessibilidade para garantir que as cores escolhidas tenham contraste suficiente para todos os usuários, incluindo aqueles com deficiência visual.

Espero ter ajudado e conte conosco para te auxiliar quando precisar.

Até mais, Ricardo!