[{"data":1,"prerenderedAt":1399},["ShallowReactive",2],{"cases-casesPt-all-5":3},[4,408,732,948,1181],{"id":5,"title":6,"body":7,"cover":382,"coverAlt":383,"description":366,"draft":384,"extension":385,"featured":386,"headline":387,"meta":388,"navigation":386,"order":389,"path":390,"period":391,"platform":392,"role":393,"seo":394,"stem":395,"summary":396,"tags":397,"tldr":403,"__hash__":407},"casesPt\u002Ftrabalhos\u002Fdesign-system-braip.md","Design system Braip — de biblioteca a sistema",{"type":8,"value":9,"toc":365},"minimark",[10,15,19,22,25,29,32,66,76,82,86,93,96,100,134,137,140,143,147,152,162,168,174,178,183,188,193,197,214,219,224,228,231,273,279,329,332,336,343,346,352,355,359,362],[11,12,14],"h2",{"id":13},"contexto","Contexto",[16,17,18],"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.",[16,20,21],{},"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.",[16,23,24],{},"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.",[11,26,28],{"id":27},"o-problema","O problema",[16,30,31],{},"O sistema não tinha um problema de aparência. Tinha um problema de nome.",[16,33,34,38,39,43,44,47,48,51,52,51,55,51,58,61,62,65],{},[35,36,37],"strong",{},"Sufixos numéricos sem papel definido."," O grupo ",[40,41,42],"code",{},"State"," da collection ",[40,45,46],{},"❖ Color","\nexpunha cada cor em quatro tiers — ",[40,49,50],{},"01",", ",[40,53,54],{},"02",[40,56,57],{},"03",[40,59,60],{},"04",". O número descrevia\nluminosidade, nunca função. ",[40,63,64],{},"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.",[16,67,68,71,72,75],{},[35,69,70],{},"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",[40,73,74],{},"#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.",[16,77,78,81],{},[35,79,80],{},"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.",[11,83,85],{"id":84},"meu-papel","Meu papel",[16,87,88,89,92],{},"Fui o dono da trilha de tokens, contraste e documentação dentro do time de design,\nsob o épico de design system ",[35,90,91],{},"TI-2036",". Isso cobre a arquitetura de nomes das\nvariáveis, a auditoria de contraste, a escala de motion e as specs de handoff.",[16,94,95],{},"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.",[11,97,99],{"id":98},"processo","Processo",[16,101,102,103,105,106,109,110,113,114,117,118,120,121,124,125,127,128,130,131,133],{},"Comecei auditando a collection ",[40,104,46],{}," e, em vez de propor uma convenção do zero,\nfui ler o uso real. Inspecionei como os componentes ",[40,107,108],{},"Tags"," e ",[40,111,112],{},"Chips"," já consumiam os\ntiers: na variante ",[40,115,116],{},"Solid",", o container usava o tier ",[40,119,57],{}," e o texto ficava branco; na\n",[40,122,123],{},"Minimalist",", o container usava ",[40,126,50],{},"\u002F",[40,129,54],{}," e o texto usava ",[40,132,57],{},". Havia uma convenção\nimplícita ali, funcionando, sem nome.",[16,135,136],{},"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.",[16,138,139],{},"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.",[16,141,142],{},"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.",[11,144,146],{"id":145},"decisões-chave","Decisões-chave",[148,149,151],"h3",{"id":150},"decisão-1-papel-semântico-em-vez-de-escala-numérica","Decisão 1 — Papel semântico em vez de escala numérica",[16,153,154,157,158,161],{},[35,155,156],{},"Contexto:"," ",[40,159,160],{},"State\u002F\u003CCor>\u002F01–04",", em nove cores. O número indicava luminosidade,\nnão função.",[16,163,164,167],{},[35,165,166],{},"Alternativa descartada:"," manter os números e publicar uma legenda explicando o\nmapeamento de cada tier.",[16,169,170,173],{},[35,171,172],{},"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.",[148,175,177],{"id":176},"decisão-2-renomear-sem-tocar-em-valor","Decisão 2 — Renomear sem tocar em valor",[16,179,180,182],{},[35,181,156],{}," havia a tentação de corrigir cor e nome na mesma passada, já que o\narquivo estava aberto de qualquer forma.",[16,184,185,187],{},[35,186,166],{}," rename e rebind de valores num único movimento.",[16,189,190,192],{},[35,191,172],{}," 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.",[148,194,196],{"id":195},"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",[16,198,199,201,202,205,206,209,210,213],{},[35,200,156],{}," a collection ",[40,203,204],{},"Motion"," carregava uma escala antiga, ",[40,207,208],{},"value\u002Fduration\u002F100","\na ",[40,211,212],{},"600",", sem vínculo com os tokens semânticos novos.",[16,215,216,218],{},[35,217,166],{}," apagar as variáveis legadas junto com a publicação da\nnova escala.",[16,220,221,223],{},[35,222,172],{}," 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.",[11,225,227],{"id":226},"solução","Solução",[16,229,230],{},"A base final da Braip são 839 tokens em sete categorias — cor, cor semântica,\nprimitivos, tipografia, espaçamento, layout e responsividade.",[16,232,233,236,237,51,240,51,243,51,246,51,249,252,253,51,256,51,259,109,262,265,266,269,270,272],{},[35,234,235],{},"Cor de estado."," Nove cores (",[40,238,239],{},"Neutral",[40,241,242],{},"Purple",[40,244,245],{},"Green",[40,247,248],{},"Blue",[40,250,251],{},"Pink",",\n",[40,254,255],{},"Orange",[40,257,258],{},"Red",[40,260,261],{},"Yellow",[40,263,264],{},"Off",") expostas por papel, não por índice:\n",[40,267,268],{},"background → border → icon → text",". São 35 variáveis renomeadas, em dois modos,\nsem nenhuma alteração de valor no processo. ",[40,271,264],{}," é a exceção documentada: tem só\ntrês tiers, porque nunca precisou de um nível de ênfase.",[16,274,275,278],{},[35,276,277],{},"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.",[16,280,281,284,285,51,288,51,291,51,294,51,297,300,301,51,304,51,307,310,311,313,314,316,317,319,320,322,323,325,326,328],{},[35,282,283],{},"Motion."," Cinco tokens de duração (",[40,286,287],{},"instant",[40,289,290],{},"fast",[40,292,293],{},"base",[40,295,296],{},"slow",[40,298,299],{},"slower",") e\ntrês de easing (",[40,302,303],{},"standard",[40,305,306],{},"enter",[40,308,309],{},"exit","), cada um com guideline de quando usar —\n",[40,312,290],{}," para micro-hover, ",[40,315,293],{}," para toast, ",[40,318,296],{}," para sheet; ",[40,321,306],{}," para elemento\nque aparece, ",[40,324,309],{}," para elemento que sai, ",[40,327,303],{}," para transição neutra. A escala\nfoi aplicada em três componentes de referência: Sheet, Toast e o hover do Button.",[16,330,331],{},"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.",[11,333,335],{"id":334},"resultado","Resultado",[16,337,338,339,342],{},"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 ",[40,340,341],{},"text",".",[16,344,345],{},"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.",[16,347,348,349,351],{},"Motion virou vocabulário compartilhado. Discutir se um sheet deve usar ",[40,350,296],{}," é uma\nconversa produtiva; discutir se deve usar 320 ou 340 milissegundos não é.",[16,353,354],{},"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.",[11,356,358],{"id":357},"o-que-eu-faria-diferente","O que eu faria diferente",[16,360,361],{},"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.",[16,363,364],{},"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":366,"searchDepth":367,"depth":367,"links":368},"",2,[369,370,371,372,373,379,380,381],{"id":13,"depth":367,"text":14},{"id":27,"depth":367,"text":28},{"id":84,"depth":367,"text":85},{"id":98,"depth":367,"text":99},{"id":145,"depth":367,"text":146,"children":374},[375,377,378],{"id":150,"depth":376,"text":151},3,{"id":176,"depth":376,"text":177},{"id":195,"depth":376,"text":196},{"id":226,"depth":367,"text":227},{"id":334,"depth":367,"text":335},{"id":357,"depth":367,"text":358},"\u002Fimages\u002Fcases\u002Fbraip-foundation-cover.jpg","Capa do arquivo Braip Foundations — \"Design System · Foundations & Design Tokens\" sobre o monograma da Braip em gradiente roxo.",false,"md",true,"Transformar uma biblioteca de componentes desalinhada em um sistema com tokens, motion e documentação que o time de engenharia consegue consumir.",{},1,"\u002Ftrabalhos\u002Fdesign-system-braip","2025–2026","Web · Figma Variables","UI\u002FUX Designer — Design System (trilha de tokens, em time de design)",{"title":6,"description":366},"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.",[398,399,400,401,402],"Design System","Design Tokens","Figma Variables","Acessibilidade","Documentação",{"problem":404,"action":405,"outcome":406},"A biblioteca crescia por adição — cada nova tela trazia variações de cor, espaçamento e movimento que ninguém conseguia rastrear.","Reorganizei a base em tokens semânticos (Foundations), padronizei duração e easing de motion e escrevi a documentação de uso de cada decisão.","Escala de cor com papel semântico explícito, contraste AA verificado em 9 cores nos dois modos e um vocabulário de motion aplicado em componentes de referência — o handoff deixou de depender de quem desenhou a tela.","xELYm_h6_4UBdB3CLR_Ro0hYAZ4ygILyPheegajYCMI",{"id":409,"title":410,"body":411,"cover":579,"coverAlt":713,"description":366,"draft":384,"extension":385,"featured":386,"headline":714,"meta":715,"navigation":386,"order":367,"path":716,"period":717,"platform":718,"role":719,"seo":720,"stem":721,"summary":722,"tags":723,"tldr":727,"__hash__":731},"casesPt\u002Ftrabalhos\u002Fcheckout-discovery.md","Checkout — o fluxo inteiro e o motion do cartão",{"type":8,"value":412,"toc":697},[413,415,418,425,432,434,440,443,449,452,454,476,483,485,492,507,514,516,520,525,530,535,539,542,547,552,561,564,573,580,587,591,596,601,605,610,619,623,628,633,635,638,661,667,671,689,691,694],[11,414,14],{"id":13},[16,416,417],{},"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.",[16,419,420,421,424],{},"Quando peguei o arquivo, existiam ",[35,422,423],{},"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.",[16,426,427,428,431],{},"O escopo real do trabalho está registrado no changelog do arquivo, e vale ser\nliteral sobre ele: ",[35,429,430],{},"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.",[11,433,28],{"id":27},[16,435,436,437,342],{},"A tensão de design aqui não é a tela cheia. É a tela cheia ",[35,438,439],{},"de coisa obrigatória",[16,441,442],{},"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.",[16,444,445,446,342],{},"Então a pergunta não podia ser \"como reduzir campos\". Tinha que ser: ",[35,447,448],{},"como fazer um\nformulário longo não parecer um obstáculo enquanto ele é preenchido",[16,450,451],{},"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.",[11,453,85],{"id":84},[455,456,457,461,464,467,470,473],"ul",{},[458,459,460],"li",{},"Remodelagem do checkout de página única sobre o design system V2",[458,462,463],{},"Mapeamento e desenho do caminho infeliz — recusas, falhas e estados de erro",[458,465,466],{},"Estados de carregamento (skeleton) para o processamento do pagamento",[458,468,469],{},"Adaptação responsiva completa: desktop 1440 e mobile 390",[458,471,472],{},"Motion de preenchimento do cartão de crédito",[458,474,475],{},"Protótipo navegável por método de pagamento, com confirmação e recusa",[16,477,478,479,482],{},"O que ",[35,480,481],{},"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.",[11,484,99],{"id":98},[16,486,487,488,491],{},"Comecei pelo inventário, não pelo desenho. O arquivo ganhou duas seções marcadas\n",[40,489,490],{},"⚠︎ 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.",[16,493,494,495,498,499,502,503,506],{},"Depois separei o trabalho em três frentes que andaram em paralelo, cada uma com sua\nprópria seção no arquivo: o ",[35,496,497],{},"caminho feliz"," (página única moderna), o ",[35,500,501],{},"caminho\ninfeliz"," (recusas e falhas) e os ",[35,504,505],{},"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.",[16,508,509,510,513],{},"O motion do cartão nasceu num rascunho à parte antes de entrar no fluxo — uma seção\n",[40,511,512],{},"motion draft card",", isolada, onde dava para errar sem quebrar as telas boas.",[11,515,146],{"id":145},[148,517,519],{"id":518},"o-formulário-longo-mostra-tudo-mas-em-dois-pesos","O formulário longo mostra tudo, mas em dois pesos",[16,521,522,524],{},[35,523,156],{}," 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.",[16,526,527,529],{},[35,528,166],{}," 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.",[16,531,532,534],{},[35,533,172],{}," 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.",[148,536,538],{"id":537},"o-cartão-de-crédito-se-preenche-enquanto-você-digita","O cartão de crédito se preenche enquanto você digita",[16,540,541],{},"Esta é a decisão que dá nome ao case.",[16,543,544,546],{},[35,545,156],{}," 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.",[16,548,549,551],{},[35,550,166],{}," 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.",[16,553,554,556,557,560],{},[35,555,172],{}," desenhei o cartão como uma ",[35,558,559],{},"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.",[16,562,563],{},"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.",[16,565,566],{},[567,568],"video",{"src":569,"poster":570,"autoPlay":386,"loop":386,"muted":386,"playsInline":386,"controls":386,"width":571,"ariaLabel":572},"\u002Fvideos\u002Fcheckout-cartao.mp4","\u002Fimages\u002Fcases\u002Fcheckout-cartao-poster.jpg",1080,"Animação do bloco de cartão de crédito: o número, o nome do titular e a bandeira aparecem no cartão conforme os campos são preenchidos",[16,574,575],{},[576,577],"img",{"alt":578,"src":579},"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",[16,581,582,583,586],{},"O motion tem uma regra que segurei durante todo o desenho: ",[35,584,585],{},"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.",[148,588,590],{"id":589},"o-caminho-infeliz-recebeu-tanto-arquivo-quanto-o-feliz","O caminho infeliz recebeu tanto arquivo quanto o feliz",[16,592,593,595],{},[35,594,156],{}," cartão recusado é o desfecho mais comum depois do sucesso, e era o\núnico sem tela.",[16,597,598,600],{},[35,599,172],{}," 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.",[148,602,604],{"id":603},"a-espera-é-desenhada-não-é-ausência","A espera é desenhada, não é ausência",[16,606,607,609],{},[35,608,156],{}," 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.",[16,611,612,614,615,618],{},[35,613,172],{}," desenhei o estado de processamento como ",[35,616,617],{},"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.",[148,620,622],{"id":621},"mobile-não-é-a-mesma-página-mais-estreita","Mobile não é a mesma página mais estreita",[16,624,625,627],{},[35,626,156],{}," em 390 px os dois blocos lado a lado viram uma coluna, e a ordem passa\na importar mais do que o layout.",[16,629,630,632],{},[35,631,172],{}," 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.",[11,634,335],{"id":334},[16,636,637],{},"O que foi entregue:",[455,639,640,643,646,649,652,655,658],{},[458,641,642],{},"Checkout de página única remodelado sobre o design system V2, em desktop (1440) e\nmobile (390)",[458,644,645],{},"Variante multietapas mantida e atualizada em paralelo",[458,647,648],{},"Caminho infeliz desenhado: três tipos de recusa mais falha de emissão",[458,650,651],{},"Estados de carregamento com skeleton para o processamento do pagamento",[458,653,654],{},"Telas de pedido confirmado para cartão, Pix e boleto",[458,656,657],{},"Motion de preenchimento do cartão, com especificação de comportamento",[458,659,660],{},"Protótipo navegável cobrindo os quatro métodos de pagamento",[16,662,663,666],{},[35,664,665],{},"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.",[11,668,670],{"id":669},"o-que-ficou-pendente","O que ficou pendente",[455,672,673,683],{},[458,674,675,676,51,679,682],{},"Os campos de apoio dos inputs ainda exibem strings padrão do design system\n(",[40,677,678],{},"Message text",[40,680,681],{},"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.",[458,684,685,686,688],{},"As duas seções legadas continuam no arquivo, marcadas ",[40,687,490],{},". Elas só saem\nquando a migração terminar de verdade em produção.",[11,690,358],{"id":357},[16,692,693],{},"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.",[16,695,696],{},"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":366,"searchDepth":367,"depth":367,"links":698},[699,700,701,702,703,710,711,712],{"id":13,"depth":367,"text":14},{"id":27,"depth":367,"text":28},{"id":84,"depth":367,"text":85},{"id":98,"depth":367,"text":99},{"id":145,"depth":367,"text":146,"children":704},[705,706,707,708,709],{"id":518,"depth":376,"text":519},{"id":537,"depth":376,"text":538},{"id":589,"depth":376,"text":590},{"id":603,"depth":376,"text":604},{"id":621,"depth":376,"text":622},{"id":334,"depth":367,"text":335},{"id":669,"depth":367,"text":670},{"id":357,"depth":367,"text":358},"Bloco de cartão de crédito do checkout — o cartão preenchido em tempo real com número, titular e bandeira, acima dos campos do formulário.","Redesenhar um checkout de página única sobre o design system novo, e resolver o trecho mais frágil dele — os quinze segundos em que alguém digita o número do cartão.",{},"\u002Ftrabalhos\u002Fcheckout-discovery","2026","Checkout web · Desktop e mobile","UI\u002FUX Designer — Produto (redesenho sobre o design system V2 da Braip)",{"title":410,"description":366},"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.",[724,725,726,204,398],"Produto","Fluxo","Estados",{"problem":728,"action":729,"outcome":730},"O checkout legado era o último passo de toda venda da plataforma e o menos cuidado — dois fluxos concorrentes, componentes fora do design system e os momentos de erro e espera nunca desenhados.","Remodelei o checkout de página única sobre o design system V2, mapeei o caminho infeliz e os estados de carregamento, e desenhei um motion que preenche o cartão de crédito visualmente enquanto a pessoa digita.","Fluxo entregue em desktop e mobile, com protótipo navegável cobrindo confirmação e três tipos de recusa. As métricas de conversão ficam com o time de produto — não são minhas para publicar.","CKz42C_5wdIVCTMjMz5j6R33JY7cFq736pa22h3BxC8",{"id":733,"title":734,"body":735,"cover":926,"coverAlt":927,"description":366,"draft":384,"extension":385,"featured":384,"headline":928,"meta":929,"navigation":386,"order":367,"path":930,"period":931,"platform":932,"role":933,"seo":934,"stem":935,"summary":936,"tags":937,"tldr":943,"__hash__":947},"casesPt\u002Ftrabalhos\u002Fhair-glow-izadora-k.md","Hair Glow — landing page de lançamento",{"type":8,"value":736,"toc":910},[737,739,742,749,751,754,760,763,766,768,782,785,787,798,801,807,813,819,821,825,828,831,835,841,849,853,859,862,866,872,875,878,882,885,887,890,893,895,898,901,903],[11,738,14],{"id":13},[16,740,741],{},"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.",[16,743,744,745,748],{},"Meu escopo aqui foi específico e vale dizer de saída: ",[35,746,747],{},"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.",[11,750,28],{"id":27},[16,752,753],{},"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.",[16,755,756],{},[576,757],{"alt":758,"src":759},"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",[16,761,762],{},"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.",[16,764,765],{},"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.",[11,767,85],{"id":84},[455,769,770,773,776,779],{},[458,771,772],{},"Estrutura e ordem das seções da página",[458,774,775],{},"UI de desktop (1440) e mobile (375)",[458,777,778],{},"Adaptação responsiva de todas as seções",[458,780,781],{},"Protótipo navegável e organização do arquivo para handoff",[16,783,784],{},"Copy, direção de arte e fotografia vieram do cliente.",[11,786,99],{"id":98},[16,788,789,790,793,794,797],{},"A base foi o ",[35,791,792],{},"Creators Figma Kit"," somado ao ",[35,795,796],{},"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.",[16,799,800],{},"O trabalho ficou em três frentes:",[16,802,803,806],{},[35,804,805],{},"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.",[16,808,809,812],{},[35,810,811],{},"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.",[16,814,815,818],{},[35,816,817],{},"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.",[11,820,146],{"id":145},[148,822,824],{"id":823},"a-dor-antes-do-benefício","A dor antes do benefício",[16,826,827],{},"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.",[16,829,830],{},"É 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.",[148,832,834],{"id":833},"cinco-benefícios-como-um-passo-não-como-cinco","Cinco benefícios como um passo, não como cinco",[16,836,837],{},[576,838],{"alt":839,"src":840},"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",[16,842,843,844,848],{},"O título carrega o argumento inteiro: ",[845,846,847],"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.",[148,850,852],{"id":851},"prova-por-contexto-não-por-close-de-produto","Prova por contexto, não por close de produto",[16,854,855],{},[576,856],{"alt":857,"src":858},"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",[16,860,861],{},"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.",[148,863,865],{"id":864},"duas-opções-nunca-três","Duas opções, nunca três",[16,867,868],{},[576,869],{"alt":870,"src":871},"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",[16,873,874],{},"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.",[16,876,877],{},"Três opções teriam transformado uma decisão de compra em uma tarefa de planilha.",[148,879,881],{"id":880},"marquee-como-respiro","Marquee como respiro",[16,883,884],{},"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.",[11,886,335],{"id":334},[16,888,889],{},"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.",[16,891,892],{},"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.",[11,894,670],{"id":669},[16,896,897],{},"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.",[16,899,900],{},"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.",[11,902,358],{"id":357},[16,904,905,906,909],{},"Teria desenhado a seção de depoimentos ",[35,907,908],{},"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":366,"searchDepth":367,"depth":367,"links":911},[912,913,914,915,916,923,924,925],{"id":13,"depth":367,"text":14},{"id":27,"depth":367,"text":28},{"id":84,"depth":367,"text":85},{"id":98,"depth":367,"text":99},{"id":145,"depth":367,"text":146,"children":917},[918,919,920,921,922],{"id":823,"depth":376,"text":824},{"id":833,"depth":376,"text":834},{"id":851,"depth":376,"text":852},{"id":864,"depth":376,"text":865},{"id":880,"depth":376,"text":881},{"id":334,"depth":367,"text":335},{"id":669,"depth":367,"text":670},{"id":357,"depth":367,"text":358},"\u002Fimages\u002Fcases\u002Fhair-glow-cover.jpg","Hero da landing page Hair Glow — modelo sorrindo enquanto segura o frasco do fluido 5 em 1, sobre fundo verde e roxo claro.","Uma página de venda construída como uma sequência de objeções respondidas, uma de cada vez, em desktop e mobile.",{},"\u002Ftrabalhos\u002Fhair-glow-izadora-k","Junho de 2026","Landing page responsiva · Figma","UI e protótipo (desktop e mobile)",{"title":734,"description":366},"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.",[938,939,940,941,942],"Landing page","UI","Protótipo","Design responsivo","Beleza",{"problem":944,"action":945,"outcome":946},"Um produto de lançamento sem página própria, que precisava se explicar sozinho para quem tem trinta segundos e o celular na mão.","Desenhei onze seções em desktop e mobile sobre o Creators Figma Kit e o UI Kit Braip, ordenadas como uma sequência de objeções em vez de uma lista de argumentos.","Landing page entregue nos dois breakpoints com protótipo navegável e handoff — com a seção de prova social explicitamente pendente de conteúdo real.","r1ROT2IGRTGUBonSDxfs9fZcYx-lGLCnOsNYHhw4xE0",{"id":949,"title":950,"body":951,"cover":1163,"coverAlt":1164,"description":366,"draft":384,"extension":385,"featured":384,"headline":1165,"meta":1166,"navigation":386,"order":1167,"path":1168,"period":1169,"platform":932,"role":1170,"seo":1171,"stem":1172,"summary":1173,"tags":1174,"tldr":1176,"__hash__":1180},"casesPt\u002Ftrabalhos\u002Fsos-beleza-absoluta.md","SOS Beleza Absoluta — um style guide posto à prova",{"type":8,"value":952,"toc":1148},[953,955,958,961,963,966,969,976,978,992,998,1000,1003,1006,1009,1015,1017,1021,1024,1027,1031,1034,1037,1043,1049,1053,1056,1059,1065,1069,1072,1075,1081,1083,1086,1103,1106,1112,1114,1117,1137,1139,1142,1145],[11,954,14],{"id":13},[16,956,957],{},"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.",[16,959,960],{},"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.",[11,962,28],{"id":27},[16,964,965],{},"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.",[16,967,968],{},"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.",[16,970,971,972,975],{},"Então o problema real não era \"desenhar uma landing page\". Era: ",[35,973,974],{},"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.",[11,977,85],{"id":84},[455,979,980,983,986,989],{},[458,981,982],{},"Style guide do projeto: Color Styles, Text Styles e biblioteca de variáveis de cor e tipografia, herdando o Braip Foundations",[458,984,985],{},"Biblioteca de componentes própria da página — dezessete componentes e component sets",[458,987,988],{},"UI das quatorze seções e adaptação para desktop, iPad e mobile",[458,990,991],{},"Direção de arte e composições de produto",[16,993,994,997],{},[35,995,996],{},"O que não foi meu:"," a copy inteira, incluindo headline, bullets, FAQ e depoimentos, veio do time de marketing. A arquitetura de argumento da página também. Eu recebi o que a página precisava dizer e decidi como ela diz.",[11,999,99],{"id":98},[16,1001,1002],{},"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.",[16,1004,1005],{},"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.",[16,1007,1008],{},"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.",[16,1010,1011],{},[576,1012],{"alt":1013,"src":1014},"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",[11,1016,146],{"id":145},[148,1018,1020],{"id":1019},"o-sistema-antes-da-primeira-tela","O sistema antes da primeira tela",[16,1022,1023],{},"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?\".",[16,1025,1026],{},"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.",[148,1028,1030],{"id":1029},"dezessete-componentes-em-vez-de-quatorze-seções","Dezessete componentes em vez de quatorze seções",[16,1032,1033],{},"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.",[16,1035,1036],{},"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.",[16,1038,1039],{},[576,1040],{"alt":1041,"src":1042},"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",[16,1044,1045],{},[576,1046],{"alt":1047,"src":1048},"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",[148,1050,1052],{"id":1051},"desenhar-o-tempo-como-parte-do-produto","Desenhar o tempo como parte do produto",[16,1054,1055],{},"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.",[16,1057,1058],{},"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.",[16,1060,1061],{},[576,1062],{"alt":1063,"src":1064},"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",[148,1066,1068],{"id":1067},"três-ritmos-não-três-preços","Três ritmos, não três preços",[16,1070,1071],{},"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.",[16,1073,1074],{},"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.",[16,1076,1077],{},[576,1078],{"alt":1079,"src":1080},"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",[11,1082,335],{"id":334},[16,1084,1085],{},"O que foi entregue, de fato:",[455,1087,1088,1091,1094,1097,1100],{},[458,1089,1090],{},"Landing page completa em três breakpoints — desktop, iPad e mobile — com quatorze seções",[458,1092,1093],{},"Style guide do projeto: Color Styles, Text Styles e biblioteca de variáveis de cor e tipografia",[458,1095,1096],{},"Biblioteca de dezessete componentes e component sets próprios, com variantes de breakpoint",[458,1098,1099],{},"Composições de produto e direção de arte das seções",[458,1101,1102],{},"FAQ estruturado sobre a base regulatória informada pelo cliente (RDC 240\u002F2018)",[16,1104,1105],{},"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.",[16,1107,1108,1111],{},[35,1109,1110],{},"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.",[11,1113,670],{"id":669},[16,1115,1116],{},"Registrado no próprio changelog do arquivo, como dependência externa:",[455,1118,1119,1125,1131],{},[458,1120,1121,1124],{},[35,1122,1123],{},"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.",[458,1126,1127,1130],{},[35,1128,1129],{},"Valores de produto."," Os preços em tela funcionam como estrutura, mas ainda dependiam de confirmação do cliente.",[458,1132,1133,1136],{},[35,1134,1135],{},"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.",[11,1138,358],{"id":357},[16,1140,1141],{},"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.",[16,1143,1144],{},"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.",[16,1146,1147],{},"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":366,"searchDepth":367,"depth":367,"links":1149},[1150,1151,1152,1153,1154,1160,1161,1162],{"id":13,"depth":367,"text":14},{"id":27,"depth":367,"text":28},{"id":84,"depth":367,"text":85},{"id":98,"depth":367,"text":99},{"id":145,"depth":367,"text":146,"children":1155},[1156,1157,1158,1159],{"id":1019,"depth":376,"text":1020},{"id":1029,"depth":376,"text":1030},{"id":1051,"depth":376,"text":1052},{"id":1067,"depth":376,"text":1068},{"id":334,"depth":367,"text":335},{"id":669,"depth":367,"text":670},{"id":357,"depth":367,"text":358},"\u002Fimages\u002Fcases\u002Fsos-beleza-cover.jpg","Hero da landing page SOS Beleza Absoluta — modelo sorrindo com a mão no cabelo ao lado do título \"Recupere sua autoestima e beleza natural\", sobre fundo bege claro.","Construir um sistema de estilos próprio sobre o Braip Foundations e usar uma landing page de quatorze seções em três breakpoints como teste de resistência dele.",{},4,"\u002Ftrabalhos\u002Fsos-beleza-absoluta","Março de 2026","Style guide e biblioteca de variáveis · UI e design responsivo · direção de arte e composições de produto",{"title":950,"description":366},"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.",[398,938,941,400,1175,942],"Direção de arte",{"problem":1177,"action":1178,"outcome":1179},"Uma landing page longa nasce como um monte de decisões soltas — cada seção inventa seu próprio tom de bege, sua própria escala de título, seu próprio espaçamento. Em quatorze seções e três breakpoints, isso vira dívida antes de virar página.","Construí um style guide dedicado ao projeto — Color Styles, Text Styles e uma biblioteca de variáveis de cor e tipografia herdando o Braip Foundations — e só então desenhei a página, tratando cada seção como um teste de cobertura do sistema.","Quatorze seções em desktop, iPad e mobile sobre dezessete componentes próprios, sem cor ou tamanho de texto avulso. Os depoimentos e os valores de produto ficaram pendentes de conteúdo do cliente, e estão declarados como tais.","DktKtRcJYYGu_0NH-0xxUOTtU3MSZN8ZZDmtU2a84ks",{"id":1182,"title":1183,"body":1184,"cover":1378,"coverAlt":1379,"description":1380,"draft":384,"extension":385,"featured":384,"headline":1381,"meta":1382,"navigation":386,"order":1383,"path":1384,"period":1385,"platform":1386,"role":1387,"seo":1388,"stem":1389,"summary":1390,"tags":1391,"tldr":1394,"__hash__":1398},"casesPt\u002Ftrabalhos\u002Fcreators-figma-kit.md","Creators Figma Kit — temas de marca por variável",{"type":8,"value":1185,"toc":1370},[1186,1200,1207,1211,1217,1248,1252,1258,1296,1300,1306,1321,1325,1331,1334,1338,1347,1350,1352],[16,1187,1188,1189,1191,1192,1199],{},"Adotar um kit de oitocentos componentes não é economia de desenho — é decidir o que o time\nde marketing ",[35,1190,481],{}," vai precisar decidir a cada lançamento. Os componentes, os page templates\ne os 3.627 ícones deste arquivo são do ",[1193,1194,1198],"a",{"href":1195,"rel":1196},"https:\u002F\u002Fwww.relume.io",[1197],"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.",[16,1201,1202,1203,1206],{},"Caso ",[35,1204,1205],{},"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.",[11,1208,1210],{"id":1209},"duas-camadas-não-uma","Duas camadas, não uma",[16,1212,1213],{},[576,1214],{"alt":1215,"src":1216},"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",[16,1218,1219,1220,1223,1224,1227,1228,51,1231,51,1234,51,1237,51,1240,1243,1244,1247],{},"Quinze ",[35,1221,1222],{},"primitives"," guardam valor literal. Vinte e cinco variáveis ",[35,1225,1226],{},"semânticas"," —\n",[40,1229,1230],{},"Colors\u002FText",[40,1232,1233],{},"Background",[40,1235,1236],{},"Foreground",[40,1238,1239],{},"Border",[40,1241,1242],{},"Accent"," — nunca guardam cor: só\napontam para um primitive. É essa separação que faz o tema funcionar. Um componente pinta\no fundo com ",[40,1245,1246],{},"Background\u002FPrimary"," e nunca sabe qual hexadecimal recebeu.",[11,1249,1251],{"id":1250},"uma-paleta-por-criador","Uma paleta por criador",[16,1253,1254],{},[576,1255],{"alt":1256,"src":1257},"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",[16,1259,1260,1261,51,1264,109,1267,1270,1271,1273,1274,1277,1278,1281,1282,1284,1285,1288,1289,1292,1293,1295],{},"Três modos na mesma coleção: ",[40,1262,1263],{},"Base",[40,1265,1266],{},"Izadora K",[40,1268,1269],{},"[Valle]",". O ",[40,1272,1263],{}," roda em roxo\n(",[40,1275,1276],{},"#7250a1",") e rosa (",[40,1279,1280],{},"#fc65a9","). O ",[40,1283,1269],{}," troca por amarelo neon (",[40,1286,1287],{},"#edff00",") sobre uma\nescala quase preta (",[40,1290,1291],{},"#16151d",") — não é um ajuste de tom, é o oposto do ",[40,1294,1263],{},", e é\nexatamente o teste que a arquitetura precisava passar.",[11,1297,1299],{"id":1298},"a-tipografia-também-é-variável","A tipografia também é variável",[16,1301,1302],{},[576,1303],{"alt":1304,"src":1305},"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",[16,1307,1308,109,1311,1314,1315,1317,1318,1320],{},[40,1309,1310],{},"Font Family\u002FHeading",[40,1312,1313],{},"Font Family\u002FText"," são duas variáveis de texto, não uma. O ",[40,1316,1263],{},"\nusa Sora com Poppins; o ",[40,1319,1266],{}," 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.",[11,1322,1324],{"id":1323},"o-modo-aplicado","O modo aplicado",[16,1326,1327],{},[576,1328],{"alt":1329,"src":1330},"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",[16,1332,1333],{},"Aqui é onde a promessa fica verificável: nenhuma seção foi redesenhada para produzir esta\nimagem. Trocou-se o modo.",[11,1335,1337],{"id":1336},"próximo-passo-componentes-próprios","Próximo passo: componentes próprios",[16,1339,1340,1341,1343,1344,1346],{},"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 ",[40,1342,1246],{},"\ne ",[40,1345,1310],{}," entra herdando o tema de qualquer criador no dia em que for criada.",[16,1348,1349],{},"É 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.",[11,1351,358],{"id":357},[16,1353,1354,1355,1357,1358,1360,1361,1363,1364,1366,1367,1369],{},"Teria começado pelo ",[40,1356,1266],{},", não pelo ",[40,1359,1269],{},". Escolhi montar primeiro o tema mais\ndistante do ",[40,1362,1263],{}," porque era o mais interessante de fazer — e ele de fato provou que a\narquitetura aguenta uma inversão completa de paleta. Mas o ",[40,1365,1269],{}," é um tema meu, sem\nprazo e sem ninguém esperando; o ",[40,1368,1266],{}," é 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":366,"searchDepth":367,"depth":367,"links":1371},[1372,1373,1374,1375,1376,1377],{"id":1209,"depth":367,"text":1210},{"id":1250,"depth":367,"text":1251},{"id":1298,"depth":367,"text":1299},{"id":1323,"depth":367,"text":1324},{"id":1336,"depth":367,"text":1337},{"id":357,"depth":367,"text":358},"\u002Fimages\u002Fcases\u002Fcreators-kit-cover.jpg","Capa do Creators Figma Kit sobre fundo roxo, com o logo da Figma em marca d'água e o selo de versão do kit.","Adotar um kit de oitocentos componentes não é economia de desenho — é decidir o que o time\nde marketing não vai precisar decidir a cada lançamento. Os componentes, os page templates\ne os 3.627 ícones deste arquivo são do Relume Figma Kit na versão 3.5;\nnada disso é meu. O que é meu é a camada por cima: uma coleção de 42 variáveis com um modo por\ncriador, para que trocar de marca deixe de ser um trabalho de redesenho e passe a ser a troca\nde um seletor.","Uma camada de variáveis sobre o Relume Figma Kit que troca a marca inteira de uma landing page em um clique de modo.",{},5,"\u002Ftrabalhos\u002Fcreators-figma-kit","2026 — em desenvolvimento","Figma Variables · Landing pages","Sistema de variáveis e curadoria do kit (componentes são do Relume Figma Kit)",{"title":1183,"description":1380},"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",[398,400,1392,938,1393],"Multi-marca","Em desenvolvimento",{"problem":1395,"action":1396,"outcome":1397},"Cada landing page de criador começava do zero — cor, tipografia e espaçamento redecididos a cada lançamento.","Montei uma camada de 42 variáveis com modos de marca sobre o Relume Figma Kit, separando primitives dos papéis semânticos.","Trocar o modo troca a marca da página inteira. Em desenvolvimento — o modo Izadora K ainda herda a paleta do Base.","kpASvutryekt3jbw02r7_MkfKIkbtvtXmBQPg5X-1oY",1787766318635]