[{"data":1,"prerenderedAt":1963},["ShallowReactive",2],{"case-\u002Ftrabalhos\u002Fdesign-system-braip":3,"cases-casesPt-all-0":407},{"id":4,"title":5,"body":6,"cover":381,"coverAlt":382,"description":365,"draft":383,"extension":384,"featured":385,"headline":386,"meta":387,"navigation":385,"order":388,"path":389,"period":390,"platform":391,"role":392,"seo":393,"stem":394,"summary":395,"tags":396,"tldr":402,"__hash__":406},"casesPt\u002Ftrabalhos\u002Fdesign-system-braip.md","Design system Braip — de biblioteca a sistema",{"type":7,"value":8,"toc":364},"minimark",[9,14,18,21,24,28,31,65,75,81,85,92,95,99,133,136,139,142,146,151,161,167,173,177,182,187,192,196,213,218,223,227,230,272,278,328,331,335,342,345,351,354,358,361],[10,11,13],"h2",{"id":12},"contexto","Contexto",[15,16,17],"p",{},"A Braip é uma plataforma de vendas e afiliados, e o design system existe para\nsustentar um web app que roda em modo claro e escuro com paridade real — não como\ncortesia visual, mas porque parte considerável da operação acontece no escuro.",[15,19,20],{},"O time de design é pequeno e a engenharia consome o Figma diretamente: o que está\nnomeado no arquivo é o que chega no código. Isso torna a nomenclatura de variável\numa decisão de produto, não de organização interna.",[15,22,23],{},"A restrição que moldou todo o trabalho: o sistema estava em produção e não havia\njanela para refazê-lo do zero. Tudo foi feito sobre a biblioteca viva, com\ncomponentes sendo instanciados em arquivos de outras pessoas durante a mudança.",[10,25,27],{"id":26},"o-problema","O problema",[15,29,30],{},"O sistema não tinha um problema de aparência. Tinha um problema de nome.",[15,32,33,37,38,42,43,46,47,50,51,50,54,50,57,60,61,64],{},[34,35,36],"strong",{},"Sufixos numéricos sem papel definido."," O grupo ",[39,40,41],"code",{},"State"," da collection ",[39,44,45],{},"❖ Color","\nexpunha cada cor em quatro tiers — ",[39,48,49],{},"01",", ",[39,52,53],{},"02",[39,55,56],{},"03",[39,58,59],{},"04",". O número descrevia\nluminosidade, nunca função. ",[39,62,63],{},"State\u002FPurple\u002F03"," não responde à única pergunta que\nimporta na hora de desenhar: posso usar isso como texto? Na prática, cada pessoa\nescolhia um tier diferente para a mesma função, e a divergência só aparecia quando\nduas telas ficavam lado a lado.",[15,66,67,70,71,74],{},[34,68,69],{},"Contraste nunca medido."," As combinações de texto colorido sobre fundo tint eram\nescolhidas a olho. No modo escuro, onde o fundo do chip se mistura ao canvas\n",[39,72,73],{},"#0B0B0E",", \"parece legível\" e \"é legível\" não são a mesma coisa — e ninguém tinha\no número para saber qual dos dois estava acontecendo.",[15,76,77,80],{},[34,78,79],{},"Motion como valor avulso."," Hover, sheet e toast tinham duração definida\ntela a tela. Não existia escala, não existia vocabulário e, portanto, não existia\ncomo revisar uma micro-interação a não ser por opinião.",[10,82,84],{"id":83},"meu-papel","Meu papel",[15,86,87,88,91],{},"Fui o dono da trilha de tokens, contraste e documentação dentro do time de design,\nsob o épico de design system ",[34,89,90],{},"TI-2036",". Isso cobre a arquitetura de nomes das\nvariáveis, a auditoria de contraste, a escala de motion e as specs de handoff.",[15,93,94],{},"O que não é meu: os componentes de produto em si, desenhados pelo time ao longo do\ntempo, e a implementação em código do consumo desses tokens. Meu trabalho foi dar a\nesses componentes uma base que se explicasse sozinha.",[10,96,98],{"id":97},"processo","Processo",[15,100,101,102,104,105,108,109,112,113,116,117,119,120,123,124,126,127,129,130,132],{},"Comecei auditando a collection ",[39,103,45],{}," e, em vez de propor uma convenção do zero,\nfui ler o uso real. Inspecionei como os componentes ",[39,106,107],{},"Tags"," e ",[39,110,111],{},"Chips"," já consumiam os\ntiers: na variante ",[39,114,115],{},"Solid",", o container usava o tier ",[39,118,56],{}," e o texto ficava branco; na\n",[39,121,122],{},"Minimalist",", o container usava ",[39,125,49],{},"\u002F",[39,128,53],{}," e o texto usava ",[39,131,56],{},". Havia uma convenção\nimplícita ali, funcionando, sem nome.",[15,134,135],{},"Com o padrão implícito mapeado, comparei com o que design systems maduros fazem para\nescalas de estado — Ant Design, Atlassian, Polaris e IBM Carbon convergem para a\nmesma sequência de papéis: fundo, contorno, ícone, texto. A convenção da Braip já era\nessa; faltava dizê-la em voz alta.",[15,137,138],{},"A partir daí: renomeação sem tocar em valor, medição de contraste sobre a escala\nrenomeada, correção dos pares que não passavam e, por último, a extensão da mesma\nlógica de \"nome que diz a função\" para motion.",[15,140,141],{},"Cada etapa virou spec e plano versionados antes da execução — 20 specs e 28 planos\nde design entre 3 e 24 de julho de 2026. O plano existe menos para lembrar o que\nfazer e mais para deixar registrado o que foi descartado.",[10,143,145],{"id":144},"decisões-chave","Decisões-chave",[147,148,150],"h3",{"id":149},"decisão-1-papel-semântico-em-vez-de-escala-numérica","Decisão 1 — Papel semântico em vez de escala numérica",[15,152,153,156,157,160],{},[34,154,155],{},"Contexto:"," ",[39,158,159],{},"State\u002F\u003CCor>\u002F01–04",", em nove cores. O número indicava luminosidade,\nnão função.",[15,162,163,166],{},[34,164,165],{},"Alternativa descartada:"," manter os números e publicar uma legenda explicando o\nmapeamento de cada tier.",[15,168,169,172],{},[34,170,171],{},"Por que esta:"," legenda é documentação que ninguém abre no meio de um handoff. O\nnome, ao contrário, viaja junto com o token — aparece no inspector, aparece no\ncódigo, aparece na conversa. E adotar a sequência que Ant Design, Atlassian, Polaris\ne Carbon já usam reduz o custo de entrada de quem chega de outro sistema: a pessoa\nnão precisa aprender a Braip, só reconhecer o padrão.",[147,174,176],{"id":175},"decisão-2-renomear-sem-tocar-em-valor","Decisão 2 — Renomear sem tocar em valor",[15,178,179,181],{},[34,180,155],{}," havia a tentação de corrigir cor e nome na mesma passada, já que o\narquivo estava aberto de qualquer forma.",[15,183,184,186],{},[34,185,165],{}," rename e rebind de valores num único movimento.",[15,188,189,191],{},[34,190,171],{}," separar as duas operações torna cada uma verificável. Se nada muda\nvisualmente depois do rename, o rename está certo — qualquer diferença de pixel seria\nbug, não intenção. O ajuste cromático veio depois, guiado pelo relatório de contraste,\ne pôde ser avaliado isoladamente porque a camada de nomes já estava estável.",[147,193,195],{"id":194},"decisão-3-legado-desativado-por-documentação-não-por-deleção","Decisão 3 — Legado desativado por documentação, não por deleção",[15,197,198,200,201,204,205,208,209,212],{},[34,199,155],{}," a collection ",[39,202,203],{},"Motion"," carregava uma escala antiga, ",[39,206,207],{},"value\u002Fduration\u002F100","\na ",[39,210,211],{},"600",", sem vínculo com os tokens semânticos novos.",[15,214,215,217],{},[34,216,165],{}," apagar as variáveis legadas junto com a publicação da\nnova escala.",[15,219,220,222],{},[34,221,171],{}," apagar variável em biblioteca viva quebra instância em arquivo que\nnão é seu, e a pessoa afetada descobre pelo estrago. Marcar explicitamente como \"não\nusar\" na documentação de referência interrompe a adoção sem quebrar ninguém; a\nremoção fica para quando o consumo chegar a zero.",[10,224,226],{"id":225},"solução","Solução",[15,228,229],{},"A base final da Braip são 839 tokens em sete categorias — cor, cor semântica,\nprimitivos, tipografia, espaçamento, layout e responsividade.",[15,231,232,235,236,50,239,50,242,50,245,50,248,251,252,50,255,50,258,108,261,264,265,268,269,271],{},[34,233,234],{},"Cor de estado."," Nove cores (",[39,237,238],{},"Neutral",[39,240,241],{},"Purple",[39,243,244],{},"Green",[39,246,247],{},"Blue",[39,249,250],{},"Pink",",\n",[39,253,254],{},"Orange",[39,256,257],{},"Red",[39,259,260],{},"Yellow",[39,262,263],{},"Off",") expostas por papel, não por índice:\n",[39,266,267],{},"background → border → icon → text",". São 35 variáveis renomeadas, em dois modos,\nsem nenhuma alteração de valor no processo. ",[39,270,263],{}," é a exceção documentada: tem só\ntrês tiers, porque nunca precisou de um nível de ênfase.",[15,273,274,277],{},[34,275,276],{},"Contraste."," Chips e Tags auditados em WCAG 2.0 AA nas nove cores, nos dois modos,\ncom a razão de cada par registrada em tabela. Os pares que não alcançavam 4.5:1 foram\ncorrigidos antes da publicação, não depois do relato de alguém.",[15,279,280,283,284,50,287,50,290,50,293,50,296,299,300,50,303,50,306,309,310,312,313,315,316,318,319,321,322,324,325,327],{},[34,281,282],{},"Motion."," Cinco tokens de duração (",[39,285,286],{},"instant",[39,288,289],{},"fast",[39,291,292],{},"base",[39,294,295],{},"slow",[39,297,298],{},"slower",") e\ntrês de easing (",[39,301,302],{},"standard",[39,304,305],{},"enter",[39,307,308],{},"exit","), cada um com guideline de quando usar —\n",[39,311,289],{}," para micro-hover, ",[39,314,292],{}," para toast, ",[39,317,295],{}," para sheet; ",[39,320,305],{}," para elemento\nque aparece, ",[39,323,308],{}," para elemento que sai, ",[39,326,302],{}," para transição neutra. A escala\nfoi aplicada em três componentes de referência: Sheet, Toast e o hover do Button.",[15,329,330],{},"Toda a escala vive documentada na página Foundations do arquivo, com preview\nanimável — a documentação é o próprio arquivo de trabalho, não um PDF paralelo que\nenvelhece sozinho.",[10,332,334],{"id":333},"resultado","Resultado",[15,336,337,338,341],{},"O token passou a se explicar no handoff. Perguntar \"qual tier eu uso aqui?\" deixou de\nfazer sentido, porque a pergunta já está respondida no nome: se é texto, use ",[39,339,340],{},"text",".",[15,343,344],{},"Contraste virou critério verificável em vez de opinião. Existe uma tabela com a razão\nmedida de cada combinação de Chips e Tags, nas nove cores, nos dois modos — e o\nargumento numa revisão de design deixou de ser \"acho que está claro demais\" para ser\numa linha dessa tabela.",[15,346,347,348,350],{},"Motion virou vocabulário compartilhado. Discutir se um sheet deve usar ",[39,349,295],{}," é uma\nconversa produtiva; discutir se deve usar 320 ou 340 milissegundos não é.",[15,352,353],{},"E o sistema absorveu tudo isso sem quebrar arquivo de ninguém — o legado saiu de\ncirculação por documentação, no ritmo em que o consumo caiu.",[10,355,357],{"id":356},"o-que-eu-faria-diferente","O que eu faria diferente",[15,359,360],{},"Inverti a ordem. Renomeei antes de medir contraste, e o resultado foi ter que voltar\nna escala já renomeada para corrigir os pares que não passavam — o relatório final\ncarrega marcas de \"corrigido\" que não existiriam se a medição tivesse vindo primeiro.\nMedir é barato; renomear duas vezes, não.",[15,362,363],{},"E tratei a evidência visual como etapa posterior à execução. Vários planos ficaram com\na captura de tela pendente depois da mudança já aplicada, o que significa que parte do\n\"antes\" se perdeu. Documentar não é o passo seguinte ao trabalho — é parte dele, e\nquando fica para depois, normalmente não acontece.",{"title":365,"searchDepth":366,"depth":366,"links":367},"",2,[368,369,370,371,372,378,379,380],{"id":12,"depth":366,"text":13},{"id":26,"depth":366,"text":27},{"id":83,"depth":366,"text":84},{"id":97,"depth":366,"text":98},{"id":144,"depth":366,"text":145,"children":373},[374,376,377],{"id":149,"depth":375,"text":150},3,{"id":175,"depth":375,"text":176},{"id":194,"depth":375,"text":195},{"id":225,"depth":366,"text":226},{"id":333,"depth":366,"text":334},{"id":356,"depth":366,"text":357},"\u002Fimages\u002Fcases\u002Fbraip-foundation-cover.jpg","Capa do arquivo Braip Foundations — \"Design System · Foundations & Design Tokens\" sobre o monograma da Braip em gradiente roxo.",false,"md",true,"Transformar uma biblioteca de componentes desalinhada em um sistema com tokens, motion e documentação que o time de engenharia consegue consumir.",{},1,"\u002Ftrabalhos\u002Fdesign-system-braip","2025–2026","Web · Figma Variables","UI\u002FUX Designer — Design System (trilha de tokens, em time de design)",{"title":5,"description":365},"trabalhos\u002Fdesign-system-braip","Case study sobre a reestruturação do design system da Braip em Figma Variables, com arquitetura de tokens semânticos, tokens de motion e documentação de handoff.",[397,398,399,400,401],"Design System","Design Tokens","Figma Variables","Acessibilidade","Documentação",{"problem":403,"action":404,"outcome":405},"A biblioteca crescia por adição — cada nova tela trazia variações de cor, espaçamento e movimento que ninguém conseguia rastrear.","Reorganizei a base em tokens semânticos (Foundations), padronizei duração e easing de motion e escrevi a documentação de uso de cada decisão.","Escala de cor com papel semântico explícito, contraste AA verificado em 9 cores nos dois modos e um vocabulário de motion aplicado em componentes de referência — o handoff deixou de depender de quem desenhou a tela.","xELYm_h6_4UBdB3CLR_Ro0hYAZ4ygILyPheegajYCMI",[408,645,969,1185,1418,1636,1821],{"id":4,"title":5,"body":409,"cover":381,"coverAlt":382,"description":365,"draft":383,"extension":384,"featured":385,"headline":386,"meta":641,"navigation":385,"order":388,"path":389,"period":390,"platform":391,"role":392,"seo":642,"stem":394,"summary":395,"tags":643,"tldr":644,"__hash__":406},{"type":7,"value":410,"toc":627},[411,413,415,417,419,421,423,441,447,451,453,457,459,461,481,483,485,487,489,491,497,501,505,507,511,515,519,521,531,535,539,541,543,569,573,605,607,609,613,615,619,621,623,625],[10,412,13],{"id":12},[15,414,17],{},[15,416,20],{},[15,418,23],{},[10,420,27],{"id":26},[15,422,30],{},[15,424,425,37,427,42,429,46,431,50,433,50,435,50,437,60,439,64],{},[34,426,36],{},[39,428,41],{},[39,430,45],{},[39,432,49],{},[39,434,53],{},[39,436,56],{},[39,438,59],{},[39,440,63],{},[15,442,443,70,445,74],{},[34,444,69],{},[39,446,73],{},[15,448,449,80],{},[34,450,79],{},[10,452,84],{"id":83},[15,454,87,455,91],{},[34,456,90],{},[15,458,94],{},[10,460,98],{"id":97},[15,462,101,463,104,465,108,467,112,469,116,471,119,473,123,475,126,477,129,479,132],{},[39,464,45],{},[39,466,107],{},[39,468,111],{},[39,470,115],{},[39,472,56],{},[39,474,122],{},[39,476,49],{},[39,478,53],{},[39,480,56],{},[15,482,135],{},[15,484,138],{},[15,486,141],{},[10,488,145],{"id":144},[147,490,150],{"id":149},[15,492,493,156,495,160],{},[34,494,155],{},[39,496,159],{},[15,498,499,166],{},[34,500,165],{},[15,502,503,172],{},[34,504,171],{},[147,506,176],{"id":175},[15,508,509,181],{},[34,510,155],{},[15,512,513,186],{},[34,514,165],{},[15,516,517,191],{},[34,518,171],{},[147,520,195],{"id":194},[15,522,523,200,525,204,527,208,529,212],{},[34,524,155],{},[39,526,203],{},[39,528,207],{},[39,530,211],{},[15,532,533,217],{},[34,534,165],{},[15,536,537,222],{},[34,538,171],{},[10,540,226],{"id":225},[15,542,229],{},[15,544,545,235,547,50,549,50,551,50,553,50,555,251,557,50,559,50,561,108,563,264,565,268,567,271],{},[34,546,234],{},[39,548,238],{},[39,550,241],{},[39,552,244],{},[39,554,247],{},[39,556,250],{},[39,558,254],{},[39,560,257],{},[39,562,260],{},[39,564,263],{},[39,566,267],{},[39,568,263],{},[15,570,571,277],{},[34,572,276],{},[15,574,575,283,577,50,579,50,581,50,583,50,585,299,587,50,589,50,591,309,593,312,595,315,597,318,599,321,601,324,603,327],{},[34,576,282],{},[39,578,286],{},[39,580,289],{},[39,582,292],{},[39,584,295],{},[39,586,298],{},[39,588,302],{},[39,590,305],{},[39,592,308],{},[39,594,289],{},[39,596,292],{},[39,598,295],{},[39,600,305],{},[39,602,308],{},[39,604,302],{},[15,606,330],{},[10,608,334],{"id":333},[15,610,337,611,341],{},[39,612,340],{},[15,614,344],{},[15,616,347,617,350],{},[39,618,295],{},[15,620,353],{},[10,622,357],{"id":356},[15,624,360],{},[15,626,363],{},{"title":365,"searchDepth":366,"depth":366,"links":628},[629,630,631,632,633,638,639,640],{"id":12,"depth":366,"text":13},{"id":26,"depth":366,"text":27},{"id":83,"depth":366,"text":84},{"id":97,"depth":366,"text":98},{"id":144,"depth":366,"text":145,"children":634},[635,636,637],{"id":149,"depth":375,"text":150},{"id":175,"depth":375,"text":176},{"id":194,"depth":375,"text":195},{"id":225,"depth":366,"text":226},{"id":333,"depth":366,"text":334},{"id":356,"depth":366,"text":357},{},{"title":5,"description":365},[397,398,399,400,401],{"problem":403,"action":404,"outcome":405},{"id":646,"title":647,"body":648,"cover":816,"coverAlt":950,"description":365,"draft":383,"extension":384,"featured":385,"headline":951,"meta":952,"navigation":385,"order":366,"path":953,"period":954,"platform":955,"role":956,"seo":957,"stem":958,"summary":959,"tags":960,"tldr":964,"__hash__":968},"casesPt\u002Ftrabalhos\u002Fcheckout-discovery.md","Checkout — o fluxo inteiro e o motion do cartão",{"type":7,"value":649,"toc":934},[650,652,655,662,669,671,677,680,686,689,691,713,720,722,729,744,751,753,757,762,767,772,776,779,784,789,798,801,810,817,824,828,833,838,842,847,856,860,865,870,872,875,898,904,908,926,928,931],[10,651,13],{"id":12},[15,653,654],{},"A Braip é uma plataforma de vendas digitais, e o checkout é o lugar onde tudo que\nacontece antes dele é cobrado ou perdido. Não é uma tela de produto: é o último\npasso de toda venda que a plataforma processa, para milhares de lojas que não têm\ncontrole nenhum sobre como ele se parece.",[15,656,657,658,661],{},"Quando peguei o arquivo, existiam ",[34,659,660],{},"dois checkouts legados"," vivos ao mesmo tempo —\numa versão de página única e uma versão multietapas. Nenhuma das duas usava o design\nsystem atual: eram telas da V1, montadas antes do sistema de variáveis existir.",[15,663,664,665,668],{},"O escopo real do trabalho está registrado no changelog do arquivo, e vale ser\nliteral sobre ele: ",[34,666,667],{},"remodelar a V1 usando o design system da V2",". Isso não é\n\"redesenhar do zero com liberdade\". É um trabalho de tradução com uma restrição\ndura — o fluxo de negócio já existia, os métodos de pagamento já existiam, e o que\neu podia mudar era a forma, não o contrato.",[10,670,27],{"id":26},[15,672,673,674,341],{},"A tensão de design aqui não é a tela cheia. É a tela cheia ",[34,675,676],{},"de coisa obrigatória",[15,678,679],{},"Um checkout brasileiro não pede e-mail e cartão. Ele pede nome, e-mail, telefone,\nCEP, endereço, número, complemento, bairro, cidade, estado, forma de envio, forma de\npagamento, número do cartão, titular, validade, CVC, parcelamento e CPF do titular —\nantes de qualquer confirmação. Some a isso cupom, order bump, frete calculado e\ndesconto de Pix. É um formulário longo por lei e por regra de adquirência, não por\ndescuido de quem desenhou.",[15,681,682,683,341],{},"Então a pergunta não podia ser \"como reduzir campos\". Tinha que ser: ",[34,684,685],{},"como fazer um\nformulário longo não parecer um obstáculo enquanto ele é preenchido",[15,687,688],{},"E existia um segundo problema, mais silencioso. O checkout legado tinha telas para\nquando dá certo. Não tinha para quando dá errado. Cartão recusado, saldo\ninsuficiente, falha na emissão do Pix, o segundo em que o pagamento está sendo\nprocessado — nada disso estava desenhado. Na prática significa que o pior momento da\nexperiência era o único sem design.",[10,690,84],{"id":83},[692,693,694,698,701,704,707,710],"ul",{},[695,696,697],"li",{},"Remodelagem do checkout de página única sobre o design system V2",[695,699,700],{},"Mapeamento e desenho do caminho infeliz — recusas, falhas e estados de erro",[695,702,703],{},"Estados de carregamento (skeleton) para o processamento do pagamento",[695,705,706],{},"Adaptação responsiva completa: desktop 1440 e mobile 390",[695,708,709],{},"Motion de preenchimento do cartão de crédito",[695,711,712],{},"Protótipo navegável por método de pagamento, com confirmação e recusa",[15,714,715,716,719],{},"O que ",[34,717,718],{},"não"," foi meu: as regras de negócio do checkout, os métodos de pagamento\ndisponíveis e os textos legais do rodapé — todos herdados. E o design system V2, que\né trabalho de time; eu atuo na trilha de tokens dele, mas os componentes que usei\naqui vieram da biblioteca, não foram inventados para este case.",[10,721,98],{"id":97},[15,723,724,725,728],{},"Comecei pelo inventário, não pelo desenho. O arquivo ganhou duas seções marcadas\n",[39,726,727],{},"⚠︎ OLD"," — a página única e a multietapas legadas — mantidas lado a lado com as\nnovas. Isso parece burocracia de arquivo, mas foi a decisão de processo mais útil do\ntrabalho: com o \"antes\" visível ao lado do \"depois\", toda divergência vira uma\npergunta explícita em vez de uma mudança silenciosa.",[15,730,731,732,735,736,739,740,743],{},"Depois separei o trabalho em três frentes que andaram em paralelo, cada uma com sua\nprópria seção no arquivo: o ",[34,733,734],{},"caminho feliz"," (página única moderna), o ",[34,737,738],{},"caminho\ninfeliz"," (recusas e falhas) e os ",[34,741,742],{},"estados de carregamento",". Tratar o erro como uma\nfrente de trabalho própria, com orçamento de tempo próprio, foi o que impediu ele de\nvirar a última hora de sexta-feira.",[15,745,746,747,750],{},"O motion do cartão nasceu num rascunho à parte antes de entrar no fluxo — uma seção\n",[39,748,749],{},"motion draft card",", isolada, onde dava para errar sem quebrar as telas boas.",[10,752,145],{"id":144},[147,754,756],{"id":755},"o-formulário-longo-mostra-tudo-mas-em-dois-pesos","O formulário longo mostra tudo, mas em dois pesos",[15,758,759,761],{},[34,760,155],{}," todos os campos são obrigatórios, e nenhum pode ser escondido atrás de\num acordeão sem criar a sensação de que o formulário nunca acaba.",[15,763,764,766],{},[34,765,165],{}," o fluxo multietapas, que existia e continua existindo\ncomo variante. Ele resolve a percepção de tamanho quebrando em passos — mas troca um\nformulário longo por três telas com três chances de abandono e um botão \"voltar\" que\nnão devolve o estado direito.",[15,768,769,771],{},[34,770,171],{}," a página única mostra o custo inteiro de uma vez. É honesta, e é\nmais rápida para quem já sabe o que quer. O trabalho passa a ser de hierarquia: dois\nblocos lado a lado em desktop, com identidade e entrega à esquerda e pagamento à\ndireita, e o total parcelado imediatamente acima do botão — o último número que a\npessoa lê antes de decidir.",[147,773,775],{"id":774},"o-cartão-de-crédito-se-preenche-enquanto-você-digita","O cartão de crédito se preenche enquanto você digita",[15,777,778],{},"Esta é a decisão que dá nome ao case.",[15,780,781,783],{},[34,782,155],{}," o bloco do cartão é o ponto mais frágil do checkout inteiro. É onde a\npessoa digita dezesseis dígitos que ela não sabe de cabeça, tirados de um retângulo\nde plástico que ela está segurando na outra mão, sob a suspeita permanente de estar\ndigitando num site que talvez não devesse.",[15,785,786,788],{},[34,787,165],{}," validação silenciosa — aceitar os dados e só reagir no\nerro. É o padrão do checkout legado e é o mais barato de construir. Também é o que\ntransforma um dígito trocado em uma recusa de adquirente três telas adiante, quando\na pessoa já não tem mais o cartão na mão.",[15,790,791,793,794,797],{},[34,792,171],{}," desenhei o cartão como uma ",[34,795,796],{},"representação visual que se preenche\nem tempo real",". O número aparece no cartão conforme é digitado, agrupado de quatro\nem quatro; o nome do titular aparece embaixo; a bandeira é detectada e reconhecida\nantes do campo terminar. O cartão vira um espelho do que foi digitado.",[15,799,800],{},"O que isso resolve não é estético. É de conferência: a pessoa compara o cartão da\ntela com o cartão da mão, e vê o erro no momento em que ele acontece — não depois da\nrecusa. E resolve um segundo problema, de confiança: uma interface que reage com\nprecisão ao que você digita comunica que está processando aquilo com cuidado.",[15,802,803],{},[804,805],"video",{"src":806,"poster":807,"autoPlay":385,"loop":385,"muted":385,"playsInline":385,"controls":385,"width":808,"ariaLabel":809},"\u002Fvideos\u002Fcheckout-cartao.mp4","\u002Fimages\u002Fcases\u002Fcheckout-cartao-poster.jpg",1080,"Animação do bloco de cartão de crédito: o número, o nome do titular e a bandeira aparecem no cartão conforme os campos são preenchidos",[15,811,812],{},[813,814],"img",{"alt":815,"src":816},"Bloco de pagamento com o cartão de crédito preenchido — número, titular e bandeira refletidos no cartão acima dos campos de validade, CVC e parcelamento","\u002Fimages\u002Fcases\u002Fcheckout-cartao.jpg",[15,818,819,820,823],{},"O motion tem uma regra que segurei durante todo o desenho: ",[34,821,822],{},"ele nunca atrasa a\ndigitação",". A animação acompanha o campo, não o contrário. Nenhuma transição\nbloqueia o próximo caractere, e o foco nunca é movido automaticamente entre campos —\nautoavanço de foco quebra a correção de quem errou o décimo primeiro dígito.",[147,825,827],{"id":826},"o-caminho-infeliz-recebeu-tanto-arquivo-quanto-o-feliz","O caminho infeliz recebeu tanto arquivo quanto o feliz",[15,829,830,832],{},[34,831,155],{}," cartão recusado é o desfecho mais comum depois do sucesso, e era o\núnico sem tela.",[15,834,835,837],{},[34,836,171],{}," o protótipo cobre três recusas distintas — saldo insuficiente,\nrecusa do emissor e falha na emissão de Pix ou boleto — porque as três exigem coisas\ndiferentes da pessoa. Saldo insuficiente pede outro cartão. Recusa do emissor pede\nligar para o banco. Falha de emissão pede só tentar de novo. Uma tela genérica de\n\"pagamento não autorizado\" empurra os três casos para o mesmo lugar: o abandono.",[147,839,841],{"id":840},"a-espera-é-desenhada-não-é-ausência","A espera é desenhada, não é ausência",[15,843,844,846],{},[34,845,155],{}," entre apertar \"Comprar agora\" e a resposta da adquirente existe um\nintervalo real, de segundos, em que a tela não tem nada para dizer.",[15,848,849,851,852,855],{},[34,850,171],{}," desenhei o estado de processamento como ",[34,853,854],{},"skeleton",", com o formato\ndo conteúdo que está chegando, em vez de um spinner sobre a tela apagada. O skeleton\ndiz \"vem conteúdo aqui, deste tamanho\"; o spinner diz \"espere\". No momento em que a\npessoa acabou de autorizar um pagamento, a diferença entre essas duas mensagens é a\ndiferença entre esperar e desconfiar.",[147,857,859],{"id":858},"mobile-não-é-a-mesma-página-mais-estreita","Mobile não é a mesma página mais estreita",[15,861,862,864],{},[34,863,155],{}," em 390 px os dois blocos lado a lado viram uma coluna, e a ordem passa\na importar mais do que o layout.",[15,866,867,869],{},[34,868,171],{}," em mobile o resumo do produto sobe para o topo, logo abaixo do\nbanner — antes de qualquer campo. Em desktop essa informação pode conviver na\nlateral; em mobile ela precisa vir antes, porque é o que ancora a pessoa no que ela\nestá comprando durante os trinta campos seguintes. O bloco do cartão mantém o motion\nintegral: é o único elemento do checkout que não foi simplificado no breakpoint\nmenor.",[10,871,334],{"id":333},[15,873,874],{},"O que foi entregue:",[692,876,877,880,883,886,889,892,895],{},[695,878,879],{},"Checkout de página única remodelado sobre o design system V2, em desktop (1440) e\nmobile (390)",[695,881,882],{},"Variante multietapas mantida e atualizada em paralelo",[695,884,885],{},"Caminho infeliz desenhado: três tipos de recusa mais falha de emissão",[695,887,888],{},"Estados de carregamento com skeleton para o processamento do pagamento",[695,890,891],{},"Telas de pedido confirmado para cartão, Pix e boleto",[695,893,894],{},"Motion de preenchimento do cartão, com especificação de comportamento",[695,896,897],{},"Protótipo navegável cobrindo os quatro métodos de pagamento",[15,899,900,903],{},[34,901,902],{},"Sobre números:"," não publico taxa de conversão deste trabalho. A métrica existe e\nfica com o time de produto da Braip; ela mede o checkout inteiro, incluindo mudanças\nde backend e de política de pagamento que não são minhas. Atribuir esse número ao\ndesign seria confortável e seria falso.",[10,905,907],{"id":906},"o-que-ficou-pendente","O que ficou pendente",[692,909,910,920],{},[695,911,912,913,50,916,919],{},"Os campos de apoio dos inputs ainda exibem strings padrão do design system\n(",[39,914,915],{},"Message text",[39,917,918],{},"Title",") nos slots de mensagem de ajuda e erro. É default de\ncomponente, não conteúdo — mas significa que o texto de erro real de cada campo\nainda não foi escrito, e escrever isso é trabalho de UX writing que ficou fora\ndesta rodada.",[695,921,922,923,925],{},"As duas seções legadas continuam no arquivo, marcadas ",[39,924,727],{},". Elas só saem\nquando a migração terminar de verdade em produção.",[10,927,357],{"id":356},[15,929,930],{},"Desenhei o motion do cartão depois de fechar o layout do bloco de pagamento, e essa\nordem foi um erro meu. Quando fui animar, o cartão já tinha posição, tamanho e\ndistância dos campos definidos por composição estática — e a animação teve que caber\nnaquilo. Se o motion tivesse entrado junto com o layout, o cartão provavelmente\nestaria mais perto do campo de número, e a relação entre o dígito digitado e o dígito\nque aparece seria mais curta de ler.",[15,932,933],{},"O segundo: passei tempo demais no caminho feliz antes de abrir o caminho infeliz.\nSabia desde o inventário que os estados de erro estavam faltando, e mesmo assim\ndeixei para depois — o que fez o caminho infeliz virar uma seção separada do arquivo\nem vez de nascer junto com cada tela. Estados de erro não são um capítulo. São uma\npropriedade de cada tela, e o arquivo teria ficado mais coerente se eu tivesse\ntratado assim desde o começo.",{"title":365,"searchDepth":366,"depth":366,"links":935},[936,937,938,939,940,947,948,949],{"id":12,"depth":366,"text":13},{"id":26,"depth":366,"text":27},{"id":83,"depth":366,"text":84},{"id":97,"depth":366,"text":98},{"id":144,"depth":366,"text":145,"children":941},[942,943,944,945,946],{"id":755,"depth":375,"text":756},{"id":774,"depth":375,"text":775},{"id":826,"depth":375,"text":827},{"id":840,"depth":375,"text":841},{"id":858,"depth":375,"text":859},{"id":333,"depth":366,"text":334},{"id":906,"depth":366,"text":907},{"id":356,"depth":366,"text":357},"Bloco de cartão de crédito do checkout — o cartão preenchido em tempo real com número, titular e bandeira, acima dos campos do formulário.","Redesenhar um checkout de página única sobre o design system novo, e resolver o trecho mais frágil dele — os quinze segundos em que alguém digita o número do cartão.",{},"\u002Ftrabalhos\u002Fcheckout-discovery","2026","Checkout web · Desktop e mobile","UI\u002FUX Designer — Produto (redesenho sobre o design system V2 da Braip)",{"title":647,"description":365},"trabalhos\u002Fcheckout-discovery","Case study do redesenho do checkout da Braip — a remodelagem da versão legada sobre o design system V2, o mapeamento dos estados que ninguém desenha (recusa, espera, falha) e a animação de preenchimento do cartão de crédito.",[961,962,963,203,397],"Produto","Fluxo","Estados",{"problem":965,"action":966,"outcome":967},"O checkout legado era o último passo de toda venda da plataforma e o menos cuidado — dois fluxos concorrentes, componentes fora do design system e os momentos de erro e espera nunca desenhados.","Remodelei o checkout de página única sobre o design system V2, mapeei o caminho infeliz e os estados de carregamento, e desenhei um motion que preenche o cartão de crédito visualmente enquanto a pessoa digita.","Fluxo entregue em desktop e mobile, com protótipo navegável cobrindo confirmação e três tipos de recusa. As métricas de conversão ficam com o time de produto — não são minhas para publicar.","CKz42C_5wdIVCTMjMz5j6R33JY7cFq736pa22h3BxC8",{"id":970,"title":971,"body":972,"cover":1163,"coverAlt":1164,"description":365,"draft":383,"extension":384,"featured":383,"headline":1165,"meta":1166,"navigation":385,"order":366,"path":1167,"period":1168,"platform":1169,"role":1170,"seo":1171,"stem":1172,"summary":1173,"tags":1174,"tldr":1180,"__hash__":1184},"casesPt\u002Ftrabalhos\u002Fhair-glow-izadora-k.md","Hair Glow — landing page de lançamento",{"type":7,"value":973,"toc":1147},[974,976,979,986,988,991,997,1000,1003,1005,1019,1022,1024,1035,1038,1044,1050,1056,1058,1062,1065,1068,1072,1078,1086,1090,1096,1099,1103,1109,1112,1115,1119,1122,1124,1127,1130,1132,1135,1138,1140],[10,975,13],{"id":12},[15,977,978],{},"O Hair Glow é um fluido 5 em 1 de 260 ml da linha \"Toda beleza de mãe\", assinada\npela Izadora K. O produto entrava em lançamento e não tinha uma página própria: a\núnica superfície de venda eram posts de rede social, que dão alcance mas não dão\nargumento.",[15,980,981,982,985],{},"Meu escopo aqui foi específico e vale dizer de saída: ",[34,983,984],{},"UI e protótipo",". A copy\nveio pronta, de um documento de página de vendas escrito pelo cliente. Meu trabalho\nnão foi decidir o que dizer — foi decidir em que ordem, com quanto peso e em quanto\nespaço cada coisa é dita.",[10,987,27],{"id":26},[15,989,990],{},"O público da linha é mulher com rotina cheia, e esse é o dado que muda tudo. Ela não\nlê uma página de produto do começo ao fim. Ela rola, para em uma frase, e decide.",[15,992,993],{},[813,994],{"alt":995,"src":996},"Seção que nomeia a dor: \"Cansada de testar cuidados capilares que não cabem na sua rotina?\", com o produto sobre uma bancada de madeira ao lado de uma escova e uma chapinha","\u002Fimages\u002Fcases\u002Fhair-glow-dor.jpg",[15,998,999],{},"Isso cria uma tensão concreta de layout. O produto tem cinco benefícios — hidratação,\nproteção térmica, controle de frizz, antipoluição, pré e pós-treino — e cinco\nbenefícios é exatamente a quantidade que vira ruído quando apresentada como lista.\nUma página que abre despejando os cinco perde a leitora antes do terceiro.",[15,1001,1002],{},"O outro problema é que o argumento real do produto não é técnico. É tempo. \"Cinco\nem um\" só significa alguma coisa para quem entende que são cinco frascos e cinco\netapas a menos na pia do banheiro.",[10,1004,84],{"id":83},[692,1006,1007,1010,1013,1016],{},[695,1008,1009],{},"Estrutura e ordem das seções da página",[695,1011,1012],{},"UI de desktop (1440) e mobile (375)",[695,1014,1015],{},"Adaptação responsiva de todas as seções",[695,1017,1018],{},"Protótipo navegável e organização do arquivo para handoff",[15,1020,1021],{},"Copy, direção de arte e fotografia vieram do cliente.",[10,1023,98],{"id":97},[15,1025,1026,1027,1030,1031,1034],{},"A base foi o ",[34,1028,1029],{},"Creators Figma Kit"," somado ao ",[34,1032,1033],{},"UI Kit Braip"," e a componentes do\nRelume. Isso não é detalhe de bastidor: com o esqueleto de componentes pronto, o\ntempo que iria para desenhar caixas foi inteiro para a decisão editorial — que\nseção existe, em que ordem, com quanta respiração.",[15,1036,1037],{},"O trabalho ficou em três frentes:",[15,1039,1040,1043],{},[34,1041,1042],{},"Ordenar."," Cada seção da página responde a uma pergunta, e a pergunta seguinte só\naparece depois que a anterior foi respondida. Promessa, dor, como funciona, prova,\npreço, dúvida.",[15,1045,1046,1049],{},[34,1047,1048],{},"Dosar."," Onde a copy dava margem, o layout escolheu densidade. Os cinco benefícios\nviraram uma coluna de itens curtos ao lado da imagem do produto — leitura vertical\nrápida, nenhum deles competindo por destaque.",[15,1051,1052,1055],{},[34,1053,1054],{},"Adaptar."," Onze seções de 1440 px reconstruídas para 375. A adaptação não foi\nempilhamento: as duas colunas do bloco de benefícios viram uma sequência, e o\ncomparativo de kits, que no desktop é lado a lado, no mobile passa a ser decisão\nsequencial.",[10,1057,145],{"id":144},[147,1059,1061],{"id":1060},"a-dor-antes-do-benefício","A dor antes do benefício",[15,1063,1064],{},"A segunda seção da página não fala do produto. Ela pergunta: \"cansada de testar\ncuidados capilares que não cabem na sua rotina?\" e nomeia frizz, ressecamento e\ndano de secador antes de oferecer qualquer solução.",[15,1066,1067],{},"É deliberado. Uma leitora que ainda não reconheceu o problema não tem onde encaixar\na resposta. A seção de benefícios que vem logo depois funciona melhor porque chega\ncomo alívio, não como catálogo.",[147,1069,1071],{"id":1070},"cinco-benefícios-como-um-passo-não-como-cinco","Cinco benefícios como um passo, não como cinco",[15,1073,1074],{},[813,1075],{"alt":1076,"src":1077},"Seção \"Cinco benefícios em um único passo\" — lista vertical de hidratação, proteção térmica, controle do frizz, antipoluição e pré e pós-treino, ao lado do produto sobre fundo de folhagem","\u002Fimages\u002Fcases\u002Fhair-glow-beneficios.jpg",[15,1079,1080,1081,1085],{},"O título carrega o argumento inteiro: ",[1082,1083,1084],"em",{},"cinco benefícios em um único passo",". Os itens\nficam em uma coluna estreita, com texto curto e sem ícone decorativo — a hierarquia\ndiz que o importante é o \"um único passo\", e que os cinco são a prova disso, não o\nprotagonista.",[147,1087,1089],{"id":1088},"prova-por-contexto-não-por-close-de-produto","Prova por contexto, não por close de produto",[15,1091,1092],{},[813,1093],{"alt":1094,"src":1095},"Seção \"Autoestima para todos os momentos\" — quatro cartões de estilo de vida mostrando o produto em situações reais do dia","\u002Fimages\u002Fcases\u002Fhair-glow-lifestyle.jpg",[15,1097,1098],{},"A seção de lifestyle mostra o produto em quatro situações de rotina em vez de quatro\nângulos do frasco. Cada cartão liga uma cena a um benefício já apresentado — a\nacademia amarra no pré e pós-treino, a chapinha amarra na proteção térmica.",[147,1100,1102],{"id":1101},"duas-opções-nunca-três","Duas opções, nunca três",[15,1104,1105],{},[813,1106],{"alt":1107,"src":1108},"Seção de oferta — dois kits lado a lado, o combo de duas unidades por R$ 197,00 e a unidade avulsa por R$ 137,00, com selo de oferta de lançamento","\u002Fimages\u002Fcases\u002Fhair-glow-oferta.jpg",[15,1110,1111],{},"A oferta apresenta exatamente dois caminhos: o kit com duas unidades e a unidade\navulsa. O combo entra à esquerda, com o selo de lançamento e o preço riscado\nvisível, para que a comparação aconteça sem que a leitora precise fazer conta.",[15,1113,1114],{},"Três opções teriam transformado uma decisão de compra em uma tarefa de planilha.",[147,1116,1118],{"id":1117},"marquee-como-respiro","Marquee como respiro",[15,1120,1121],{},"Entre os blocos densos há três faixas horizontais finas com as condições de compra —\ncompra 100% segura, frete grátis, garantia. Elas resolvem dois problemas ao mesmo\ntempo: dão pausa visual entre seções longas e mantêm as objeções logísticas presentes\nsem gastar uma seção inteira com elas.",[10,1123,334],{"id":333},[15,1125,1126],{},"A landing page foi entregue completa nos dois breakpoints, com protótipo navegável e\no arquivo organizado para handoff — seções nomeadas, componentes instanciados a\npartir do kit, versão registrada no changelog do arquivo.",[15,1128,1129],{},"Não tenho número de conversão para mostrar. A página foi entregue no lançamento e a\nmétrica ficou do lado do cliente; publicar um percentual que eu não medi seria pior\nque não ter nenhum.",[10,1131,907],{"id":906},[15,1133,1134],{},"A seção de depoimentos está no layout, mas ainda com texto de placeholder. O\nconteúdo real — nomes, fotos e falas de clientes — dependia de coleta que não estava\npronta no fechamento do design.",[15,1136,1137],{},"Deixo isso escrito porque a alternativa seria mostrar um print de prova social\ninventada em um case sobre uma página de venda, o que é exatamente o tipo de coisa\nque a página inteira foi desenhada para não fazer.",[10,1139,357],{"id":356},[15,1141,1142,1143,1146],{},"Teria desenhado a seção de depoimentos ",[34,1144,1145],{},"depois"," do conteúdo existir, não antes. Um\nbloco de prova social projetado sobre lorem ipsum assume um formato — cinco cartões\ncurtos, todos do mesmo tamanho — que o depoimento real quase nunca respeita. Quando\no texto verdadeiro chegar, o layout vai ter que ceder, e teria sido mais barato\ndeixar o espaço aberto do que preencher com uma forma provisória.",{"title":365,"searchDepth":366,"depth":366,"links":1148},[1149,1150,1151,1152,1153,1160,1161,1162],{"id":12,"depth":366,"text":13},{"id":26,"depth":366,"text":27},{"id":83,"depth":366,"text":84},{"id":97,"depth":366,"text":98},{"id":144,"depth":366,"text":145,"children":1154},[1155,1156,1157,1158,1159],{"id":1060,"depth":375,"text":1061},{"id":1070,"depth":375,"text":1071},{"id":1088,"depth":375,"text":1089},{"id":1101,"depth":375,"text":1102},{"id":1117,"depth":375,"text":1118},{"id":333,"depth":366,"text":334},{"id":906,"depth":366,"text":907},{"id":356,"depth":366,"text":357},"\u002Fimages\u002Fcases\u002Fhair-glow-cover.jpg","Hero da landing page Hair Glow — modelo sorrindo enquanto segura o frasco do fluido 5 em 1, sobre fundo verde e roxo claro.","Uma página de venda construída como uma sequência de objeções respondidas, uma de cada vez, em desktop e mobile.",{},"\u002Ftrabalhos\u002Fhair-glow-izadora-k","Junho de 2026","Landing page responsiva · Figma","UI e protótipo (desktop e mobile)",{"title":971,"description":365},"trabalhos\u002Fhair-glow-izadora-k","Case study sobre o design da landing page de lançamento do Hair Glow, fluido 5 em 1 da linha \"Toda beleza de mãe\", by Izadora K — estrutura, ritmo e adaptação responsiva a partir de um kit de componentes.",[1175,1176,1177,1178,1179],"Landing page","UI","Protótipo","Design responsivo","Beleza",{"problem":1181,"action":1182,"outcome":1183},"Um produto de lançamento sem página própria, que precisava se explicar sozinho para quem tem trinta segundos e o celular na mão.","Desenhei onze seções em desktop e mobile sobre o Creators Figma Kit e o UI Kit Braip, ordenadas como uma sequência de objeções em vez de uma lista de argumentos.","Landing page entregue nos dois breakpoints com protótipo navegável e handoff — com a seção de prova social explicitamente pendente de conteúdo real.","r1ROT2IGRTGUBonSDxfs9fZcYx-lGLCnOsNYHhw4xE0",{"id":1186,"title":1187,"body":1188,"cover":1400,"coverAlt":1401,"description":365,"draft":383,"extension":384,"featured":383,"headline":1402,"meta":1403,"navigation":385,"order":1404,"path":1405,"period":1406,"platform":1169,"role":1407,"seo":1408,"stem":1409,"summary":1410,"tags":1411,"tldr":1413,"__hash__":1417},"casesPt\u002Ftrabalhos\u002Fsos-beleza-absoluta.md","SOS Beleza Absoluta — um style guide posto à prova",{"type":7,"value":1189,"toc":1385},[1190,1192,1195,1198,1200,1203,1206,1213,1215,1229,1235,1237,1240,1243,1246,1252,1254,1258,1261,1264,1268,1271,1274,1280,1286,1290,1293,1296,1302,1306,1309,1312,1318,1320,1323,1340,1343,1349,1351,1354,1374,1376,1379,1382],[10,1191,13],{"id":12},[15,1193,1194],{},"SOS Beleza Absoluta é um protocolo de beleza de dois produtos: um encapsulado com vitaminas de A a Z e um óleo de babosa de uso tópico. A promessa é de dentro para fora — nutrição interna sustentando o resultado, ação externa dando o brilho imediato. O produto se vende por uma landing page longa, do tipo que responde toda objeção antes de pedir o cartão.",[15,1196,1197],{},"A copy veio pronta do time de marketing. A estrutura de argumento — dor, protocolo, diferencial, linha do tempo, prova social, garantia, oferta, FAQ — já estava decidida quando o arquivo chegou em mim. O que estava em aberto era tudo que vem depois: como isso se parece, como se comporta em três larguras de tela, e o que impede que as quatorze seções pareçam quatorze páginas diferentes.",[10,1199,27],{"id":26},[15,1201,1202],{},"Landing page longa tem um modo de falha específico e chato: ela apodrece por adição. A seção 3 pede um bege um pouquinho mais quente que o da seção 2. A seção 7 precisa de um título entre os dois tamanhos que existem, então nasce um terceiro. Ninguém toma uma decisão ruim — cada uma delas é razoável isolada. No fim, você tem onze beges, seis escalas de título e nenhuma forma de mudar a marca sem abrir seção por seção.",[15,1204,1205],{},"Multiplique por três breakpoints. Desktop com 1768 px de largura, iPad com 1024, mobile com 480 — e uma página que, no mobile, tem 15.302 px de altura. É aí que a decisão avulsa cobra: cada valor solto vira três valores soltos.",[15,1207,1208,1209,1212],{},"Então o problema real não era \"desenhar uma landing page\". Era: ",[34,1210,1211],{},"existe um conjunto pequeno o bastante de decisões visuais que cobre uma página inteira de venda, sem exceção?"," A página virou o experimento que responde isso.",[10,1214,84],{"id":83},[692,1216,1217,1220,1223,1226],{},[695,1218,1219],{},"Style guide do projeto: Color Styles, Text Styles e biblioteca de variáveis de cor e tipografia, herdando o Braip Foundations",[695,1221,1222],{},"Biblioteca de componentes própria da página — dezessete componentes e component sets",[695,1224,1225],{},"UI das quatorze seções e adaptação para desktop, iPad e mobile",[695,1227,1228],{},"Direção de arte e composições de produto",[15,1230,1231,1234],{},[34,1232,1233],{},"O que não foi meu:"," a copy inteira, incluindo headline, bullets, FAQ e depoimentos, veio do time de marketing. A arquitetura de argumento da página também. Eu recebi o que a página precisava dizer e decidi como ela diz.",[10,1236,98],{"id":97},[15,1238,1239],{},"O trabalho começou pelo avesso do óbvio: antes de qualquer tela de alta fidelidade, montei os wireframes das três larguras com a copy que existia. O changelog do arquivo registra essa versão como 1.0, em 20 de março de 2026 — \"versão somente com a copy desenvolvida até o momento\". Só depois do retorno do time é que parti para arte e imagens.",[15,1241,1242],{},"Entre o wireframe e a arte entrou o style guide. Ele não é um artefato entregue ao cliente; é infraestrutura minha, feita para que a fase seguinte fosse rápida e para que a página não pudesse divergir de si mesma.",[15,1244,1245],{},"O Braip Foundations deu a base — o design system em que eu já trabalhava a arquitetura de tokens. Isso encurtou a parte cara: eu não recomecei a escala de cor nem os fundamentos de tipografia do zero, herdei e especializei. Vale dizer isso com todas as letras, porque é o motivo de um style guide de projeto ter cabido no cronograma de uma landing page.",[15,1247,1248],{},[813,1249],{"alt":1250,"src":1251},"Painel de Color Styles do arquivo SOS Beleza Absoluta, com a paleta de beges, marrons e neutros organizada em amostras nomeadas","\u002Fimages\u002Fcases\u002Fsos-beleza-styleguide.jpg",[10,1253,145],{"id":144},[147,1255,1257],{"id":1256},"o-sistema-antes-da-primeira-tela","O sistema antes da primeira tela",[15,1259,1260],{},"Color Styles, Text Styles e uma biblioteca de variáveis vieram antes da seção 1. A regra que me impus foi simples e desconfortável: nenhuma cor ou tamanho de texto entra numa seção sem estar no sistema. Quando uma seção pedia algo que não existia, a pergunta não era \"qual valor uso aqui\", era \"essa necessidade é real o suficiente para virar decisão do projeto?\".",[15,1262,1263],{},"Na maior parte das vezes, não era — e a seção se resolvia com o que já havia. Foi assim que a paleta ficou pequena: ela é pequena porque foi obrigada a ser, não porque eu fui disciplinado no momento de cada tela.",[147,1265,1267],{"id":1266},"dezessete-componentes-em-vez-de-quatorze-seções","Dezessete componentes em vez de quatorze seções",[15,1269,1270],{},"A página não é feita de seções, é feita de peças. Produto, Button, Card Modal, Timeline Text, FAQ, Card\u002Ftext image, Image\u002FFlow, Promo bar, Picture\u002FSanfona, Footer responsive — cada um com suas variantes.",[15,1272,1273],{},"Isso muda o custo do responsivo. Adaptar quatorze seções para três larguras é quatorze problemas resolvidos três vezes. Adaptar dezessete componentes é dezessete problemas resolvidos uma vez, e as seções herdam. O carrossel de mobile, por exemplo, é um component set próprio — a seção de protocolo não sabe que virou carrossel, ela só compõe a peça certa.",[15,1275,1276],{},[813,1277],{"alt":1278,"src":1279},"Seção \"Protocolo completo de dentro para fora\" em desktop, com três cards lado a lado explicando nutrição interna, ação externa e praticidade de rotina","\u002Fimages\u002Fcases\u002Fsos-beleza-protocolo.jpg",[15,1281,1282],{},[813,1283],{"alt":1284,"src":1285},"A mesma seção de protocolo em mobile, com os três cards empilhados verticalmente e a imagem de produto reposicionada acima do texto","\u002Fimages\u002Fcases\u002Fsos-beleza-mobile.jpg",[147,1287,1289],{"id":1288},"desenhar-o-tempo-como-parte-do-produto","Desenhar o tempo como parte do produto",[15,1291,1292],{},"Este é o ponto onde o sistema encostou no conteúdo. O protocolo só entrega com constância — as primeiras duas semanas são de adaptação, o primeiro mês traz queda menor, o terceiro é quando outras pessoas percebem. Uma página que só mostra \"antes e depois\" mente sobre isso.",[15,1294,1295],{},"A seção de linha do tempo existe para tornar a espera visível em vez de escondê-la, e ela usa um componente próprio, Timeline Text, com variantes por marco. Cada estágio tem o mesmo peso tipográfico dos outros — nenhum é destacado como \"o momento em que funciona\". É uma decisão de sistema com efeito de honestidade: sem hierarquia entre os marcos, a página não consegue insinuar que o resultado chega antes do que chega.",[15,1297,1298],{},[813,1299],{"alt":1300,"src":1301},"Seção \"Seus primeiros 3 meses\" com os marcos de duas semanas, primeiro mês e terceiro mês descritos em blocos de mesmo peso visual","\u002Fimages\u002Fcases\u002Fsos-beleza-timeline.jpg",[147,1303,1305],{"id":1304},"três-ritmos-não-três-preços","Três ritmos, não três preços",[15,1307,1308],{},"A seção de oferta apresenta três planos — três meses, dois meses e um mês, com óleos inclusos conforme o plano. A tentação padrão é ordenar por preço e destacar o do meio. Preferi tratar os planos como durações de tratamento, coerente com o argumento que a página vinha construindo há dez seções: o produto é tempo, não frasco.",[15,1310,1311],{},"Os três cards compartilham o mesmo componente e a mesma composição de produto; o que muda é a quantidade de tempo comprada. O selo de desconto é o mesmo em todos os três, o que também foi uma decisão de sistema — variar o selo criaria a impressão de que um plano é objetivamente melhor, e essa não é uma afirmação que eu tinha como sustentar.",[15,1313,1314],{},[813,1315],{"alt":1316,"src":1317},"Seção de oferta com três planos de tratamento lado a lado, cada um com composição de produto, preço parcelado e botão de compra","\u002Fimages\u002Fcases\u002Fsos-beleza-oferta.jpg",[10,1319,334],{"id":333},[15,1321,1322],{},"O que foi entregue, de fato:",[692,1324,1325,1328,1331,1334,1337],{},[695,1326,1327],{},"Landing page completa em três breakpoints — desktop, iPad e mobile — com quatorze seções",[695,1329,1330],{},"Style guide do projeto: Color Styles, Text Styles e biblioteca de variáveis de cor e tipografia",[695,1332,1333],{},"Biblioteca de dezessete componentes e component sets próprios, com variantes de breakpoint",[695,1335,1336],{},"Composições de produto e direção de arte das seções",[695,1338,1339],{},"FAQ estruturado sobre a base regulatória informada pelo cliente (RDC 240\u002F2018)",[15,1341,1342],{},"Nenhuma cor ou tamanho de texto ficou fora do sistema — que era a pergunta que o projeto se propôs a responder, e a resposta foi sim.",[15,1344,1345,1348],{},[34,1346,1347],{},"Sobre resultado de negócio: não tenho."," A página foi entregue como arquivo de design; números de conversão, se existem, ficaram com o cliente. A frase \"+100K de autoestima revitalizadas\" que aparece na seção de prova social é um claim fornecido pelo cliente e não é uma métrica que eu tenha verificado ou que este case reivindique.",[10,1350,907],{"id":906},[15,1352,1353],{},"Registrado no próprio changelog do arquivo, como dependência externa:",[692,1355,1356,1362,1368],{},[695,1357,1358,1361],{},[34,1359,1360],{},"Depoimentos."," A seção de prova social tem três depoimentos escritos e cards ainda em placeholder, com texto reciclado de outra seção. É por isso que não há nenhuma imagem dessa seção aqui — fotografar um placeholder seria vender uma seção que não existe.",[695,1363,1364,1367],{},[34,1365,1366],{},"Valores de produto."," Os preços em tela funcionam como estrutura, mas ainda dependiam de confirmação do cliente.",[695,1369,1370,1373],{},[34,1371,1372],{},"Uma inconsistência de copy que passou."," A seção de garantia tem o título \"Desafio 90 dias\" e, no corpo, \"caso você realize o desafio de 30 dias\". Duas datas diferentes na mesma seção. É erro de revisão, e o fato de estar aqui é o registro de que não peguei a tempo.",[10,1375,357],{"id":356},[15,1377,1378],{},"Desenhei os cards de depoimento antes de existir um depoimento real. Criei o componente a partir de um formato que imaginei — uma citação curta, um nome, cinco estrelas — e preenchi com placeholder para seguir o layout.",[15,1380,1381],{},"O problema aparece quando os depoimentos reais chegam: os três que o time já tinha escrito são longos, narrativos, com um começo de medo e uma virada. Não são citações curtas. São histórias. O card que desenhei aperta esse conteúdo até ele perder exatamente a parte que convence.",[15,1383,1384],{},"O certo era o inverso: pedir um depoimento real antes de desenhar qualquer coisa, desenhar o card em cima dele, e só depois generalizar para os outros. Fiz o movimento na ordem confortável em vez da ordem correta, e a seção que mais depende de conteúdo real é justamente a que foi desenhada sem ele.",{"title":365,"searchDepth":366,"depth":366,"links":1386},[1387,1388,1389,1390,1391,1397,1398,1399],{"id":12,"depth":366,"text":13},{"id":26,"depth":366,"text":27},{"id":83,"depth":366,"text":84},{"id":97,"depth":366,"text":98},{"id":144,"depth":366,"text":145,"children":1392},[1393,1394,1395,1396],{"id":1256,"depth":375,"text":1257},{"id":1266,"depth":375,"text":1267},{"id":1288,"depth":375,"text":1289},{"id":1304,"depth":375,"text":1305},{"id":333,"depth":366,"text":334},{"id":906,"depth":366,"text":907},{"id":356,"depth":366,"text":357},"\u002Fimages\u002Fcases\u002Fsos-beleza-cover.jpg","Hero da landing page SOS Beleza Absoluta — modelo sorrindo com a mão no cabelo ao lado do título \"Recupere sua autoestima e beleza natural\", sobre fundo bege claro.","Construir um sistema de estilos próprio sobre o Braip Foundations e usar uma landing page de quatorze seções em três breakpoints como teste de resistência dele.",{},4,"\u002Ftrabalhos\u002Fsos-beleza-absoluta","Março de 2026","Style guide e biblioteca de variáveis · UI e design responsivo · direção de arte e composições de produto",{"title":1187,"description":365},"trabalhos\u002Fsos-beleza-absoluta","Case study sobre o design da landing page do protocolo SOS Beleza Absoluta — a construção de um style guide dedicado com Color Styles, Text Styles e biblioteca de variáveis, e a página inteira desenhada como prova de que o sistema aguentava.",[397,1175,1178,399,1412,1179],"Direção de arte",{"problem":1414,"action":1415,"outcome":1416},"Uma landing page longa nasce como um monte de decisões soltas — cada seção inventa seu próprio tom de bege, sua própria escala de título, seu próprio espaçamento. Em quatorze seções e três breakpoints, isso vira dívida antes de virar página.","Construí um style guide dedicado ao projeto — Color Styles, Text Styles e uma biblioteca de variáveis de cor e tipografia herdando o Braip Foundations — e só então desenhei a página, tratando cada seção como um teste de cobertura do sistema.","Quatorze seções em desktop, iPad e mobile sobre dezessete componentes próprios, sem cor ou tamanho de texto avulso. Os depoimentos e os valores de produto ficaram pendentes de conteúdo do cliente, e estão declarados como tais.","DktKtRcJYYGu_0NH-0xxUOTtU3MSZN8ZZDmtU2a84ks",{"id":1419,"title":1420,"body":1421,"cover":1615,"coverAlt":1616,"description":1617,"draft":383,"extension":384,"featured":383,"headline":1618,"meta":1619,"navigation":385,"order":1620,"path":1621,"period":1622,"platform":1623,"role":1624,"seo":1625,"stem":1626,"summary":1627,"tags":1628,"tldr":1631,"__hash__":1635},"casesPt\u002Ftrabalhos\u002Fcreators-figma-kit.md","Creators Figma Kit — temas de marca por variável",{"type":7,"value":1422,"toc":1607},[1423,1437,1444,1448,1454,1485,1489,1495,1533,1537,1543,1558,1562,1568,1571,1575,1584,1587,1589],[15,1424,1425,1426,1428,1429,1436],{},"Adotar um kit de oitocentos componentes não é economia de desenho — é decidir o que o time\nde marketing ",[34,1427,718],{}," vai precisar decidir a cada lançamento. Os componentes, os page templates\ne os 3.627 ícones deste arquivo são do ",[1430,1431,1435],"a",{"href":1432,"rel":1433},"https:\u002F\u002Fwww.relume.io",[1434],"nofollow","Relume Figma Kit"," na versão 3.5;\nnada disso é meu. O que é meu é a camada por cima: uma coleção de 42 variáveis com um modo por\ncriador, para que trocar de marca deixe de ser um trabalho de redesenho e passe a ser a troca\nde um seletor.",[15,1438,1439,1440,1443],{},"Caso ",[34,1441,1442],{},"em desenvolvimento",". O sistema está de pé e documentado; a fila de landing pages que\nvai provar ou derrubar essa aposta ainda não passou por ele.",[10,1445,1447],{"id":1446},"duas-camadas-não-uma","Duas camadas, não uma",[15,1449,1450],{},[813,1451],{"alt":1452,"src":1453},"Documentação de cor do Creators Figma Kit — tabelas de primitive variables Primary, Secundary e Tertiary com seus hexadecimais, seguidas do bloco Color Schemes com preview de esquema","\u002Fimages\u002Fcases\u002Fcreators-kit-variables.jpg",[15,1455,1456,1457,1460,1461,1464,1465,50,1468,50,1471,50,1474,50,1477,1480,1481,1484],{},"Quinze ",[34,1458,1459],{},"primitives"," guardam valor literal. Vinte e cinco variáveis ",[34,1462,1463],{},"semânticas"," —\n",[39,1466,1467],{},"Colors\u002FText",[39,1469,1470],{},"Background",[39,1472,1473],{},"Foreground",[39,1475,1476],{},"Border",[39,1478,1479],{},"Accent"," — nunca guardam cor: só\napontam para um primitive. É essa separação que faz o tema funcionar. Um componente pinta\no fundo com ",[39,1482,1483],{},"Background\u002FPrimary"," e nunca sabe qual hexadecimal recebeu.",[10,1486,1488],{"id":1487},"uma-paleta-por-criador","Uma paleta por criador",[15,1490,1491],{},[813,1492],{"alt":1493,"src":1494},"Seção Colors do style guide — paletas de cor em blocos, com as escalas primária, secundária e terciária lado a lado","\u002Fimages\u002Fcases\u002Fcreators-kit-colors.jpg",[15,1496,1497,1498,50,1501,108,1504,1507,1508,1510,1511,1514,1515,1518,1519,1521,1522,1525,1526,1529,1530,1532],{},"Três modos na mesma coleção: ",[39,1499,1500],{},"Base",[39,1502,1503],{},"Izadora K",[39,1505,1506],{},"[Valle]",". O ",[39,1509,1500],{}," roda em roxo\n(",[39,1512,1513],{},"#7250a1",") e rosa (",[39,1516,1517],{},"#fc65a9","). O ",[39,1520,1506],{}," troca por amarelo neon (",[39,1523,1524],{},"#edff00",") sobre uma\nescala quase preta (",[39,1527,1528],{},"#16151d",") — não é um ajuste de tom, é o oposto do ",[39,1531,1500],{},", e é\nexatamente o teste que a arquitetura precisava passar.",[10,1534,1536],{"id":1535},"a-tipografia-também-é-variável","A tipografia também é variável",[15,1538,1539],{},[813,1540],{"alt":1541,"src":1542},"Seção Typography do style guide — escala tipográfica com pesos e tamanhos de heading e corpo de texto","\u002Fimages\u002Fcases\u002Fcreators-kit-typography.jpg",[15,1544,1545,108,1548,1551,1552,1554,1555,1557],{},[39,1546,1547],{},"Font Family\u002FHeading",[39,1549,1550],{},"Font Family\u002FText"," são duas variáveis de texto, não uma. O ",[39,1553,1500],{},"\nusa Sora com Poppins; o ",[39,1556,1503],{}," troca para Federo com Gantari. A marca de um criador\nraramente está só na cor, e um sistema que temiza cor mas não tipografia entrega meia troca.",[10,1559,1561],{"id":1560},"o-modo-aplicado","O modo aplicado",[15,1563,1564],{},[813,1565],{"alt":1566,"src":1567},"Frame Valles do style guide — o tema Valle aplicado em composição de página, com tipografia e paleta próprias","\u002Fimages\u002Fcases\u002Fcreators-kit-valle.jpg",[15,1569,1570],{},"Aqui é onde a promessa fica verificável: nenhuma seção foi redesenhada para produzir esta\nimagem. Trocou-se o modo.",[10,1572,1574],{"id":1573},"próximo-passo-componentes-próprios","Próximo passo: componentes próprios",[15,1576,1577,1578,1580,1581,1583],{},"A camada de variáveis é a fundação; o que vem agora são componentes construídos sobre ela.\nO kit do Relume cobre o vocabulário genérico de uma landing page — hero, prova social,\npreço, CTA. O que ele não tem são as seções que as páginas de criador da Braip repetem a\ncada lançamento: bloco de oferta com preço e parcelamento, cronograma de protocolo, kit de\nproduto, garantia. Cada uma dessas desenhada como componente que consome ",[39,1579,1483],{},"\ne ",[39,1582,1547],{}," entra herdando o tema de qualquer criador no dia em que for criada.",[15,1585,1586],{},"É esse conjunto que decide se o sistema cumpre a promessa. Ele foi construído para reduzir o\ntempo de produção de uma landing page, e é isso que a arquitetura pretende — mas ainda não\nmedi. Sem um antes e um depois cronometrados, qualquer número aqui seria invenção.",[10,1588,357],{"id":356},[15,1590,1591,1592,1594,1595,1597,1598,1600,1601,1603,1604,1606],{},"Teria começado pelo ",[39,1593,1503],{},", não pelo ",[39,1596,1506],{},". Escolhi montar primeiro o tema mais\ndistante do ",[39,1599,1500],{}," porque era o mais interessante de fazer — e ele de fato provou que a\narquitetura aguenta uma inversão completa de paleta. Mas o ",[39,1602,1506],{}," é um tema meu, sem\nprazo e sem ninguém esperando; o ",[39,1605,1503],{}," é de um criador real, com landing page para\nsair. Terminei o experimento e deixei o caso de uso pela metade, que é exatamente a ordem\nerrada quando o sistema existe para atender demanda de time.",{"title":365,"searchDepth":366,"depth":366,"links":1608},[1609,1610,1611,1612,1613,1614],{"id":1446,"depth":366,"text":1447},{"id":1487,"depth":366,"text":1488},{"id":1535,"depth":366,"text":1536},{"id":1560,"depth":366,"text":1561},{"id":1573,"depth":366,"text":1574},{"id":356,"depth":366,"text":357},"\u002Fimages\u002Fcases\u002Fcreators-kit-cover.jpg","Capa do Creators Figma Kit sobre fundo roxo, com o logo da Figma em marca d'água e o selo de versão do kit.","Adotar um kit de oitocentos componentes não é economia de desenho — é decidir o que o time\nde marketing não vai precisar decidir a cada lançamento. Os componentes, os page templates\ne os 3.627 ícones deste arquivo são do Relume Figma Kit na versão 3.5;\nnada disso é meu. O que é meu é a camada por cima: uma coleção de 42 variáveis com um modo por\ncriador, para que trocar de marca deixe de ser um trabalho de redesenho e passe a ser a troca\nde um seletor.","Uma camada de variáveis sobre o Relume Figma Kit que troca a marca inteira de uma landing page em um clique de modo.",{},5,"\u002Ftrabalhos\u002Fcreators-figma-kit","2026 — em desenvolvimento","Figma Variables · Landing pages","Sistema de variáveis e curadoria do kit (componentes são do Relume Figma Kit)",{"title":1420,"description":1617},"trabalhos\u002Fcreators-figma-kit","Vitrine do sistema de temas que estou construindo sobre o Relume Figma Kit para o time de marketing da Braip — 42 variáveis em três modos que fazem uma landing page assumir a identidade de um criador sem redesenhar nenhuma seção.\n",[397,399,1629,1175,1630],"Multi-marca","Em desenvolvimento",{"problem":1632,"action":1633,"outcome":1634},"Cada landing page de criador começava do zero — cor, tipografia e espaçamento redecididos a cada lançamento.","Montei uma camada de 42 variáveis com modos de marca sobre o Relume Figma Kit, separando primitives dos papéis semânticos.","Trocar o modo troca a marca da página inteira. Em desenvolvimento — o modo Izadora K ainda herda a paleta do Base.","kpASvutryekt3jbw02r7_MkfKIkbtvtXmBQPg5X-1oY",{"id":1637,"title":1638,"body":1639,"cover":1666,"coverAlt":1801,"description":365,"draft":383,"extension":384,"featured":383,"headline":1802,"meta":1803,"navigation":385,"order":1804,"path":1805,"period":954,"platform":1806,"role":1807,"seo":1808,"stem":1809,"summary":1810,"tags":1811,"tldr":1816,"__hash__":1820},"casesPt\u002Ftrabalhos\u002Fcopa-players.md","Copa Players — a campanha sazonal da Braip",{"type":7,"value":1640,"toc":1788},[1641,1643,1650,1661,1667,1669,1680,1683,1685,1696,1701,1703,1706,1709,1711,1715,1718,1721,1727,1731,1734,1737,1743,1745,1751,1754,1756,1776,1778,1785],[10,1642,13],{"id":12},[15,1644,1645,1646,1649],{},"A Braip é uma plataforma de infoprodutos, e esta landing page tem um alvo estreito: produtor\nque ",[34,1647,1648],{},"já fatura mais de dez mil"," em outra plataforma. Não é uma página de aquisição de\niniciante — é uma página de troca de fornecedor, dirigida a quem já tem operação rodando e\npor isso tem muito a perder numa migração.",[15,1651,1652,1653,1656,1657,1660],{},"A campanha usa a Copa como gancho de urgência. A oferta é concreta e datada: ",[34,1654,1655],{},"0% de taxa no\nPIX e 3,89% no cartão",", para migrações confirmadas até ",[34,1658,1659],{},"19\u002F07\u002F2026",", ou seja, só durante o\ncampeonato. O prazo é o que transforma \"considere migrar\" em \"decida agora\", e é ele que\njustifica a existência de uma página separada em vez de uma seção na LP institucional.",[15,1662,1663],{},[813,1664],{"alt":1665,"src":1666},"Hero da landing page Copa Players: letreiro tipográfico \"Jogue onde você ganha\" com troféu erguido, e abaixo o bloco de taxa com botão Falar com especialista.","\u002Fimages\u002Fcases\u002Fcopa-players-cover.jpg",[10,1668,27],{"id":26},[15,1670,1671,1672,1675,1676,1679],{},"Uma campanha sazonal chega com duas coisas para dizer na primeira dobra, e elas competem:\na ",[34,1673,1674],{},"metáfora"," (Copa, troféu, time, torcida) e o ",[34,1677,1678],{},"número"," (0% no PIX). A metáfora vende\natenção, o número vende decisão — e é o número que o público-alvo veio conferir.",[15,1681,1682],{},"O risco de campanha temática é a arte engolir a oferta: a pessoa entende que existe uma\npromoção da Copa e não entende qual é. O trabalho da hero era não deixar isso acontecer sem\nabrir mão do clima do campeonato, que é justamente o que dá licença para o senso de urgência.",[10,1684,84],{"id":83},[692,1686,1687,1690,1693],{},[695,1688,1689],{},"UI em alta fidelidade da LP de desktop e da versão mobile",[695,1691,1692],{},"Protótipo navegável dos dois breakpoints, incluindo a página de obrigado",[695,1694,1695],{},"Montagem da hero a partir dos assets de campanha",[15,1697,715,1698,1700],{},[34,1699,718],{}," foi meu: a copy, que chegou pronta em anexo do time de marketing; o design\nsystem, que é a biblioteca Braip Foundations; e o deploy, que ficou com o time de tecnologia.",[10,1702,98],{"id":97},[15,1704,1705],{},"A copy vir pronta muda a ordem do trabalho: em vez de descobrir a mensagem desenhando, o\ndesenho começa com a hierarquia já decidida por texto. \"Taxa 0% no PIX e 3,89% no cartão\" é\nmanchete, \"Fatura mais de 10 mil?\" é qualificador de público, \"Falar com especialista\" é a\núnica ação. Meu trabalho foi respeitar essa hierarquia em pixels, não renegociá-la.",[15,1707,1708],{},"Os componentes de base — botões, accordions do FAQ, cards, footer — vieram da Braip\nFoundations. Isso acelerou tudo que era estrutura e concentrou o tempo real onde ele fazia\ndiferença: a hero e o bloco de soluções.",[10,1710,145],{"id":144},[147,1712,1714],{"id":1713},"a-hero-como-cartaz-não-como-banner","A hero como cartaz, não como banner",[15,1716,1717],{},"O letreiro \"Jogue onde você ganha\" é tratado como arte tipográfica — recortado, com troféu\ne mãos de torcida invadindo as bordas, ocupando o topo inteiro como um pôster de campeonato.\nSó que ele para antes da metade da dobra. Abaixo dele a página muda de registro: fundo\nsólido, tipografia limpa do design system, o número da taxa em texto de verdade.",[15,1719,1720],{},"Essa separação é a decisão central. A camada de cima é emoção e reconhecimento da campanha;\na de baixo é informação. Manter a taxa como texto — e não embutida na arte — garante que ela\nseja legível em qualquer tela, selecionável, traduzível e editável sem reabrir o arquivo de\narte quando o número mudar.",[15,1722,1723],{},[813,1724],{"alt":1725,"src":1726},"Recorte do key visual da hero: composição tipográfica da campanha com troféu, torcida e elementos gráficos verdes sobre fundo roxo.","\u002Fimages\u002Fcases\u002Fcopa-players-hero-arte.jpg",[147,1728,1730],{"id":1729},"quatro-promessas-uma-de-cada-vez","Quatro promessas, uma de cada vez",[15,1732,1733],{},"O bloco de soluções da Braip Members poderia ser uma grade de cinco cards iguais — e seria\numa parede que ninguém lê. Optei por uma lista vertical em que apenas um item fica aberto,\ncom título, descrição e CTA, enquanto os outros ficam recolhidos como títulos clicáveis. Ao\nlado, uma imagem grande acompanha o item ativo.",[15,1735,1736],{},"Isso troca \"veja tudo\" por \"veja uma coisa\", que é o que a página precisa: o leitor não está\ncomparando funcionalidades, está sendo convencido de que existe valor além da taxa.",[15,1738,1739],{},[813,1740],{"alt":1741,"src":1742},"Seção de soluções da Braip Members: lista vertical com Vitrine de cursos, Upsell e automações, Suporte para alunos, Relatórios e avaliações e Braip Play, com imagem de apoio à direita.","\u002Fimages\u002Fcases\u002Fcopa-players-solucoes.jpg",[10,1744,334],{"id":333},[15,1746,1747,1748,341],{},"Entreguei os protótipos de alta fidelidade de desktop (1440 × 5349) e mobile (390 × 6275),\nmais a página de obrigado nos dois breakpoints, com a etiqueta de status do arquivo em\n",[34,1749,1750],{},"\"Liberado para validação\"",[15,1752,1753],{},"Não tenho número de conversão para mostrar. A página é do cliente, a instrumentação também,\ne o dado de performance ficou do lado dele — inventar um número aqui destruiria o motivo de\neste portfólio existir.",[10,1755,907],{"id":906},[692,1757,1758,1764,1770],{},[695,1759,1760,1763],{},[34,1761,1762],{},"O formulário de migração está em placeholder."," A Section 03 tem um retângulo cinza no\nlugar do form, um \"Lorem ipsum\" e três bullets com copy reaproveitada de outra landing\npage (\"Flexibilidade de horários\", \"Resultados rápidos e seguros\", um parágrafo sobre\nmarketing de afiliados que não pertence a esta campanha). É por isso que essa seção não\naparece em nenhuma imagem deste case.",[695,1765,1766,1769],{},[34,1767,1768],{},"A oferta diverge entre breakpoints."," O desktop anuncia \"3,89% no cartão\"; o mobile diz\n\"3,89% + R$ 2,49\". Uma das duas está errada e isso precisa ser resolvido com o time de\nmarketing antes de publicar.",[695,1771,1772,1775],{},[34,1773,1774],{},"Nenhuma métrica coletada"," do meu lado.",[10,1777,357],{"id":356},[15,1779,1780,1781,1784],{},"Desenhei a hero pelo desktop e só depois resolvi o mobile — e paguei por isso. A composição\nde cartaz que funciona em 1440 px não tem versão honesta em 390 px, então o mobile virou uma\nadaptação em vez de um desenho, com a arte encolhida no topo e a mensagem reescrita para\ncaber. Se recomeçasse, desenharia primeiro o bloco de oferta em mobile, onde o espaço é caro,\ne trataria a arte de campeonato como a camada que ",[34,1782,1783],{},"se expande"," no desktop.",[15,1786,1787],{},"E teria travado a copy do formulário antes de prototipar. Deixar uma seção em placeholder num\nprotótipo marcado como pronto para validação transfere para quem revisa um trabalho que era\nmeu — perceber que aquele bloco não é conteúdo, é buraco.",{"title":365,"searchDepth":366,"depth":366,"links":1789},[1790,1791,1792,1793,1794,1798,1799,1800],{"id":12,"depth":366,"text":13},{"id":26,"depth":366,"text":27},{"id":83,"depth":366,"text":84},{"id":97,"depth":366,"text":98},{"id":144,"depth":366,"text":145,"children":1795},[1796,1797],{"id":1713,"depth":375,"text":1714},{"id":1729,"depth":375,"text":1730},{"id":333,"depth":366,"text":334},{"id":906,"depth":366,"text":907},{"id":356,"depth":366,"text":357},"Hero da landing page Copa Players com o letreiro \"Jogue onde você ganha\", um troféu erguido e a headline da taxa sobre fundo roxo com traços verdes.","Uma landing page de migração que empresta a linguagem visual da Copa para vender a menor taxa do mercado.",{},7,"\u002Ftrabalhos\u002Fcopa-players","Landing page · Desktop e mobile","UI e protótipo em alta fidelidade (copy fornecida pelo time de marketing; componentes da Braip Foundations)",{"title":1638,"description":365},"trabalhos\u002Fcopa-players","Case curto sobre a LP promocional Copa Players: como a hero foi construída para entregar a metáfora do campeonato e o número da oferta na mesma dobra, sem que a arte engolisse a proposta.\n",[1175,1812,1813,1814,1815],"Campanha sazonal","Hero design","Responsivo","Braip",{"problem":1817,"action":1818,"outcome":1819},"Vender migração de plataforma para quem já fatura, com a metáfora da Copa e o número da oferta disputando a mesma dobra.","Desenhei a hero como um cartaz em camadas — arte de campanha em cima, headline de taxa em texto vivo e CTA embaixo.","Protótipos de desktop, mobile e página de obrigado entregues e marcados como liberados para validação. Conversão ficou com o cliente.","GDj3oZwaaJRAw7c6hiFOi_u-4ZyGBheZhtd3OgYr4io",{"id":1822,"title":1823,"body":1824,"cover":1840,"coverAlt":1940,"description":1941,"draft":383,"extension":384,"featured":383,"headline":1942,"meta":1943,"navigation":385,"order":1944,"path":1945,"period":1946,"platform":1947,"role":1948,"seo":1949,"stem":1950,"summary":1951,"tags":1952,"tldr":1958,"__hash__":1962},"casesPt\u002Ftrabalhos\u002Faml-locacoes.md","AML Locações — site institucional",{"type":7,"value":1825,"toc":1932},[1826,1835,1841,1845,1863,1869,1875,1881,1885,1888,1894,1898,1905,1911,1915,1918,1924,1926,1929],[15,1827,1828,1829,1834],{},"A ",[1430,1830,1833],{"href":1831,"rel":1832},"https:\u002F\u002Famllocacoeseservicos.com.br",[1434],"AML Locações e Serviços"," aluga caminhão munck em\nGovernador Valadares e região, e opera desde 1996. É o tipo de cliente cujo produto é peso:\nguindaste, carga, responsabilidade. O site precisava carregar essa sensação sem virar\ncatálogo técnico — quem contrata munck decide por confiança e por telefone, não por\ncomparação de especificações.",[15,1836,1837],{},[813,1838],{"alt":1839,"src":1840},"Topo do site da AML: menu, título \"Deixe o pesado por nossa conta!\" e botão Fale conosco sobre foto de caminhão munck em operação.","\u002Fimages\u002Fcases\u002Faml-cover.jpg",[10,1842,1844],{"id":1843},"o-design","O design",[15,1846,1847,1850,1851,1854,1855,1858,1859,1862],{},[34,1848,1849],{},"Paleta."," Verde-petróleo (",[39,1852,1853],{},"#004A4E",") como base, um verde mais claro (",[39,1856,1857],{},"#006A6F",") para\nseparar blocos e dourado (",[39,1860,1861],{},"#D79D51",") reservado só para ação e destaque. Escolhi escuro como\ncor dominante para as fotos de equipamento — céu aberto, ferro, canteiro de obra — pousarem\ncom contraste sem precisar de tratamento pesado. O dourado aparece pouco, e por isso funciona:\nonde ele está, é para clicar.",[15,1864,1865,1868],{},[34,1866,1867],{},"Tipografia."," Plus Jakarta Sans nos títulos, Heebo no texto corrido. A headline \"Deixe o\npesado por nossa conta!\" é a única frase da primeira dobra em tamanho grande — uma promessa\nde serviço em linguagem de gente, não de equipamento.",[15,1870,1871,1874],{},[34,1872,1873],{},"Estrutura."," Página única com cinco movimentos: promessa, quatro pilares (excelência,\ninovação, comprometimento, segurança), três portas para as páginas internas (equipamentos,\nserviços, sobre), prova social e contato. Cada bloco existe para reduzir uma dúvida\nespecífica, na ordem em que a dúvida aparece.",[15,1876,1877],{},[813,1878],{"alt":1879,"src":1880},"Bloco de navegação do site: apresentação da AML e três cartões que levam para Equipamentos, Serviços e Sobre.","\u002Fimages\u002Fcases\u002Faml-navegacao.jpg",[147,1882,1884],{"id":1883},"prova-social-como-seção-inteira-não-como-rodapé","Prova social como seção inteira, não como rodapé",[15,1886,1887],{},"Serviço pesado se vende por reputação. Em vez de espremer depoimentos numa faixa, dei a eles\no maior bloco da página, com relatos completos — atendimento, pontualidade, execução — em vez\nde frases de vitrine. É a seção mais alta do site, e isso é intencional: é o argumento que\nconverte.",[15,1889,1890],{},[813,1891],{"alt":1892,"src":1893},"Seção de depoimentos do site da AML, com relatos de clientes em cartões sobre fundo claro.","\u002Fimages\u002Fcases\u002Faml-depoimentos.jpg",[147,1895,1897],{"id":1896},"duas-rotas-de-contato-nenhuma-escondida","Duas rotas de contato, nenhuma escondida",[15,1899,1900,1901,1904],{},"O rodapé da página oferece formulário ",[34,1902,1903],{},"e"," WhatsApp, porque esse público resolve por\nmensagem. Um FAQ curto responde antes do contato as três perguntas que sempre chegam —\nalcance da lança, dimensões do caminhão, peso suportado — para que a conversa comece já na\nnegociação, e não na especificação.",[15,1906,1907],{},[813,1908],{"alt":1909,"src":1910},"Bloco final do site: chamada \"Faça seu orçamento!\", botão de WhatsApp e FAQ com perguntas sobre alcance, dimensões e capacidade do caminhão.","\u002Fimages\u002Fcases\u002Faml-faq.jpg",[10,1912,1914],{"id":1913},"como-foi-feito","Como foi feito",[15,1916,1917],{},"WordPress com Elementor — escolha do cliente, que precisava editar conteúdo sozinho depois.\nIsso definiu o desenho: nada que dependesse de código customizado para continuar funcionando\nquando outra pessoa mexesse. Fiz o design, o tratamento das fotos de equipamento, a montagem\ne a estrutura de SEO on-page (títulos, hierarquia de headings, meta title com a região\natendida).",[15,1919,1828,1920,1923],{},[34,1921,1922],{},"copy é da Bianca Lima"," — incluindo a headline. Meu trabalho foi dar a ela a hierarquia e\no espaço que ela pedia.",[10,1925,357],{"id":356},[15,1927,1928],{},"Deixei a página inicial com 4.997 px de altura no desktop e 6.130 px no mobile — no celular,\na prova social só chega depois de muita rolagem, justamente onde ela é mais necessária. Se\nrefizesse, cortaria o bloco de pilares no mobile e subiria os depoimentos.",[15,1930,1931],{},"Também não instrumentei nada. Não há evento de clique no botão de WhatsApp nem no envio do\nformulário, então não sei por qual das duas rotas os orçamentos realmente chegam — e essa era\na única pergunta que o site poderia ter respondido sozinho.",{"title":365,"searchDepth":366,"depth":366,"links":1933},[1934,1938,1939],{"id":1843,"depth":366,"text":1844,"children":1935},[1936,1937],{"id":1883,"depth":375,"text":1884},{"id":1896,"depth":375,"text":1897},{"id":1913,"depth":366,"text":1914},{"id":356,"depth":366,"text":357},"Topo do site da AML Locações com o título \"Deixe o pesado por nossa conta!\" sobre foto de caminhão munck e fundo verde-petróleo.","A AML Locações e Serviços aluga caminhão munck em\nGovernador Valadares e região, e opera desde 1996. É o tipo de cliente cujo produto é peso:\nguindaste, carga, responsabilidade. O site precisava carregar essa sensação sem virar\ncatálogo técnico — quem contrata munck decide por confiança e por telefone, não por\ncomparação de especificações.","Um site de locação de caminhão munck desenhado para parecer tão sólido quanto o equipamento que aluga.",{},8,"\u002Ftrabalhos\u002Faml-locacoes","2025","Site institucional · WordPress e Elementor","Design, tratamento de imagem e build no Elementor (copy de Bianca Lima)",{"title":1823,"description":1941},"trabalhos\u002Faml-locacoes","Vitrine do site da AML Locações e Serviços: verde-petróleo e dourado, tipografia grande e um caminho curto até o WhatsApp. Design, arte e montagem no Elementor; a copy é da Bianca Lima.\n",[1953,1954,1955,1956,1957],"Site institucional","WordPress","Elementor","Identidade visual","Cliente local",{"problem":1959,"action":1960,"outcome":1961},"Uma locadora de munck ativa desde 1996 sem presença digital que passasse a mesma confiança do serviço.","Desenhei um site de página única com paleta verde-petróleo e dourada, tipografia grande e contato a um clique em qualquer altura da rolagem.","Site no ar em amllocacoeseservicos.com.br, com orçamento por formulário e por WhatsApp. Métricas ficaram com o cliente.","J6ZFZptVnk63LKiUrJWExqE09Ny7meXqOsP38ylylAM",1787766318858]