Pular para o conteúdo principal

Esquema de Cores​

Para o desenvolvimento do esquema de cores, foi criado um padrão escalável, adaptável a diferentes contextos e expansões futuras.

A imagem abaixo ilustra a estrutura:

Esquema de Cores

cuidado

Não altere o conteúdo textual da documentação de tokens!

Os textos descritivos (nome, valor, valor bruto e descrição) estão diretamente conectados ao plugin Token Studio.
Alterações devem ser feitas apenas pelo plugin, nunca manualmente na documentação.
Se a atualização não ocorrer automaticamente, reaplique os tokens pelo plugin.

Brand​

Primeira camada do esquema de cores.
Baseia-se na identidade visual da brand do produto.
Atualmente, o único produto é o OPALA, mas a estrutura foi planejada para suportar novas aplicações no futuro.

Base Colors​

Cores fundamentais de cada brand. Servem como fundamento para todas as demais cores utilizadas.

Theme​

Cada brand pode ter múltiplos temas.
Atualmente, o produto OPALA possui apenas o tema LIGHT, voltado para interfaces em modo claro.
No futuro, está prevista a adição do tema DARK.

Scheme​

Cores derivadas das primitivas, aplicadas em usos específicos:

  • Primárias
  • Semânticas
  • Visualização de dados

Dividem-se em:

  • Foregrounds
  • Backgrounds

Patterns​

Camada de cores destinada a estados de interação, como:
enabled, hover, selected, focus, disabled.

Essas cores são influenciadas pelo tema ativo e são as únicas recomendadas para uso em componentes.

Dividem-se em:

  • Contents
  • Backgrounds
cuidado

Use sempre as cores da camada Pattern!

As camadas anteriores são apenas estruturais.
Alterações feitas na camada Brand se propagam automaticamente até Pattern.
Por isso, apenas as cores de Pattern devem ser usadas em componentes e protótipos.

Opacity​

Valores padrão de opacidade podem ser aplicados ao nível mais externo de um componente, afetando todos os seus elementos.

  • Estados dragged e disabled já possuem opacidade definida na camada Base.
  • Outros estados podem variar conforme a camada Pattern.

Valores de Opacidade
Valores de Opacidade para Estados

Essa estrutura garante consistência visual, facilidade de manutenção e adaptabilidade do sistema de cores para diferentes necessidades de design.