Predefinição do Site

Define as configurações gerais do site, incluindo aspectos como cores, tipografia, bordas arredondadas, família de ícones e outros elementos visuais essenciais. Essa etapa é fundamental para manter a consistência estética e de usabilidade em todo o projeto.

🔧 Configurações Gerais

1. Cores

• Cores do Tema:
  • Primaria: Cor padrão do tema, utilizada geralmente para fundos e elementos principais.
  • Secundária: Cor secundária, geralmente utilizada para destaques e elementos secundários, como botões e links, por exemplo.
  • Terciária: Cor terciária, utilizada para elementos complementares.
  • Cor de Fundo: Cor de fundo padrão do tema, utilizada para o fundo geral do site.
  • Cor da Fonte: Cor padrão do tema, utilizada para o texto geral do site.
• Cores complementares:
  • Cor de Sucesso: Cor utilizada para mensagens de sucesso ou confirmação (padrão verde).
  • Cor de Informação: Cor utilizada para mensagens informativas ou dicas (padrão azul).
  • Cor de Atenção: Cor utilizada para mensagens de atenção ou aviso (padrão laranja).
  • Cor de Erro: Cor utilizada para mensagens de erro ou alertas (padrão vermelha).
• Galeria: Painel para visualização e seleção de paletas de cores.

2. Tipografia

Configurações disponíveis para: Título 1, Título 2, Título 3, Título 4, Paragrafo e Legenda.

• Fonte: Escolha da fonte (ex: Sans Serif Collection).
• Tamanho, altura da linha, espaçamento entre letras: Ajustáveis por tipo de texto.
• Estilos de texto: Negrito, itálico, sublinhado, alinhamentos.
• Cor do texto: Cor padrão.

3. Arredondamento

Permite configurar o raio de bordas com opções visuais personalizadas.

• Raio de borda: Define o arredondamento das bordas dos elementos do site.
  • Nenhum: (0px)
  • Sutil: (4px)
  • Levemente: (8px)
  • Intenso: (12px)
  • Completo: (50px)
  • Personalizado
• Customização do Personalizado:

  Permite definir o raio de borda para cada lado do elemento, possibilitando um controle mais preciso sobre o arredondamento.

  • Todos os lados
  • Superior esquerdo
  • Superior direito
  • Inferior esquerdo
  • Inferior direito

4. Família de Ícones

Escolha da biblioteca de ícones utilizada no projeto (ex: Google Materials).

5. Edição Avançada

• CSS personalizado: Inserção de código para customizações visuais globais.
• Javascript personalizado: Inserção de scripts para funcionalidades adicionais.