Modelo Código para advogado: grafite e dourado em tema escuro

Publicado originalmente em Tenhaseusite. Esta é uma cópia do artigo; leia e compartilhe o original.
Quem procura um advogado costuma estar diante de um problema e quer sentir segurança antes de ligar. Um site para advogado precisa transmitir seriedade, explicar as áreas de atuação em linguagem simples e facilitar o primeiro contato. É essa a proposta do modelo Código, o 2º de uma série de dez estilos criados para advogados e escritórios de advocacia.
Em poucas palavras, a descrição do modelo resume o clima: Grafite e dourado em tema escuro, elegante.



As imagens acima são capturas reais da demonstração do modelo, em tamanho de computador, tablet e celular. O site se adapta a cada tela, sem que você precise fazer nada.
Cores, fontes e formas
O fundo escuro (quase preto azulado) dá profundidade à página e coloca as cores de destaque em evidência. Os textos claros foram escolhidos para manter bom contraste e leitura confortável. O dourado (#c8a35a) guia o olhar para os botões e destaques, e o cinza entra como cor de apoio em selos, linhas e ícones.
Os títulos usam a fonte Manrope e o texto corrido usa Inter, ambas sem serifa e fáceis de ler em qualquer tela. Os elementos têm cantos quase retos, de visual firme e institucional. Os botões acompanham o mesmo arredondamento dos cartões. O rodapé recebe um desenho de grade de pontos sobre um fundo quase preto azulado, que fecha a página com personalidade.
A capa e o menu
O menu traz a marca à esquerda e os links de navegação à direita. Na capa, o texto ocupa um lado e a foto fica do outro, em uma capa dividida. Na demonstração, a capa apresenta o título “Seu direito defendido com clareza, estratégia e respeito”, com o botão “Falar com o escritório” e selos como “Atendimento online”, “Primeira conversa sem compromisso” e “Sigilo profissional”. Todos os textos e a foto podem ser trocados pelos seus no painel, sem código.
As seções do modelo
O modelo já vem com as seções que um site de advogado costuma pedir, na ordem em que o visitante as procura:
- Números: Faixa com números de credibilidade.
- Áreas de atuação: Cartões com as áreas do direito atendidas.
- Sobre: Foto, história e formação do profissional.
- Diferenciais: Por que escolher o escritório, em lista com ícones.
- Como funciona o atendimento: Linha do tempo do primeiro contato à solução.
- Casos e resultados: Casos ilustrativos em linhas numeradas.
- Equipe: Advogados e especialidades.
- Depoimentos: Cartões de depoimentos.
- Perguntas frequentes: Perguntas e respostas em sanfona (também gera dados estruturados).
- Artigos e orientações: Conteúdos informativos que ajudam no Google.
- Últimas notícias: Até 3 artigos do blog com o botão Veja mais (some se o site não tem artigos).
- Banner de destaque: Faixa com janelas de site sobrepostas, título, texto e botão (aparece só com título preenchido).
Contato e agendamento
O formulário aparece sem arredondamento, com visual reto e direto. O título é “Solicite uma orientação” e o botão de envio diz “Enviar”. Os campos pedem seu nome, WhatsApp, qual é a área do seu caso e conte um pouco, um por linha, para facilitar o preenchimento no celular. O botão flutuante de WhatsApp, o telefone, o e-mail e o mapa do Google completam o contato, e o site já traz o aviso de cookies e as políticas de privacidade.
Para quem combina
O visual escuro costuma agradar a quem quer transmitir sofisticação e personalidade. É uma boa escolha para advogados que atendem pessoas e empresas e precisam de um site direto ao ponto. A publicidade na advocacia segue o Código de Ética e Disciplina da OAB, que pede sobriedade: o conteúdo de exemplo é informativo e não promete resultado.
Versão de 5 páginas e como ter este modelo
Este modelo também existe em uma versão de cinco páginas (Início, Sobre, Áreas, Como funciona e Contato), usada no plano Essencial, com o mesmo visual. No visualizador do catálogo, basta alternar entre “Onepage” e “5 páginas” para comparar.
Abra a demonstração em tenhaseusite.com.br/modelos/advogado/modelo-2, veja o modelo funcionando e clique em Quero esse para ter o seu. Você escolhe, troca textos e fotos pelo painel e publica sem precisar de um programador.