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 | Hex |
|---|
Cores neutras
As cores neutras são usadas em elementos que não precisam de destaque.
| Token | Hex |
|---|
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 | Hex |
|---|
Sucesso
A cor funcional de sucesso deve ser usada em feedback e ações positivas e corretas.
| Token | Hex |
|---|
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 | Hex |
|---|
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 | Hex |
|---|
Cores de suporte
As cores de suporte devem ser usadas em gráficos, legendas e na visualização de dados.
| Token | Hex |
|---|
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) |