Antes de desenhar um site, olhe quinhentos.
Um site parece feito por IA quando nasce sem referência: a média de tudo que existe. Este mostruário junta sites premiados, as cores certas para cada tipo de negócio e as fontes que fogem do padrão, para cada projeto começar por algo real.
Cada faixa é uma paleta de um ramo, da pizzaria ao dashboard. Passe o mouse ou clique para ver.
Referências que já ganharam prêmio
Sites tirados das galerias de curadoria, com as fontes e as cores lidas do próprio código. Abra, compare e roube o princípio, nunca o layout inteiro.
Cores que puxam o clique
A cor e o texto do botão principal de cada site, lidos na primeira tela. Cada faixa é um botão de verdade: passe o mouse para ver o código, clique para abrir o site. Junto, o que a pesquisa diz sobre a cor.
As palavras que mais aparecem nos botões
O que segura o dedo no vídeo
Vídeos curtos assistidos de verdade: Reels do Instagram e os Shorts mais vistos do YouTube. De cada um, os três primeiros segundos, a primeira frase, quantos cortes por segundo e as cores. Os mais vistos comparados com os menos vistos.
A cor certa para cada balcão
Três paletas por ramo, com o papel de cada cor e o contraste calculado pela regra WCAG. Texto precisa de 4,5:1; o que fica abaixo disso só serve de enfeite.
Vermelho
Chama atenção e urgência. A ideia de que dá fome é mito: em teste, prato vermelho fez as pessoas comerem menos. Genschow 2012
Azul
Confiança e calma. Fundo azul faz a espera de um site parecer mais curta. Gorn 2004
Verde
Natureza e saúde. Em clínica, o verde escuro foge do azul de sempre sem perder a seriedade. Labrecque e Milne 2012
Dourado e bronze
Sobre fundo escuro, passa preço alto. Funciona só como acento: dourado em texto quase sempre reprova no contraste.
Rosa e nude
Cuidado e beleza. Rosa choque bem usado diferencia, como numa clínica veterinária premiada.
Verde e amarelo juntos
No Brasil, ganharam leitura política desde 2018. Evite a dupla em marca que quer falar com todo mundo.
Pares de fontes que não são Inter
Todas grátis para uso comercial. Cada par tem um parente pago nos sites premiados; aqui está a versão que cabe no orçamento de um negócio de bairro.
Um painel que responde perguntas
Quatro números no topo, um gráfico grande, um ranking em barras e a tabela do dia. Clique num número para trocar o gráfico; troque o tema e o período.
Forno da Praça
Últimos 30 dias, comparado aos 30 anteriores
Sabores que mais saem
Pedidos no período
Pedidos de hoje
Atualiza a cada pedido novo
| Pedido | Bairro | Itens | Situação | Valor |
|---|
Pizzaria e números fictícios, criados para o exemplo.
A mesma floricultura, duas vezes
À esquerda, o que sai quando se pede só "faz um site bonito". À direita, o mesmo pedido depois de escolher referências, paleta e fontes.
O método, em cinco passos
É o processo que as skills novas obrigam o Claude a seguir antes de entregar qualquer site.
- Escolher referênciasTrês a cinco sites reais: pelo menos um do ramo e um de fora.
- Extrair os tokens
skillui --urltira cores, fontes, espaçamento e movimento do site. - Escrever a direçãoUm parágrafo com o par de fontes, a paleta, o protagonista do hero e o que não copiar.
- ConstruirCom conteúdo real do negócio: preço, horário, foto, endereço.
- Comparar lado a ladoPrint do site novo ao lado da referência, na mesma largura, até o acabamento empatar.
referencias-designA biblioteca e o processo obrigatório.anti-cara-de-iaDetector no código e a tabela "isso, faça aquilo".paleta-por-negocioPsicologia das cores com estudo e 45 paletas.tipografia-paresPares grátis por ramo, com escala em CSS.motion-sutilCurvas, durações e o que não animar.dashboard-designKPIs, gráfico certo e números em reais.