Efeitos no Acronos Design System

Os efeitos de sombra no Acronos foram projetados para adicionar profundidade e hierarquia visual aos elementos da interface, promovendo uma experiência limpa e acessível.

Regras Gerais

1. Consistência: Utilize sombras definidas exclusivamente pela biblioteca para garantir uniformidade.

2. Acessibilidade: Evite sombras muito sutis em fundos de baixo contraste para preservar a legibilidade.

3. Hierarquia: As sombras refletem diferentes camadas de profundidade:

   • Sombra 1: Para elementos principais ou destacados.

   • Sombra 2: Para elementos secundários ou em superfícies claras.

Sombra 1

• Descrição:
  Uma sombra mais densa e visível, ideal para destacar elementos importantes, como modais, botões principais ou componentes flutuantes.

• Exemplo de uso:

  • Modais e caixas de diálogo:

  • Botões principais com destaque:

Sombra 2

• Descrição:
  Uma sombra mais sutil e leve, usada em cartões, menus suspensos, ou componentes que demandam menos destaque visual.

• Exemplo de uso:

  • Cartões e listas:

  • Menus suspensos:

Diretrizes de Aplicação

Plataformas Área Central (Padrão):

• Utilize Sombra 1 para elementos de interação principal (ex.: botões CTAs).

• Utilize Sombra 2 para elementos de contexto secundário (ex.: dropdowns, cards).

Plataformas de Sustentabilidade:

• Prefira Sombra 2 para compor interfaces leves e amigáveis.

• Limite o uso de Sombra 1 a elementos de ação direta.

White Label:

• As sombras permanecem consistentes e não devem ser customizadas, para manter a coerência visual do sistema em diferentes marcas.

Exemplo de Implementação Multiplataforma

/* Botão primário com sombra 1 */
.primary-button {
  background-color: var(--brand-origin); /* Cor principal */
  color: var(--neutral-100); /* Texto claro */
  box-shadow: var(--shadow-1);
}

/* Card básico com sombra 2 */
.card {
  background-color: var(--neutral-100); /* Fundo claro */
  box-shadow: var(--shadow-2);
  border-radius: 8px; /*

Notas Importantes

1. Performance: As sombras foram otimizadas para evitar impactos negativos em dispositivos de baixa performance.

2. Teste de contraste: Certifique-se de que o elemento sombreado mantém boa visibilidade em fundos escuros ou claros.

3. Interatividade: Em elementos clicáveis (ex.: botões), as sombras podem ser animadas para reforçar a interação, como ao passar o cursor ou pressionar.

Essa estrutura cobre as necessidades gerais e prepara o terreno para escalabilidade com personalizações mínimas! Caso precise de mais níveis de sombra ou especificações, posso complementar. 😊