design tokens

tokens de cor

Os tokens de cor são uma das partes mais importantes do nosso Design System. Eles ajudam a orientar o usuário através de uma interface consistente, escalável e semântica de acordo com o seu contexto.

base colors

Os base tokens, tokens base, representam a maior variedade de tokens de cores que temos, organizados por categoria. Eles devem ser usados apenas para construir os theme tokens.

theme tokens

Theme tokens, tokens de tema, organizam as cores de acordo com sua semântica. Temos duas categorias de theme tokens, as cores de Interface do Usuário, UI, e as cores da Visualização Gráfica e de Dados, Graph and Data.

tema para UI

Usada como padrão para componentes de interface do usuário, UI.

tema para gráficos e dados

Usada para ilustrações, gráficos e visualização de dados.

uso

A chave para usar as cores corretamente é seguir o papel destinado a cada cor.

corfunçãoutilização
primaryPrimary é a cor principal da marca. Possui prioridade alta, repete com frequência e pode ser utilizada em elementos interativos.
accentAccent também é uma cor de prioridade alta, porém, ela aparece pontualmente na tela para criar um destaque. Também pode ser utilizada para elementos interativos.
informativeInformative é utilizada para informar o usuário sobre algum tópico, como uma dica ou nova funcionalidade. É utilizada para elementos estáticos.
alertAlert é utilizada para reportar ações críticas ou destrutivas, que usualmente requerem alguma ação do usuário. Botões e mensagens de erros são alguns exemplos.
noticeNotice é utilizada para notificar o usuário de alguma coisa que aconteceu ou para chamar sua atenção. Pode ser utilizado para status do sistema, banners, etc.
successSuccess é utilizada para passar a percepção de que uma ação ocorreu conforme o esperado.
neutralNeutral pode ser usada para textos e outros elementos auxiliares na tela, como linhas, sombras e fundos.
Wireframe de uma interface para desktop. Os componentes da interface são
destacados por marcadores numéricos. O número 1 é um título, 2 um botão, 3 uma
linha divisória, 4 uma badge com o texto ”novo” e 5 uma mensagem de
sucesso.
  1. Uso do neutral para texto
  2. Uso de primary para um componente interativo de alta importância
  3. Uso de neutro como elemento decorativo
  4. Uso de informative para indicar um novo recurso
  5. Uso de success para um feedback sobre uma ação completa
intensidadenomeutilização
softestPara fundos, textos e ícones. Apenas disponível para paleta neutral.
softerPara fundos.
softPara elementos decorativos de UI.
baseAções e destaques.
strongFeedbacks do sistema (hover, pressionado) e texto.
strongerPara fundos invertidos, feedbacks do sistema e textos.

acessibilidade

Ao trabalhar com cores, é extremamente importante prestar atenção à acessibilidade na interface. Os pontos críticos neste momento são cuidar do contraste dos elementos interativos e não usar a cor como único meio de diferenciar os objetos.

base color

Nossos base tokens foram criados para contrastar entre as cores extremas. Por isso, em todas as famílias de fontes, com excessão do vermelho e amarelo, os tons entre 100 e 400 possuem contraste nível AA ou maior com o token $gray-800 e tons entre 500 e 800 tem contraste AA ou maior em relação ao token $white.

Barra azul com um gradiente de azul-100, mais claro, a azul-800, mais escuro.
Legenda com o texto ”AA contrastar com $ cinza-800”, na primeira metade da
barra, e ”AA contrastar com $ branco” na segunda metade da
barra.

theme color olist

Na cor do tema olist, todos os tons mais claros contrastam com os mais escuros da mesma família, possibilitando a criação de interfaces com cores diferentes.

Seis quadrados coloridos, um com cada theme color, e uma legenda interna
indicando o contraste de acordo com WCAG, AA e
AAA.