Cores no Acronos Design System

No Acronos, as famílias de cores são projetadas para representar a marca de forma consistente, mantendo flexibilidade para adaptações em diferentes plataformas. As cores principais da marca podem variar dependendo da plataforma e das configurações de white label.

Categorias de cores principais da marca:

1. Brand (AChub):
   Usada para a identidade principal no AChub.

2. Orange (Exemplo):
   Cor que poderá ser definida para White Label.

3. Green (Acompanha):
   Aplicada em soluções que destacam sustentabilidade, sucesso ou validações.

Paleta de Cores

Orange (Exemplo)

• Uso principal:

  • Orange-500 (#ff9500): Cor hero para chamadas de ação (CTAs), alertas importantes ou ícones de destaque.

  • Orange-300 (#ffcc75): Destaque secundário para avisos leves ou elementos que requerem menor urgência.

Green (Acompanha)

• Uso principal:

  • Green-500 (#2feeb5): Cor hero em plataformas que priorizam sucesso, validações ou sustentabilidade.

  • Green-100 (#ecfdf8): Fundo para mensagens de sucesso ou áreas que reforcem uma sensação positiva.

Regras de Aplicação por Plataforma

1. Plataforma da Área Central (AChub)

• Cor principal: Brand-Origin (#c31a43).

• Cor secundária: Brand-900 (#360713) para elementos interativos e destaques.

• Regras de aplicação:

  • Usar a cor secundária em headers, botões principais e links.

  • Aplicar cores primárias para mensagens ou alertas específicos.

2. Acompanha

• Cor principal: Green-Brand (#10c28e).

• Cor secundária: Green-500 (#2feeb5) para CTAs e elementos interativos.

• Regras de aplicação:

  • Utilizar tons claros (Green-100) em fundos de dashboards ou áreas de análise.

  • Reservar tons escuros (Green-900) para textos ou ícones.

3. Plataformas Customizáveis (White Label)

• Cores configuráveis:
  As cores principais podem ser substituídas por paletas customizadas, desde que sigam as diretrizes abaixo:

  • Acessibilidade: Garantir contraste suficiente (WCAG 2.1).

  • Consistência: Manter as cores neutras como padrão de textos e fundos para preservar legibilidade.

  • Uso limitado das cores da marca: Para respeitar o branding do cliente.

• Cores obrigatórias em White Label:
  Certos elementos, como mensagens de erro ou validação, devem manter o padrão global:

  /* Erros */
  .error-message {
    color: var(--brand-origin); /* Padrão: #c31a43 */
  }
  
  /* Sucessos */
  .success-message {
    color: var(--green-500); /*
  
  

Orientações para Cores Neutras

As cores neutras são aplicadas para garantir a consistência visual e o foco na hierarquia das cores principais:

• Neutral-900: Usado para textos principais e ícones de maior relevância.

• Neutral-100: Ideal para fundos e contrastes leves.

Exemplo de Implementação Multiplataforma

/* AChub */
.achub-header {
  background-color: var(--brand-origin); /* Padrão: #c31a43 */
  color: var(--neutral-100); /* Padrão: #f8f9fa */
}

/* Acompanha */
.sustainable-cta {
  background-color: var(--green-brand); /* Padrão: #10c28e */
  color: var(--neutral-100);
}

/* White Label */
.white-label-alert {
  background-color: var(--orange-500); /*

Acessibilidade e Contraste

Sempre valide o contraste entre texto e fundo, garantindo que ele atenda às diretrizes WCAG. As ferramentas de design devem incluir testes automáticos para validar a acessibilidade.

Essa estrutura garante consistência para aplicações da Área Central, flexibilidade para plataformas alternativas e compatibilidade com white label. Caso precise de mais exemplos ou integração com componentes, posso complementar!