[{"data":1,"prerenderedAt":2686},["ShallowReactive",2],{"case-\u002Ftrabalhos\u002Fdesign-system-braip":3,"cases-casesPt-all-nolimit":414},{"id":4,"title":5,"body":6,"client":381,"clips":382,"cover":383,"coverAlt":384,"description":365,"draft":385,"extension":386,"featured":387,"headline":388,"meta":389,"navigation":387,"offer":390,"order":366,"path":391,"period":392,"platform":393,"role":394,"seo":395,"stem":396,"summary":397,"tagline":398,"tags":399,"tldr":405,"video":409,"year":412,"__hash__":413},"casesPt\u002Ftrabalhos\u002Fdesign-system-braip.md","Design System Braip",{"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},"Braip",null,"\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.",{},"system","\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.","De biblioteca a sistema.",[400,401,402,403,404],"Design System","Design Tokens","Figma Variables","Acessibilidade","Documentação",{"problem":406,"action":407,"outcome":408},"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.",{"src":410,"poster":411},"\u002Fvideos\u002Fcases\u002Fdesign-system-braip.mp4","\u002Fvideos\u002Fcases\u002Fdesign-system-braip.jpg","2025–26","38kjYviGxCltn1Cmcpqrc28f41iLySKTuJra07TMQuA",[415,547,785,1096,1422,1526,1765,1979,2164,2383,2524],{"id":416,"title":417,"body":418,"client":381,"clips":382,"cover":522,"coverAlt":523,"description":365,"draft":385,"extension":386,"featured":387,"headline":524,"meta":525,"navigation":387,"offer":526,"order":527,"path":528,"period":529,"platform":530,"role":531,"seo":532,"stem":533,"summary":534,"tagline":535,"tags":536,"tldr":539,"video":543,"year":529,"__hash__":546},"casesPt\u002Ftrabalhos\u002Fapp-braip-v2.md","App Braip v2",{"type":7,"value":419,"toc":516},[420,422,429,436,440,447,475,481,487,493,499,505,508,511,513],[10,421,27],{"id":26},[15,423,424,425,428],{},"O produtor da Braip abre o app com três perguntas: ",[34,426,427],{},"quanto vendi, quanto posso sacar e o que\naconteceu com este pedido",". A versão anterior respondia as três, mas em telas que não\nconversavam com o design system novo e sem os estados que ninguém desenha — carregando,\nvazio, recusado.",[15,430,431],{},[432,433],"img",{"alt":434,"src":435},"Home do App Braip com saldo disponível, botão de solicitar saque e resumo de vendas.","\u002Fimages\u002Fcases\u002Fapp-braip-home.jpg",[10,437,439],{"id":438},"o-que-eu-desenhei","O que eu desenhei",[15,441,442,443,446],{},"Cada fluxo saiu de componentes da ",[34,444,445],{},"Braip Components",", nunca de tela solta, e passou por\nLight e Dark antes de ir para revisão.",[448,449,450,457,463,469],"ul",{},[451,452,453,456],"li",{},[34,454,455],{},"Home"," com saldo, atalhos e o resumo de vendas do dia ou do mês.",[451,458,459,462],{},[34,460,461],{},"Vendas e detalhe da venda",", do pedido pago ao recusado, com a folha de envio subindo de baixo.",[451,464,465,468],{},[34,466,467],{},"Saques e histórico",", com cada status (processando, realizado, negado) visível sem abrir o item.",[451,470,471,474],{},[34,472,473],{},"Biometria"," na entrada, com o cadeado da abertura como transição.",[15,476,477],{},[432,478],{"alt":479,"src":480},"Lista de vendas com totais do período e status de cada pedido.","\u002Fimages\u002Fcases\u002Fapp-braip-vendas.jpg",[15,482,483],{},[432,484],{"alt":485,"src":486},"Detalhe da venda com valor, situação do pagamento e resumo do pedido.","\u002Fimages\u002Fcases\u002Fapp-braip-detalhe-venda.jpg",[15,488,489],{},[432,490],{"alt":491,"src":492},"Fluxo de solicitar saque com saldo disponível e conta bancária de destino.","\u002Fimages\u002Fcases\u002Fapp-braip-saques.jpg",[15,494,495],{},[432,496],{"alt":497,"src":498},"Histórico de saques filtrado por status.","\u002Fimages\u002Fcases\u002Fapp-braip-historico-saques.jpg",[15,500,501],{},[432,502],{"alt":503,"src":504},"Tela de ativação do Face ID para entrar no app.","\u002Fimages\u002Fcases\u002Fapp-braip-biometria.jpg",[10,506,203],{"id":507},"motion",[15,509,510],{},"O motion não é decoração: ele explica de onde a tela veio. A folha de envio entra de baixo\ncom a mesma curva de todos os overlays do app, o saldo conta até o valor e o cadeado da\nabertura se desfaz antes da home aparecer. As curvas e durações vêm dos tokens de motion do\ndesign system, não de ajuste por tela.",[10,512,334],{"id":333},[15,514,515],{},"Fluxos aprovados no ciclo de revisão do time e prontos para lançamento, com as artes das\nlojas entregues junto. As métricas de uso ficam com o time de produto — não são minhas para\npublicar.",{"title":365,"searchDepth":366,"depth":366,"links":517},[518,519,520,521],{"id":26,"depth":366,"text":27},{"id":438,"depth":366,"text":439},{"id":507,"depth":366,"text":203},{"id":333,"depth":366,"text":334},"\u002Fimages\u002Fcases\u002Fapp-braip-cover.jpg","iPhone com a home do App Braip — saldo disponível, botão de solicitar saque e o resumo de vendas — sobre fundo lilás claro.","O app que o produtor abre para saber quanto vendeu, quanto tem para sacar e onde está cada pedido.",{},"product",1,"\u002Ftrabalhos\u002Fapp-braip-v2","2026","iOS e Android · Light e Dark","UI\u002FUX Product Designer — app mobile, do fluxo ao motion",{"title":417,"description":365},"trabalhos\u002Fapp-braip-v2","Case study do App Braip v2 — o redesenho do app mobile da plataforma sobre a biblioteca Braip Components, cobrindo home, vendas, detalhe da venda, saques, histórico, biometria e as artes das lojas, em Light e Dark.\n","Suas vendas na palma da mão.",[537,538,400,203],"Produto","Mobile",{"problem":540,"action":541,"outcome":542},"O app antigo não acompanhava o design system novo e deixava o produtor sem resposta rápida para as três perguntas do dia — quanto vendi, quanto posso sacar, o que aconteceu com este pedido.","Redesenhei os fluxos centrais sobre a Braip Components, com estados de carregamento, vazio e erro em cada tela, paridade Light\u002FDark e o motion de abertura, biometria e folhas que sobem de baixo.","Fluxos aprovados no ciclo de revisão do time e prontos para lançamento nas lojas, com as artes da App Store e do Google Play entregues junto.",{"src":544,"poster":545},"\u002Fvideos\u002Fcases\u002Fapp-braip-v2.mp4","\u002Fvideos\u002Fcases\u002Fapp-braip-v2.jpg","jr8JXlrKZ3buo2A8RTMfi38pe-TaAxzyfsS3qgra0GY",{"id":4,"title":5,"body":548,"client":381,"clips":382,"cover":383,"coverAlt":384,"description":365,"draft":385,"extension":386,"featured":387,"headline":388,"meta":780,"navigation":387,"offer":390,"order":366,"path":391,"period":392,"platform":393,"role":394,"seo":781,"stem":396,"summary":397,"tagline":398,"tags":782,"tldr":783,"video":784,"year":412,"__hash__":413},{"type":7,"value":549,"toc":766},[550,552,554,556,558,560,562,580,586,590,592,596,598,600,620,622,624,626,628,630,636,640,644,646,650,654,658,660,670,674,678,680,682,708,712,744,746,748,752,754,758,760,762,764],[10,551,13],{"id":12},[15,553,17],{},[15,555,20],{},[15,557,23],{},[10,559,27],{"id":26},[15,561,30],{},[15,563,564,37,566,42,568,46,570,50,572,50,574,50,576,60,578,64],{},[34,565,36],{},[39,567,41],{},[39,569,45],{},[39,571,49],{},[39,573,53],{},[39,575,56],{},[39,577,59],{},[39,579,63],{},[15,581,582,70,584,74],{},[34,583,69],{},[39,585,73],{},[15,587,588,80],{},[34,589,79],{},[10,591,84],{"id":83},[15,593,87,594,91],{},[34,595,90],{},[15,597,94],{},[10,599,98],{"id":97},[15,601,101,602,104,604,108,606,112,608,116,610,119,612,123,614,126,616,129,618,132],{},[39,603,45],{},[39,605,107],{},[39,607,111],{},[39,609,115],{},[39,611,56],{},[39,613,122],{},[39,615,49],{},[39,617,53],{},[39,619,56],{},[15,621,135],{},[15,623,138],{},[15,625,141],{},[10,627,145],{"id":144},[147,629,150],{"id":149},[15,631,632,156,634,160],{},[34,633,155],{},[39,635,159],{},[15,637,638,166],{},[34,639,165],{},[15,641,642,172],{},[34,643,171],{},[147,645,176],{"id":175},[15,647,648,181],{},[34,649,155],{},[15,651,652,186],{},[34,653,165],{},[15,655,656,191],{},[34,657,171],{},[147,659,195],{"id":194},[15,661,662,200,664,204,666,208,668,212],{},[34,663,155],{},[39,665,203],{},[39,667,207],{},[39,669,211],{},[15,671,672,217],{},[34,673,165],{},[15,675,676,222],{},[34,677,171],{},[10,679,226],{"id":225},[15,681,229],{},[15,683,684,235,686,50,688,50,690,50,692,50,694,251,696,50,698,50,700,108,702,264,704,268,706,271],{},[34,685,234],{},[39,687,238],{},[39,689,241],{},[39,691,244],{},[39,693,247],{},[39,695,250],{},[39,697,254],{},[39,699,257],{},[39,701,260],{},[39,703,263],{},[39,705,267],{},[39,707,263],{},[15,709,710,277],{},[34,711,276],{},[15,713,714,283,716,50,718,50,720,50,722,50,724,299,726,50,728,50,730,309,732,312,734,315,736,318,738,321,740,324,742,327],{},[34,715,282],{},[39,717,286],{},[39,719,289],{},[39,721,292],{},[39,723,295],{},[39,725,298],{},[39,727,302],{},[39,729,305],{},[39,731,308],{},[39,733,289],{},[39,735,292],{},[39,737,295],{},[39,739,305],{},[39,741,308],{},[39,743,302],{},[15,745,330],{},[10,747,334],{"id":333},[15,749,337,750,341],{},[39,751,340],{},[15,753,344],{},[15,755,347,756,350],{},[39,757,295],{},[15,759,353],{},[10,761,357],{"id":356},[15,763,360],{},[15,765,363],{},{"title":365,"searchDepth":366,"depth":366,"links":767},[768,769,770,771,772,777,778,779],{"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":773},[774,775,776],{"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},[400,401,402,403,404],{"problem":406,"action":407,"outcome":408},{"src":410,"poster":411},{"id":786,"title":787,"body":788,"client":381,"clips":382,"cover":944,"coverAlt":1078,"description":365,"draft":385,"extension":386,"featured":387,"headline":1079,"meta":1080,"navigation":387,"offer":526,"order":375,"path":1081,"period":529,"platform":1082,"role":1083,"seo":1084,"stem":1085,"summary":1086,"tagline":1087,"tags":1088,"tldr":1091,"video":382,"year":529,"__hash__":1095},"casesPt\u002Ftrabalhos\u002Fcheckout-discovery.md","Checkout Braip",{"type":7,"value":789,"toc":1062},[790,792,795,802,809,811,817,820,826,829,831,851,858,860,867,882,889,891,895,900,905,910,914,917,922,927,936,939,945,952,956,961,966,970,975,984,988,993,998,1000,1003,1026,1032,1036,1054,1056,1059],[10,791,13],{"id":12},[15,793,794],{},"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,796,797,798,801],{},"Quando peguei o arquivo, existiam ",[34,799,800],{},"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,803,804,805,808],{},"O escopo real do trabalho está registrado no changelog do arquivo, e vale ser\nliteral sobre ele: ",[34,806,807],{},"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,810,27],{"id":26},[15,812,813,814,341],{},"A tensão de design aqui não é a tela cheia. É a tela cheia ",[34,815,816],{},"de coisa obrigatória",[15,818,819],{},"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,821,822,823,341],{},"Então a pergunta não podia ser \"como reduzir campos\". Tinha que ser: ",[34,824,825],{},"como fazer um\nformulário longo não parecer um obstáculo enquanto ele é preenchido",[15,827,828],{},"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,830,84],{"id":83},[448,832,833,836,839,842,845,848],{},[451,834,835],{},"Remodelagem do checkout de página única sobre o design system V2",[451,837,838],{},"Mapeamento e desenho do caminho infeliz — recusas, falhas e estados de erro",[451,840,841],{},"Estados de carregamento (skeleton) para o processamento do pagamento",[451,843,844],{},"Adaptação responsiva completa: desktop 1440 e mobile 390",[451,846,847],{},"Motion de preenchimento do cartão de crédito",[451,849,850],{},"Protótipo navegável por método de pagamento, com confirmação e recusa",[15,852,853,854,857],{},"O que ",[34,855,856],{},"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,859,98],{"id":97},[15,861,862,863,866],{},"Comecei pelo inventário, não pelo desenho. O arquivo ganhou duas seções marcadas\n",[39,864,865],{},"⚠︎ 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,868,869,870,873,874,877,878,881],{},"Depois separei o trabalho em três frentes que andaram em paralelo, cada uma com sua\nprópria seção no arquivo: o ",[34,871,872],{},"caminho feliz"," (página única moderna), o ",[34,875,876],{},"caminho\ninfeliz"," (recusas e falhas) e os ",[34,879,880],{},"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,883,884,885,888],{},"O motion do cartão nasceu num rascunho à parte antes de entrar no fluxo — uma seção\n",[39,886,887],{},"motion draft card",", isolada, onde dava para errar sem quebrar as telas boas.",[10,890,145],{"id":144},[147,892,894],{"id":893},"o-formulário-longo-mostra-tudo-mas-em-dois-pesos","O formulário longo mostra tudo, mas em dois pesos",[15,896,897,899],{},[34,898,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,901,902,904],{},[34,903,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,906,907,909],{},[34,908,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,911,913],{"id":912},"o-cartão-de-crédito-se-preenche-enquanto-você-digita","O cartão de crédito se preenche enquanto você digita",[15,915,916],{},"Esta é a decisão que dá nome ao case.",[15,918,919,921],{},[34,920,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,923,924,926],{},[34,925,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,928,929,931,932,935],{},[34,930,171],{}," desenhei o cartão como uma ",[34,933,934],{},"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,937,938],{},"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,940,941],{},[432,942],{"alt":943,"src":944},"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,946,947,948,951],{},"O motion tem uma regra que segurei durante todo o desenho: ",[34,949,950],{},"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,953,955],{"id":954},"o-caminho-infeliz-recebeu-tanto-arquivo-quanto-o-feliz","O caminho infeliz recebeu tanto arquivo quanto o feliz",[15,957,958,960],{},[34,959,155],{}," cartão recusado é o desfecho mais comum depois do sucesso, e era o\núnico sem tela.",[15,962,963,965],{},[34,964,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,967,969],{"id":968},"a-espera-é-desenhada-não-é-ausência","A espera é desenhada, não é ausência",[15,971,972,974],{},[34,973,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,976,977,979,980,983],{},[34,978,171],{}," desenhei o estado de processamento como ",[34,981,982],{},"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,985,987],{"id":986},"mobile-não-é-a-mesma-página-mais-estreita","Mobile não é a mesma página mais estreita",[15,989,990,992],{},[34,991,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,994,995,997],{},[34,996,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,999,334],{"id":333},[15,1001,1002],{},"O que foi entregue:",[448,1004,1005,1008,1011,1014,1017,1020,1023],{},[451,1006,1007],{},"Checkout de página única remodelado sobre o design system V2, em desktop (1440) e\nmobile (390)",[451,1009,1010],{},"Variante multietapas mantida e atualizada em paralelo",[451,1012,1013],{},"Caminho infeliz desenhado: três tipos de recusa mais falha de emissão",[451,1015,1016],{},"Estados de carregamento com skeleton para o processamento do pagamento",[451,1018,1019],{},"Telas de pedido confirmado para cartão, Pix e boleto",[451,1021,1022],{},"Motion de preenchimento do cartão, com especificação de comportamento",[451,1024,1025],{},"Protótipo navegável cobrindo os quatro métodos de pagamento",[15,1027,1028,1031],{},[34,1029,1030],{},"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,1033,1035],{"id":1034},"o-que-ficou-pendente","O que ficou pendente",[448,1037,1038,1048],{},[451,1039,1040,1041,50,1044,1047],{},"Os campos de apoio dos inputs ainda exibem strings padrão do design system\n(",[39,1042,1043],{},"Message text",[39,1045,1046],{},"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.",[451,1049,1050,1051,1053],{},"As duas seções legadas continuam no arquivo, marcadas ",[39,1052,865],{},". Elas só saem\nquando a migração terminar de verdade em produção.",[10,1055,357],{"id":356},[15,1057,1058],{},"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,1060,1061],{},"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":1063},[1064,1065,1066,1067,1068,1075,1076,1077],{"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":1069},[1070,1071,1072,1073,1074],{"id":893,"depth":375,"text":894},{"id":912,"depth":375,"text":913},{"id":954,"depth":375,"text":955},{"id":968,"depth":375,"text":969},{"id":986,"depth":375,"text":987},{"id":333,"depth":366,"text":334},{"id":1034,"depth":366,"text":1035},{"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","Checkout web · Desktop e mobile","UI\u002FUX Designer — Produto (redesenho sobre o design system V2 da Braip)",{"title":787,"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.\n","Os 15 segundos que decidem a venda.",[537,1089,1090,203,400],"Fluxo","Estados",{"problem":1092,"action":1093,"outcome":1094},"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.","o40HP4-nAqO8aM0DdVbsd4pplQUUxcoA_aqb8YwJBC0",{"id":1097,"title":1098,"body":1099,"client":1098,"clips":382,"cover":1335,"coverAlt":1399,"description":365,"draft":385,"extension":386,"featured":387,"headline":1400,"meta":1401,"navigation":387,"offer":1402,"order":1403,"path":1404,"period":1405,"platform":1406,"role":1407,"seo":1408,"stem":1409,"summary":1410,"tagline":1411,"tags":1412,"tldr":1417,"video":382,"year":1405,"__hash__":1421},"casesPt\u002Ftrabalhos\u002Fhg-pagamentos.md","HG Pagamentos",{"type":7,"value":1100,"toc":1384},[1101,1103,1106,1109,1112,1114,1117,1123,1126,1129,1132,1134,1154,1160,1162,1173,1176,1178,1182,1185,1188,1194,1214,1217,1220,1224,1227,1230,1236,1239,1243,1250,1261,1267,1270,1277,1283,1287,1293,1296,1322,1325,1327,1330,1336,1339,1345,1348,1350,1353,1373,1375,1378,1381],[10,1102,13],{"id":12},[15,1104,1105],{},"A HG Pagamentos é a subadquirente do Grupo Hélio Gomes — a camada que fica entre\no lojista e a adquirente, processando a transação e assumindo parte do risco. É\num negócio que só existe se as pessoas confiarem nele: quem vende precisa\nacreditar que o dinheiro chega, e quem compra precisa acreditar que o dado não\nvaza.",[15,1107,1108],{},"O sistema é desenvolvido internamente pelo grupo, o que significa que a marca não\nia ficar só em papelaria. Ela ia parar dentro de um produto — em telas de\ncheckout, em painéis de lojista, em comprovantes. Isso mudou o peso das decisões:\ntudo que eu desenhasse precisava sobreviver a 24 px de altura numa barra de\nnavegação, não só a uma capa de apresentação.",[15,1110,1111],{},"Posicionamento, propósito e os seis valores emocionais da marca chegaram\ndefinidos pelo cliente. Meu trabalho começou onde a estratégia terminou: traduzir\naquilo em forma.",[10,1113,27],{"id":26},[15,1115,1116],{},"Os atributos que o cliente queria comunicar são, lidos juntos, uma contradição:",[1118,1119,1120],"blockquote",{},[15,1121,1122],{},"Sólida e confiável · Moderna e tecnológica · Séria e objetiva · Amigável e\nacessível",[15,1124,1125],{},"Solidez e seriedade puxam para o vocabulário bancário — geometria rígida, azul\ninstitucional, serifa, simetria. Foi assim que o setor financeiro se desenhou por\nsetenta anos, e funciona: parece seguro. O problema é que também parece\ninacessível, e o cliente da HG não é o correntista de banco grande. É o\nempreendedor pequeno, que já foi tratado com desconfiança por instituição\nfinanceira antes e não quer repetir a experiência.",[15,1127,1128],{},"Puxar para o outro lado — o vocabulário de fintech, cores quentes, formas\norgânicas, tom informal — resolve a acessibilidade e destrói a credibilidade.\nNinguém entrega o faturamento do mês para uma marca que parece um aplicativo de\nentrega.",[15,1130,1131],{},"A marca precisava ocupar as duas posições ao mesmo tempo, e não a média morna\nentre elas.",[10,1133,84],{"id":83},[448,1135,1136,1139,1142,1145,1148,1151],{},[451,1137,1138],{},"Conceito e desenho do símbolo",[451,1140,1141],{},"Construção geométrica e documentação de proporções",[451,1143,1144],{},"Customização tipográfica da logomarca sobre a Lexend",[451,1146,1147],{},"Definição da família tipográfica de apoio",[451,1149,1150],{},"Sistema de cor",[451,1152,1153],{},"Variações da marca e diagramação do deck de apresentação",[15,1155,1156,1159],{},[34,1157,1158],{},"O que não foi meu:"," o posicionamento, o propósito e os seis valores emocionais\nvieram prontos do cliente. Eu não conduzi pesquisa de mercado nem entrevistei\nlojistas — a estratégia estava definida quando entrei, e o case aqui é o de\ntradução visual, não o de descoberta.",[10,1161,98],{"id":97},[15,1163,1164,1165,1168,1169,1172],{},"Comecei pela contradição, não pelo esboço. Antes de desenhar qualquer coisa,\nseparei os quatro atributos em dois pares opostos e assumi que a solução não\nestava em escolher um lado, mas em atribuir cada eixo a um elemento diferente da\nidentidade: a ",[34,1166,1167],{},"forma"," carregaria a solidez, e a ",[34,1170,1171],{},"cor e a tipografia","\ncarregariam a proximidade. Se cada camada resolve uma metade, a marca inteira\nconsegue ser as duas coisas sem ficar ambígua.",[15,1174,1175],{},"Isso deu um critério de decisão para o resto do projeto. Toda vez que uma escolha\napareceu — arredondar mais ou menos, escurecer ou saturar o azul —, a pergunta\nnão foi \"qual fica mais bonito\", foi \"esse elemento está resolvendo o eixo que\nlhe cabe\".",[10,1177,145],{"id":144},[147,1179,1181],{"id":1180},"_1-o-símbolo-como-equação-não-como-ilustração","1. O símbolo como equação, não como ilustração",[15,1183,1184],{},"A tentação óbvia num negócio de pagamentos é desenhar o objeto: cartão, cifrão,\ncadeado. Todos já estão gastos, e todos comunicam uma coisa só.",[15,1186,1187],{},"Em vez disso, montei o símbolo como a soma de três ideias que o negócio precisa\nsustentar ao mesmo tempo:",[15,1189,1190],{},[432,1191],{"alt":1192,"src":1193},"Conceito da marca HG Pagamentos — carteira mais pagamentos mais interação somados numa forma única","\u002Fimages\u002Fcases\u002Fhg-pagamentos-conceito.jpg",[448,1195,1196,1202,1208],{},[451,1197,1198,1201],{},[34,1199,1200],{},"Carteira"," — valores e transações. Segurança, praticidade, controle.",[451,1203,1204,1207],{},[34,1205,1206],{},"Pagamentos"," — o propósito literal: simplificar, pagar, proteger.",[451,1209,1210,1213],{},[34,1211,1212],{},"Interação"," — trocas rápidas entre pessoas e negócios, contato direto.",[15,1215,1216],{},"O resultado são três retângulos de cantos arredondados sobrepostos em\nprofundidade. Empilhados, leem como cartões dentro de uma carteira. Mas o recorte\ninferior esquerdo os faz ler também como um balão de conversa — e essa segunda\nleitura é o que traz a proximidade que a forma sólida, sozinha, não traria.",[15,1218,1219],{},"A ambiguidade é deliberada. É o ponto inteiro da marca, e é a razão de ela\nfuncionar nos dois eixos ao mesmo tempo.",[147,1221,1223],{"id":1222},"_2-a-geometria-documentada-antes-de-a-marca-ser-aprovada","2. A geometria documentada antes de a marca ser aprovada",[15,1225,1226],{},"O símbolo ia viver dentro de um produto desenvolvido internamente, por\ndesenvolvedores que não iam me chamar para perguntar qual é o raio do canto. Se a\nconstrução não estivesse cotada, cada reimplementação ia inventar a sua — e três\nmeses depois existiriam quatro versões do mesmo símbolo no sistema.",[15,1228,1229],{},"Então documentei a construção junto com o desenho, não depois: raio de 105 px\nsobre uma largura de 1300 px, com as proporções de cada placa fixadas em relação\nà principal.",[15,1231,1232],{},[432,1233],{"alt":1234,"src":1235},"Conceituação iconográfica do símbolo HG Pagamentos com as medidas de construção cotadas","\u002Fimages\u002Fcases\u002Fhg-pagamentos-iconografia.jpg",[15,1237,1238],{},"O raio é a decisão que carrega o eixo da acessibilidade. Cantos vivos teriam dado\na solidez pedida e nada além; um raio grande demais teria virado a marca em algo\nleve e descartável. O valor escolhido é o ponto em que a forma ainda lê como base\nsólida, mas já não lê como institucional.",[147,1240,1242],{"id":1241},"_3-customizar-duas-letras-em-vez-de-desenhar-um-alfabeto","3. Customizar duas letras em vez de desenhar um alfabeto",[15,1244,1245,1246,1249],{},"A logomarca partiu da ",[34,1247,1248],{},"Lexend"," — uma fonte desenhada para legibilidade, o que\nimporta quando o nome vai aparecer reduzido dentro de um checkout.",[15,1251,1252,1253,1256,1257,1260],{},"Desenhar um wordmark do zero teria sido mais autoral e pior para o cliente: mais\ncaro, mais lento e impossível de estender depois sem me chamar de volta. Em vez\ndisso, customizei só o que precisava de assinatura — o ",[34,1254,1255],{},"T"," e o ",[34,1258,1259],{},"H",", com uma\ninclinação sutil no topo:",[15,1262,1263],{},[432,1264],{"alt":1265,"src":1266},"Conceituação tipográfica da marca HG Pagamentos — customização das letras T e H sobre a Lexend","\u002Fimages\u002Fcases\u002Fhg-pagamentos-tipografia.jpg",[15,1268,1269],{},"A inclinação faz duas coisas ao mesmo tempo. Quebra a rigidez da grade — que é a\nparte \"amigável\" — e sugere movimento ascendente, que é o crescimento que o\nlojista está comprando. Duas letras alteradas mudam a temperatura do conjunto\nsem custar um alfabeto inteiro.",[15,1271,1272,1273,1276],{},"Para a comunicação corrente, ",[34,1274,1275],{},"Poppins",": geométrica, clara, sem o peso\ninstitucional de uma grotesca clássica.",[15,1278,1279],{},[432,1280],{"alt":1281,"src":1282},"Família tipográfica da HG Pagamentos — Lexend para a marca e Poppins para comunicação","\u002Fimages\u002Fcases\u002Fhg-pagamentos-familia.jpg",[147,1284,1286],{"id":1285},"_4-três-azuis-com-funções-distintas-não-uma-paleta-de-gosto","4. Três azuis com funções distintas, não uma paleta de gosto",[15,1288,1289],{},[432,1290],{"alt":1291,"src":1292},"Paleta de cores da HG Pagamentos — azul vibrante, azul escuro, azul claro e neutro","\u002Fimages\u002Fcases\u002Fhg-pagamentos-paleta.jpg",[15,1294,1295],{},"O azul é o clichê do setor financeiro, e usá-lo foi uma escolha consciente:\ncontrariar a expectativa de cor num negócio que vende confiança custa mais do que\nrende. O trabalho não foi fugir do azul, foi dividi-lo em papéis:",[448,1297,1298,1304,1310,1316],{},[451,1299,1300,1303],{},[39,1301,1302],{},"#1A82FF"," — o azul vibrante. Ação, movimento, o que se clica.",[451,1305,1306,1309],{},[39,1307,1308],{},"#0C437A"," — o azul escuro. Estrutura e profundidade; é ele que sustenta o eixo\n\"sólida e confiável\".",[451,1311,1312,1315],{},[39,1313,1314],{},"#B3DBFF"," — o azul claro. Respiro e leveza, o contraponto que impede o conjunto\nde ficar pesado.",[451,1317,1318,1321],{},[39,1319,1320],{},"#282828"," — o neutro. Texto e wordmark, para que a cor não brigue com a\nleitura.",[15,1323,1324],{},"A distinção importa porque a marca ia para dentro de um produto. Uma paleta\nescolhida por harmonia vira discussão toda vez que alguém precisa decidir a cor\nde um botão. Uma paleta com funções atribuídas responde sozinha.",[10,1326,334],{"id":333},[15,1328,1329],{},"A marca foi aprovada e aplicada, com o símbolo, o wordmark, a construção cotada,\na família tipográfica e o sistema de cor documentados no deck de apresentação.",[15,1331,1332],{},[432,1333],{"alt":1334,"src":1335},"Marca principal HG Pagamentos — símbolo e wordmark na aplicação primária","\u002Fimages\u002Fcases\u002Fhg-pagamentos-marca.jpg",[15,1337,1338],{},"As variações cobrem os fundos em que a marca ia precisar existir — claro, azul e\nazul escuro — mantendo o símbolo legível em cada um:",[15,1340,1341],{},[432,1342],{"alt":1343,"src":1344},"Variações da marca HG Pagamentos aplicadas sobre fundo branco, azul e azul escuro","\u002Fimages\u002Fcases\u002Fhg-pagamentos-variacoes.jpg",[15,1346,1347],{},"Não tenho métrica de negócio deste projeto. Reconhecimento de marca, impacto em\nconversão e adesão de lojistas são dados que ficaram com o cliente, e não vou\ninventar número para fechar um case com um gráfico. O que dá para verificar é o\nque está acima: a marca existe, é consistente e é reproduzível.",[10,1349,1035],{"id":1034},[15,1351,1352],{},"O entregável é um deck de apresentação, não um manual de marca. Falta o que um\nbrandbook resolveria:",[448,1354,1355,1361,1367],{},[451,1356,1357,1360],{},[34,1358,1359],{},"Regras de uso indevido"," — o que não fazer com o símbolo (distorcer,\nrecolorir, aplicar sobre fundo de baixo contraste).",[451,1362,1363,1366],{},[34,1364,1365],{},"Área de respiro e redução mínima"," — a construção está cotada, mas o espaço\nao redor e o menor tamanho legível não estão.",[451,1368,1369,1372],{},[34,1370,1371],{},"Critério entre as variações"," — as três existem, mas nada diz qual usar em\nqual situação.",[10,1374,357],{"id":356},[15,1376,1377],{},"Investi a documentação toda na construção do símbolo e quase nenhuma nas regras\nde uso — e essa proporção estava invertida em relação à necessidade real do\ncliente.",[15,1379,1380],{},"A geometria cotada era a parte que me interessava desenhar, e me convenci de que\nera também a mais importante porque o símbolo ia para dentro de um produto. Só\nque quem reimplementa o símbolo faz isso uma vez. Quem decide qual variação usar\nnum post, num contrato ou num fundo escuro faz isso toda semana, e para essa\npessoa eu não deixei nada. Entregar três variações sem critério de escolha não é\ndar liberdade ao cliente — é devolver para ele uma decisão de design que era\nminha.",[15,1382,1383],{},"Hoje eu trocaria metade do detalhamento geométrico por uma página de \"quando usar\nqual\", mesmo que isso deixasse a apresentação menos bonita. E teria definido a\nredução mínima na mesma sessão em que defini o raio do canto, porque as duas\ndecisões são a mesma decisão vista de distâncias diferentes.",{"title":365,"searchDepth":366,"depth":366,"links":1385},[1386,1387,1388,1389,1390,1396,1397,1398],{"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":1391},[1392,1393,1394,1395],{"id":1180,"depth":375,"text":1181},{"id":1222,"depth":375,"text":1223},{"id":1241,"depth":375,"text":1242},{"id":1285,"depth":375,"text":1286},{"id":333,"depth":366,"text":334},{"id":1034,"depth":366,"text":1035},{"id":356,"depth":366,"text":357},"Marca HG Pagamentos — símbolo de carteira em três camadas de azul ao lado do wordmark em cinza-escuro\n","Uma marca que precisa parecer banco sem parecer burocracia",{},"brand",4,"\u002Ftrabalhos\u002Fhg-pagamentos","2025","Identidade de marca","Design de identidade visual — conceito, símbolo, tipografia, cor e manual",{"title":1098,"description":365},"trabalhos\u002Fhg-pagamentos","Identidade visual completa para a subadquirente do Grupo Hélio Gomes. O símbolo resolve três ideias numa forma só — carteira, pagamento e interação — e a construção geométrica documentada garante que ela se reproduza igual em qualquer aplicação.\n","Uma marca para quem move dinheiro.",[1413,1414,1415,1150,1416],"Identidade visual","Branding","Fintech","Tipografia",{"problem":1418,"action":1419,"outcome":1420},"Uma subadquirente nova precisa transmitir a segurança de uma instituição financeira sem herdar a frieza do setor.\n","Símbolo construído sobre uma equação de três conceitos, com geometria e tipografia documentadas para reprodução consistente.\n","Marca aprovada e aplicada, com manual de construção que serve de base para o design system do produto.\n","xFuBTh5JAskCDGbcu5JFpPhg3-GxgIYm6W3YstTEpTM",{"id":1423,"title":1424,"body":1425,"client":381,"clips":1473,"cover":1504,"coverAlt":1505,"description":365,"draft":385,"extension":386,"featured":385,"headline":1506,"meta":1507,"navigation":387,"offer":526,"order":1508,"path":1509,"period":529,"platform":1510,"role":1511,"seo":1512,"stem":1513,"summary":1514,"tagline":1515,"tags":1516,"tldr":1518,"video":1522,"year":529,"__hash__":1525},"casesPt\u002Ftrabalhos\u002Fmotion-microinteracoes.md","Micro-interações",{"type":7,"value":1426,"toc":1469},[1427,1431,1442,1462,1466],[10,1428,1430],{"id":1429},"método","Método",[15,1432,1433,1434,1437,1438,1441],{},"Motion entra no sistema como ",[34,1435,1436],{},"token",", não como ajuste por tela: duração, curva e distância\ntêm nome, e cada padrão novo é registrado num ",[34,1439,1440],{},"Motion Ledger"," antes de ser reaproveitado.\nQuando uma folha sobe de baixo no App Braip, ela usa a mesma curva de todas as outras.",[448,1443,1444,1450,1456],{},[451,1445,1446,1449],{},[34,1447,1448],{},"Figma Motion e keyframes"," para a interação dentro do protótipo.",[451,1451,1452,1455],{},[34,1453,1454],{},"HyperFrames"," para as peças de lançamento — vídeo determinístico, renderizado frame a frame.",[451,1457,1458,1461],{},[34,1459,1460],{},"Código"," com os mesmos números do token, para o motion do protótipo chegar igual em produção.",[10,1463,1465],{"id":1464},"peças","Peças",[15,1467,1468],{},"As peças acima vêm do App Braip v2 e do design system da Braip. Cada uma responde uma\npergunta da interface: de onde a tela veio, o que mudou, o que acabou de dar certo.",{"title":365,"searchDepth":366,"depth":366,"links":1470},[1471,1472],{"id":1429,"depth":366,"text":1430},{"id":1464,"depth":366,"text":1465},[1474,1479,1484,1489,1493,1499],{"src":1475,"poster":1476,"title":1477,"note":1478},"\u002Fvideos\u002Fmotion\u002Fsaldo-count-up.mp4","\u002Fvideos\u002Fmotion\u002Fsaldo-count-up.jpg","Saldo que conta","O valor sobe até o número real e o card acompanha.",{"src":1480,"poster":1481,"title":1482,"note":1483},"\u002Fvideos\u002Fmotion\u002Fdetalhe-mostrar-mais.mp4","\u002Fvideos\u002Fmotion\u002Fdetalhe-mostrar-mais.jpg","Detalhe da venda","A tela sai da lista e abre o pedido no mesmo gesto.",{"src":1485,"poster":1486,"title":1487,"note":1488},"\u002Fvideos\u002Fmotion\u002Fsolicitar-saque.mp4","\u002Fvideos\u002Fmotion\u002Fsolicitar-saque.jpg","Solicitar saque","Conta bancária sobe de baixo com a curva padrão dos overlays.",{"src":1490,"poster":1491,"title":473,"note":1492},"\u002Fvideos\u002Fmotion\u002Fbiometria.mp4","\u002Fvideos\u002Fmotion\u002Fbiometria.jpg","O cadeado vira Face ID antes da home.",{"src":1494,"poster":1495,"title":1496,"ratio":1497,"note":1498},"\u002Fvideos\u002Fmotion\u002Ftoken-light-dark.mp4","\u002Fvideos\u002Fmotion\u002Ftoken-light-dark.jpg","Token Light \u002F Dark","16\u002F9","Trocar a primitiva muda o tema inteiro.",{"src":1500,"poster":1501,"title":1502,"note":1503},"\u002Fvideos\u002Fmotion\u002Fexplode-home.mp4","\u002Fvideos\u002Fmotion\u002Fexplode-home.jpg","Home explodida","As camadas da home se separam para mostrar o sistema.","\u002Fimages\u002Fcases\u002Fmotion-cover.jpg","Três quadros de micro-interações do App Braip lado a lado — contagem de saldo, ativação de biometria e detalhe da venda.","Motion de produto que explica a interface — de onde a tela veio, o que mudou e o que acabou de dar certo.",{},5,"\u002Ftrabalhos\u002Fmotion-microinteracoes","Mobile e web · Figma Motion e HyperFrames","UI\u002FUX Product Designer — motion de produto",{"title":1424,"description":365},"trabalhos\u002Fmotion-microinteracoes","Galeria de micro-interações e motion design de produto — contagem de saldo, folhas que sobem, biometria, troca de tema por token e a abertura do App Braip — com o método por trás: tokens de duração e curva, Motion Ledger e keyframes do Figma até o código.\n","Motion que explica a interface.",[203,1517,537,400],"Micro-interação",{"problem":1519,"action":1520,"outcome":1521},"Motion feito tela a tela vira ruído — cada designer escolhe uma curva e o app parece montado por pessoas diferentes.","Defini duração e curva como tokens, registrei cada padrão num Motion Ledger e animei as interações-chave do App Braip e do design system a partir deles.","Um vocabulário de motion reaproveitado entre telas, componentes e peças de lançamento, do keyframe no Figma ao vídeo final.",{"src":1523,"poster":1524},"\u002Fvideos\u002Fmotion\u002Fabertura-logo.mp4","\u002Fvideos\u002Fmotion\u002Fabertura-logo.jpg","XH7cDFZf6JiAPsqfqhaqKycZPf8E24wqZ4Y26t0kiug",{"id":1527,"title":1528,"body":1529,"client":1740,"clips":382,"cover":1741,"coverAlt":1742,"description":365,"draft":385,"extension":386,"featured":385,"headline":1743,"meta":1744,"navigation":387,"offer":1745,"order":1746,"path":1747,"period":1748,"platform":1749,"role":1750,"seo":1751,"stem":1752,"summary":1753,"tagline":1754,"tags":1755,"tldr":1760,"video":382,"year":529,"__hash__":1764},"casesPt\u002Ftrabalhos\u002Fsos-beleza-absoluta.md","SOS Beleza Absoluta",{"type":7,"value":1530,"toc":1725},[1531,1533,1536,1539,1541,1544,1547,1554,1556,1570,1575,1577,1580,1583,1586,1592,1594,1598,1601,1604,1608,1611,1614,1620,1626,1630,1633,1636,1642,1646,1649,1652,1658,1660,1663,1680,1683,1689,1691,1694,1714,1716,1719,1722],[10,1532,13],{"id":12},[15,1534,1535],{},"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,1537,1538],{},"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,1540,27],{"id":26},[15,1542,1543],{},"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,1545,1546],{},"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,1548,1549,1550,1553],{},"Então o problema real não era \"desenhar uma landing page\". Era: ",[34,1551,1552],{},"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,1555,84],{"id":83},[448,1557,1558,1561,1564,1567],{},[451,1559,1560],{},"Style guide do projeto: Color Styles, Text Styles e biblioteca de variáveis de cor e tipografia, herdando o Braip Foundations",[451,1562,1563],{},"Biblioteca de componentes própria da página — dezessete componentes e component sets",[451,1565,1566],{},"UI das quatorze seções e adaptação para desktop, iPad e mobile",[451,1568,1569],{},"Direção de arte e composições de produto",[15,1571,1572,1574],{},[34,1573,1158],{}," 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,1576,98],{"id":97},[15,1578,1579],{},"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,1581,1582],{},"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,1584,1585],{},"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,1587,1588],{},[432,1589],{"alt":1590,"src":1591},"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,1593,145],{"id":144},[147,1595,1597],{"id":1596},"o-sistema-antes-da-primeira-tela","O sistema antes da primeira tela",[15,1599,1600],{},"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,1602,1603],{},"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,1605,1607],{"id":1606},"dezessete-componentes-em-vez-de-quatorze-seções","Dezessete componentes em vez de quatorze seções",[15,1609,1610],{},"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,1612,1613],{},"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,1615,1616],{},[432,1617],{"alt":1618,"src":1619},"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,1621,1622],{},[432,1623],{"alt":1624,"src":1625},"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,1627,1629],{"id":1628},"desenhar-o-tempo-como-parte-do-produto","Desenhar o tempo como parte do produto",[15,1631,1632],{},"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,1634,1635],{},"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,1637,1638],{},[432,1639],{"alt":1640,"src":1641},"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,1643,1645],{"id":1644},"três-ritmos-não-três-preços","Três ritmos, não três preços",[15,1647,1648],{},"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,1650,1651],{},"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,1653,1654],{},[432,1655],{"alt":1656,"src":1657},"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,1659,334],{"id":333},[15,1661,1662],{},"O que foi entregue, de fato:",[448,1664,1665,1668,1671,1674,1677],{},[451,1666,1667],{},"Landing page completa em três breakpoints — desktop, iPad e mobile — com quatorze seções",[451,1669,1670],{},"Style guide do projeto: Color Styles, Text Styles e biblioteca de variáveis de cor e tipografia",[451,1672,1673],{},"Biblioteca de dezessete componentes e component sets próprios, com variantes de breakpoint",[451,1675,1676],{},"Composições de produto e direção de arte das seções",[451,1678,1679],{},"FAQ estruturado sobre a base regulatória informada pelo cliente (RDC 240\u002F2018)",[15,1681,1682],{},"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,1684,1685,1688],{},[34,1686,1687],{},"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,1690,1035],{"id":1034},[15,1692,1693],{},"Registrado no próprio changelog do arquivo, como dependência externa:",[448,1695,1696,1702,1708],{},[451,1697,1698,1701],{},[34,1699,1700],{},"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.",[451,1703,1704,1707],{},[34,1705,1706],{},"Valores de produto."," Os preços em tela funcionam como estrutura, mas ainda dependiam de confirmação do cliente.",[451,1709,1710,1713],{},[34,1711,1712],{},"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,1715,357],{"id":356},[15,1717,1718],{},"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,1720,1721],{},"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,1723,1724],{},"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":1726},[1727,1728,1729,1730,1731,1737,1738,1739],{"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":1732},[1733,1734,1735,1736],{"id":1596,"depth":375,"text":1597},{"id":1606,"depth":375,"text":1607},{"id":1628,"depth":375,"text":1629},{"id":1644,"depth":375,"text":1645},{"id":333,"depth":366,"text":334},{"id":1034,"depth":366,"text":1035},{"id":356,"depth":366,"text":357},"Izadora K","\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.",{},"landing",6,"\u002Ftrabalhos\u002Fsos-beleza-absoluta","Março de 2026","Landing page responsiva · Figma","Style guide e biblioteca de variáveis · UI e design responsivo · direção de arte e composições de produto",{"title":1528,"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.","Um style guide posto à prova.",[400,1756,1757,402,1758,1759],"Landing page","Design responsivo","Direção de arte","Beleza",{"problem":1761,"action":1762,"outcome":1763},"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.","nwJIizWFZPxnbvZh0j65nevguW_mOe8F0GvRV-n12N0",{"id":1766,"title":1767,"body":1768,"client":1740,"clips":382,"cover":1959,"coverAlt":1960,"description":365,"draft":385,"extension":386,"featured":385,"headline":1961,"meta":1962,"navigation":387,"offer":1745,"order":1963,"path":1964,"period":1965,"platform":1749,"role":1966,"seo":1967,"stem":1968,"summary":1969,"tagline":1970,"tags":1971,"tldr":1974,"video":382,"year":529,"__hash__":1978},"casesPt\u002Ftrabalhos\u002Fhair-glow-izadora-k.md","Hair Glow",{"type":7,"value":1769,"toc":1943},[1770,1772,1775,1782,1784,1787,1793,1796,1799,1801,1815,1818,1820,1831,1834,1840,1846,1852,1854,1858,1861,1864,1868,1874,1882,1886,1892,1895,1899,1905,1908,1911,1915,1918,1920,1923,1926,1928,1931,1934,1936],[10,1771,13],{"id":12},[15,1773,1774],{},"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,1776,1777,1778,1781],{},"Meu escopo aqui foi específico e vale dizer de saída: ",[34,1779,1780],{},"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,1783,27],{"id":26},[15,1785,1786],{},"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,1788,1789],{},[432,1790],{"alt":1791,"src":1792},"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,1794,1795],{},"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,1797,1798],{},"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,1800,84],{"id":83},[448,1802,1803,1806,1809,1812],{},[451,1804,1805],{},"Estrutura e ordem das seções da página",[451,1807,1808],{},"UI de desktop (1440) e mobile (375)",[451,1810,1811],{},"Adaptação responsiva de todas as seções",[451,1813,1814],{},"Protótipo navegável e organização do arquivo para handoff",[15,1816,1817],{},"Copy, direção de arte e fotografia vieram do cliente.",[10,1819,98],{"id":97},[15,1821,1822,1823,1826,1827,1830],{},"A base foi o ",[34,1824,1825],{},"Creators Figma Kit"," somado ao ",[34,1828,1829],{},"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,1832,1833],{},"O trabalho ficou em três frentes:",[15,1835,1836,1839],{},[34,1837,1838],{},"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,1841,1842,1845],{},[34,1843,1844],{},"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,1847,1848,1851],{},[34,1849,1850],{},"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,1853,145],{"id":144},[147,1855,1857],{"id":1856},"a-dor-antes-do-benefício","A dor antes do benefício",[15,1859,1860],{},"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,1862,1863],{},"É 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,1865,1867],{"id":1866},"cinco-benefícios-como-um-passo-não-como-cinco","Cinco benefícios como um passo, não como cinco",[15,1869,1870],{},[432,1871],{"alt":1872,"src":1873},"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,1875,1876,1877,1881],{},"O título carrega o argumento inteiro: ",[1878,1879,1880],"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,1883,1885],{"id":1884},"prova-por-contexto-não-por-close-de-produto","Prova por contexto, não por close de produto",[15,1887,1888],{},[432,1889],{"alt":1890,"src":1891},"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,1893,1894],{},"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,1896,1898],{"id":1897},"duas-opções-nunca-três","Duas opções, nunca três",[15,1900,1901],{},[432,1902],{"alt":1903,"src":1904},"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,1906,1907],{},"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,1909,1910],{},"Três opções teriam transformado uma decisão de compra em uma tarefa de planilha.",[147,1912,1914],{"id":1913},"marquee-como-respiro","Marquee como respiro",[15,1916,1917],{},"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,1919,334],{"id":333},[15,1921,1922],{},"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,1924,1925],{},"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,1927,1035],{"id":1034},[15,1929,1930],{},"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,1932,1933],{},"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,1935,357],{"id":356},[15,1937,1938,1939,1942],{},"Teria desenhado a seção de depoimentos ",[34,1940,1941],{},"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":1944},[1945,1946,1947,1948,1949,1956,1957,1958],{"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":1950},[1951,1952,1953,1954,1955],{"id":1856,"depth":375,"text":1857},{"id":1866,"depth":375,"text":1867},{"id":1884,"depth":375,"text":1885},{"id":1897,"depth":375,"text":1898},{"id":1913,"depth":375,"text":1914},{"id":333,"depth":366,"text":334},{"id":1034,"depth":366,"text":1035},{"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.",{},7,"\u002Ftrabalhos\u002Fhair-glow-izadora-k","Junho de 2026","UI e protótipo (desktop e mobile)",{"title":1767,"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.","Uma objeção respondida por dobra.",[1756,1972,1973,1757,1759],"UI","Protótipo",{"problem":1975,"action":1976,"outcome":1977},"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.","2SZxGo6RpAC73ctHj-X6_V0_9ZFhiEDDIaTk2Qx7OTI",{"id":1980,"title":1981,"body":1982,"client":381,"clips":382,"cover":2009,"coverAlt":2144,"description":365,"draft":385,"extension":386,"featured":385,"headline":2145,"meta":2146,"navigation":387,"offer":1745,"order":2147,"path":2148,"period":529,"platform":2149,"role":2150,"seo":2151,"stem":2152,"summary":2153,"tagline":2154,"tags":2155,"tldr":2159,"video":382,"year":529,"__hash__":2163},"casesPt\u002Ftrabalhos\u002Fcopa-players.md","Copa Players",{"type":7,"value":1983,"toc":2131},[1984,1986,1993,2004,2010,2012,2023,2026,2028,2039,2044,2046,2049,2052,2054,2058,2061,2064,2070,2074,2077,2080,2086,2088,2094,2097,2099,2119,2121,2128],[10,1985,13],{"id":12},[15,1987,1988,1989,1992],{},"A Braip é uma plataforma de infoprodutos, e esta landing page tem um alvo estreito: produtor\nque ",[34,1990,1991],{},"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,1994,1995,1996,1999,2000,2003],{},"A campanha usa a Copa como gancho de urgência. A oferta é concreta e datada: ",[34,1997,1998],{},"0% de taxa no\nPIX e 3,89% no cartão",", para migrações confirmadas até ",[34,2001,2002],{},"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,2005,2006],{},[432,2007],{"alt":2008,"src":2009},"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,2011,27],{"id":26},[15,2013,2014,2015,2018,2019,2022],{},"Uma campanha sazonal chega com duas coisas para dizer na primeira dobra, e elas competem:\na ",[34,2016,2017],{},"metáfora"," (Copa, troféu, time, torcida) e o ",[34,2020,2021],{},"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,2024,2025],{},"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,2027,84],{"id":83},[448,2029,2030,2033,2036],{},[451,2031,2032],{},"UI em alta fidelidade da LP de desktop e da versão mobile",[451,2034,2035],{},"Protótipo navegável dos dois breakpoints, incluindo a página de obrigado",[451,2037,2038],{},"Montagem da hero a partir dos assets de campanha",[15,2040,853,2041,2043],{},[34,2042,856],{}," 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,2045,98],{"id":97},[15,2047,2048],{},"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,2050,2051],{},"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,2053,145],{"id":144},[147,2055,2057],{"id":2056},"a-hero-como-cartaz-não-como-banner","A hero como cartaz, não como banner",[15,2059,2060],{},"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,2062,2063],{},"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,2065,2066],{},[432,2067],{"alt":2068,"src":2069},"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,2071,2073],{"id":2072},"quatro-promessas-uma-de-cada-vez","Quatro promessas, uma de cada vez",[15,2075,2076],{},"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,2078,2079],{},"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,2081,2082],{},[432,2083],{"alt":2084,"src":2085},"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,2087,334],{"id":333},[15,2089,2090,2091,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,2092,2093],{},"\"Liberado para validação\"",[15,2095,2096],{},"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,2098,1035],{"id":1034},[448,2100,2101,2107,2113],{},[451,2102,2103,2106],{},[34,2104,2105],{},"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.",[451,2108,2109,2112],{},[34,2110,2111],{},"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.",[451,2114,2115,2118],{},[34,2116,2117],{},"Nenhuma métrica coletada"," do meu lado.",[10,2120,357],{"id":356},[15,2122,2123,2124,2127],{},"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,2125,2126],{},"se expande"," no desktop.",[15,2129,2130],{},"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":2132},[2133,2134,2135,2136,2137,2141,2142,2143],{"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":2138},[2139,2140],{"id":2056,"depth":375,"text":2057},{"id":2072,"depth":375,"text":2073},{"id":333,"depth":366,"text":334},{"id":1034,"depth":366,"text":1035},{"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.",{},8,"\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":1981,"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","Campanha sazonal, sistema fixo.",[1756,2156,2157,2158,381],"Campanha sazonal","Hero design","Responsivo",{"problem":2160,"action":2161,"outcome":2162},"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.","Qu16WL8Aa7udA8I898lIqYy6AxqmI8ZvTIOP3u1OC-s",{"id":2165,"title":2166,"body":2167,"client":2360,"clips":382,"cover":2361,"coverAlt":2362,"description":2363,"draft":385,"extension":386,"featured":385,"headline":2364,"meta":2365,"navigation":387,"offer":390,"order":2366,"path":2367,"period":2368,"platform":2369,"role":2370,"seo":2371,"stem":2372,"summary":2373,"tagline":2374,"tags":2375,"tldr":2378,"video":382,"year":529,"__hash__":2382},"casesPt\u002Ftrabalhos\u002Fcreators-figma-kit.md","Creators Kit",{"type":7,"value":2168,"toc":2352},[2169,2183,2190,2194,2200,2231,2235,2241,2278,2282,2288,2303,2307,2313,2316,2320,2329,2332,2334],[15,2170,2171,2172,2174,2175,2182],{},"Adotar um kit de oitocentos componentes não é economia de desenho — é decidir o que o time\nde marketing ",[34,2173,856],{}," vai precisar decidir a cada lançamento. Os componentes, os page templates\ne os 3.627 ícones deste arquivo são do ",[2176,2177,2181],"a",{"href":2178,"rel":2179},"https:\u002F\u002Fwww.relume.io",[2180],"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,2184,2185,2186,2189],{},"Caso ",[34,2187,2188],{},"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,2191,2193],{"id":2192},"duas-camadas-não-uma","Duas camadas, não uma",[15,2195,2196],{},[432,2197],{"alt":2198,"src":2199},"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,2201,2202,2203,2206,2207,2210,2211,50,2214,50,2217,50,2220,50,2223,2226,2227,2230],{},"Quinze ",[34,2204,2205],{},"primitives"," guardam valor literal. Vinte e cinco variáveis ",[34,2208,2209],{},"semânticas"," —\n",[39,2212,2213],{},"Colors\u002FText",[39,2215,2216],{},"Background",[39,2218,2219],{},"Foreground",[39,2221,2222],{},"Border",[39,2224,2225],{},"Accent"," — nunca guardam cor: só\napontam para um primitive. É essa separação que faz o tema funcionar. Um componente pinta\no fundo com ",[39,2228,2229],{},"Background\u002FPrimary"," e nunca sabe qual hexadecimal recebeu.",[10,2232,2234],{"id":2233},"uma-paleta-por-criador","Uma paleta por criador",[15,2236,2237],{},[432,2238],{"alt":2239,"src":2240},"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,2242,2243,2244,50,2247,108,2249,2252,2253,2255,2256,2259,2260,2263,2264,2266,2267,2270,2271,2274,2275,2277],{},"Três modos na mesma coleção: ",[39,2245,2246],{},"Base",[39,2248,1740],{},[39,2250,2251],{},"[Valle]",". O ",[39,2254,2246],{}," roda em roxo\n(",[39,2257,2258],{},"#7250a1",") e rosa (",[39,2261,2262],{},"#fc65a9","). O ",[39,2265,2251],{}," troca por amarelo neon (",[39,2268,2269],{},"#edff00",") sobre uma\nescala quase preta (",[39,2272,2273],{},"#16151d",") — não é um ajuste de tom, é o oposto do ",[39,2276,2246],{},", e é\nexatamente o teste que a arquitetura precisava passar.",[10,2279,2281],{"id":2280},"a-tipografia-também-é-variável","A tipografia também é variável",[15,2283,2284],{},[432,2285],{"alt":2286,"src":2287},"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,2289,2290,108,2293,2296,2297,2299,2300,2302],{},[39,2291,2292],{},"Font Family\u002FHeading",[39,2294,2295],{},"Font Family\u002FText"," são duas variáveis de texto, não uma. O ",[39,2298,2246],{},"\nusa Sora com Poppins; o ",[39,2301,1740],{}," 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,2304,2306],{"id":2305},"o-modo-aplicado","O modo aplicado",[15,2308,2309],{},[432,2310],{"alt":2311,"src":2312},"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,2314,2315],{},"Aqui é onde a promessa fica verificável: nenhuma seção foi redesenhada para produzir esta\nimagem. Trocou-se o modo.",[10,2317,2319],{"id":2318},"próximo-passo-componentes-próprios","Próximo passo: componentes próprios",[15,2321,2322,2323,2325,2326,2328],{},"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,2324,2229],{},"\ne ",[39,2327,2292],{}," entra herdando o tema de qualquer criador no dia em que for criada.",[15,2330,2331],{},"É 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,2333,357],{"id":356},[15,2335,2336,2337,2339,2340,2342,2343,2345,2346,2348,2349,2351],{},"Teria começado pelo ",[39,2338,1740],{},", não pelo ",[39,2341,2251],{},". Escolhi montar primeiro o tema mais\ndistante do ",[39,2344,2246],{}," 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,2347,2251],{}," é um tema meu, sem\nprazo e sem ninguém esperando; o ",[39,2350,1740],{}," é 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":2353},[2354,2355,2356,2357,2358,2359],{"id":2192,"depth":366,"text":2193},{"id":2233,"depth":366,"text":2234},{"id":2280,"depth":366,"text":2281},{"id":2305,"depth":366,"text":2306},{"id":2318,"depth":366,"text":2319},{"id":356,"depth":366,"text":357},"Relume Kit","\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.",{},9,"\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":2166,"description":2363},"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","A marca inteira troca em um clique.",[400,402,2376,1756,2377],"Multi-marca","Em desenvolvimento",{"problem":2379,"action":2380,"outcome":2381},"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.","NMEQlv89Ze3u30stu6FZT0wYnJ08JL-kDnFYlQlm4aE",{"id":2384,"title":2385,"body":2386,"client":2385,"clips":382,"cover":2402,"coverAlt":2502,"description":2503,"draft":385,"extension":386,"featured":385,"headline":2504,"meta":2505,"navigation":387,"offer":1745,"order":2506,"path":2507,"period":1405,"platform":2508,"role":2509,"seo":2510,"stem":2511,"summary":2512,"tagline":2513,"tags":2514,"tldr":2519,"video":382,"year":1405,"__hash__":2523},"casesPt\u002Ftrabalhos\u002Faml-locacoes.md","AML Locações",{"type":7,"value":2387,"toc":2494},[2388,2397,2403,2407,2425,2431,2437,2443,2447,2450,2456,2460,2467,2473,2477,2480,2486,2488,2491],[15,2389,2390,2391,2396],{},"A ",[2176,2392,2395],{"href":2393,"rel":2394},"https:\u002F\u002Famllocacoeseservicos.com.br",[2180],"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,2398,2399],{},[432,2400],{"alt":2401,"src":2402},"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,2404,2406],{"id":2405},"o-design","O design",[15,2408,2409,2412,2413,2416,2417,2420,2421,2424],{},[34,2410,2411],{},"Paleta."," Verde-petróleo (",[39,2414,2415],{},"#004A4E",") como base, um verde mais claro (",[39,2418,2419],{},"#006A6F",") para\nseparar blocos e dourado (",[39,2422,2423],{},"#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,2426,2427,2430],{},[34,2428,2429],{},"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,2432,2433,2436],{},[34,2434,2435],{},"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,2438,2439],{},[432,2440],{"alt":2441,"src":2442},"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,2444,2446],{"id":2445},"prova-social-como-seção-inteira-não-como-rodapé","Prova social como seção inteira, não como rodapé",[15,2448,2449],{},"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,2451,2452],{},[432,2453],{"alt":2454,"src":2455},"Seção de depoimentos do site da AML, com relatos de clientes em cartões sobre fundo claro.","\u002Fimages\u002Fcases\u002Faml-depoimentos.jpg",[147,2457,2459],{"id":2458},"duas-rotas-de-contato-nenhuma-escondida","Duas rotas de contato, nenhuma escondida",[15,2461,2462,2463,2466],{},"O rodapé da página oferece formulário ",[34,2464,2465],{},"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,2468,2469],{},[432,2470],{"alt":2471,"src":2472},"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,2474,2476],{"id":2475},"como-foi-feito","Como foi feito",[15,2478,2479],{},"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,2481,2390,2482,2485],{},[34,2483,2484],{},"copy é da Bianca Lima"," — incluindo a headline. Meu trabalho foi dar a ela a hierarquia e\no espaço que ela pedia.",[10,2487,357],{"id":356},[15,2489,2490],{},"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,2492,2493],{},"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":2495},[2496,2500,2501],{"id":2405,"depth":366,"text":2406,"children":2497},[2498,2499],{"id":2445,"depth":375,"text":2446},{"id":2458,"depth":375,"text":2459},{"id":2475,"depth":366,"text":2476},{"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.",{},10,"\u002Ftrabalhos\u002Faml-locacoes","Site institucional · WordPress e Elementor","Design, tratamento de imagem e build no Elementor (copy de Bianca Lima)",{"title":2385,"description":2503},"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","Do zero ao ar, imagem por imagem.",[2515,2516,2517,1413,2518],"Site institucional","WordPress","Elementor","Cliente local",{"problem":2520,"action":2521,"outcome":2522},"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.","oUnSvzYy6bQqeDE3ycXx1ftI6N8G0b_C9jsapxcqFLw",{"id":2525,"title":2526,"body":2527,"client":381,"clips":2649,"cover":2665,"coverAlt":2666,"description":365,"draft":385,"extension":386,"featured":385,"headline":2667,"meta":2668,"navigation":387,"offer":526,"order":2669,"path":2670,"period":529,"platform":2671,"role":2672,"seo":2673,"stem":2674,"summary":2675,"tagline":535,"tags":2676,"tldr":2678,"video":2682,"year":529,"__hash__":2685},"casesPt\u002Ftrabalhos\u002Fapp-braip-lancamento.md","App Braip — Lançamento",{"type":7,"value":2528,"toc":2641},[2529,2533,2536,2542,2548,2552,2558,2564,2568,2574,2580,2586,2590,2596,2602,2604,2630,2636,2638],[10,2530,2532],{"id":2531},"uma-pergunta-por-ato","Uma pergunta por ato",[15,2534,2535],{},"O filme segue as perguntas que o produtor faz ao abrir o app. Cada ato tem uma frase, uma tela\nreal e um movimento.",[15,2537,2538],{},[432,2539],{"alt":2540,"src":2541},"Parede com as telas do App Braip — home, vendas, detalhe, saque, histórico e biometria — lado a lado.","\u002Fimages\u002Fcases\u002Fapp-braip-lancamento-parede.jpg",[15,2543,2544],{},[432,2545],{"alt":2546,"src":2547},"Home do App Braip em close: saudação, atalhos de saldo, saque e vendas, e o saldo disponível.","\u002Fimages\u002Fcases\u002Fapp-braip-lancamento-home.jpg",[10,2549,2551],{"id":2550},"vendas","Vendas",[15,2553,2554],{},[432,2555],{"alt":2556,"src":2557},"iPhone inclinado na tela de vendas com o total do período e um balão de valor flutuando acima.","\u002Fimages\u002Fcases\u002Fapp-braip-lancamento-vendas.jpg",[15,2559,2560],{},[432,2561],{"alt":2562,"src":2563},"Detalhe da venda em close: produto, valor pago e situação do pagamento.","\u002Fimages\u002Fcases\u002Fapp-braip-lancamento-detalhe.jpg",[10,2565,2567],{"id":2566},"saques","Saques",[15,2569,2570],{},[432,2571],{"alt":2572,"src":2573},"Três iPhones em coverflow sobre fundo escuro com detalhe da venda, solicitar saque e histórico.","\u002Fimages\u002Fcases\u002Fapp-braip-lancamento-coverflow.jpg",[15,2575,2576],{},[432,2577],{"alt":2578,"src":2579},"iPhones no fluxo de solicitar saque com a lista de contas bancárias subindo de baixo.","\u002Fimages\u002Fcases\u002Fapp-braip-lancamento-saque.jpg",[15,2581,2582],{},[432,2583],{"alt":2584,"src":2585},"Histórico de saques com filtros por status e cadeados em 3D ao fundo.","\u002Fimages\u002Fcases\u002Fapp-braip-lancamento-historico.jpg",[10,2587,2589],{"id":2588},"segurança-e-fecho","Segurança e fecho",[15,2591,2592],{},[432,2593],{"alt":2594,"src":2595},"Tela de ativação do Face ID com cadeados em 3D entrando pelas bordas.","\u002Fimages\u002Fcases\u002Fapp-braip-lancamento-biometria.jpg",[15,2597,2598],{},[432,2599],{"alt":2600,"src":2601},"Logo da Braip em branco sobre o roxo da marca, quadro final do filme.","\u002Fimages\u002Fcases\u002Fapp-braip-lancamento-marca.jpg",[10,2603,2476],{"id":2475},[448,2605,2606,2612,2618,2624],{},[451,2607,2608,2611],{},[34,2609,2610],{},"Roteiro antes de animar."," 120 BPM, cada corte na batida, 1.800 quadros por formato.",[451,2613,2614,2617],{},[34,2615,2616],{},"Telas reais, não mockup refeito."," As artes saem do arquivo do app, em camadas, para\nseparar e girar em 3D.",[451,2619,2620,2623],{},[34,2621,2622],{},"Mesmas curvas do produto."," As entradas e saídas usam as curvas de motion do design\nsystem; o filme se move como o app.",[451,2625,2626,2629],{},[34,2627,2628],{},"Render determinístico"," em HTML + GSAP com HyperFrames, nos formatos 4:5 e 9:16 a partir\nda mesma fonte.",[15,2631,2632,2633,2635],{},"O design das telas está no case ",[2176,2634,417],{"href":528},"; aqui está só o\nlançamento. Métricas de alcance ficaram com o time de marketing da Braip.",[10,2637,357],{"id":356},[15,2639,2640],{},"Começaria pelo formato 9:16. Montei o feed 4:5 primeiro e adaptei o stories depois, e o\ncoverflow perdeu espaço lateral na versão vertical — teria sido mais simples desenhar para o\nquadro mais estreito e abrir para o mais largo.",{"title":365,"searchDepth":366,"depth":366,"links":2642},[2643,2644,2645,2646,2647,2648],{"id":2531,"depth":366,"text":2532},{"id":2550,"depth":366,"text":2551},{"id":2566,"depth":366,"text":2567},{"id":2588,"depth":366,"text":2589},{"id":2475,"depth":366,"text":2476},{"id":356,"depth":366,"text":357},[2650,2655,2660],{"src":2651,"poster":2652,"title":2653,"note":2654},"\u002Fvideos\u002Fmotion\u002Fabertura-linkedin.mp4","\u002Fvideos\u002Fmotion\u002Fabertura-linkedin.jpg","Abertura","O cadeado abre e a marca entra antes do produto.",{"src":2656,"poster":2657,"title":2658,"note":2659},"\u002Fvideos\u002Fmotion\u002Fonepage-m04-iphone-explode-desktop-loop.mp4","\u002Fvideos\u002Fmotion\u002Fonepage-m04-iphone-explode-desktop-loop.jpg","iPhone explodido","As camadas da home se separam na One Page.",{"src":2661,"poster":2662,"title":2663,"ratio":1497,"note":2664},"\u002Fvideos\u002Fmotion\u002Fonepage-m08-coin-rise-desktop.mp4","\u002Fvideos\u002Fmotion\u002Fonepage-m08-coin-rise-desktop.jpg","Moedas subindo","Transição de seção da One Page, no ritmo da rolagem.","\u002Fimages\u002Fcases\u002Fapp-braip-lancamento-capa.jpg","iPhone inclinado com a home do App Braip — saldo disponível de R$ 8.960,40 e botão de solicitar saque — sobre fundo branco.","Sessenta segundos para mostrar um app inteiro — vendas, saques e biometria — sem dizer uma palavra a mais.",{},11,"\u002Ftrabalhos\u002Fapp-braip-lancamento","LinkedIn (feed 4:5 e stories 9:16) · One Page web","UI\u002FUX Product Designer — direção de motion, roteiro e montagem",{"title":2526,"description":365},"trabalhos\u002Fapp-braip-lancamento","O lançamento do App Braip v2 contado em imagem: o filme de 60 segundos para o LinkedIn, a abertura da marca e as peças de motion da One Page, todos montados a partir das telas reais do app.\n",[203,2677,537,538],"Lançamento",{"problem":2679,"action":2680,"outcome":2681},"O app novo estava pronto, mas um print estático não mostra o que mudou — e no feed o produtor decide em dois segundos se para ou rola.","Roteirizei um filme de 60 segundos em cinco atos, um por pergunta do produtor, animado com as telas reais do app e as curvas de motion do design system.","Filme em dois formatos (feed e stories), abertura da marca e peças de motion da One Page entregues para o lançamento.",{"src":2683,"poster":2684},"\u002Fvideos\u002Fcases\u002Fapp-braip-lancamento-60s.mp4","\u002Fvideos\u002Fcases\u002Fapp-braip-lancamento-60s.jpg","ZHzvuYHZOAS031BakokUGFBeIIji94Woa9-yew9RGFM",1792183833901]