PROJETO REAL · DESIGN SYSTEM, MOTION E CÓDIGO
Um patrocinador compra atenção. O portal compartilhado entrega ela de graça.
A Canaltech vendeu uma ativação de Copa para a Netshoes e o formato disponível era o template do portal — com anúncios, recomendações e marcas concorrentes dividindo a tela. Troquei por uma superfície dedicada. Fiz o sistema, a acessibilidade, o motion e o código.
- CLIENTE
- Canaltech × Netshoes ativação patrocinada
- PAPEL
- Design systems e design engineer
- ENTREGAS
- Brandbook · UI · design system · motion · front-end
- FEITO COM
- Claude Code ⇄ Figma via MCP HTML, CSS e JS · After Effects Higgsfield · Nano Banana 2
- PERÍODO
- 2026 · 15 dias · solo
VISÃO GERAL · DOUBLE DIAMOND
O processo inteiro em uma tela, se você só tiver um minuto
Onde a atenção do patrocinador estava se perdendo, e o que virou padrão depois. As quatro etapas abaixo abrem em detalhe no resto da página.
ESPAÇO DO PROBLEMA
Onde a atenção do patrocinador estava se perdendo
ESPAÇO DA SOLUÇÃO
Uma página à altura da campanha
01
Descobrir
DIVERGE
Uma marca patrocina uma oferta e ela sai para nossa comunidade orgânica de mais de 400 mil pessoas
O link caía na página de oferta dentro do portal, cercada de "Últimas Ofertas" e marcas concorrentes
Vendas e marketing repetiam a mesma queixa: o patrocinador dividia a prateleira que tinha pago
A audiência chega pela confiança na nossa curadoria, não por mídia paga — e essa confiança é o ativo da campanha
02
Definir
CONVERGE
O problema não era a oferta, era o destino: a landing não pertencia à campanha
A campanha já cobria todos os touchpoints — só o fundo do funil seguia genérico
Critério de design: uma página, um produto, sem saída
O que estava em jogo não era layout, era a promessa comercial feita ao patrocinador
03
Desenvolver
DIVERGE
Uma página dedicada a um único produto: sem menu, sem ofertas laterais, sem links de saída
A identidade da campanha aplicada à página: logo CT em Campo, key visual e paleta
Decisão acima da dobra: cupom pré-aplicado, contagem regressiva e selo de curadoria
Mobile first: a comunidade chega do WhatsApp, quase inteira no celular
04
Entregar
CONVERGE
Desktop 1400 e mobile 360, com preço fixo, cupom e barra de CTA no mobile
Netshoes na Copa como primeira aplicação do formato
Adotado como o jeito padrão de o CT Ofertas rodar campanhas
Uma estrutura reaproveitável: a próxima campanha troca marca, produto e key visual
MEU ESCOPO
Marca da campanha→ Key visual→ Assets e comunidade→ Landing pageA campanha inteira, da criação da marca ao fundo do funil.
01 · O PROBLEMA
A página existia.
A exclusividade, não.
O CT Ofertas roda num template de portal: lista de produtos, anúncios de rede, módulo de recomendação, marcas concorrentes na lateral. É um bom formato para descoberta. É um formato ruim para vender exclusividade.
18
touchpoints entre social, vídeo e web
15
dias entre o briefing e o handoff
1
designer, sem time de front-end do outro lado
0
verba de mídia paga para levar tráfego até lá
02 · ANTES E DEPOIS
A reformulação não foi estética. Foi estrutural.
O mesmo objetivo — comprar o produto patrocinado — pelos dois caminhos. O que sai não é decoração: são os desvios que a página oferecia para o leitor sair dela.
COMO ERA
Leitor chega pelo link da oferta
Encontra o produto numa lista com outros
Passa por anúncio de rede e marca concorrente
Procura o cupom, que está em outro lugar
Sai para o e-commerce e aplica o cupom lá
Compra — ou desiste em algum dos desvios
Os passos 3, 4 e 5 são fuga. Cada um deles é uma porta para fora da campanha que o patrocinador financiou.
COMO FICOU
Leitor chega numa superfície só do patrocinador
Vê preço, prazo e cupom já aplicado na mesma tela
Compra pelo CTA fixo, sem procurar nada
Nenhum passo oferece uma saída. O cupom vem pré-aplicado, a navegação é fixa no mobile e a contagem regressiva mantém o prazo à vista.
03 · RESTRIÇÕES
As decisões de tela vieram do contrato, não do gosto
Três restrições comerciais definiram a superfície antes de existir qualquer pixel. Elas explicam por que a página tem a forma que tem.
Exclusividade é o produto
Se o patrocinador comprou a tela, nada de terceiro entra nela — nem anúncio de rede, nem recomendação, nem marca concorrente. Isso elimina módulos inteiros do template padrão e é o motivo de a página ser uma coluna só.
O formato precisa servir ao próximo patrocinador
Uma peça sob medida para a Netshoes seria descartável. Então tudo que é de marca virou variável, com dois modos, e a estrutura ficou independente de quem ocupa o espaço.
Não há time de front-end na outra ponta
A entrega tinha que sair pronta, não especificada — o que empurrou a decisão de tokenizar o sistema para espelhar o CSS desde o começo.
04 · BRANDBOOK
Escrevi as fundações antes de desenhar a primeira tela
Tipografia e cor definidas como escala, não como escolha peça a peça. É o que mantém dezoito touchpoints parecendo a mesma campanha sem eu revisar um por um.
A rampa completa existe por um motivo prático: quando o contraste do CTA falhou, eu tinha para onde subir sem inventar uma cor nova. Corrigi no token, e a correção desceu sozinha para todas as peças.
Nove níveis de heading e quatro de corpo. Aqui estão cinco — os treze estão no arquivo, cada um com peso, tamanho, entrelinha e tracking travados.
COR · RAMPAS DE MARCA, 50 A 900
Blue
Green
Yellow
Gray
As amostras trazem os valores reais da campanha, não cinza de wireframe — os nomes espelham as custom properties do CSS. A rampa cinza para em 800: para fundo preto integral a referência é gray-500. É neste nível que o CTA foi corrigido de 3.84:1 para 4.55:1, no token e não no botão.
05 · DIREÇÃO E GERAÇÃO
A direção é minha.
O modelo só executa.
Nenhuma foto de produto em contexto de Copa existia, e não havia verba nem prazo para produção fotográfica. Dirigi as peças e gerei com IA, com acabamento manual.
O fluxo tem cinco etapas e só uma delas é o modelo: referência escolhida à mão, direção de arte escrita, geração assistida, revisão e acabamento no Photoshop. A referência e a direção são autorais; a geração é assistida; o grading é manual.
O pipeline é rápido porque a direção está decidida antes do primeiro prompt. Seis peças prontas para campanha em dois dias — escopo que antes exigiria produção fotográfica, licenciamento ou banco de imagens.
06 · MÉTODO
Cinco etapas. As duas primeiras não se delegam.
Toda campanha passa pelo mesmo caminho. Contrato e direção são julgamento e ficam comigo; as três últimas são vazão, e são a razão de uma ativação inteira sair em quinze dias em vez de seis semanas.
01
Contrato de mídia
HUMANO · DECISÃO
O que o patrocinador comprou, e o que o template do portal entrega de graça. Define a superfície antes de qualquer desenho.
02
Direção de arte
HUMANO · DECISÃO
Referência, paleta e linguagem de movimento definidas à mão. Toda etapa seguinte herda essas restrições.
03
Sistema
HUMANO · AUTORAL
Tokens, variantes e estados de interação montados no Figma. Contraste e alvo de toque travados na variável.
04
Geração
ASSISTIDO · REVISADO
Peças geradas contra a direção, depois graduadas à mão no Photoshop. Layout estruturado no Figma via MCP.
05
Handoff codificado
ASSISTIDO · CORRIGIDO
Leitura de volta exporta HTML, CSS e JS com tokens mapeados um a um. Revisado à mão e entregue como página.
07 · SISTEMA
Achei um erro de contraste no CTA e corrigi no token, não no botão
O sistema existe para uma pessoa entregar do início ao fim. Componentes com estados explícitos, variáveis espelhando o CSS e acessibilidade resolvida na origem.
O erro
O CTA primário falhava WCAG AA em 3.84:1. Verde sobre branco só passa nesse valor para texto grande, e o rótulo é Barlow Bold 18px — 0,66px abaixo do limite. Um caso de borda que passa despercebido justamente porque quase acerta.
A correção
Subi o token de marca um degrau na rampa, para 4.55:1, e desloquei o hover junto para preservar a relação entre os estados. Aplicado nos dois modos de marca, então o próximo patrocinador herda a correção em vez do bug.
O feedback
Prototipei cada estado interativo com Smart Animate. O cadeado do CTA destrava quando o botão entra em pressed — o desconto exclusivo se confirma no momento exato de maior intenção de compra.
3.84:1
contraste do CTA como estava
4.55:1
depois da correção no token
56px
alvo de toque primário, acima da diretriz de 48
2
modos de marca herdando a correção
08 · ENGENHARIA
O ciclo fecha nos dois sentidos. O Figma não é o fim da linha.
O pipeline existe para fechar a distância entre o arquivo de design e a página pronta. O que eu entrego já está construído, não especificado para outra pessoa interpretar.
MCP conecta Claude Code e Figma nas duas direções, então o design system é a única fonte de verdade dos dois lados.
01 · SPEC
Spec no Claude Code
Hierarquia de seções, regras de conteúdo e restrições de UX escritas antes de existir um único pixel.
02 · LAYOUT
Wireframe no Figma
Estrutura gerada a partir do spec, depois dirigida à mão da baixa à alta fidelidade, no mesmo arquivo.
03 · SISTEMA
Componentes e variáveis
Componentes, variáveis e estados de interação tokenizados para espelhar o CSS, nos dois modos de marca.
04 · CÓDIGO
Página codificada
Leitura de volta do arquivo, com HTML, CSS e JS saindo com os tokens mapeados um a um.
Nenhum valor é redigitado. O que chega na outra ponta é uma página funcionando — com contagem regressiva, carrossel, cupom e barra fixa vivos — e não um documento a interpretar.
09 · ALCANCE
A página é o destino. Chegar nela era a outra metade do trabalho.
Sem verba de mídia, a única coisa que carrega alguém do primeiro contato até o produto é o reconhecimento. Então todo formato saiu dos mesmos tokens e da mesma linguagem de movimento.
Dezoito peças dimensionadas e animadas por posicionamento: feed 4:5 e Reels 9:16 no Instagram, cards 1:1 no WhatsApp, além de lower thirds, aberturas e transições para broadcast. Motion desenhado e animado no After Effects.
A consistência aqui não é capricho de portfólio: é a função. Quem encontra a campanha nos Reels precisa reconhecê-la instantaneamente na página de oferta, porque não há mídia paga reforçando o caminho.
10 · NÚMEROS
O que dá para medir, e o que eu não tenho
Separei os números em dois grupos por um motivo: os do produto qualquer pessoa confere abrindo o arquivo. Os de negócio eu não tenho, e prefiro dizer isso a estimar.
Confere abrindo o Figma ou o inspetor na página.
3.84:1 → 4.55:1
contraste do CTA primário, corrigido no token
1:1
tokens mapeados para CSS, sem valor redigitado
18
peças entregues em 6 posicionamentos
15
dias do briefing ao handoff, sozinho
2
modos de marca, para o formato servir ao próximo patrocinador
0
módulos de terceiro na página — sem anúncio, recomendação ou concorrente
São audiências, não conversões. É o tamanho dos canais onde a campanha circulou — não quantas pessoas compraram. Não tenho acesso ao lado do e-commerce da Netshoes, então não há taxa de conversão nesta página.
570 mil+
seguidores no Instagram onde as peças rodaram
400 mil+
membros da comunidade de WhatsApp
R$ 0
em mídia paga — toda a distribuição foi orgânica
O resultado que eu consigo afirmar é interno: depois desta campanha, o formato foi adotado pela Canaltech como modelo de referência para ativações patrocinadas com qualquer marca parceira. Deixou de ser uma peça pontual e virou um produto comercial repetível. Os primeiros rollouts estão em andamento.
11 · EM ABERTO
O que eu não resolvi
O formato repetível ainda não foi repetido
Ele foi aprovado como padrão e a estrutura está preparada para dois modos de marca, mas rodou com um patrocinador só. A prova de que é reaproveitável só existe quando a segunda marca entrar sem eu precisar mexer no sistema.
As imagens de IA não estão identificadas na página
A direção de arte é minha e o acabamento é manual, mas a geração é assistida por IA — e isso está escrito aqui, no case, e não no produto. Quem chega pela campanha não tem como saber. É uma correção de uma linha e ela devia estar lá.
Não fechei o ciclo de medição
Entreguei a página sem instrumentar conversão do meu lado. Sei que o formato foi adotado internamente, mas não consigo dizer se ele vendeu mais que o template — que é exatamente a pergunta que um patrocinador faz. Instrumentar isso é o que separa este case de uma afirmação verificável.
A contagem regressiva é de campanha, não de estoque
O prazo na tela é o da ativação, não o do inventário real. Funciona porque a oferta tinha data para acabar, mas amarrar o contador ao estoque do parceiro seria mais honesto com o leitor — e é integração, não design.
12 · MAIS
Outros projetos
Nega Nagô
Redesenho do catálogo de uma trancista para acabar com a conversa de ida e volta. Pesquisa, design system e front-end — com resultado medido na agenda da Mayara.
Canaltech · Hub de links
A página de links da Canaltech deixou de ser alugada. Design system, acessibilidade, consentimento e telemetria num HTML único que o time publica sem build.
Disponível para trabalhar
Desenho, escrevo o código e digo o que não deu certo.
Treze anos de design, cinco deles na Canaltech entre design system, marketing e comercial. Se você tem uma superfície que precisa sair pronta e medida, e não especificada, me chama.
© 2026 Erick Teixeira
oerickteixeira@gmail.com · São Paulo