Brand colors
A cor principal (main color) é aquela que serve para dar maior contraste e indicar para o usuário os elementos interativos de uma página. A cor base (base color) é a essencia da marca, presente na sua identidade visual.
| Classe CSS | Hexadecimal | Aplicação |
|---|---|---|
.has-text-main |
#5A4CFB | |
.has-text-main-light |
#DEDBFE | |
.has-text-main-dark |
#483DC9 | |
.has-text-base |
#000000 |
É importante frisar que a cor principal segue tendo mais visibilidade na interface dos produtos Zenvia, sendo a ”cor clicável”. Existirão algumas exceções em componentes, visto que é importante para a marca manter a interface mais escura.
Aplicação
Support colors (Escala de cinzas)
As cores de suporte do nosso Design System são representadas pela escala de cinzas, ou seja, do cinza mais escuro ao branco. Essas cores dão suporte as cores de marca e de feedbacks de sistema porque sempre compõe um elemento visual com alguma outra cor. A escala de cinza também detém a maior parte das cores usadas na interface.
| Classe CSS | Hexadecimal | Aplicação |
|---|---|---|
.has-text-grey-light |
#D8D8DF | |
.has-text-grey-lighter |
#F3F5F6 | |
.has-text-grey-lightest |
#FFFFFF | |
.has-text-grey-dark |
#898B94 | |
.has-text-grey-darker |
#656771 | |
.has-text-grey-darkest |
#393946 |
Aplicação
As cores de suporte foram planejadas para serem aplicadas utilizando o melhor contraste possível. Sendo assim, só é permitido sobreposição de cores secundárias da escala Dark com a escala Light. Existe uma exceção: Secondary Dark e Secondary Light, por não apresentarem um contraste aceitável juntas.
Dentre os tons dessa escala existem alguns que são chave para certas aplicações. Essas cores são padrão para determinados componentes em uma página.
| Classe CSS | Uso | Aplicação |
|---|---|---|
.has-text-grey-darkest |
Cor padrão para textos | |
.has-text-grey-lighter |
Background de páginas | |
.has-text-grey-dark |
Texto em estado desabilitado | |
.has-background-grey-light |
Shape em estado desabilitado | |
.has-text-grey-darker |
Feedback de info em fonte* |
*Para ícones em SVG esse token não irá funcionar.
Dê sempre preferência para a Support Darkest em títulos e parágrafos. Evite o uso do preto 100% (Base color) em textos. O preto é uma cor dominante, portanto chamará mais atenção do que as outras. O cinza reduz o cansaço visual. As cores de marca (Brand Colors) são recomendadas para elementos interativos (componentes e links), ilustrações e reforço visual.
Feedback colors
As cores de sistema complementam a paleta de cores da marca e de suporte. Sendo assim, podemos classificar seu uso como terciário. Assim como a cor principal, existem três tons para cada cor: Regular, Light e Dark.
O verde (Success Color) é uma das cores de feedback do sistema, normalmente relacionada a feedbacks de sucesso, conclusão ou positivos no geral.
| Classe CSS | Hexadecimal | Aplicação |
|---|---|---|
.has-text-success |
#21A330 | |
.has-text-success-light |
#D3EDD6 | |
.has-text-success-dark |
#1A8226 |
O amarelo (Warning Color) geralmente está relacionado a alertas de nível médio. Não é vinculado diretamente a um erro grave como o vermelho. Seu uso é associado a feedbacks, badges entre outras áreas da interface.
| Classe CSS | Hexadecimal | Aplicação |
|---|---|---|
.has-text-warning |
#FF9720 | |
.has-text-warning-light |
#FFEAD2 | |
.has-text-warning-dark |
#BF7118 |
O vermelho (Danger Color) geralmente está relacionado a erros ou ações destrutivas. Como por exemplo um botão vermelho (deletar, remover, etc). Seu uso é associado a feedbacks e badges de erro. Essa é uma cor com um uso mais restritivo em relação as outras, focando em elementos negativos.
| Classe CSS | Hexadecimal | Aplicação |
|---|---|---|
.has-text-danger |
#B7213C | |
.has-text-danger-light |
#F1D3D8 | |
.has-text-danger-dark |
#921A30 |
Aplicação
Seguindo a orientação proposta, as versões Regulares são as principais. Sempre que possível devem ser usadas. Para combinações de tom sobre tom é aconselhado usar as versões Dark e Light, ou vice-versa. As cores de sistema devem ser usadas para dar feedbacks ao usuário, além de garantir um bom entendimento da mensagem que a interface quer passar.
Extra
Background
A cor de fundo afeta a aplicação dos componentes da tela. Ela dá destaque e auxilia o usuário a interagir com elementos clicáveis. O Background oficial do frame/artboard dos produtos Zenvia é o Support Lighter.
Para aplicação em elementos, possuímos tokens de cores para background na página Design Tokens. Acessar Design Tokens >
Acessibilidade
As cores devem ser hieraquizadas e combinadas de modo que seu uso esteja sempre ligado ao algum significado. A escala de cinzas do nosso Design System são chamadas de Cores de Suporte, isso quer dizer que todas as opções disponíveis tem o objetivo de apoiar as outras cores, como as cores de marca e de feedback de sistema, por exemplo.
Haverá casos no qual a cor pode não ser utilizada como o único meio visual de transmitir informações, indicar ação ou distinguir elementos visuais, como mostra a imagem a seguir:
