Cores
As cores têm um papel importante na legibilidade de textos, identificação de elementos e interações. Elas tambem são responsáveis por fazer uma conexão com a nossa marca.
Legibilidade dos textos
Todos os textos da interface devem atender aos critérios mínimos de contraste. A WCAG requer nível AA de contraste, equivalente a 4.5:1 entre textos normais e background, e 3:1 para textos maiores.
Cores primárias
As cores primárias são as cores que predominam nos elementos, trazendo maior destaque nas telas.
| Token | RGBA |
|---|
Cores neutras
As cores neutras são usadas em elementos que não precisam de destaque.
| Token | RGBA |
|---|
Cores funcionais
São usadas como apoio visual para comunicar e realizar feedbacks melhores e mais significativos.
Perigo
A cor funcional de perigo deve ser usada em situações críticas e que exijam atenção total, como dados que podem ser excluídos, saída do sistema, desconexão, perda de informação, entre outros.
| Token | RGBA |
|---|
Sucesso
A cor funcional de sucesso deve ser usada em feedback e ações positivas e corretas.
| Token | RGBA |
|---|
Atenção
A cor funcional de atenção deve ser usada em situações de atenção, porém o resultado da ação não é crítico. Neste caso, não existe perda de informações ou a ação pode ser revertida.
| Token | RGBA |
|---|
Destaque
A cor funcional de destaque deve ser usada para informações, elementos ou ações de apoio, como ajuda e suporte. Não deve ser usada para nenhum outro tipo de feedback, com exceção do componente Avatar.
| Token | RGBA |
|---|
IA
As cores funcionais de IA devem ser usadas exclusivamente para sinalizar recursos e ações baseados em Inteligência Artificial. Elas formam gradientes de superfície e borda e estão disponíveis no tema lina, modo light.
| Token | RGBA |
|---|
Cores de suporte
As cores de suporte devem ser usadas em gráficos, legendas e na visualização de dados.
| Token | RGBA |
|---|
Nomeclatura dos tokens
Nem todas as paletas de cor têm a mesma quantidade de tokens. As variações dependem das aplicações previstas para cada cor. Evite usar cores diferentes para o estado default e hover de um elemento.
| Nomeclatura | Descrição |
|---|---|
inverse e on-color | Cores com maior contraste para aplicações em ícones ou textos sobre fundos escuros ou coloridos. |
interactive | Cores neutras, com maior contraste para elementos interativos |
high-emphasis | Tom de cor para elementos de maior destaque |
low-emphasis | Tom de cor para elementos de menor destaque |
surface | Cores de preenchimento de elementos que ficam acima do background da página (exceto ícones, textos e bordas) |
Tokens Descontinuados
| Token | RGBA |
|---|
Referências
Feedback
Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.