---
id: style-cloning
domain: web-craft
agents: [ux-design-expert]
when: "ao receber uma referência (site/print) e precisar reaplicar a linguagem de design dela num novo projeto"
---

# Style Cloning — extrair a linguagem de uma referência e reaplicar fielmente

O pedido chega assim: "faz parecido com esse site", junto de um print ou uma URL. O trabalho **não** é
copiar a tela — é dissecar *por que* aquela referência funciona, isolar as decisões que dão o feeling, e
reconstruir essas decisões como sistema no projeto novo. Quem copia a tela produz uma falsificação
quebrada; quem extrai a **linguagem** produz algo que pertence à mesma família visual e ainda assim é
próprio.

**A linha ética é dura e vem antes de tudo:** você extrai a *técnica* (a razão tipográfica, a temperatura
da paleta, a curva de easing, a densidade) — você **nunca** copia o asset (logo, foto, ilustração,
ícone-set proprietário, o texto/conteúdo). Linguagem de design é craft e não é protegível; asset e copy
são IP de terceiros. Se você se pegar baixando a imagem do hero da referência pra usar no projeto, parou:
errado. Reproduza o *tratamento* daquela imagem (grão, corte, temperatura) numa imagem licenciada/própria.

## O problema / os tells de uma clonagem ruim

Reconheça o trabalho ruim — clonagem feita errado tem cara:

1. **Print-tracing.** A pessoa recriou *aquela tela exata* (mesmo hero, mesma manchete, mesmos 3 cards na
   mesma ordem) em vez de extrair o sistema. Resultado: muda o conteúdo do projeto e tudo desaba, porque
   nada era regra — era cópia pixel a pixel de um caso específico.
2. **"Pegou a cor primária" e mais nada.** Capturou `#FF5A1F` da referência, jogou num template default
   e achou que clonou. A cor sozinha não carrega o feeling — carrega tipografia + espaço + densidade +
   motion juntos.
3. **Tipografia trocada pelo "parecido do Google Fonts".** A referência usa uma grotesca comercial paga;
   a pessoa botou Montserrat "porque é tipo isso" e o caráter evaporou. Par de fonte errado mata a
   semelhança mais que cor errada.
4. **Eyedropper de uma cor, não da temperatura.** Pegou o accent mas manteve os neutros do template
   (cinza `#888` puro), enquanto a referência tinha neutros quentes (cinza puxado pro bege). A página
   "não fica igual" e ninguém sabe dizer por quê — é a temperatura dos neutros.
5. **Densidade ignorada.** A referência é apertada e densa (estilo terminal/editorial, muita info por
   tela); a réplica saiu arejada e espaçosa porque o template era assim. O *ritmo de informação* é
   metade da identidade e foi perdido.
6. **Motion copiado de olho como "fade".** A referência tem um stagger com easing custom e overshoot
   sutil; a réplica botou `fade-up .3s ease` em tudo. O movimento é assinatura e foi achatado.
7. **Asset roubado.** Baixou a foto/ilustração/ícone da referência e colou no projeto. Além de antiético
   e ilegal, denuncia a cópia — é literalmente o material de outra marca na sua página.
8. **Sem validação lado a lado.** Entregou "de memória", sem nunca colocar referência e réplica na mesma
   tela pra comparar. Sempre que isso acontece, a réplica está 40% fora e a pessoa não percebeu.

## Os princípios do craft

### 1. Capture sete dimensões, não "a cara"

O feeling de uma referência mora em sete eixos. Capture cada um **explicitamente** — anote número e nome,
não impressão vaga. Use o DevTools (Computed styles) e um eyedropper; impressão "de olho" erra.

- **Paleta + temperatura.** Não pegue só o accent. Pegue: 1 accent (e seu hover/active), 2–3 neutros
  (background, surface, texto) e diga a **temperatura** de cada um. O segredo costuma estar nos neutros:
  `#F7F5F2` (off-white quente) sente-se completamente diferente de `#FFFFFF` puro, e é isso que dá o "ar
  premium/editorial". Anote em HSL pra ler a temperatura: se o H dos cinzas está em ~30–50 são quentes,
  ~200–220 são frios, sem saturação são mortos.
- **Sistema tipográfico.** O *par* (display + texto), a **razão da escala** (meça dois tamanhos
  consecutivos e divida: 64/48 ≈ 1.33; 18/16 = 1.125 — descubra a razão), o **peso** de cada nível, o
  **tracking** do display (geralmente negativo em manchete grande: `-0.02em` a `-0.04em`) e o **leading**
  (1.05–1.15 em manchete, 1.5–1.65 em corpo). Identifique as fontes reais (WhatFont, ou olhe o
  `font-family` no Computed). Se forem pagas, escolha o substituto pelo **caráter** (mesma classe:
  grotesca-de-contraste, serifa-transicional, mono-humanista), não pelo nome parecido.
- **Escala de espaço.** Meça gaps e paddings reais. Existe uma base e uma razão? (8/16/24/40/64 é linear
  ×8; 4/8/16/32/64 é geométrico ×2 — sentem diferente). Anote os **extremos** que a referência usa: qual
  o menor gap de agrupamento e o maior respiro de seção. A relação entre eles é o ritmo.
- **Raios + sombras.** Raio do botão, do card, do input — são iguais ou variados por propósito? Sombra:
  é uma `shadow-md` genérica ou uma sombra **longa e suave de baixa opacidade** (`0 20px 40px
  rgba(0,0,0,.06)`)? Borda de 1px hairline em vez de sombra? Isso define "macio" vs "nítido".
- **Densidade.** Quanta informação por tela? Conte: a referência mostra 3 coisas com muito ar, ou 12
  coisas organizadas e densas? Densidade é decisão de identidade — um Linear/terminal denso e um
  Stripe/marketing arejado usam *a mesma* base de 8px com densidades opostas.
- **Motion + easing.** Abra e role devagar. O que entra: tudo junto ou em **stagger**? A curva é o `ease`
  default ou tem **overshoot/anticipation** (cubic-bezier custom)? Duração curta (120–200ms, ágil) ou
  longa (400–600ms, cinematográfico)? Há scroll-linked/parallax? Anote a *sensação* (ágil vs preguiçoso
  vs elástico) e tente a curva.
- **Tom de imagem + voz da copy.** Imagem: foto ou ilustração? Quente ou fria? Tem **grão/ruído**?
  Contraste alto ou lavado (faded)? Corte cheio ou minimalista? Voz da copy: manchetes curtas e secas?
  Técnicas e específicas? Com humor? Em caixa baixa proposital? Essa é a *técnica* — você reaplica o
  **tratamento**, com seus próprios assets e seu próprio texto.

### 2. Traduza cada captura em token — o sistema é a ponte

Captura solta vira cópia; captura virada **token** vira linguagem reaplicável. Para cada dimensão, escreva
um token nomeado *pela intenção*, não pelo valor. É o token que se reaplica no projeto, não o print.

```css
:root {
  /* temperatura é decisão, não acidente — neutros quentes */
  --bg:        hsl(40 20% 97%);   /* off-white quente, não #fff */
  --surface:   hsl(40 14% 94%);
  --text:      hsl(30 8% 12%);
  --accent:    hsl(18 90% 55%);   /* +hover/active derivados, não avulsos */

  /* escala tipográfica: razão 1.25 capturada da referência */
  --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.563rem; --step-3: 1.953rem;
  --display-tracking: -0.03em;    /* manchete aperta */
  --display-leading: 1.08;
  --body-leading: 1.6;

  /* espaço: geométrico ×2, com extremos reais usados */
  --s-1: .5rem; --s-3: 2rem; --s-6: 8rem;  /* respiro de seção grande */

  /* superfície: sombra longa de baixa opacidade, não shadow-md */
  --shadow-soft: 0 24px 48px -12px hsl(30 20% 10% / .08);
  --radius-card: 14px;            /* nem 8 default, nem pill */

  /* motion: curva com overshoot sutil, captura do easing */
  --ease-signature: cubic-bezier(.16, 1, .3, 1);
  --dur-quick: 160ms;
}
```

Regra de ouro da tradução: **a razão e a temperatura viajam; os valores absolutos podem mudar.** Se o
projeto novo precisa de accent azul por imposição da marca, mantenha a *mesma temperatura de neutros*, a
*mesma razão tipográfica*, a *mesma densidade* e o *mesmo easing* — a família visual sobrevive à troca de
cor. É por isso que se extrai sistema, não pixels.

### 3. Reproduza o feeling, não os assets

O feeling vem do **tratamento**, e tratamento é técnica reproduzível com material próprio:

- A referência tem fotos com grão e contraste lavado? Aplique `filter` + um overlay de ruído + uma
  curva de contraste **nas suas próprias fotos** (licenciadas/geradas/da marca). O grão é a técnica; a
  foto é sua.
- Ícones com aquele traço fino e cantos específicos? Use um set aberto (ou desenhe) com o *mesmo
  stroke-width e o mesmo line-cap* — não baixe o set proprietário da referência.
- Aquele detalhe gráfico recorrente (uma linha hairline entre seções, um numeral monoespaçado de label,
  um sublinhado deslocado no link)? Esses "maneirismos" carregam mais identidade que o hero inteiro.
  Catalogue-os e reaplique — são técnica pura, sem asset envolvido.
- A estrutura/sequência das seções **não** se copia ("hero→logos→3 features→CTA" é justamente o tell de
  template). Reproduza os *princípios de composição* (assimetria, ponto focal único, sangria) sobre o
  *seu* conteúdo, na *sua* ordem.

### 4. Valide fidelidade lado a lado, com checagem objetiva

Nunca confie na memória. Coloque **referência e réplica na mesma viewport** (duas janelas, ou print da
ref ao lado do localhost) e cheque eixo por eixo, não "no geral":

- **Squint test** (aperte os olhos / desfoque 8px ambas): os blocos de peso e o ritmo claro-escuro batem?
  Se a mancha geral diverge, é densidade ou hierarquia — não cor.
- **Overlay de cor:** eyedropper no mesmo tipo de elemento (bg, texto, accent) nas duas. Bate o H/S/L?
- **Régua na tipografia:** meça a razão entre H1 e corpo nas duas. Mesma razão? Mesmo tracking de
  manchete?
- **Cronômetro no motion:** role as duas devagar. Mesma sensação (ágil/elástico/lento)? Entra junto ou em
  stagger nas duas?

Se três dos quatro batem e o projeto ainda parece "seu" (assets e copy próprios), a clonagem da
*linguagem* foi um sucesso e a do *conteúdo* não aconteceu — exatamente o objetivo.

## Checklist

Antes de entregar uma reaplicação de estilo, responda — qualquer "sim" da seção ÉTICA é bloqueio:

**Ética (bloqueante):**
- [ ] Algum asset da referência (foto, logo, ilustração, ícone-set, vídeo) foi baixado e usado?
- [ ] Algum texto/copy da referência foi colado em vez de reescrito com voz própria?
- [ ] A estrutura é uma cópia 1:1 da página da referência em vez de princípios reaplicados?

**Captura (todas devem ter resposta concreta, com número/nome):**
- [ ] Capturei accent **e** a temperatura dos neutros (em HSL), não só uma cor?
- [ ] Identifiquei o par de fontes real e a **razão** da escala tipográfica (não chutei "Montserrat")?
- [ ] Medi a escala de espaço e anotei os **extremos** (densidade) que a referência usa?
- [ ] Capturei raio, tipo de sombra e o **easing/duração** do motion?

**Tradução + fidelidade:**
- [ ] Cada captura virou **token nomeado por intenção**, reaplicável no conteúdo do projeto?
- [ ] Reproduzi o **tratamento** de imagem (grão/contraste/corte) em assets próprios?
- [ ] Fiz o teste **lado a lado** com squint + overlay de cor + régua tipográfica + cronômetro de motion?
- [ ] A réplica pertence à mesma família visual **e** usa conteúdo/assets inteiramente próprios?

## Antes → depois

| Clonagem ruim (o tell) | Clonagem de craft (a linguagem) |
|---|---|
| Recriou a tela exata da referência (mesmo hero, mesmos 3 cards, mesma ordem) | Extraiu razão tipográfica, temperatura, densidade e easing como tokens e reaplicou no conteúdo do projeto |
| Pegou só o accent `#FF5A1F` e jogou no template default | Capturou accent **+** neutros quentes em HSL **+** sombra longa **+** razão 1.25 — o conjunto que dá o feeling |
| Trocou a grotesca paga por "Montserrat porque é parecido" | Escolheu substituto pela **classe e caráter** (grotesca-de-contraste), com mesmo tracking negativo na manchete |
| Manteve neutros `#888` do template sobre o accent da ref | Reproduziu a temperatura: `hsl(40 14% 94%)` de surface, off-white quente como a referência |
| Página arejada porque o template era; ref era densa | Reproduziu a **densidade** real — mesma base de 8px, mesmo ritmo de informação por tela |
| `fade-up .3s ease` em tudo de olho | Stagger com `cubic-bezier(.16,1,.3,1)` e 160ms — a curva e o tempo capturados da referência |
| Baixou a foto do hero da referência e colou | Aplicou o **tratamento** (grão + contraste lavado + corte) numa foto própria/licenciada |
| Entregou "de memória", 40% fora sem perceber | Validou lado a lado com squint + overlay + régua + cronômetro antes de entregar |