Configurações de estilo

Cor do texto

Ponto-chave:
Define a cor principal do texto.

O que muda com essa configuração:
Melhora ou piora a legibilidade imediatamente.

Dica de ajuste:
Garanta contraste suficiente com o fundo (WCAG como referência).

Itens de configuração

• Cor
• Alpha
• Responsivo

Sombra do texto

Ponto-chave:
Reforça legibilidade em fundos com imagem/vídeo.

Dica de ajuste:
Comece leve (blur e alpha baixos) e aumente só quando necessário.

Itens de configuração

• Text Shadow (ON/OFF)
• Cor
• Blur
• Horizontal
• Vertical
• Responsivo

Borda

Ponto-chave:
Define contorno e percepção de clicabilidade.

Dica de ajuste:
1px costuma ser um bom ponto inicial.

Itens de configuração

• Border (ON/OFF)
• Cor + Alpha
• Width
• Style (solid/dashed/dotted)
• Box Sizing (border-box/content-box)
• Responsivo

Raio da borda

Ponto-chave:
Controla o arredondamento e o tom visual (mais rígido x mais suave).

Dica de ajuste:
Teste em torno de 20% a 35% da altura do botão.

Itens de configuração

• Usar configurações individuais
• Raio da borda (geral)
• Superior esquerdo / Superior direito / Inferior direito / Inferior esquerdo (individual)
• Unidade (px / % / em / rem)
• Responsivo

Sombra interna

Ponto-chave:
Cria sensação de profundidade “para dentro”.

Dica de ajuste:
Use com moderação para evitar aspecto datado.

Itens de configuração

• Sombra interna (ON/OFF)
• Cor
• Blur
• Horizontal
• Vertical
• Spread
• Responsivo

Sombra

Ponto-chave:
Destaca o botão do fundo e reforça hierarquia visual.

Dica de ajuste:
Em mobile, normalmente funciona melhor com intensidade menor.

Itens de configuração

• Shadow (ON/OFF)
• Cor + Alpha
• Blur
• Horizontal
• Vertical
• Spread
• Responsivo

Opacidade

Ponto-chave:
Controla a opacidade do elemento como um todo.

Dica de ajuste:
Se a leitura piorar, corrija primeiro contraste de texto/fundo antes de reduzir opacidade.

Itens de configuração

• Opacity
• Mix Blend Mode
• Responsivo

Transição

Ponto-chave:
Define a velocidade da mudança entre estado normal e hover.

Dica de ajuste:
Comece com 200-350ms e ajuste delay/easing apenas quando necessário.

Itens de configuração

• Duration (ms)
• Delay (ms)
• Easing
• Custom Value
• Reset

Observação:
Essa transição cobre as propriedades de estilo deste painel. Fundo e ícone podem ter transições próprias.