[{"data":1,"prerenderedAt":1866},["ShallowReactive",2],{"case-\u002Fwork\u002Fhair-glow-izadora-k":3,"cases-casesEn-all-0":249},{"id":4,"title":5,"body":6,"cover":224,"coverAlt":225,"description":206,"draft":226,"extension":227,"featured":226,"headline":228,"meta":229,"navigation":230,"order":207,"path":231,"period":232,"platform":233,"role":234,"seo":235,"stem":236,"summary":237,"tags":238,"tldr":244,"__hash__":248},"casesEn\u002Fwork\u002Fhair-glow-izadora-k.md","Hair Glow — product launch landing page",{"type":7,"value":8,"toc":205},"minimark",[9,14,18,26,30,33,40,43,46,50,66,69,73,84,87,93,99,105,109,114,117,120,124,130,138,142,148,151,155,161,164,167,171,174,178,181,184,188,191,194,198],[10,11,13],"h2",{"id":12},"context","Context",[15,16,17],"p",{},"Hair Glow is a 260 ml 5-in-1 hair fluid from the \"Toda beleza de mãe\" line by\nIzadora K. The product was going to launch with no page of its own: the only sales\nsurface was social media, which buys reach but not argument.",[15,19,20,21,25],{},"My scope was specific and worth stating upfront: ",[22,23,24],"strong",{},"UI and prototype",". The copy\narrived finished, from a sales page document written by the client. My job was not\ndeciding what to say — it was deciding in what order, at what weight, and in how\nmuch space each thing gets said.",[10,27,29],{"id":28},"the-problem","The problem",[15,31,32],{},"The line's audience is women with full schedules, and that single fact changes\neverything. She does not read a product page top to bottom. She scrolls, stops at\none sentence, and decides.",[15,34,35],{},[36,37],"img",{"alt":38,"src":39},"The section that names the pain: \"Tired of trying hair care routines that don't fit your life?\", with the product on a wooden counter beside a brush and a flat iron","\u002Fimages\u002Fcases\u002Fhair-glow-dor.jpg",[15,41,42],{},"That creates a concrete layout tension. The product has five benefits — hydration,\nheat protection, frizz control, anti-pollution, and pre\u002Fpost workout — and five is\nexactly the count that turns into noise when presented as a list. A page that opens\nby dumping all five loses the reader before the third.",[15,44,45],{},"The other problem is that the product's real argument isn't technical. It's time.\n\"Five in one\" only means something to someone who reads it as five fewer bottles and\nfive fewer steps at the bathroom sink.",[10,47,49],{"id":48},"my-role","My role",[51,52,53,57,60,63],"ul",{},[54,55,56],"li",{},"Page structure and section order",[54,58,59],{},"Desktop (1440) and mobile (375) UI",[54,61,62],{},"Responsive adaptation of every section",[54,64,65],{},"Navigable prototype and file organisation for handoff",[15,67,68],{},"Copy, art direction and photography came from the client.",[10,70,72],{"id":71},"process","Process",[15,74,75,76,79,80,83],{},"The base was the ",[22,77,78],{},"Creators Figma Kit"," together with the ",[22,81,82],{},"Braip UI Kit"," and\nRelume components. That isn't a backstage detail: with the component skeleton\nalready in place, the time that would have gone into drawing boxes went entirely\ninto the editorial decision — which section exists, in what order, with how much\nbreathing room.",[15,85,86],{},"The work split three ways:",[15,88,89,92],{},[22,90,91],{},"Ordering."," Each section answers one question, and the next question only appears\nonce the previous one has been answered. Promise, pain, how it works, proof, price,\ndoubt.",[15,94,95,98],{},[22,96,97],{},"Dosing."," Where the copy allowed, the layout chose density. The five benefits\nbecame a column of short items beside the product shot — a fast vertical read, with\nnone of them competing for emphasis.",[15,100,101,104],{},[22,102,103],{},"Adapting."," Eleven sections at 1440 px rebuilt for 375. The adaptation wasn't\nstacking: the two columns of the benefits block become a sequence, and the kit\ncomparison, side by side on desktop, becomes a sequential decision on mobile.",[10,106,108],{"id":107},"key-decisions","Key decisions",[110,111,113],"h3",{"id":112},"pain-before-benefit","Pain before benefit",[15,115,116],{},"The second section of the page doesn't talk about the product. It asks whether\nyou're tired of hair care routines that don't fit your life, and names frizz,\ndryness and heat damage before offering any solution.",[15,118,119],{},"That's deliberate. A reader who hasn't yet recognised the problem has nowhere to put\nthe answer. The benefits section that follows lands better because it arrives as\nrelief rather than as a catalogue.",[110,121,123],{"id":122},"five-benefits-as-one-step-not-as-five","Five benefits as one step, not as five",[15,125,126],{},[36,127],{"alt":128,"src":129},"The \"Five benefits in a single step\" section — a vertical list of hydration, heat protection, frizz control, anti-pollution and pre\u002Fpost workout, beside the product against foliage","\u002Fimages\u002Fcases\u002Fhair-glow-beneficios.jpg",[15,131,132,133,137],{},"The heading carries the whole argument: ",[134,135,136],"em",{},"five benefits in a single step",". The items\nsit in a narrow column, short text, no decorative icons — the hierarchy says the\npoint is the \"single step\", and that the five are its evidence, not its lead.",[110,139,141],{"id":140},"proof-through-context-not-product-close-ups","Proof through context, not product close-ups",[15,143,144],{},[36,145],{"alt":146,"src":147},"The \"Confidence for every moment\" section — four lifestyle cards showing the product in real everyday situations","\u002Fimages\u002Fcases\u002Fhair-glow-lifestyle.jpg",[15,149,150],{},"The lifestyle section shows the product in four everyday situations rather than four\nangles of the bottle. Each card ties a scene back to a benefit already introduced —\nthe gym ties to pre\u002Fpost workout, the flat iron ties to heat protection.",[110,152,154],{"id":153},"two-options-never-three","Two options, never three",[15,156,157],{},[36,158],{"alt":159,"src":160},"The offer section — two kits side by side, the two-unit bundle at R$197.00 and the single unit at R$137.00, with a launch offer seal","\u002Fimages\u002Fcases\u002Fhair-glow-oferta.jpg",[15,162,163],{},"The offer presents exactly two paths: the two-unit kit and the single bottle. The\nbundle sits on the left, with the launch seal and the struck-through price visible,\nso the comparison happens without the reader doing arithmetic.",[15,165,166],{},"Three options would have turned a purchase decision into a spreadsheet task.",[110,168,170],{"id":169},"marquee-as-breathing-room","Marquee as breathing room",[15,172,173],{},"Between the dense blocks sit three thin horizontal bands carrying the purchase terms\n— secure checkout, free shipping, guarantee. They solve two problems at once: they\ngive visual pause between long sections, and they keep the logistical objections\npresent without spending a whole section on them.",[10,175,177],{"id":176},"outcome","Outcome",[15,179,180],{},"The landing page shipped complete at both breakpoints, with a navigable prototype\nand the file organised for handoff — named sections, components instanced from the\nkit, and the version logged in the file's changelog.",[15,182,183],{},"I don't have a conversion number to show. The page shipped at launch and the metric\nstayed on the client's side; publishing a percentage I didn't measure would be worse\nthan having none.",[10,185,187],{"id":186},"whats-still-open","What's still open",[15,189,190],{},"The testimonials section exists in the layout but still holds placeholder text. The\nreal content — names, photos and customer quotes — depended on collection that\nwasn't ready when the design closed.",[15,192,193],{},"I'm writing that down because the alternative would be showing a screenshot of\ninvented social proof in a case study about a sales page, which is exactly the kind\nof thing the whole page was designed not to do.",[10,195,197],{"id":196},"what-id-do-differently","What I'd do differently",[15,199,200,201,204],{},"I'd have designed the testimonials section ",[22,202,203],{},"after"," the content existed, not\nbefore. A social proof block laid out over lorem ipsum assumes a shape — five short\ncards, all the same size — that real testimonials almost never respect. When the\ntrue text arrives, the layout will have to give, and leaving the space open would\nhave been cheaper than filling it with a provisional form.",{"title":206,"searchDepth":207,"depth":207,"links":208},"",2,[209,210,211,212,213,221,222,223],{"id":12,"depth":207,"text":13},{"id":28,"depth":207,"text":29},{"id":48,"depth":207,"text":49},{"id":71,"depth":207,"text":72},{"id":107,"depth":207,"text":108,"children":214},[215,217,218,219,220],{"id":112,"depth":216,"text":113},3,{"id":122,"depth":216,"text":123},{"id":140,"depth":216,"text":141},{"id":153,"depth":216,"text":154},{"id":169,"depth":216,"text":170},{"id":176,"depth":207,"text":177},{"id":186,"depth":207,"text":187},{"id":196,"depth":207,"text":197},"\u002Fimages\u002Fcases\u002Fhair-glow-cover.jpg","Hair Glow landing page hero — a smiling model holding the 5-in-1 fluid bottle against a soft green and purple background.",false,"md","A sales page built as a sequence of objections answered one at a time, across desktop and mobile.",{},true,"\u002Fwork\u002Fhair-glow-izadora-k","June 2026","Responsive landing page · Figma","UI and prototype (desktop and mobile)",{"title":5,"description":206},"work\u002Fhair-glow-izadora-k","Case study on designing the launch landing page for Hair Glow, the 5-in-1 hair fluid from the \"Toda beleza de mãe\" line by Izadora K — structure, pacing and responsive adaptation on top of a component kit.",[239,240,241,242,243],"Landing page","UI","Prototype","Responsive design","Beauty",{"problem":245,"action":246,"outcome":247},"A launch product with no page of its own, which had to explain itself to someone with thirty seconds and a phone in hand.","I designed eleven sections for desktop and mobile on top of the Creators Figma Kit and the Braip UI Kit, ordered as a sequence of objections rather than a list of arguments.","A landing page delivered at both breakpoints with a navigable prototype and handoff — with the social proof section explicitly flagged as awaiting real content.","qVWniqlgUDZ9ikSOnDMHYH5s_jbweytIoENRyeZ06bc",[250,630,950,1087,1322,1539,1724],{"id":251,"title":252,"body":253,"cover":607,"coverAlt":608,"description":206,"draft":226,"extension":227,"featured":230,"headline":609,"meta":610,"navigation":230,"order":611,"path":612,"period":613,"platform":614,"role":615,"seo":616,"stem":617,"summary":618,"tags":619,"tldr":625,"__hash__":629},"casesEn\u002Fwork\u002Fdesign-system-braip.md","Braip design system — from library to system",{"type":7,"value":254,"toc":593},[255,257,260,263,266,268,271,304,314,320,322,329,332,334,368,371,374,377,379,383,393,399,405,409,414,419,424,428,445,450,455,459,462,505,511,561,564,566,573,576,582,585,587,590],[10,256,13],{"id":12},[15,258,259],{},"Braip is a sales and affiliate platform, and its design system exists to support a\nweb app running in light and dark with genuine parity — not as a visual courtesy,\nbut because a sizeable share of the operation happens in the dark.",[15,261,262],{},"The design team is small and engineering consumes Figma directly: whatever is named\nin the file is what lands in the code. That makes variable naming a product decision,\nnot internal housekeeping.",[15,264,265],{},"The constraint that shaped everything: the system was in production and there was no\nwindow to rebuild it from scratch. All of it was done on the live library, with\ncomponents being instanced in other people's files while the change was underway.",[10,267,29],{"id":28},[15,269,270],{},"The system didn't have an appearance problem. It had a naming problem.",[15,272,273,276,277,281,282,285,286,289,290,289,293,289,296,299,300,303],{},[22,274,275],{},"Numeric suffixes with no defined role."," The ",[278,279,280],"code",{},"State"," group in the ",[278,283,284],{},"❖ Color","\ncollection exposed each colour across four tiers — ",[278,287,288],{},"01",", ",[278,291,292],{},"02",[278,294,295],{},"03",[278,297,298],{},"04",". The number\ndescribed luminosity, never function. ",[278,301,302],{},"State\u002FPurple\u002F03"," doesn't answer the only\nquestion that matters while designing: can I use this as text? In practice, everyone\npicked a different tier for the same role, and the divergence only surfaced when two\nscreens sat side by side.",[15,305,306,309,310,313],{},[22,307,308],{},"Contrast never measured."," Coloured text over tinted backgrounds was chosen by eye.\nIn dark mode, where the chip background blends into the ",[278,311,312],{},"#0B0B0E"," canvas, \"looks\nreadable\" and \"is readable\" are not the same thing — and nobody had the number to\ntell which one was happening.",[15,315,316,319],{},[22,317,318],{},"Motion as a loose value."," Hover, sheet and toast had durations set screen by\nscreen. There was no scale, no vocabulary, and therefore no way to review a\nmicro-interaction other than by opinion.",[10,321,49],{"id":48},[15,323,324,325,328],{},"I owned the token, contrast and documentation track inside the design team, under the\ndesign system epic ",[22,326,327],{},"TI-2036",". That covers the variable naming architecture, the\ncontrast audit, the motion scale and the handoff specs.",[15,330,331],{},"What isn't mine: the product components themselves, drawn by the team over time, and\nthe code implementation consuming those tokens. My job was to give those components a\nbase that explains itself.",[10,333,72],{"id":71},[15,335,336,337,339,340,343,344,347,348,351,352,354,355,358,359,361,362,364,365,367],{},"I started by auditing the ",[278,338,284],{}," collection and, rather than proposing a\nconvention from scratch, I read the actual usage. I inspected how the ",[278,341,342],{},"Tags"," and\n",[278,345,346],{},"Chips"," components already consumed the tiers: in the ",[278,349,350],{},"Solid"," variant the container\nused tier ",[278,353,295],{}," with white text; in ",[278,356,357],{},"Minimalist",", the container used ",[278,360,288],{},"\u002F",[278,363,292],{}," and the\ntext used ",[278,366,295],{},". There was an implicit convention there, working, unnamed.",[15,369,370],{},"With the implicit pattern mapped, I compared it against what mature design systems do\nfor state scales — Ant Design, Atlassian, Polaris and IBM Carbon converge on the same\nsequence of roles: background, border, icon, text. Braip's convention was already\nthat; it just needed saying out loud.",[15,372,373],{},"From there: rename without touching values, measure contrast on the renamed scale,\nfix the pairs that failed, and finally extend the same \"a name that states the\nfunction\" logic to motion.",[15,375,376],{},"Each stage became a versioned spec and plan before execution — 20 specs and 28 design\nplans between 3 and 24 July 2026. The plan exists less to remember what to do and\nmore to leave a record of what was discarded.",[10,378,108],{"id":107},[110,380,382],{"id":381},"decision-1-semantic-role-instead-of-a-numeric-scale","Decision 1 — Semantic role instead of a numeric scale",[15,384,385,388,389,392],{},[22,386,387],{},"Context:"," ",[278,390,391],{},"State\u002F\u003CColour>\u002F01–04",", across nine colours. The number indicated\nluminosity, not function.",[15,394,395,398],{},[22,396,397],{},"Alternative discarded:"," keep the numbers and publish a legend explaining what each\ntier maps to.",[15,400,401,404],{},[22,402,403],{},"Why this one:"," a legend is documentation nobody opens mid-handoff. A name, by\ncontrast, travels with the token — it shows up in the inspector, in the code, in the\nconversation. And adopting the sequence Ant Design, Atlassian, Polaris and Carbon\nalready use lowers the entry cost for anyone arriving from another system: they don't\nneed to learn Braip, only to recognise the pattern.",[110,406,408],{"id":407},"decision-2-rename-without-touching-values","Decision 2 — Rename without touching values",[15,410,411,413],{},[22,412,387],{}," there was a temptation to fix colour and name in a single pass, since the\nfile was open anyway.",[15,415,416,418],{},[22,417,397],{}," rename and value rebind in one movement.",[15,420,421,423],{},[22,422,403],{}," separating the two operations makes each of them verifiable. If\nnothing changes visually after the rename, the rename is correct — any pixel\ndifference would be a bug, not intent. The chromatic adjustment came afterwards,\nguided by the contrast report, and could be judged on its own because the naming\nlayer was already stable.",[110,425,427],{"id":426},"decision-3-legacy-retired-by-documentation-not-by-deletion","Decision 3 — Legacy retired by documentation, not by deletion",[15,429,430,432,433,436,437,440,441,444],{},[22,431,387],{}," the ",[278,434,435],{},"Motion"," collection carried an old scale, ",[278,438,439],{},"value\u002Fduration\u002F100","\nthrough ",[278,442,443],{},"600",", unlinked from the new semantic tokens.",[15,446,447,449],{},[22,448,397],{}," delete the legacy variables alongside publishing the new\nscale.",[15,451,452,454],{},[22,453,403],{}," deleting a variable in a live library breaks instances in files that\naren't yours, and the affected person finds out through the damage. Explicitly marking\nit \"do not use\" in the reference documentation stops adoption without breaking anyone;\nremoval waits until consumption reaches zero.",[10,456,458],{"id":457},"solution","Solution",[15,460,461],{},"Braip's final base is 839 tokens across seven categories — colour, semantic colour,\nprimitives, typography, spacing, layout and responsiveness.",[15,463,464,467,468,289,471,289,474,289,477,289,480,483,484,289,487,289,490,493,494,497,498,501,502,504],{},[22,465,466],{},"State colour."," Nine colours (",[278,469,470],{},"Neutral",[278,472,473],{},"Purple",[278,475,476],{},"Green",[278,478,479],{},"Blue",[278,481,482],{},"Pink",",\n",[278,485,486],{},"Orange",[278,488,489],{},"Red",[278,491,492],{},"Yellow"," and ",[278,495,496],{},"Off",") exposed by role rather than index:\n",[278,499,500],{},"background → border → icon → text",". That's 35 renamed variables, in two modes, with\nno value change in the process. ",[278,503,496],{}," is the documented exception: it has only three\ntiers, because it never needed an emphasis level.",[15,506,507,510],{},[22,508,509],{},"Contrast."," Chips and Tags audited against WCAG 2.0 AA across the nine colours, in\nboth modes, with every pair's ratio recorded in a table. Pairs falling short of 4.5:1\nwere corrected before publishing, not after someone reported them.",[15,512,513,516,517,289,520,289,523,289,526,289,529,532,533,289,536,289,539,542,543,545,546,548,549,551,552,554,555,557,558,560],{},[22,514,515],{},"Motion."," Five duration tokens (",[278,518,519],{},"instant",[278,521,522],{},"fast",[278,524,525],{},"base",[278,527,528],{},"slow",[278,530,531],{},"slower",") and\nthree easing tokens (",[278,534,535],{},"standard",[278,537,538],{},"enter",[278,540,541],{},"exit","), each with a guideline for when to\nuse it — ",[278,544,522],{}," for micro-hover, ",[278,547,525],{}," for toast, ",[278,550,528],{}," for sheet; ",[278,553,538],{}," for\nelements appearing, ",[278,556,541],{}," for elements leaving, ",[278,559,535],{}," for neutral transitions.\nThe scale was applied to three reference components: Sheet, Toast and the Button\nhover.",[15,562,563],{},"The whole scale lives documented on the file's Foundations page, with animatable\npreviews — the documentation is the working file itself, not a parallel PDF ageing on\nits own.",[10,565,177],{"id":176},[15,567,568,569,572],{},"The token started explaining itself at handoff. Asking \"which tier do I use here?\"\nstopped making sense, because the name already answers it: if it's text, use ",[278,570,571],{},"text",".",[15,574,575],{},"Contrast became a verifiable criterion instead of an opinion. There is a table with\nthe measured ratio for every Chips and Tags combination, across the nine colours, in\nboth modes — and the argument in a design review shifted from \"I think that's too\nlight\" to a line in that table.",[15,577,578,579,581],{},"Motion became shared vocabulary. Debating whether a sheet should use ",[278,580,528],{}," is a\nproductive conversation; debating 320 versus 340 milliseconds is not.",[15,583,584],{},"And the system absorbed all of it without breaking anyone's file — the legacy left\ncirculation through documentation, at the pace consumption dropped.",[10,586,197],{"id":196},[15,588,589],{},"I inverted the order. I renamed before measuring contrast, and the consequence was\nhaving to return to the already-renamed scale to fix the pairs that failed — the final\nreport carries \"corrected\" marks that wouldn't exist had the measurement come first.\nMeasuring is cheap; renaming twice is not.",[15,591,592],{},"And I treated visual evidence as a step after execution. Several plans ended up with\ntheir screenshot pending once the change was already applied, which means part of the\n\"before\" is gone. Documenting isn't the step that follows the work — it's part of it,\nand when it's left for later, it usually doesn't happen.",{"title":206,"searchDepth":207,"depth":207,"links":594},[595,596,597,598,599,604,605,606],{"id":12,"depth":207,"text":13},{"id":28,"depth":207,"text":29},{"id":48,"depth":207,"text":49},{"id":71,"depth":207,"text":72},{"id":107,"depth":207,"text":108,"children":600},[601,602,603],{"id":381,"depth":216,"text":382},{"id":407,"depth":216,"text":408},{"id":426,"depth":216,"text":427},{"id":457,"depth":207,"text":458},{"id":176,"depth":207,"text":177},{"id":196,"depth":207,"text":197},"\u002Fimages\u002Fcases\u002Fbraip-foundation-cover.jpg","Cover of the Braip Foundations file — \"Design System · Foundations & Design Tokens\" over the Braip monogram in a purple gradient.","Turning a drifting component library into a system with tokens, motion and documentation an engineering team can actually consume.",{},1,"\u002Fwork\u002Fdesign-system-braip","2025–2026","Web · Figma Variables","UI\u002FUX Designer — Design System (token track, within a design team)",{"title":252,"description":206},"work\u002Fdesign-system-braip","Case study on restructuring Braip's design system in Figma Variables — semantic token architecture, motion tokens and handoff documentation.",[620,621,622,623,624],"Design System","Design Tokens","Figma Variables","Accessibility","Documentation",{"problem":626,"action":627,"outcome":628},"The library grew by accretion — every new screen introduced colour, spacing and motion variants nobody could trace.","I restructured the base into semantic tokens, standardised motion duration and easing, and documented the reasoning behind each decision.","A colour scale with explicit semantic roles, AA contrast verified across 9 colours in both modes, and a motion vocabulary applied to reference components — handoff stopped depending on who drew the screen.","Vaoxe8DxnBjDVjC14GqjM4nFvoSWpg_VYgJKH4wVP6g",{"id":631,"title":632,"body":633,"cover":799,"coverAlt":931,"description":206,"draft":226,"extension":227,"featured":230,"headline":932,"meta":933,"navigation":230,"order":207,"path":934,"period":935,"platform":936,"role":937,"seo":938,"stem":939,"summary":940,"tags":941,"tldr":945,"__hash__":949},"casesEn\u002Fwork\u002Fcheckout-discovery.md","Checkout — the whole flow, and the card motion",{"type":7,"value":634,"toc":915},[635,637,640,647,654,656,662,665,671,674,676,696,703,705,712,727,734,736,740,745,751,756,760,763,768,773,782,785,794,800,807,811,816,821,825,830,839,843,848,853,855,858,881,887,889,907,909,912],[10,636,13],{"id":12},[15,638,639],{},"Braip is a digital sales platform, and the checkout is where everything that happens\nbefore it gets collected or lost. It isn't a product screen: it's the final step of\nevery sale the platform processes, for thousands of stores that have no control over\nhow it looks.",[15,641,642,643,646],{},"When I picked up the file, ",[22,644,645],{},"two legacy checkouts were live at once"," — a single-page\nversion and a multi-step version. Neither used the current design system: they were\nV1 screens, built before the variable system existed.",[15,648,649,650,653],{},"The actual scope is recorded in the file's changelog, and it's worth being literal\nabout it: ",[22,651,652],{},"rebuild V1 using the V2 design system",". That is not \"redesign from\nscratch with a free hand\". It's translation work under a hard constraint — the\nbusiness flow already existed, the payment methods already existed, and what I could\nchange was the form, not the contract.",[10,655,29],{"id":28},[15,657,658,659,572],{},"The design tension here isn't a full screen. It's a screen full of ",[22,660,661],{},"mandatory\nthings",[15,663,664],{},"A Brazilian checkout doesn't ask for email and a card. It asks for name, email,\nphone, postcode, street, number, unit, district, city, state, shipping method,\npayment method, card number, cardholder, expiry, CVC, installment plan and the\ncardholder's tax ID — before any confirmation. Add coupon, order bump, calculated\nshipping and the Pix discount on top. It's a long form by law and by acquirer rules,\nnot by carelessness.",[15,666,667,668,572],{},"So the question couldn't be \"how do we cut fields\". It had to be: ",[22,669,670],{},"how do we make a\nlong form not feel like an obstacle while it's being filled in",[15,672,673],{},"There was a second, quieter problem. The legacy checkout had screens for when things\ngo right. It had none for when they go wrong. Declined card, insufficient funds, a\nfailed Pix issuance, the seconds while the payment is being processed — none of it\nwas designed. In practice that means the worst moment of the experience was the only\none without design.",[10,675,49],{"id":48},[51,677,678,681,684,687,690,693],{},[54,679,680],{},"Rebuilding the single-page checkout on the V2 design system",[54,682,683],{},"Mapping and designing the unhappy path — declines, failures and error states",[54,685,686],{},"Loading states (skeletons) for payment processing",[54,688,689],{},"Full responsive adaptation: desktop 1440 and mobile 390",[54,691,692],{},"The credit card fill motion",[54,694,695],{},"Clickable prototype per payment method, with confirmation and decline",[15,697,698,699,702],{},"What was ",[22,700,701],{},"not"," mine: the checkout's business rules, the available payment methods\nand the legal footer copy — all inherited. And the V2 design system itself, which is\nteam work; I work on its token track, but the components used here came from the\nlibrary, not invented for this case.",[10,704,72],{"id":71},[15,706,707,708,711],{},"I started with an inventory, not a drawing. The file gained two sections marked\n",[278,709,710],{},"⚠︎ OLD"," — the legacy single-page and multi-step flows — kept side by side with the\nnew ones. That looks like file housekeeping, but it was the most useful process\ndecision of the project: with \"before\" visible next to \"after\", every divergence\nbecomes an explicit question instead of a silent change.",[15,713,714,715,718,719,722,723,726],{},"Then I split the work into three tracks running in parallel, each with its own\nsection in the file: the ",[22,716,717],{},"happy path"," (modern single page), the ",[22,720,721],{},"unhappy path","\n(declines and failures) and the ",[22,724,725],{},"loading states",". Treating error as its own track,\nwith its own time budget, is what kept it from becoming Friday's last hour.",[15,728,729,730,733],{},"The card motion started as a separate draft before entering the flow — an isolated\n",[278,731,732],{},"motion draft card"," section, where I could get it wrong without breaking good\nscreens.",[10,735,108],{"id":107},[110,737,739],{"id":738},"the-long-form-shows-everything-but-at-two-weights","The long form shows everything, but at two weights",[15,741,742,744],{},[22,743,387],{}," every field is mandatory, and none can hide behind an accordion without\ncreating the feeling that the form never ends.",[15,746,747,750],{},[22,748,749],{},"Rejected alternative:"," the multi-step flow, which existed and still exists as a\nvariant. It solves the perception of length by breaking it into steps — but trades\none long form for three screens with three chances to abandon and a back button that\ndoesn't restore state properly.",[15,752,753,755],{},[22,754,403],{}," the single page shows the whole cost at once. It's honest, and it's\nfaster for people who already know what they want. The work becomes hierarchy: two\nblocks side by side on desktop, identity and delivery on the left, payment on the\nright, and the installment total immediately above the button — the last number\nsomeone reads before deciding.",[110,757,759],{"id":758},"the-credit-card-fills-in-as-you-type","The credit card fills in as you type",[15,761,762],{},"This is the decision the case is named after.",[15,764,765,767],{},[22,766,387],{}," the card block is the most fragile point in the entire checkout. It's\nwhere someone types sixteen digits they don't know by heart, read off a rectangle of\nplastic held in the other hand, under the permanent suspicion of typing them into a\nsite they maybe shouldn't.",[15,769,770,772],{},[22,771,749],{}," silent validation — accept the data and only react on\nerror. It's the legacy checkout's pattern and the cheapest to build. It's also what\nturns one mistyped digit into an acquirer decline three screens later, when the card\nis no longer in hand.",[15,774,775,777,778,781],{},[22,776,403],{}," I designed the card as a ",[22,779,780],{},"visual representation that fills in real\ntime",". The number appears on the card as it's typed, grouped in fours; the\ncardholder name appears below it; the network is detected and acknowledged before the\nfield is finished. The card becomes a mirror of what was typed.",[15,783,784],{},"What this solves isn't aesthetic. It's proofreading: you compare the card on screen\nwith the card in your hand and catch the error the moment it happens — not after the\ndecline. And it solves a second, trust problem: an interface that reacts precisely to\nwhat you type signals that it's handling it carefully.",[15,786,787],{},[788,789],"video",{"src":790,"poster":791,"autoPlay":230,"loop":230,"muted":230,"playsInline":230,"controls":230,"width":792,"ariaLabel":793},"\u002Fvideos\u002Fcheckout-cartao.mp4","\u002Fimages\u002Fcases\u002Fcheckout-cartao-poster.jpg",1080,"Credit card block animation: the number, cardholder name and card network appear on the card as the fields are filled in",[15,795,796],{},[36,797],{"alt":798,"src":799},"Payment block with the credit card filled in — number, holder and network mirrored on the card above the expiry, CVC and installment fields","\u002Fimages\u002Fcases\u002Fcheckout-cartao.jpg",[15,801,802,803,806],{},"The motion has one rule I held to throughout: ",[22,804,805],{},"it never delays typing",". The\nanimation follows the field, not the other way around. No transition blocks the next\ncharacter, and focus is never moved automatically between fields — auto-advance\nbreaks correction for anyone who mistyped the eleventh digit.",[110,808,810],{"id":809},"the-unhappy-path-got-as-much-file-as-the-happy-one","The unhappy path got as much file as the happy one",[15,812,813,815],{},[22,814,387],{}," a declined card is the most common outcome after success, and it was the\nonly one without a screen.",[15,817,818,820],{},[22,819,403],{}," the prototype covers three distinct declines — insufficient funds,\nissuer decline, and a Pix or bank-slip issuance failure — because all three ask\nsomething different of the person. Insufficient funds asks for another card. Issuer\ndecline asks for a call to the bank. Issuance failure asks only to try again. A\ngeneric \"payment not authorised\" screen pushes all three into the same place:\nabandonment.",[110,822,824],{"id":823},"waiting-is-designed-not-absent","Waiting is designed, not absent",[15,826,827,829],{},[22,828,387],{}," between pressing \"Buy now\" and the acquirer's answer there's a real gap,\nseconds long, in which the screen has nothing to say.",[15,831,832,834,835,838],{},[22,833,403],{}," I designed the processing state as a ",[22,836,837],{},"skeleton",", shaped like the\ncontent that's coming, instead of a spinner over a blanked screen. A skeleton says\n\"content is coming here, this size\"; a spinner says \"wait\". In the moment right after\nsomeone authorised a payment, the difference between those two messages is the\ndifference between waiting and doubting.",[110,840,842],{"id":841},"mobile-isnt-the-same-page-narrower","Mobile isn't the same page, narrower",[15,844,845,847],{},[22,846,387],{}," at 390 px the two side-by-side blocks become one column, and order\nstarts to matter more than layout.",[15,849,850,852],{},[22,851,403],{}," on mobile the product summary moves to the top, right under the\nbanner — before any field. On desktop that information can live alongside; on mobile\nit has to come first, because it's what anchors someone to what they're buying\nthrough the next thirty fields. The card block keeps the motion intact: it's the only\ncheckout element that wasn't simplified at the smaller breakpoint.",[10,854,177],{"id":176},[15,856,857],{},"What was delivered:",[51,859,860,863,866,869,872,875,878],{},[54,861,862],{},"Single-page checkout rebuilt on the V2 design system, on desktop (1440) and mobile\n(390)",[54,864,865],{},"Multi-step variant maintained and updated in parallel",[54,867,868],{},"Unhappy path designed: three decline types plus issuance failure",[54,870,871],{},"Loading states with skeletons for payment processing",[54,873,874],{},"Order-confirmed screens for card, Pix and bank slip",[54,876,877],{},"Card fill motion, with a behaviour specification",[54,879,880],{},"Clickable prototype covering all four payment methods",[15,882,883,886],{},[22,884,885],{},"On numbers:"," I don't publish a conversion rate for this work. The metric exists and\nbelongs to Braip's product team; it measures the entire checkout, including backend\nand payment-policy changes that aren't mine. Attributing that number to design would\nbe comfortable and would be false.",[10,888,187],{"id":186},[51,890,891,901],{},[54,892,893,894,483,897,900],{},"The input support fields still show design-system default strings (",[278,895,896],{},"Message text",[278,898,899],{},"Title",") in the help and error message slots. That's a component default, not\ncontent — but it means the real error copy for each field hasn't been written yet,\nand writing it is UX writing work that fell outside this round.",[54,902,903,904,906],{},"Both legacy sections remain in the file, marked ",[278,905,710],{},". They only leave when the\nmigration actually finishes in production.",[10,908,197],{"id":196},[15,910,911],{},"I designed the card motion after locking the payment block's layout, and that order\nwas my mistake. By the time I animated it, the card already had a position, a size\nand a distance from the fields set by static composition — and the animation had to\nfit inside that. If motion had come in alongside layout, the card would probably sit\ncloser to the number field, and the link between the digit typed and the digit shown\nwould be a shorter read.",[15,913,914],{},"The second: I spent too long on the happy path before opening the unhappy one. I knew\nfrom the inventory that the error states were missing, and still left them for later\n— which made the unhappy path a separate section of the file instead of something\nborn with each screen. Error states aren't a chapter. They're a property of every\nscreen, and the file would have been more coherent if I'd treated them that way from\nthe start.",{"title":206,"searchDepth":207,"depth":207,"links":916},[917,918,919,920,921,928,929,930],{"id":12,"depth":207,"text":13},{"id":28,"depth":207,"text":29},{"id":48,"depth":207,"text":49},{"id":71,"depth":207,"text":72},{"id":107,"depth":207,"text":108,"children":922},[923,924,925,926,927],{"id":738,"depth":216,"text":739},{"id":758,"depth":216,"text":759},{"id":809,"depth":216,"text":810},{"id":823,"depth":216,"text":824},{"id":841,"depth":216,"text":842},{"id":176,"depth":207,"text":177},{"id":186,"depth":207,"text":187},{"id":196,"depth":207,"text":197},"Checkout credit card block — the card filled in real time with number, holder and network, above the form fields.","Rebuilding a single-page checkout on the new design system, and fixing its most fragile stretch — the fifteen seconds someone spends typing a card number.",{},"\u002Fwork\u002Fcheckout-discovery","2026","Web checkout · Desktop and mobile","Product UI\u002FUX Designer (rebuild on Braip's V2 design system)",{"title":632,"description":206},"work\u002Fcheckout-discovery","Case study on the redesign of Braip's checkout — porting the legacy version onto the V2 design system, mapping the states nobody designs (decline, wait, failure), and animating the credit card as it fills in.",[942,943,944,435,620],"Product","Flow","States",{"problem":946,"action":947,"outcome":948},"The legacy checkout was the last step of every sale on the platform and the least cared for — two competing flows, components outside the design system, and the moments of error and waiting never designed at all.","Rebuilt the single-page checkout on the V2 design system, mapped the unhappy path and the loading states, and designed a motion that fills the credit card visually as the fields are typed.","Flow delivered on desktop and mobile, with a clickable prototype covering confirmation and three kinds of decline. Conversion metrics stay with the product team — they are not mine to publish.","YxqkrpLtvZSWcvOtJc443ZeLEHOgfxrN7C5NKrHxSJE",{"id":4,"title":5,"body":951,"cover":224,"coverAlt":225,"description":206,"draft":226,"extension":227,"featured":226,"headline":228,"meta":1083,"navigation":230,"order":207,"path":231,"period":232,"platform":233,"role":234,"seo":1084,"stem":236,"summary":237,"tags":1085,"tldr":1086,"__hash__":248},{"type":7,"value":952,"toc":1067},[953,955,957,961,963,965,969,971,973,975,985,987,989,995,997,1001,1005,1009,1011,1013,1015,1017,1019,1023,1027,1029,1033,1035,1037,1041,1043,1045,1047,1049,1051,1053,1055,1057,1059,1061,1063],[10,954,13],{"id":12},[15,956,17],{},[15,958,20,959,25],{},[22,960,24],{},[10,962,29],{"id":28},[15,964,32],{},[15,966,967],{},[36,968],{"alt":38,"src":39},[15,970,42],{},[15,972,45],{},[10,974,49],{"id":48},[51,976,977,979,981,983],{},[54,978,56],{},[54,980,59],{},[54,982,62],{},[54,984,65],{},[15,986,68],{},[10,988,72],{"id":71},[15,990,75,991,79,993,83],{},[22,992,78],{},[22,994,82],{},[15,996,86],{},[15,998,999,92],{},[22,1000,91],{},[15,1002,1003,98],{},[22,1004,97],{},[15,1006,1007,104],{},[22,1008,103],{},[10,1010,108],{"id":107},[110,1012,113],{"id":112},[15,1014,116],{},[15,1016,119],{},[110,1018,123],{"id":122},[15,1020,1021],{},[36,1022],{"alt":128,"src":129},[15,1024,132,1025,137],{},[134,1026,136],{},[110,1028,141],{"id":140},[15,1030,1031],{},[36,1032],{"alt":146,"src":147},[15,1034,150],{},[110,1036,154],{"id":153},[15,1038,1039],{},[36,1040],{"alt":159,"src":160},[15,1042,163],{},[15,1044,166],{},[110,1046,170],{"id":169},[15,1048,173],{},[10,1050,177],{"id":176},[15,1052,180],{},[15,1054,183],{},[10,1056,187],{"id":186},[15,1058,190],{},[15,1060,193],{},[10,1062,197],{"id":196},[15,1064,200,1065,204],{},[22,1066,203],{},{"title":206,"searchDepth":207,"depth":207,"links":1068},[1069,1070,1071,1072,1073,1080,1081,1082],{"id":12,"depth":207,"text":13},{"id":28,"depth":207,"text":29},{"id":48,"depth":207,"text":49},{"id":71,"depth":207,"text":72},{"id":107,"depth":207,"text":108,"children":1074},[1075,1076,1077,1078,1079],{"id":112,"depth":216,"text":113},{"id":122,"depth":216,"text":123},{"id":140,"depth":216,"text":141},{"id":153,"depth":216,"text":154},{"id":169,"depth":216,"text":170},{"id":176,"depth":207,"text":177},{"id":186,"depth":207,"text":187},{"id":196,"depth":207,"text":197},{},{"title":5,"description":206},[239,240,241,242,243],{"problem":245,"action":246,"outcome":247},{"id":1088,"title":1089,"body":1090,"cover":1304,"coverAlt":1305,"description":206,"draft":226,"extension":227,"featured":226,"headline":1306,"meta":1307,"navigation":230,"order":1308,"path":1309,"period":1310,"platform":233,"role":1311,"seo":1312,"stem":1313,"summary":1314,"tags":1315,"tldr":1317,"__hash__":1321},"casesEn\u002Fwork\u002Fsos-beleza-absoluta.md","SOS Beleza Absoluta — a style guide under stress",{"type":7,"value":1091,"toc":1289},[1092,1094,1097,1100,1102,1105,1108,1115,1117,1131,1137,1139,1142,1145,1148,1154,1156,1160,1163,1166,1170,1173,1176,1182,1188,1192,1195,1198,1204,1208,1211,1214,1220,1222,1225,1242,1245,1251,1255,1258,1278,1280,1283,1286],[10,1093,13],{"id":12},[15,1095,1096],{},"SOS Beleza Absoluta is a two-product beauty protocol: an A-to-Z vitamin capsule and a topical aloe oil. The promise is inside-out — internal nutrition sustaining the result, external action delivering immediate shine. The product sells through a long landing page, the kind that answers every objection before asking for the card.",[15,1098,1099],{},"The copy arrived finished, from the marketing team. The argument structure — pain, protocol, differentiator, timeline, social proof, guarantee, offer, FAQ — was already settled when the file reached me. What was open was everything that comes after: what this looks like, how it behaves at three screen widths, and what keeps fourteen sections from reading like fourteen different pages.",[10,1101,29],{"id":28},[15,1103,1104],{},"Long landing pages have a specific, tedious failure mode: they rot by addition. Section 3 wants a beige a touch warmer than section 2's. Section 7 needs a heading size between the two that exist, so a third is born. Nobody makes a bad call — each one is reasonable in isolation. You end up with eleven beiges, six heading scales and no way to shift the brand without opening every section.",[15,1106,1107],{},"Multiply by three breakpoints. Desktop at 1768 px wide, iPad at 1024, mobile at 480 — and a page that, on mobile, runs 15,302 px tall. That's where loose decisions charge interest: every stray value becomes three stray values.",[15,1109,1110,1111,1114],{},"So the real problem wasn't \"design a landing page.\" It was: ",[22,1112,1113],{},"is there a set of visual decisions small enough to cover an entire sales page, with no exceptions?"," The page became the experiment that answers it.",[10,1116,49],{"id":48},[51,1118,1119,1122,1125,1128],{},[54,1120,1121],{},"Project style guide: Color Styles, Text Styles and a colour and typography variables library inheriting from Braip Foundations",[54,1123,1124],{},"A page-specific component library — seventeen components and component sets",[54,1126,1127],{},"UI for all fourteen sections, adapted to desktop, iPad and mobile",[54,1129,1130],{},"Art direction and product compositions",[15,1132,1133,1136],{},[22,1134,1135],{},"What wasn't mine:"," all copy — headline, bullets, FAQ and testimonials — came from the marketing team, as did the page's argument architecture. I was handed what the page needed to say and decided how it says it.",[10,1138,72],{"id":71},[15,1140,1141],{},"The work started backwards from the obvious: before any high-fidelity screen, I wireframed all three widths with the copy that existed. The file's changelog records that version as 1.0, dated 20 March 2026 — \"version with only the copy developed so far.\" Art and imagery came only after the team's feedback.",[15,1143,1144],{},"The style guide slotted in between wireframe and art. It isn't a client deliverable; it's my own infrastructure, built so the next phase would move fast and so the page couldn't drift away from itself.",[15,1146,1147],{},"Braip Foundations supplied the base — the design system where I was already working on token architecture. That shortened the expensive part: I didn't restart the colour scale or the typographic fundamentals from zero, I inherited and specialised them. Worth stating plainly, because it's the reason a project style guide fit inside a landing page schedule at all.",[15,1149,1150],{},[36,1151],{"alt":1152,"src":1153},"Color Styles panel from the SOS Beleza Absoluta file, showing the palette of beiges, browns and neutrals organised as named swatches","\u002Fimages\u002Fcases\u002Fsos-beleza-styleguide.jpg",[10,1155,108],{"id":107},[110,1157,1159],{"id":1158},"the-system-before-the-first-screen","The system before the first screen",[15,1161,1162],{},"Color Styles, Text Styles and a variables library came before section 1. The rule I set myself was simple and uncomfortable: no colour or text size enters a section unless it's in the system. When a section asked for something that didn't exist, the question wasn't \"what value do I use here\" but \"is this need real enough to become a project decision?\"",[15,1164,1165],{},"Most of the time it wasn't — and the section resolved with what was already there. That's why the palette stayed small: it's small because it was forced to be, not because I was disciplined in the moment of each screen.",[110,1167,1169],{"id":1168},"seventeen-components-instead-of-fourteen-sections","Seventeen components instead of fourteen sections",[15,1171,1172],{},"The page isn't made of sections, it's made of parts. Produto, Button, Card Modal, Timeline Text, FAQ, Card\u002Ftext image, Image\u002FFlow, Promo bar, Picture\u002FSanfona, Footer responsive — each with its own variants.",[15,1174,1175],{},"That changes the cost of responsive work. Adapting fourteen sections to three widths is fourteen problems solved three times. Adapting seventeen components is seventeen problems solved once, and the sections inherit. The mobile carousel, for instance, is its own component set — the protocol section doesn't know it became a carousel, it just composes the right part.",[15,1177,1178],{},[36,1179],{"alt":1180,"src":1181},"The \"Protocolo completo de dentro para fora\" section on desktop, with three side-by-side cards covering internal nutrition, external action and routine practicality","\u002Fimages\u002Fcases\u002Fsos-beleza-protocolo.jpg",[15,1183,1184],{},[36,1185],{"alt":1186,"src":1187},"The same protocol section on mobile, with the three cards stacked vertically and the product image repositioned above the text","\u002Fimages\u002Fcases\u002Fsos-beleza-mobile.jpg",[110,1189,1191],{"id":1190},"designing-time-as-part-of-the-product","Designing time as part of the product",[15,1193,1194],{},"This is where the system met the content. The protocol only delivers with consistency — the first two weeks are adjustment, the first month brings less shedding, the third is when other people notice. A page that only shows \"before and after\" lies about that.",[15,1196,1197],{},"The timeline section exists to make the wait visible rather than hide it, and it runs on a dedicated component, Timeline Text, with variants per milestone. Every stage carries the same typographic weight — none is highlighted as \"the moment it works.\" It's a system decision with an honesty effect: with no hierarchy between milestones, the page can't imply the result arrives sooner than it does.",[15,1199,1200],{},[36,1201],{"alt":1202,"src":1203},"The \"Seus primeiros 3 meses\" section, with the two-week, first-month and third-month milestones described in blocks of equal visual weight","\u002Fimages\u002Fcases\u002Fsos-beleza-timeline.jpg",[110,1205,1207],{"id":1206},"three-rhythms-not-three-prices","Three rhythms, not three prices",[15,1209,1210],{},"The offer section presents three plans — three months, two months and one month, with oils included according to the plan. The default temptation is to sort by price and highlight the middle one. I chose to treat the plans as treatment durations, consistent with the argument the page had been building for ten sections: the product is time, not a bottle.",[15,1212,1213],{},"All three cards share the same component and the same product composition; what changes is how much time is being bought. The discount badge is identical across all three — also a system decision, since varying the badge would suggest one plan is objectively better, and that's not a claim I could support. Prices are shown in BRL.",[15,1215,1216],{},[36,1217],{"alt":1218,"src":1219},"The offer section with three treatment plans side by side, each with a product composition, instalment price and buy button","\u002Fimages\u002Fcases\u002Fsos-beleza-oferta.jpg",[10,1221,177],{"id":176},[15,1223,1224],{},"What was actually delivered:",[51,1226,1227,1230,1233,1236,1239],{},[54,1228,1229],{},"A complete landing page across three breakpoints — desktop, iPad and mobile — with fourteen sections",[54,1231,1232],{},"Project style guide: Color Styles, Text Styles and a colour and typography variables library",[54,1234,1235],{},"A library of seventeen custom components and component sets, with breakpoint variants",[54,1237,1238],{},"Product compositions and section art direction",[54,1240,1241],{},"An FAQ structured on the regulatory basis provided by the client (Brazilian ANVISA RDC 240\u002F2018)",[15,1243,1244],{},"No colour or text size ended up outside the system — which was the question the project set out to answer, and the answer was yes.",[15,1246,1247,1250],{},[22,1248,1249],{},"On business results: I don't have any."," The page shipped as a design file; conversion numbers, if they exist, stayed with the client. The \"+100K de autoestima revitalizadas\" line in the social proof section is a client-supplied claim, not a metric I verified or that this case study claims.",[10,1252,1254],{"id":1253},"what-stayed-open","What stayed open",[15,1256,1257],{},"Recorded in the file's own changelog as an external dependency:",[51,1259,1260,1266,1272],{},[54,1261,1262,1265],{},[22,1263,1264],{},"Testimonials."," The social proof section has three written testimonials and cards still in placeholder, filled with text recycled from another section. That's why there's no image of that section here — photographing a placeholder would be selling a section that doesn't exist.",[54,1267,1268,1271],{},[22,1269,1270],{},"Product pricing."," The on-screen prices work as structure, but were still pending client confirmation.",[54,1273,1274,1277],{},[22,1275,1276],{},"A copy inconsistency that slipped through."," The guarantee section is titled \"Desafio 90 dias\" while its body reads \"caso você realize o desafio de 30 dias\" — two different durations in the same section. It's a proofreading miss, and its presence here is the record that I didn't catch it in time.",[10,1279,197],{"id":196},[15,1281,1282],{},"I designed the testimonial cards before a real testimonial existed. I built the component from a format I imagined — a short quote, a name, five stars — and filled it with placeholder text to keep the layout moving.",[15,1284,1285],{},"The problem surfaces when the real testimonials arrive: the three the team had already written are long, narrative, opening on fear and turning. They aren't short quotes. They're stories. The card I designed squeezes that content until it loses exactly the part that persuades.",[15,1287,1288],{},"The right move was the inverse: ask for one real testimonial before designing anything, design the card around it, and only then generalise to the rest. I took the comfortable order instead of the correct one, and the section that depends most on real content is precisely the one designed without it.",{"title":206,"searchDepth":207,"depth":207,"links":1290},[1291,1292,1293,1294,1295,1301,1302,1303],{"id":12,"depth":207,"text":13},{"id":28,"depth":207,"text":29},{"id":48,"depth":207,"text":49},{"id":71,"depth":207,"text":72},{"id":107,"depth":207,"text":108,"children":1296},[1297,1298,1299,1300],{"id":1158,"depth":216,"text":1159},{"id":1168,"depth":216,"text":1169},{"id":1190,"depth":216,"text":1191},{"id":1206,"depth":216,"text":1207},{"id":176,"depth":207,"text":177},{"id":1253,"depth":207,"text":1254},{"id":196,"depth":207,"text":197},"\u002Fimages\u002Fcases\u002Fsos-beleza-cover.jpg","Hero of the SOS Beleza Absoluta landing page — a smiling model with her hand in her hair beside the headline \"Recupere sua autoestima e beleza natural\", on a light beige background.","Building a project-specific style system on top of Braip Foundations, then using a fourteen-section landing page across three breakpoints as its stress test.",{},4,"\u002Fwork\u002Fsos-beleza-absoluta","March 2026","Style guide and variables library · UI and responsive design · art direction and product compositions",{"title":1089,"description":206},"work\u002Fsos-beleza-absoluta","Case study on the design of the SOS Beleza Absoluta protocol landing page — building a dedicated style guide with Color Styles, Text Styles and a variables library, then designing the whole page as proof the system held.",[620,239,242,622,1316,243],"Art direction",{"problem":1318,"action":1319,"outcome":1320},"A long landing page starts life as a pile of loose decisions — every section invents its own shade of beige, its own heading scale, its own spacing. Across fourteen sections and three breakpoints, that becomes debt before it becomes a page.","I built a project-specific style guide — Color Styles, Text Styles and a colour and typography variables library inheriting from Braip Foundations — and only then designed the page, treating each section as a coverage test of the system.","Fourteen sections across desktop, iPad and mobile built on seventeen custom components, with no stray colour or text size. Testimonials and product pricing stayed pending on client content, and are declared as such.","uY8OSUczHLjFlxo4btsv5bhRQBJ6xkv-uTysij-6VnA",{"id":1323,"title":1324,"body":1325,"cover":1518,"coverAlt":1519,"description":1520,"draft":226,"extension":227,"featured":226,"headline":1521,"meta":1522,"navigation":230,"order":1523,"path":1524,"period":1525,"platform":1526,"role":1527,"seo":1528,"stem":1529,"summary":1530,"tags":1531,"tldr":1534,"__hash__":1538},"casesEn\u002Fwork\u002Fcreators-figma-kit.md","Creators Figma Kit — brand themes as variables",{"type":7,"value":1326,"toc":1510},[1327,1342,1348,1352,1358,1389,1393,1399,1437,1441,1447,1462,1466,1472,1475,1479,1487,1490,1492],[15,1328,1329,1330,1333,1334,1341],{},"Adopting a kit of eight hundred components isn't a shortcut on drawing — it's deciding what\nthe marketing team ",[22,1331,1332],{},"won't"," have to decide at every launch. The components, page templates\nand 3,627 icons in this file belong to the ",[1335,1336,1340],"a",{"href":1337,"rel":1338},"https:\u002F\u002Fwww.relume.io",[1339],"nofollow","Relume Figma Kit",", version\n3.5; none of that is mine. What is mine is the layer on top: a collection of 42 variables with\none mode per creator, so that switching brands stops being redesign work and becomes flipping\na selector.",[15,1343,1344,1347],{},[22,1345,1346],{},"In progress."," The system is standing and documented; the queue of landing pages that will\nprove or break the bet hasn't run through it yet.",[10,1349,1351],{"id":1350},"two-layers-not-one","Two layers, not one",[15,1353,1354],{},[36,1355],{"alt":1356,"src":1357},"Creators Figma Kit color documentation — primitive variable tables for Primary, Secundary and Tertiary with their hex values, followed by the Color Schemes block with a scheme preview","\u002Fimages\u002Fcases\u002Fcreators-kit-variables.jpg",[15,1359,1360,1361,1364,1365,1368,1369,289,1372,289,1375,289,1378,289,1381,1384,1385,1388],{},"Fifteen ",[22,1362,1363],{},"primitives"," hold literal values. Twenty-five ",[22,1366,1367],{},"semantic"," variables —\n",[278,1370,1371],{},"Colors\u002FText",[278,1373,1374],{},"Background",[278,1376,1377],{},"Foreground",[278,1379,1380],{},"Border",[278,1382,1383],{},"Accent"," — never hold a color at all:\nthey only point at a primitive. That separation is what makes theming work. A component\npaints its background with ",[278,1386,1387],{},"Background\u002FPrimary"," and never learns which hex it got.",[10,1390,1392],{"id":1391},"one-palette-per-creator","One palette per creator",[15,1394,1395],{},[36,1396],{"alt":1397,"src":1398},"Colors section of the style guide — color palettes in blocks, with the primary, secondary and tertiary scales side by side","\u002Fimages\u002Fcases\u002Fcreators-kit-colors.jpg",[15,1400,1401,1402,289,1405,493,1408,1411,1412,1414,1415,1418,1419,1422,1423,1425,1426,1429,1430,1433,1434,1436],{},"Three modes in one collection: ",[278,1403,1404],{},"Base",[278,1406,1407],{},"Izadora K",[278,1409,1410],{},"[Valle]",". ",[278,1413,1404],{}," runs on purple\n(",[278,1416,1417],{},"#7250a1",") and pink (",[278,1420,1421],{},"#fc65a9","). ",[278,1424,1410],{}," swaps in neon yellow (",[278,1427,1428],{},"#edff00",") over a\nnear-black scale (",[278,1431,1432],{},"#16151d",") — not a tonal tweak but the inverse of ",[278,1435,1404],{},", and exactly the\ntest the architecture needed to survive.",[10,1438,1440],{"id":1439},"type-is-a-variable-too","Type is a variable too",[15,1442,1443],{},[36,1444],{"alt":1445,"src":1446},"Typography section of the style guide — type scale with heading and body weights and sizes","\u002Fimages\u002Fcases\u002Fcreators-kit-typography.jpg",[15,1448,1449,493,1452,1455,1456,1458,1459,1461],{},[278,1450,1451],{},"Font Family\u002FHeading",[278,1453,1454],{},"Font Family\u002FText"," are two string variables, not one. ",[278,1457,1404],{}," runs\nSora with Poppins; ",[278,1460,1407],{}," switches to Federo with Gantari. A creator's brand rarely\nlives in color alone, and a system that themes color but not type only delivers half a swap.",[10,1463,1465],{"id":1464},"the-mode-applied","The mode applied",[15,1467,1468],{},[36,1469],{"alt":1470,"src":1471},"Valles frame of the style guide — the Valle theme applied in a page composition, with its own typography and palette","\u002Fimages\u002Fcases\u002Fcreators-kit-valle.jpg",[15,1473,1474],{},"This is where the claim becomes checkable: no section was redesigned to produce this image.\nThe mode was switched.",[10,1476,1478],{"id":1477},"next-up-components-of-our-own","Next up: components of our own",[15,1480,1481,1482,343,1484,1486],{},"The variable layer is the foundation; what comes next are components built on top of it.\nThe Relume kit covers the generic vocabulary of a landing page — hero, social proof, pricing,\nCTA. What it doesn't have are the sections Braip's creator pages repeat at every launch: the\noffer block with price and installments, the protocol timeline, the product kit, the\nguarantee. Each of those drawn as a component that consumes ",[278,1483,1387],{},[278,1485,1451],{}," arrives inheriting any creator's theme the day it's made.",[15,1488,1489],{},"That set is what decides whether the system delivers. It was built to cut landing page\nproduction time, and that's what the architecture intends — but I haven't measured it.\nWithout a timed before and after, any number here would be invention.",[10,1491,197],{"id":196},[15,1493,1494,1495,1497,1498,1500,1501,1503,1504,1506,1507,1509],{},"I'd have started with ",[278,1496,1407],{}," instead of ",[278,1499,1410],{},". I built the theme furthest from\n",[278,1502,1404],{}," first because it was the most interesting to make — and it did prove the architecture\nsurvives a full palette inversion. But ",[278,1505,1410],{}," is my own theme, with no deadline and nobody\nwaiting; ",[278,1508,1407],{}," belongs to a real creator with a landing page to ship. I finished the\nexperiment and left the use case half-done, which is exactly the wrong order when the system\nexists to serve a team's demand.",{"title":206,"searchDepth":207,"depth":207,"links":1511},[1512,1513,1514,1515,1516,1517],{"id":1350,"depth":207,"text":1351},{"id":1391,"depth":207,"text":1392},{"id":1439,"depth":207,"text":1440},{"id":1464,"depth":207,"text":1465},{"id":1477,"depth":207,"text":1478},{"id":196,"depth":207,"text":197},"\u002Fimages\u002Fcases\u002Fcreators-kit-cover.jpg","Creators Figma Kit cover on a purple background, with the Figma logo as a watermark and the kit's version badge.","Adopting a kit of eight hundred components isn't a shortcut on drawing — it's deciding what\nthe marketing team won't have to decide at every launch. The components, page templates\nand 3,627 icons in this file belong to the Relume Figma Kit, version\n3.5; none of that is mine. What is mine is the layer on top: a collection of 42 variables with\none mode per creator, so that switching brands stops being redesign work and becomes flipping\na selector.","A variable layer on top of the Relume Figma Kit that reskins an entire landing page with one mode switch.",{},5,"\u002Fwork\u002Fcreators-figma-kit","2026 — in progress","Figma Variables · Landing pages","Variable system and kit curation (components are Relume Figma Kit)",{"title":1324,"description":1520},"work\u002Fcreators-figma-kit","A showcase of the theming system I'm building on top of the Relume Figma Kit for Braip's marketing team — 42 variables across three modes that let a landing page take on a creator's identity without redesigning a single section.\n",[620,622,1532,239,1533],"Multi-brand","In progress",{"problem":1535,"action":1536,"outcome":1537},"Every creator landing page started from zero — color, type and spacing re-decided at each launch.","I built a 42-variable layer with per-brand modes on top of the Relume Figma Kit, separating primitives from semantic roles.","Switching the mode reskins the whole page. Still in progress — the Izadora K mode inherits the Base palette.","KKVQsDUbSh5mtrHmgoEQ7L-g0KEJM8TWr94YPMm1CI4",{"id":1540,"title":1541,"body":1542,"cover":1569,"coverAlt":1704,"description":206,"draft":226,"extension":227,"featured":226,"headline":1705,"meta":1706,"navigation":230,"order":1707,"path":1708,"period":935,"platform":1709,"role":1710,"seo":1711,"stem":1712,"summary":1713,"tags":1714,"tldr":1719,"__hash__":1723},"casesEn\u002Fwork\u002Fcopa-players.md","Copa Players — Braip's seasonal campaign",{"type":7,"value":1543,"toc":1691},[1544,1546,1553,1564,1570,1572,1583,1586,1588,1599,1604,1606,1609,1612,1614,1618,1621,1624,1630,1634,1637,1640,1646,1648,1654,1657,1659,1679,1681,1688],[10,1545,13],{"id":12},[15,1547,1548,1549,1552],{},"Braip is a digital-product platform, and this landing page has a narrow target: creators\n",[22,1550,1551],{},"already billing more than R$ 10,000"," on a competing platform. It isn't a beginner\nacquisition page — it's a switch-your-provider page, aimed at people with a running operation\nand therefore a lot to lose in a migration.",[15,1554,1555,1556,1559,1560,1563],{},"The campaign uses the World Cup as an urgency hook. The offer is concrete and dated: ",[22,1557,1558],{},"0% fee\non PIX and 3.89% on card",", for migrations confirmed by ",[22,1561,1562],{},"19 July 2026"," — the length of the\ntournament, no longer. That deadline is what turns \"consider migrating\" into \"decide now\",\nand it's what justifies a separate page instead of a section on the main site.",[15,1565,1566],{},[36,1567],{"alt":1568,"src":1569},"Copa Players hero: the typographic lettering \"Jogue onde você ganha\" with a raised trophy, and below it the fee block with a \"Talk to a specialist\" button.","\u002Fimages\u002Fcases\u002Fcopa-players-cover.jpg",[10,1571,29],{"id":28},[15,1573,1574,1575,1578,1579,1582],{},"A seasonal campaign arrives with two things to say in the first fold, and they compete: the\n",[22,1576,1577],{},"metaphor"," (cup, trophy, team, crowd) and the ",[22,1580,1581],{},"number"," (0% on PIX). The metaphor sells\nattention; the number sells the decision — and the number is what this audience came to check.",[15,1584,1585],{},"The risk with themed campaigns is the artwork swallowing the offer: people understand there's\na World Cup promo and never learn what it actually is. The hero's job was to prevent that\nwithout giving up the tournament mood, which is exactly what earns the page its urgency.",[10,1587,49],{"id":48},[51,1589,1590,1593,1596],{},[54,1591,1592],{},"High-fidelity UI for the desktop landing page and the mobile version",[54,1594,1595],{},"Clickable prototype of both breakpoints, including the thank-you page",[54,1597,1598],{},"Hero composition from the campaign art assets",[15,1600,698,1601,1603],{},[22,1602,701],{}," mine: the copy, which arrived finished as an attachment from marketing; the\ndesign system, which is the Braip Foundations library; and the deploy, handled by engineering.",[10,1605,72],{"id":71},[15,1607,1608],{},"Receiving finished copy changes the order of the work: instead of finding the message by\ndesigning, the design starts with the hierarchy already settled in words. \"0% fee on PIX and\n3.89% on card\" is the headline, \"Billing more than 10k?\" is the audience qualifier, \"Talk to\na specialist\" is the only action. My job was to honour that hierarchy in pixels, not\nrenegotiate it.",[15,1610,1611],{},"The base components — buttons, FAQ accordions, cards, footer — came from Braip Foundations.\nThat accelerated everything structural and concentrated the real time where it mattered: the\nhero and the solutions block.",[10,1613,108],{"id":107},[110,1615,1617],{"id":1616},"the-hero-as-a-poster-not-a-banner","The hero as a poster, not a banner",[15,1619,1620],{},"The \"Jogue onde você ganha\" lettering is treated as typographic art — cut out, with a trophy\nand crowd hands breaking the edges, filling the top like a championship poster. But it stops\nbefore the fold's midpoint. Below it the page changes register: solid background, clean\ndesign-system type, the fee rendered as real text.",[15,1622,1623],{},"That split is the central decision. The upper layer is emotion and campaign recognition; the\nlower one is information. Keeping the fee as text — rather than baked into the artwork —\nmeans it stays legible at any size, selectable, translatable, and editable without reopening\nthe art file when the number changes.",[15,1625,1626],{},[36,1627],{"alt":1628,"src":1629},"Close crop of the hero key visual: the campaign's typographic composition with trophy, crowd, and green graphic strokes over purple.","\u002Fimages\u002Fcases\u002Fcopa-players-hero-arte.jpg",[110,1631,1633],{"id":1632},"four-promises-one-at-a-time","Four promises, one at a time",[15,1635,1636],{},"The Braip Members solutions block could have been a grid of five identical cards — a wall\nnobody reads. I chose a vertical list where only one item is expanded, with title,\ndescription, and CTA, while the rest collapse into clickable headings. A large image beside\nit tracks the active item.",[15,1638,1639],{},"That trades \"see everything\" for \"see one thing\", which is what the page needs: the reader\nisn't comparing feature sets, they're being convinced there's value beyond the fee.",[15,1641,1642],{},[36,1643],{"alt":1644,"src":1645},"Braip Members solutions section: a vertical list — course showcase, upsell and automations, student support, reports and reviews, Braip Play — with a supporting image on the right.","\u002Fimages\u002Fcases\u002Fcopa-players-solucoes.jpg",[10,1647,177],{"id":176},[15,1649,1650,1651,572],{},"I delivered high-fidelity prototypes for desktop (1440 × 5349) and mobile (390 × 6275), plus\nthe thank-you page at both breakpoints, with the file's status label set to ",[22,1652,1653],{},"\"ready for\nvalidation\"",[15,1655,1656],{},"I have no conversion figure to show. The page belongs to the client, so does the analytics,\nand the performance data stayed on their side — inventing a number here would defeat the\nreason this portfolio exists.",[10,1658,187],{"id":186},[51,1660,1661,1667,1673],{},[54,1662,1663,1666],{},[22,1664,1665],{},"The migration form is a placeholder."," Section 03 has a grey rectangle where the form\ngoes, a \"Lorem ipsum\", and three bullets carrying copy recycled from a different landing\npage (\"flexible hours\", \"fast, safe results\", a paragraph about affiliate marketing that\ndoesn't belong to this campaign). That's why the section appears in none of the images here.",[54,1668,1669,1672],{},[22,1670,1671],{},"The offer contradicts itself across breakpoints."," Desktop says \"3.89% on card\"; mobile\nsays \"3.89% + R$ 2.49\". One of them is wrong and it needs marketing to settle it before\nlaunch.",[54,1674,1675,1678],{},[22,1676,1677],{},"No metrics collected"," on my side.",[10,1680,197],{"id":196},[15,1682,1683,1684,1687],{},"I designed the hero desktop-first and only then solved mobile — and paid for it. A poster\ncomposition that works at 1440 px has no honest version at 390 px, so mobile became an\nadaptation rather than a design: art shrunk to the top, message rewritten to fit. Starting\nover, I'd design the offer block on mobile first, where space is expensive, and treat the\nchampionship artwork as the layer that ",[22,1685,1686],{},"expands"," on desktop.",[15,1689,1690],{},"I'd also have locked the form copy before prototyping. Leaving a placeholder section inside a\nprototype flagged ready for validation hands the reviewer a job that was mine — noticing that\nthe block isn't content, it's a hole.",{"title":206,"searchDepth":207,"depth":207,"links":1692},[1693,1694,1695,1696,1697,1701,1702,1703],{"id":12,"depth":207,"text":13},{"id":28,"depth":207,"text":29},{"id":48,"depth":207,"text":49},{"id":71,"depth":207,"text":72},{"id":107,"depth":207,"text":108,"children":1698},[1699,1700],{"id":1616,"depth":216,"text":1617},{"id":1632,"depth":216,"text":1633},{"id":176,"depth":207,"text":177},{"id":186,"depth":207,"text":187},{"id":196,"depth":207,"text":197},"Copa Players hero with the lettering \"Jogue onde você ganha\", a raised trophy, and the fee headline over a purple background with green strokes.","A migration landing page that borrows the World Cup's visual language to sell the lowest fee on the market.",{},7,"\u002Fwork\u002Fcopa-players","Landing page · Desktop and mobile","UI and high-fidelity prototype (copy supplied by the marketing team; components from Braip Foundations)",{"title":1541,"description":206},"work\u002Fcopa-players","A short case on the Copa Players promo page: how the hero was built to carry both the championship metaphor and the actual offer in the same fold, without the artwork swallowing the pitch.\n",[239,1715,1716,1717,1718],"Seasonal campaign","Hero design","Responsive","Braip",{"problem":1720,"action":1721,"outcome":1722},"Selling a platform migration to people already making money, with the World Cup metaphor and the offer competing for the same fold.","Designed the hero as a layered poster — campaign artwork on top, live-text fee headline and CTA below.","Desktop, mobile, and thank-you prototypes delivered and flagged ready for validation. Conversion data stayed with the client.","txKo4pdyQqF0rPBxo7iqscMHsjTpyTzzU1huG_7ym6s",{"id":1725,"title":1726,"body":1727,"cover":1742,"coverAlt":1843,"description":1844,"draft":226,"extension":227,"featured":226,"headline":1845,"meta":1846,"navigation":230,"order":1847,"path":1848,"period":1849,"platform":1850,"role":1851,"seo":1852,"stem":1853,"summary":1854,"tags":1855,"tldr":1861,"__hash__":1865},"casesEn\u002Fwork\u002Faml-locacoes.md","AML Locações — company website",{"type":7,"value":1728,"toc":1835},[1729,1737,1743,1747,1765,1771,1777,1783,1787,1790,1796,1800,1807,1813,1817,1820,1827,1829,1832],[15,1730,1731,1736],{},[1335,1732,1735],{"href":1733,"rel":1734},"https:\u002F\u002Famllocacoeseservicos.com.br",[1339],"AML Locações e Serviços"," rents crane trucks in\nGovernador Valadares, Brazil, and has been running since 1996. Their product is weight:\ncranes, loads, liability. The site had to carry that feeling without turning into a technical\ncatalogue — people hiring a crane truck decide on trust and a phone call, not on a spec\ncomparison.",[15,1738,1739],{},[36,1740],{"alt":1741,"src":1742},"Top of the AML site: menu, the headline \"Deixe o pesado por nossa conta!\", and a contact button over a photo of a crane truck at work.","\u002Fimages\u002Fcases\u002Faml-cover.jpg",[10,1744,1746],{"id":1745},"the-design","The design",[15,1748,1749,1752,1753,1756,1757,1760,1761,1764],{},[22,1750,1751],{},"Palette."," Deep teal (",[278,1754,1755],{},"#004A4E",") as the base, a lighter teal (",[278,1758,1759],{},"#006A6F",") to separate blocks,\nand gold (",[278,1762,1763],{},"#D79D51",") reserved strictly for action and emphasis. I made dark the dominant\ncolour so the equipment photography — open sky, steel, worksite — would land with contrast\nwithout heavy retouching. Gold shows up rarely, which is why it works: where it appears,\nit's meant to be clicked.",[15,1766,1767,1770],{},[22,1768,1769],{},"Type."," Plus Jakarta Sans for headings, Heebo for body copy. The headline — roughly \"leave\nthe heavy lifting to us\" — is the only sentence in the first fold set large: a promise of\nservice in human language, not equipment language.",[15,1772,1773,1776],{},[22,1774,1775],{},"Structure."," One page, five movements: promise, four pillars (excellence, innovation,\ncommitment, safety), three doors into the inner pages (equipment, services, about), social\nproof, and contact. Each block exists to answer one specific doubt, in the order that doubt\nshows up.",[15,1778,1779],{},[36,1780],{"alt":1781,"src":1782},"The site's navigation block: an intro to AML and three cards leading to Equipment, Services, and About.","\u002Fimages\u002Fcases\u002Faml-navegacao.jpg",[110,1784,1786],{"id":1785},"social-proof-as-a-full-section-not-a-footer-strip","Social proof as a full section, not a footer strip",[15,1788,1789],{},"Heavy service sells on reputation. Instead of squeezing testimonials into a band, I gave them\nthe tallest block on the page, with full accounts — response time, punctuality, execution —\nrather than showcase one-liners. It's the largest section on the site, deliberately: it's the\nargument that converts.",[15,1791,1792],{},[36,1793],{"alt":1794,"src":1795},"Testimonial section of the AML site, with client accounts in cards on a light background.","\u002Fimages\u002Fcases\u002Faml-depoimentos.jpg",[110,1797,1799],{"id":1798},"two-contact-routes-neither-one-hidden","Two contact routes, neither one hidden",[15,1801,1802,1803,1806],{},"The closing block offers a form ",[22,1804,1805],{},"and"," WhatsApp, because this audience settles things by\nmessage. A short FAQ answers the three questions that always come up — boom reach, truck\ndimensions, load capacity — before contact, so the conversation starts at negotiation instead\nof specification.",[15,1808,1809],{},[36,1810],{"alt":1811,"src":1812},"Closing block of the site: \"request your quote\" call to action, WhatsApp button, and an FAQ about reach, dimensions, and capacity.","\u002Fimages\u002Fcases\u002Faml-faq.jpg",[10,1814,1816],{"id":1815},"how-it-was-built","How it was built",[15,1818,1819],{},"WordPress with Elementor — the client's call, since they needed to edit content themselves\nafterwards. That shaped the design: nothing that would depend on custom code to keep working\nonce someone else touched it. I did the design, the equipment photo treatment, the build, and\nthe on-page SEO structure (titles, heading hierarchy, meta title naming the region served).",[15,1821,1822,1823,1826],{},"The ",[22,1824,1825],{},"copy is by Bianca Lima",", headline included. My job was to give it the hierarchy and the\nroom it was asking for.",[10,1828,197],{"id":196},[15,1830,1831],{},"I let the home page run to 4,997 px on desktop and 6,130 px on mobile — on a phone, the social\nproof only arrives after a long scroll, exactly where it's needed most. Doing it again, I'd\ndrop the pillars block on mobile and move the testimonials up.",[15,1833,1834],{},"I also instrumented nothing. There's no click event on the WhatsApp button or the form submit,\nso I don't know which of the two routes the quotes actually come through — the one question\nthe site could have answered on its own.",{"title":206,"searchDepth":207,"depth":207,"links":1836},[1837,1841,1842],{"id":1745,"depth":207,"text":1746,"children":1838},[1839,1840],{"id":1785,"depth":216,"text":1786},{"id":1798,"depth":216,"text":1799},{"id":1815,"depth":207,"text":1816},{"id":196,"depth":207,"text":197},"Top of the AML Locações site with the headline \"Deixe o pesado por nossa conta!\" over a crane-truck photo and deep teal background.","AML Locações e Serviços rents crane trucks in\nGovernador Valadares, Brazil, and has been running since 1996. Their product is weight:\ncranes, loads, liability. The site had to carry that feeling without turning into a technical\ncatalogue — people hiring a crane truck decide on trust and a phone call, not on a spec\ncomparison.","A crane-truck rental site designed to feel as solid as the equipment it rents out.",{},8,"\u002Fwork\u002Faml-locacoes","2025","Company website · WordPress and Elementor","Design, image treatment, and Elementor build (copy by Bianca Lima)",{"title":1726,"description":1844},"work\u002Faml-locacoes","A showcase of the AML Locações e Serviços website: deep teal and gold, large type, and a short path to WhatsApp. Design, image work, and Elementor build by me; copy by Bianca Lima.\n",[1856,1857,1858,1859,1860],"Company website","WordPress","Elementor","Visual identity","Local business",{"problem":1862,"action":1863,"outcome":1864},"A crane-truck rental company running since 1996, with no online presence that matched the trust its service already earned.","Designed a single-page site with a deep teal and gold palette, large type, and contact one click away at any scroll depth.","Live at amllocacoeseservicos.com.br, taking quotes by form and by WhatsApp. Metrics stayed with the client.","ypOgXbWdH_otFyiQM11Qyi4lcj34YWLs5EhCXbqdHGs",1787766319362]