Pular para o conteúdo principal

Introdução​


O Scheme Colors atribui significados específicos às cores da camada base, variando de acordo com o tema ativo (ex.: Light ou Dark).
Essa camada organiza as cores em dois grupos principais: Backgrounds e Foregrounds, aplicados a diferentes propósitos como superfícies, textos e ícones.

cuidado

As cores da camada Scheme não devem ser utilizadas diretamente.
Utilize sempre as cores da camada Pattern, que já aplicam os estados de interação adequados.


Background Scheme​

Os Background Schemes são adaptações das cores destinadas ao uso em superfícies (fundos).
Eles garantem consistência visual e acessibilidade em qualquer estado do componente.

As categorias principais são:

  • Surface: define superfícies da interface, como cartões, modais e painéis, criando hierarquia visual entre seções.
  • Semantics: transmite significado por meio da cor, como sucesso, erro ou alerta.
  • Dataviz: cores para representações visuais de dados, diferenciando conjuntos em gráficos e dashboards.

Foreground Scheme​

Os Foreground Schemes são adaptações das cores destinadas ao uso em elementos de primeiro plano (texto, ícones, bordas).
Eles garantem contraste e legibilidade em diferentes contextos.

As categorias principais são:

  • Neutral: cores neutras para hierarquia de texto.

    • Strong: destaque ou títulos.
    • Moderate: textos principais.
    • Muted: textos secundários ou desativados.
  • Semantics: cores que transmitem significado.

    • Primary: cor primária do sistema.
    • Success: estados positivos.
    • Warning: avisos e precauções.
    • Critical: erros ou estados negativos.
  • Dataviz: cores para visualização de dados.

    • Dataviz1 a Dataviz10: paleta variada para diferenciar múltiplos conjuntos de dados.

Além disso, cada conjunto possui duas versões:

  • Default: cor padrão do estado.
  • Inverse: variação para contextos escuros ou claros alternativos.