Negócio

Design system é um conjunto de decisões tomadas uma vez e reaproveitadas: cores, espaçamentos, tamanhos de fonte, raios de borda, sombras. Você já faz isso quando escreve um bloco :root — a diferença é tratá-lo como sistema, não como lista de cores.

:root {
  /* cor: por papel, não por aparência */
  --cor-fundo:     #0B0B0B;
  --cor-superficie:#161616;
  --cor-texto:     #F9F8F6;
  --cor-marca:     #7A1C30;

  /* espaço: escala fixa, sem valores avulsos */
  --e-1: 4px;   --e-2: 8px;   --e-3: 16px;
  --e-4: 24px;  --e-5: 40px;  --e-6: 64px;

  /* texto: escala, não números soltos */
  --t-pequeno: 14px;
  --t-corpo:   17px;
  --t-titulo:  clamp(28px, 4vw, 44px);

  --raio: 6px;
}

O detalhe que faz diferença é nomear por papel e não por aparência. --cor-marca continua fazendo sentido quando o cliente troca de vermelho para verde; --vermelho vira mentira no mesmo dia.

Em vez de escolher tamanhos no olho, você parte de um tamanho base e multiplica por uma razão constante. O resultado tem hierarquia clara porque os saltos são proporcionais.

Três regras que resolvem a maior parte

• Largura de linha entre 60 e 75 caracteres. Use max-width: 65ch. Linha longa demais cansa; curta demais pica a leitura.
• Altura de linha maior no texto pequeno. Corpo em 1,5 a 1,6; títulos grandes em 1,1 a 1,2. Título com altura de corpo parece frouxo.
• Menos pesos, mais contraste. Dois pesos bem diferentes (400 e 700) leem melhor que quatro parecidos.

Contraste não é questão de gosto: é número. A relação entre a cor do texto e a do fundo tem valor medido, e existe mínimo.

Ferramentas: o próprio DevTools mostra a relação ao inspecionar um texto; fora dele, o WebAIM Contrast Checker resolve em segundos.

Montando uma paleta a partir da marca

1. Uma cor de marca. Vem do cliente. Use com parcimônia — botão principal, links, detalhes.
2. Neutros com viés. Cinza puro parece descuido. Um cinza levemente puxado para o matiz da marca parece escolhido.
3. Cores de estado. Erro, sucesso e aviso são separados da cor da marca — verde de sucesso não deveria ser a cor do botão.
4. Teste os dois temas. Uma cor que funciona no claro pode sumir no escuro.

Numa landing page, o texto converte mais que o layout. E quase sempre é a parte que ninguém trata com cuidado.

A estrutura que funciona na maioria dos casos

1. O que é — em uma frase, sem rodeio
2. Para quem — a pessoa precisa se reconhecer
3. Prova — foto, número, depoimento real
4. Objeções — as três dúvidas que travam a decisão
5. Ação — uma só, repetida ao longo da página

Mostrar duas versões para públicos diferentes e comparar qual converte mais. Substitui opinião por dado — inclusive a sua.

A parte que costuma dar mais retorno que qualquer tecnologia nova — e a que quase ninguém estuda.

Escopo: o que trava projeto não é código

O padrão que mais atrasa entrega é o cliente não mandar o material. Deixe explícito desde o começo o que você precisa dele — fotos, textos, logo, número, CNPJ — e que o prazo começa a contar quando isso chegar. Aquela lista de itens [PREENCHER] que você já monta é exatamente esse documento.

Rodadas de revisão

“Ajustes ilimitados” é o que transforma um projeto de duas semanas em quatro meses. Duas ou três rodadas incluídas, e as seguintes cobradas à parte — dito na proposta, não descoberto no meio.

Preço por valor, não por hora

Cobrar por hora pune você por ficar mais rápido. À medida que você acumula componentes prontos e entrega em um dia o que antes levava uma semana, a cobrança por hora derruba seu preço justamente quando sua competência sobe.

Depois da entrega

Toda seção deve responder, em meio segundo, à pergunta "para onde eu olho primeiro?". Quando tudo tem o mesmo peso, a resposta é "para lugar nenhum" — e a pessoa rola.

Você cria hierarquia com quatro ferramentas, em ordem de força:

Espaçamento escolhido no olho — 13px aqui, 27px ali — é o que faz uma página parecer amadora sem que ninguém saiba dizer por quê. A solução é não escolher: use uma escala.

:root {
  --e1: 4px;    --e2: 8px;    --e3: 12px;   --e4: 16px;
  --e5: 24px;   --e6: 32px;   --e7: 48px;   --e8: 64px;
  --e9: 96px;   --e10: 128px;
}

.card    { padding: var(--e5); }
.card h3 { margin-bottom: var(--e3); }
.secao   { padding-block: clamp(var(--e7), 8vw, var(--e10)); }

Duas regras que mudam o resultado imediatamente:

Espaço entre seções é muito maior do que você imagina. 96 a 128px no desktop. Página apertada parece panfleto; página respirada parece cara. Se está na dúvida, aumente.

Proximidade indica relação. O título fica colado no texto dele e longe do parágrafo anterior. Se o espaço acima e abaixo do título for igual, o leitor não sabe a que ele pertence.

O vocabulário do designer tem correspondência exata no CSS. Saber qual é qual evita que "aumenta o espaço entre as letras" vire mudança na entrelinha.

A altura-x é o que decide o tamanho aparente. Duas fontes com o mesmo font-size podem parecer de tamanhos diferentes, porque o que o olho mede é a minúscula. Fonte de altura-x grande lê melhor em tamanho pequeno; ao combinar duas famílias, alturas-x parecidas fazem título e corpo conversarem.

O uso prático no código é o font-size-adjust: ele faz a fonte de reserva ocupar o mesmo tamanho aparente da fonte da web enquanto ela carrega — o texto não "pula" quando a fonte chega.

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size-adjust: 0.55;   /* exemplo: a altura-x da SUA fonte — a ferramenta de Tipografia mede */
}
.rotulo {
  text-transform: uppercase;
  letter-spacing: 0.08em;   /* caixa alta pede tracking positivo */
}
h1 { letter-spacing: -0.02em; }   /* título grande pede o contrário */

A classe da fonte diz para que ela foi desenhada. Usar fora do trabalho dela é o que faz a página parecer improvisada.

Pesos têm nome e número. 100 Thin, 200 Extra Light, 300 Light, 400 Regular, 500 Medium, 600 Semibold, 700 Bold, 800 Extra Bold, 900 Black. Nem toda família tem todos — e aí mora um erro comum: pedir font-weight: 700 de uma fonte que você não baixou em 700 faz o navegador engordar o 400 na marra. É o negrito falso, borrado e largo demais.

body {
  font-synthesis-weight: none;   /* sem negrito falso: se o peso não foi baixado, aparece o erro */
}

Os detalhes que o designer nota e o cliente sente sem saber o nome. Quase todos custam uma linha de CSS.

p        { text-align: left; text-wrap: pretty; }   /* evita a palavra sozinha na última linha */
h1, h2   { text-wrap: balance; }                    /* linhas de tamanho parecido no título */
.rotulo  { text-transform: uppercase; letter-spacing: .08em; }
.sigla   { font-variant-caps: all-small-caps; letter-spacing: .04em; }  /* PIX, CNPJ, LGPD sem gritar */
.preco   { font-variant-numeric: tabular-nums; }    /* todo algarismo com a mesma largura */
.justificado { text-align: justify; hyphens: auto; } /* só com <html lang="pt-BR"> certo */

A estrutura que resolve praticamente qualquer site de serviço tem cinco papéis — não cinco cores bonitas, cinco funções.

:root {
  --fundo:     #FFFCF7;   /* nunca branco puro: #FFF cansa e achata */
  --superficie:#FFFFFF;   /* card, caixa — separa do fundo por contraste sutil */
  --texto:     #3F444D;   /* nunca preto puro: #000 vibra sobre branco */
  --texto-fraco:#6B7280;  /* legenda, apoio — ainda com 4.5:1 */
  --destaque:  #305546;   /* UMA cor: botão, link, ícone ativo */
  --linha:     #E6E2DA;   /* divisórias */
}

Uma cor de destaque, usada com avareza. Se a cor do CTA aparece em dez lugares, ela deixa de significar "clique aqui". O botão principal é o único elemento com fundo sólido na cor de destaque da seção.

Proporção 60-30-10: 60% neutro de fundo, 30% da cor de superfície e texto, 10% de destaque. Site em que a cor da marca cobre metade da tela parece embalagem, não página de serviço.

Olhar referência é obrigatório e não tem nada de vergonhoso — a questão é o que você extrai dela.

O que se copia: decisões estruturais e proporções. "A hero ocupa 80% da tela com uma foto só e três palavras", "os serviços são três cards com ícone acima do título", "o espaço entre seções é enorme". Isso é gramática visual, é de todo mundo.

O que não se copia: o layout inteiro com as cores trocadas, a ilustração, a foto, o texto, o código-fonte. Além do problema de direito autoral, tem o problema prático: o cliente dele e o seu não são iguais, e a página que funciona lá pode não funcionar aqui.

Isso conversa direto com a trilha Trabalhando com IA: quando você passa referência para uma IA, a mesma distinção vale. Descrever a estrutura produz uma página sua; mandar a captura de tela e pedir "faça igual" produz uma cópia com outros textos.

1. Texto sobre foto sem escurecer. Fica legível na sua tela e some na do cliente. Sempre um gradiente por cima, sempre contraste medido.

2. Centralizar tudo. Título centralizado funciona; parágrafo de cinco linhas centralizado obriga o olho a procurar o início de cada linha. Texto corrido é alinhado à esquerda.

3. Botão que não parece botão. Contorno fino, cor clara, sem preenchimento — o visitante não reconhece como clicável. O CTA principal é sólido, com contraste alto e área de toque de pelo menos 44px de altura.

4. Seções todas iguais. Oito blocos com o mesmo fundo, o mesmo espaçamento e o mesmo formato viram uma parede. Alterne: fundo neutro, fundo de superfície, uma seção com foto larga. A variação dá ritmo e marca o avanço da leitura.

5. Nenhum ponto de descanso. Informação densa do começo ao fim cansa. Uma frase grande sozinha no meio da página, com muito espaço em volta, funciona como respiro — e é onde o olho pousa quando a pessoa está rolando rápido.

A pergunta que convence qualquer um — cliente ou você mesmo — de que precisa de um design system: quantos cinzas diferentes existem nesta página? Quantos tamanhos de botão? Contar o que já existe antes de decidir é o inventário de interface, e é o primeiro passo de todo sistema. O resultado quase sempre assusta.

1. Junte todo o CSS do site — o seu, o do site antigo do cliente ou o do concorrente.
2. Conte os valores distintos de cor, tamanho de fonte, espaçamento, raio e sombra.
3. Agrupe os quase iguais: #333 e #343434 são o mesmo cinza escolhido duas vezes.
4. Escolha um representante de cada grupo. Essa lista curta já é a primeira camada de tokens.

No Chrome, o painel CSS Overview do DevTools (em Mais ferramentas) faz uma contagem parecida na página aberta. Para o CSS que você tem em mãos, a ferramenta Design system conta, mostra quantas vezes cada valor aparece e marca os parecidos e o que está fora da escala.

Nomear por papel e não por aparência é a camada do meio. Os sistemas grandes — Material, Carbon, Atlassian — separam em três, e o motivo aparece no dia em que o site ganha modo escuro.

:root {
  /* 1. primitivos: a lista de ingredientes */
  --vinho-700: #7A1C30;   --vinho-300: #D9869A;
  --areia-50:  #FFFCF7;   --grafite-900: #16181C;

  /* 2. semânticos: o papel de cada um */
  --cor-fundo:    var(--areia-50);
  --cor-texto:    var(--grafite-900);
  --cor-destaque: var(--vinho-700);

  /* 3. componente: só onde precisa ser diferente */
  --botao-fundo:  var(--cor-destaque);
}

[data-tema="escuro"] {
  --cor-fundo:    var(--grafite-900);
  --cor-texto:    var(--areia-50);
  --cor-destaque: var(--vinho-300);   /* o vinho escuro some no fundo escuro */
}

No modo escuro, só a camada semântica muda. Primitivos e componentes ficam intactos, e nenhum seletor de componente precisa saber que existe tema. É o mesmo modelo das Variáveis do Figma com modos — por isso tokens escritos assim passam de um lado para o outro sem tradução (Variáveis do Figma).

O atomic design, proposto por Brad Frost, dá nome às peças para designer e dev falarem da mesma coisa. Cada nível é montado com os de baixo.

Cada peça interativa tem estados, e todos precisam estar decididos: normal, hover, foco, pressionado e desabilitado — e o campo ganha o de erro. Estado que ninguém desenhou é estado que o dev inventa na hora, diferente em cada tela.

.botao               { background: var(--botao-fundo); color: var(--botao-texto);
                       border-radius: var(--raio); transition: background var(--dur); }
.botao:hover         { background: var(--botao-fundo-hover); }
.botao:focus-visible { outline: 2px solid var(--cor-foco); outline-offset: 2px; }
.botao:active        { transform: translateY(1px); }
.botao:disabled      { opacity: .5; cursor: not-allowed; }

.botao--secundario   { background: transparent; color: var(--cor-destaque-texto);
                       box-shadow: inset 0 0 0 1px currentColor; }

Projeto termina; sistema tem versão. Se o botão muda e ninguém registra, alguém trabalha o dia inteiro em cima do componente antigo — e quem entra no projeto depois não tem onde conferir qual é o certo.

Na escala de um freelancer, a documentação mínima tem três partes:

• Os tokens, com amostra: cada cor com o papel dela, a escala de texto e a de espaço.
• Cada componente com seus estados, e uma linha de quando usar e quando não usar.
• O registro de mudanças: data, o que mudou, o que quebra.

Não precisa de ferramenta especial. Uma página /sistema.html dentro do próprio projeto, com os componentes reais renderizados pelo mesmo CSS do site, é mais confiável que um PDF: ela não fica desatualizada, porque é o próprio código. O Storybook faz isso em escala para projetos em React, Vue ou Angular. O importante é que todo mundo do projeto tenha acesso.

A LGPD (13.709/2018) trata de dado pessoal: qualquer informação que identifique alguém. Nome, e-mail, telefone, IP, identificador de navegação. Para um site de serviço local, ela se resume a quatro obrigações práticas.

Uma landing page "simples" quase sempre já está coletando mais do que o dono imagina:

O banner só com "OK" que carrega os rastreadores antes de você clicar não cumpre nada — e é o mais comum no Brasil. O mínimo defensável tem três características: não carrega nada antes do aceite, recusar é tão fácil quanto aceitar, e a escolha fica registrada.

// 1. nada de analytics até haver decisão
function carregarAnalytics() {
  const s = document.createElement('script');
  s.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXX';
  s.async = true;
  document.head.appendChild(s);
}

// 2. respeita a decisão anterior
let escolha = null;
try { escolha = localStorage.getItem('lgpd'); } catch {}

if (escolha === 'aceito') carregarAnalytics();
else if (escolha === null) document.querySelector('#aviso').hidden = false;

// 3. os dois botões têm o mesmo peso visual
aceitar.onclick = () => { guardar('aceito'); carregarAnalytics(); };
recusar.onclick = () => { guardar('recusado'); };

function guardar(v) {
  try { localStorage.setItem('lgpd', v); } catch {}
  document.querySelector('#aviso').hidden = true;
}

Não precisa de advogado para um site de serviço local com formulário de contato, mas precisa ser verdadeira — política copiada de outro site descreve coleta que não acontece e omite a que acontece.

1. Quem somos            nome da empresa, CNPJ, endereço, e-mail de contato
2. Que dados coletamos   nome, telefone, e-mail (formulário)
                         dados de navegação (Analytics, pixel)
3. Para que              responder solicitação de orçamento; medir audiência
4. Com quem compartilhamos  Google (Analytics), Meta (pixel), provedor de e-mail
5. Por quanto tempo      ex.: contatos por 24 meses; navegação por 14 meses
6. Seus direitos         acesso, correção, exclusão, revogação — por este e-mail
7. Cookies               quais, para quê, como recusar
8. Data da última atualização

Deixe a política e um link para ela no rodapé de todas as páginas, junto com o aviso de cookies. É o lugar onde as pessoas procuram — e onde o buscador espera encontrar.

Deixe explícito no orçamento, porque a ausência dessa linha é o que gera cobrança injusta depois.

Registrar o domínio no seu CPF "para facilitar" parece gentileza e é a origem do pior tipo de conflito que existe nesse ofício. O domínio é o ativo do negócio dele — o endereço que está no cartão, no Google, nos anúncios.

Um documento por cliente, entregue junto com o site. Sem senha escrita nele — só o mapa de onde está cada coisa e em nome de quem.

# Acessos — Vanessa Carvalho Arquitetura

| Serviço                  | Titular            | Onde                  |
|--------------------------|--------------------|-----------------------|
| Domínio                  | Vanessa (CNPJ)     | registro.br           |
| Hospedagem               | Vanessa            | Vercel                |
| Repositório do código    | Gustavo (colab.)   | GitHub                |
| Google Analytics         | Vanessa            | conta Google dela     |
| Perfil da Empresa Google | Vanessa            | conta Google dela     |
| E-mail profissional      | Vanessa            | Google Workspace      |

Senhas: gerenciador do cliente. Nenhuma senha neste arquivo.
Acesso do Gustavo: como colaborador convidado, revogável a qualquer momento.
Atualizado em: 18/09/2026

Nunca por WhatsApp, e-mail ou bloco de notas. Conversa de WhatsApp fica no aparelho dos dois, no backup da nuvem, e às vezes no computador do escritório que outras pessoas usam.

Para site estático, backup é mais simples do que parece — e é justamente por parecer simples que ninguém faz.

Se o cliente some sem pagar: não derrube o site publicado e não apague nada. Isso é dano, e transforma uma cobrança legítima em uma disputa em que você está errado. O que se faz é suspender o trabalho novo, comunicar por escrito, e cobrar pelos meios normais. O combinado no contrato sobre parcelas e entrega é o que vale — e é por isso que ele existe.

Se você precisa sair do projeto: entregue o inventário de acessos atualizado, transfira o repositório ou garanta que o cliente tem acesso de dono, avise com prazo, e deixe um README explicando como o site é atualizado. Cliente abandonado com um site que ninguém consegue mexer é o que faz o mercado inteiro desconfiar de freelancer.

Depois que o site está no ar, você nunca mais mexe direto nele. A regra passa a ser: toda mudança nasce num branch, vira uma URL de pré-visualização, é aprovada ali, e só então entra em produção.

git switch -c promocao-outubro
# ... faz a alteração ...
git push -u origin promocao-outubro
# a Vercel publica em promocao-outubro-nomedosite.vercel.app
# cliente aprova nesse link

git switch main && git merge promocao-outubro && git push
# agora sim está no ar

Sem um canal definido, os pedidos chegam por áudio de WhatsApp no sábado, se perdem, e ninguém lembra o que foi combinado. Defina no início:

A frase "dá uma mexidinha rápida" é o começo de 90% do trabalho não pago desse ofício. A defesa não é dizer não — é ter definido antes o que é ajuste e o que é serviço novo.

É o que transforma projeto pontual em receita previsível, e é mais fácil de vender depois de uma entrega boa do que no primeiro orçamento.

O que colocar num pacote mensal de site de serviço local, que justifica o valor e dá pouco trabalho:

· Hospedagem e certificado ativos
· Até 2 alterações pequenas por mês
· Verificação mensal: site no ar, formulário chegando, Lighthouse
· Relatório curto: visitas, de onde vieram, quantos cliques no WhatsApp
· Backup e atualização do que precisar
· Atendimento prioritário se sair do ar

"Hospedagem R$ 60/mês" é a linha mais comum nas tabelas de preço de quem faz site — e a que mais esconde problema. Se o site está num plano gratuito, o cliente paga todo mês por algo que custa zero. E, dependendo do plano, a hospedagem nem permite o uso: os termos da Vercel restringem o plano gratuito a uso pessoal e não comercial, e listam como comercial, com essas palavras, receber pagamento para criar, atualizar ou hospedar o site.

A saída honesta tem duas partes. A hospedagem fica na conta e no nome do cliente (como o domínio), num plano que aceita uso comercial; se ela custar algo, o custo aparece como custo, no cartão dele. E a mensalidade que você cobra passa a se chamar pelo que é: manutenção — o trabalho que você faz todo mês.

Ordem de diagnóstico, do mais provável para o menos — e quase sempre para no terceiro item.

Todo projeto termina — por conclusão, por o cliente parar de investir, ou porque ele achou alguém mais barato. Como você sai define se ele volta e se ele te indica.

Entregue o pacote de encerramento: o código (ou a transferência do repositório), o inventário de acessos atualizado, as fontes e imagens originais, e um documento curto explicando como o site é publicado. Isso leva meia hora e é o que separa profissional de refém.

Peça o depoimento na hora certa — logo depois da entrega aprovada, quando a satisfação está no pico, não seis meses depois. E peça específico: "o que mudou no seu contato de cliente desde que o site entrou no ar?" gera um depoimento útil; "pode escrever algo sobre meu trabalho?" gera "excelente profissional, recomendo".

O problema do começo é circular: ninguém contrata sem portfólio e não dá para ter portfólio sem contrato. Quatro saídas reais:

Refaça um site que existe. Escolha um negócio da sua cidade com site ruim, refaça a página inicial e apresente como estudo. Deixe claro que é um exercício não solicitado — e você tem, ao mesmo tempo, peça de portfólio e abordagem de prospecção.

Crie negócios fictícios plausíveis. Uma pizzaria, uma clínica, um estúdio de pilates. Sem nome de empresa real, sem depoimento inventado. Vale como demonstração de capacidade técnica e de repertório visual.

Faça um ou dois abaixo do preço, com contrapartida. Não de graça — de graça é desvalorizado e o cliente não se compromete. Preço reduzido em troca de depoimento, autorização de uso no portfólio e indicação.

Mostre o processo, não só o resultado. Três páginas parecidas convencem menos que uma com o raciocínio: qual era o problema, o que você decidiu e por quê, o que mudou. É justamente o que este site inteiro é.

Quem conduz a reunião controla o escopo. Se o cliente conduz, você sai com uma lista de funcionalidades; se você conduz, sai com um problema a resolver e um orçamento coerente.

1. O que você vende, e para quem?
2. Como seu cliente te encontra hoje?
3. Quantos contatos você recebe por semana? De onde vêm?
4. O que faz alguém escolher você em vez do concorrente?
5. Qual a pergunta que todo cliente faz antes de fechar?
6. Qual o ticket médio? Qual serviço você QUER vender mais?
7. Tem fotos próprias? Logo em vetor?
8. Quem responde o WhatsApp, e em quanto tempo?
9. O que você acha que o site precisa ter? (deixe por último, de propósito)
10. Quando precisa estar no ar, e por quê?

O detalhamento dessa conversa está na trilha Landing pages, na parte de descoberta. Aqui o ponto é comercial: essa reunião é parte do serviço, e é o que justifica seu preço estar acima do concorrente que só pergunta quantas páginas.

Proposta não é lista de tarefas com um preço no fim. Ela precisa mostrar que você entendeu o problema antes de mostrar o que vai fazer.

1. O que eu entendi          devolva o problema com as palavras DELE
2. O que proponho            a solução, em uma frase
3. O que está incluído       lista objetiva, incluindo o intangível
                             (briefing, copy, acessibilidade, SEO, LGPD)
4. O que não está incluído   a lista que evita mal-entendido
5. Prazo e etapas            com o que depende dele (fotos, textos, aprovação)
6. Investimento              valor, forma de pagamento, entrada
7. Garantias                 o que ele confere sozinho — prazo, nota, propriedade
8. Depois da entrega         rodadas de ajuste, manutenção opcional
9. Validade da proposta      15 dias

"Qualidade garantida" e "satisfação garantida" não garantem nada: ninguém consegue cobrar. Garantia que vende é a que o cliente consegue conferir sozinho, com data ou número, e que diz o que acontece se você não cumprir.

Como escrever sem virar armadilha

• Prazo conta a partir do que depende dele. Sem essa linha, as fotos que chegam em três semanas viram atraso seu. Multa ou desconto por atraso só é justo se a cláusula for de mão dupla: atrasou o material, o prazo anda junto
• Nota do Lighthouse varia a cada rodada e depende do que o cliente sobe depois. Prometa a nota no dia da entrega, com as imagens que você otimizou, e guarde o print com data — Lighthouse explica de onde a nota vem
• "Erro" precisa de definição: algo que funcionava como combinado e parou, ou nunca funcionou. Mudança de texto, seção nova e "e se ficasse azul" são pedido novo — a linha entre os dois está em O que está e o que não está incluído
• Nunca garanta o que depende de terceiros: posição no Google, número de clientes, aprovação de anúncio. Você controla o site, não o algoritmo nem o mercado

A conta que sustenta qualquer um dos três: descubra seu custo real por hora trabalhada — despesas mensais divididas pelas horas que você de fato consegue faturar (que nunca são 8 por dia; some briefing, proposta, cobrança, estudo). Esse número é seu piso absoluto. Preço abaixo dele é prejuízo com trabalho junto.

Baixar o preço mantendo o escopo ensina ao cliente que seu preço era inflado e que sempre dá para pedir mais. A regra é uma só: desconto sempre vem com redução de escopo ou ganho de contrapartida.

"De R$ 7.500 por R$ 2.550, só até dia 30" funciona — e é por isso que é tão abusado. A pergunta que separa a oferta da enganação é uma só: o preço de cima já foi cobrado de alguém, e o prazo acaba mesmo?

O Código de Defesa do Consumidor proíbe a publicidade enganosa, e o artigo 37 inclui expressamente a que induz a erro sobre o preço. Fora a lei, tem o cliente: quem descobre que o "desconto de 66%" é permanente passa a desconfiar de todo o resto da página — inclusive das garantias. Isto é orientação prática, não parecer jurídico.

Quando a promoção é real, o HTML tem as tags certas: <del> para o preço que saiu e <ins> para o que entrou. Como leitores de tela nem sempre anunciam o risco, o "de" e o "por" vão escritos, escondidos só da tela:

<p class="preco">
  <span class="so-leitor">De</span> <del>R$ 3.000</del>
  <span class="so-leitor">por</span> <ins>R$ 2.400</ins>
</p>
<p class="preco__condicao">
  Preço de lançamento até <time datetime="2026-10-31">31 de outubro</time>. Depois, R$ 3.000.
</p>

Reconhecer cedo economiza meses. Nenhum destes é impeditivo sozinho — dois ou três juntos, pense bem.