Sem sombra e com raio que encaixa: o acabamento que separa site de estúdio de template
Duas regras de acabamento de card: traço translúcido no lugar da sombra e raio externo igual ao interno mais o recuo.
- Post
- 26 de out de 2026
- 3 min de leitura
Abra um site feito em template e um site de estúdio lado a lado. Muitas vezes a diferença não está na cor nem na fonte. Está no acabamento dos cards: a sombra embaixo, a borda, o canto arredondado. São detalhes que o visitante não sabe nomear, mas sente.
No meu Livro de Regras, duas regras cuidam disso. Elas são curtas e mudam o nível da página inteira.
Regra 1: nenhuma sombra
Nenhuma sombra, externa ou interna, e nenhum brilho ou efeito de luz. Em lugar nenhum, inclusive nos mockups.
A sombra foi o jeito clássico de dizer “isto está acima do fundo”. O problema é que ela suja a tela. No tema escuro, sombra quase não aparece e vira mancha. No claro, ela pesa e deixa a página com cara de painel antigo. E quando cada card tem uma sombra diferente, a página parece montada com peças de lugares diferentes.
No lugar da sombra entra um traço translúcido de 1px. Sobre o escuro, branco com pouca opacidade, por volta de 12%. Sobre o claro, preto por volta de 8%. É o contorno mais suave que existe: separa o card do fundo sem chamar atenção para si.
O card também fica quase da cor do fundo. Um degrau acima, não mais. Quem pede atenção é o conteúdo dentro dele, não a caixa.
Regra 2: raio concêntrico
Essa é a regra que mais gente erra sem perceber. Quando existe uma imagem dentro de um card, os dois têm canto arredondado. Se os dois usam o mesmo raio, a curva de dentro não acompanha a de fora. O espaço entre elas fica mais largo nos cantos do que nas laterais, e o card parece levemente torto.
A conta que resolve: raio externo igual ao raio interno mais o recuo.
No meu padrão, o card tem raio de 20px, a imagem fica recuada 8px da borda e tem raio de 12px. Doze mais oito dá vinte. As duas curvas ficam paralelas, e o recuo é igual em toda a volta.
O texto do card continua com o padding normal de 24px. Só a mídia encosta a 8px da borda. É isso que você vê nos cards de serviço do Studio Responsivo: título e apoio com respiro, tela do projeto quase encostada na borda, curvas que se acompanham.
Libere o resto da matéria
Você também recebe por e-mail o link desta matéria e a aula grátis do Conversão Visual.
Por que isso importa para vender
Ninguém vai comentar que o seu raio é concêntrico. Mas o visitante julga a qualidade do que você vende pela qualidade do que vê. Uma página com acabamento limpo passa cuidado. Uma página com sombra borrada e canto desencontrado passa pressa.
E isso pesa mais agora, quando qualquer pessoa gera uma página com IA em minutos. O que a IA entrega por padrão costuma vir com sombra, brilho e o mesmo raio em tudo. O acabamento é uma das formas mais baratas de sair dessa média.
Como aplicar no seu site
Abra a página e confira os cards:
- Tem alguma sombra? Troque por um traço translúcido de 1px.
- O card está muito mais claro que o fundo? Aproxime um degrau.
- Tem imagem dentro do card? Confira se o raio de fora é o de dentro mais o recuo.
- Os raios saem de uma escala fechada? Use poucos valores e repita.
Se você usa IA para gerar a página, escreva essas regras no arquivo que ela lê antes de começar: sem sombra, traço de 1px, card 20, recuo 8, mídia 12. Ela segue com precisão quando a regra está escrita.
Detalhe também é decisão
Página que vende é soma de decisões pequenas tomadas de propósito. O acabamento é uma delas.
No Conversão Visual eu ensino essas decisões, do título da primeira tela ao canto do card, e como passar cada uma para a IA executar. A aula grátis mostra o processo completo, com uma página real indo para o ar.
