Santiago de Paula
Advocacia não vende entusiasmo. Vende confiança.
Uma proposta de primeira presença digital para um escritório de direito público e licitações, feita por iniciativa própria, como peça de prospecção. A direção é sobriedade com acabamento: quase preto, serifa editorial, fios de 1px e um único acento em bronze. É escuro porque o único ativo da marca é um logotipo branco, desenhado para fundo escuro. O conteúdo carrega o peso: a escada de sanções do art. 156 e perguntas diretas, com fonte para cada número.
- Direção de arte, identidade e front-end
- Site · Identidade · Conceito
Contexto
O que estava no ar
- Uma página "em desenvolvimento" no ar desde 2021 (cinco anos até esta peça)
- Template gratuito, com a paleta padrão do Bootstrap e nenhuma relação com o setor
- Nenhuma cor de marca encontrada na auditoria
- Um único ativo de marca: o logotipo branco, monocromático
Desafio
O site do escritório não era um site.
Era uma página "Aguarde! Site em Desenvolvimento", com rodapé de 2021, sobre a paleta padrão de um template Bootstrap. Não havia site a redesenhar: o trabalho era propor a primeira presença digital do escritório.
Pesquisa
- Os números de compras públicas do PNCP, no balanço de 2025.
- Prazos e sanções nos arts. 156, 164, 165 e 166 da Lei 14.133/2021.
- As regras de publicidade da advocacia no Provimento 205/2021 do CFOAB.
- Uma auditoria do site antigo: a página de "em desenvolvimento", a paleta de template e nenhuma cor de marca.
Decisões
A regra da OAB como argumento
- Advocacia tem regra de publicidade: o Provimento 205/2021 do CFOAB proíbe captação de clientela, promessa de resultado e depoimento.
- A página respeita cada linha e diz isso em voz alta: CTA neutro, nenhuma oferta e o provimento citado na própria página.
- Ficam de fora as provas de praxe de um site comercial: depoimento, número de casos, taxa de êxito.
- A restrição vira argumento de venda: mostra que quem fez entende o setor, não só design.
Cada número com fonte
- Autoridade em advocacia não se constrói com adjetivo; se constrói com citação verificável.
- Os números saem do PNCP de 2025 e dos arts. 156, 164, 165 e 166 da Lei 14.133/2021, e uma tabela registra a fonte de cada um.
- Nada de anos de experiência, foto de banco de imagem ou OAB fabricada, nem nomes que nenhuma fonte pública trazia.
- Nenhum número é estimativa, arredondamento livre ou dado de mercado sem origem.
Mobile com arquitetura própria
- Empilhado, o desktop vira um corredor na tela estreita.
- A ordem das seções muda, blocos explicativos colapsam em linhas de um toque, as perguntas viram sanfona e o menu vira painel de tela cheia.
- No toque, ficam de fora o cursor próprio, a paralaxe e a inércia: tudo isso só entra com mouse.
- Tudo sai do mesmo HTML, sem nenhuma linha de conteúdo duplicada.
Sem build e sem biblioteca
- Um protótipo tem que abrir em qualquer máquina, direto do arquivo, sem servidor.
- HTML, CSS e JavaScript puros: 2,6 KB de JavaScript na versão longa; a segunda versão cabe num arquivo único, com o logotipo embutido.
- As fontes vêm do Google: sem rede, a página cai para Georgia e Segoe UI.
- Abrir direto do arquivo e continuar íntegra, até sem rede.
Demonstração
A abertura: serifa editorial, e o bronze numa palavra só. 
Cada número tem fonte declarada: PNCP, balanço de 2025. 
A escada de sanções do art. 156. O filete cresce a cada degrau. 
O mobile tem arquitetura própria: não é o desktop empilhado. 
Cada área de atuação com o artigo de lei na margem. 
O prazo como eixo: atos distintos, o mesmo prazo, cada um com o seu artigo.
Conceito de prospecção, não encomendado. Não é o site oficial do escritório Santiago de Paula Advogados.
Interações
- Três animações, e só três: revelação por máscara, paralaxe de imagem no hover e sublinhado magnético.
- Cursor próprio e rolagem com inércia; com movimento reduzido, tudo isso sai e o cursor do sistema volta.
Implementação
- Duas versões: uma página comercial longa, feita para quebrar objeção enquanto o leitor desce, e uma em luxo silencioso, de oito blocos.
- QA visual com Playwright, em seis larguras de tela.
O que foi construído
- Identidade proposta: paleta e tipografia, a partir do logotipo existente
- Homepage em duas versões, que não se substituem
- PDF de apresentação do conceito
- Relatório de QA em seis larguras de tela
- Tabela com a fonte de cada dado citado
Tecnologia
- Cormorant Garamond
- Manrope
- HTML
- CSS
- JavaScript
- Playwright
Resultado
Conceito não encomendado, feito como peça de prospecção e mostrado aqui com o selo de conceito. Não é o site oficial do escritório.
2
versões da homepage: uma página comercial longa e uma em luxo silencioso
8
blocos na versão em luxo silencioso, um argumento por bloco
2,6 KB
de JavaScript na versão longa, sem nenhuma biblioteca
0
imagens geradas por IA
Aprendizados
- Restrição de setor não é obstáculo de design: dita em voz alta, ela mostra que quem fez entende o setor.
- Sem número de casos nem depoimento para mostrar, a citação verificável faz o papel da prova.
- Mobile não é o desktop empilhado: a mesma página pede outra ordem, outros gestos e menos efeito.
