cardimage.png

<h3 dir="ltr">a small token system, on purpose</h3>
<p dir="ltr">The usual move for a design system is a deep numeric scale, with spacing and color primitives running 0&ndash;99. The lead designer and I talked it through and decided against it. Landing pages don't need that much machinery, and Tailwind already enforces a 4/8-point grid through its spacing classes. A parallel scale would just be one more layer for designers to learn and keep in sync.</p>
<p dir="ltr">So tokens live where rebrands actually happen: <strong>color and typography.</strong></p>
<ul dir="ltr">
<li>Brand colors sit in a primitive ramp. Everything a designer touches (background, text, border, brand) is a semantic alias into it.</li>
<li>Two font variables, heading and body, restyle every text style in the file at once.</li>
<li>Spacing stays plain. Values map directly to the pixel values engineers already use in Tailwind, so there are no step indices to translate and no off-grid values.</li>
</ul>
<p dir="ltr">We also scoped it on purpose. Product and app design may justify deeper token layers; landing pages usually don't. The system is built so it can grow if that changes.</p>
<h3 dir="ltr">a file that explains itself</h3>
<p dir="ltr">The template's Style Guide walks a designer through every step, with callouts for the parts that usually trip people up, like adding a new token or changing a font. Nobody needs to ask me or an engineer how it works.</p>
<h3 dir="ltr">the designer workflow, no terminal</h3>
<ol dir="ltr">
<li>Duplicate the template for the new partner.</li>
<li>Rebrand the color, font, and radius variables.</li>
<li>Run the plugin, check the preview, pick an export scope, and enter the team passcode.</li>
<li>An engineer reviews and merges the PR, then drops in the Tailwind v3 or v4 output.</li>
</ol>
<p dir="ltr">Colors and typography export by default. Spacing and radius are opt-in, which keeps the output as lean as the system behind it.</p>
<h3 dir="ltr">preview before publish</h3>
<p dir="ltr">Before anything is published, the plugin reads the file and shows the designer exactly what it found: semantic colors, primitives, fonts and weights, and the type scale. It also catches mistakes early. If a text style doesn't follow the <code dir="ltr">text-&lt;size&gt;</code> naming, the plugin flags it and skips it until it's renamed, so the problem gets fixed in Figma instead of in a PR.</p>
<p dir="ltr"><em><img src="https://img.plasmic.app/img-optimizer/v1/img?src=65aba60eefeaf1c7649561333c48e523.png&amp;f=webp&amp;q=75" alt="" width="1023" height="637"></em></p>
<p dir="ltr"><em>The plugin reads the duplicated template: 10 semantic colors, 7 primitives, and 47 text styles, with one misnamed style flagged before it can reach code.</em></p>
<p dir="ltr"><em><code dir="ltr"><img src="https://img.plasmic.app/img-optimizer/v1/img?src=c854a5f8b966a5adc413dea791856192.png&amp;f=webp&amp;q=75" alt="" width="1023" height="637"></code></em></p>
<p dir="ltr"><em>Heading and body fonts and weights come straight from Figma variables. The type scale uses Tailwind's own names, text-xs through text-6xl, so engineers see sizes they already know.</em></p>
<h3 dir="ltr">handoff without the tooling overhead</h3>
<p dir="ltr">I skipped Tokens Studio and Style Dictionary and wrote a small, dependency-free core instead. It maps Figma's resolved variables to a token model and emits both Tailwind v3 and v4 config. The Figma file that holds the partnership templates becomes the single source of truth for what gets built in code.</p>
<p dir="ltr">Designers never hold a GitHub credential. They type a team passcode, and a small Lambda checks it before firing a <code dir="ltr">repository_dispatch</code> to the repo. A GitHub Action commits the config to a <code dir="ltr">partner/&lt;slug&gt;</code> branch and opens a PR. As a side effect, the repo's Pull Requests tab doubles as a running list of partners: open PRs are pending, merged ones are live.</p>
<p dir="ltr"><em><code dir="ltr"><img src="https://img.plasmic.app/img-optimizer/v1/img?src=ecde6e9459f70760dc4a94846843bb4a.png&amp;f=webp&amp;q=75" alt="" width="1023" height="470"></code></em></p>
<p dir="ltr"><em>From the plugin to a PR: passcode &rarr; Lambda &rarr; repository_dispatch &rarr; GitHub Action &rarr; partner branch and PR.</em></p>
<p dir="ltr"><em><code dir="ltr"><img src="https://img.plasmic.app/img-optimizer/v1/img?src=33b63275513a257e2125da50ffd80681.png&amp;f=webp&amp;q=75" alt="" width="1023" height="637"></code></em></p>
<p dir="ltr"><em>The Tailwind v4 tab: a self-contained @theme block an engineer can copy or download, with semantic tokens aliased to primitives. A v3 tab sits next to it.</em></p>
<h3 dir="ltr">proving it on two very different brands</h3>
<p dir="ltr">To test the system, we applied it to real collection pages for two partners, a footwear brand and a beauty brand. Both started from the same base template. Each rebrand meant filling in brand colors, remapping the semantic aliases, and swapping the fonts. The layout and cross-sell structure stayed the same. From there, the lead designer quickly built desktop and mobile flows (collection, add to cart, cart) on top of it.</p>

<p><img src="https://img.plasmic.app/img-optimizer/v1/img?src=3194fdadc25c9a24cd864d82af362827.png&amp;f=webp&amp;q=75" alt="" width="1023" height="498"></p>
<p>Every Tinuiti partner landing page used to be rebuilt from scratch. I designed and built a design system that fixes this where it starts: a Figma template on a Tailwind/shadcn foundation, plus a plugin that ships a partner's rebrand to engineering as a PR, with no terminal involved.</p>
<h3 dir="ltr">the problem</h3>
<p dir="ltr">At Tinuiti, each new partner landing page started from a blank file. Modules were hard-coded and rebuilt every time. A rebrand meant reworking the whole page and pulling an engineer off other work. Colors and type drifted between Figma and what shipped. Pages for different partners also looked inconsistent, even when they were meant to follow the same CRO best practices.</p>
<h3 dir="ltr">what I built</h3>
<ul dir="ltr">
<li><strong>The 2026 Partnership Template:</strong> a Figma file built on a Tailwind/shadcn foundation, made of plug-and-play modules that take a partner's branding through variables instead of custom code.</li>
<li><strong>CRO Partnership &rarr; Tailwind:</strong> a Figma plugin that reads the template's variables and text styles, previews them, and publishes Tailwind v3 and v4 config to the repo as a pull request.</li>
</ul>
<p dir="ltr">Pages can now be templatized around proven CRO patterns. A rebrand is a variable change, not a rebuild.</p>

desktop.png

footer.png

mobile.png

CRO to Tailwind

<h3>getting oriented</h3>
<p>The first priority was auditing what the previous agency had shipped (homepage, PDP, and landing pages) to set a baseline before any new tests ran. The biggest finding: a homepage hero built entirely around an office and its staff, with no product in it at all.</p>
<figure><img src="https://img.plasmic.app/img-optimizer/v1/img?src=29381c9b3e44e46b521523adb441bffb.png&amp;f=webp&amp;q=75" alt="The original Culligan Quench homepage hero, showing an office and staff" width="2440" height="1520">
<figcaption>The original hero: service-first, with no product in sight.</figcaption>
</figure>
<h3>research, round one</h3>
<p>The first interviews covered the homepage, landing pages, and overall look and feel. Three things stood out:</p>
<ul>
<li><strong>Logos beat copy.</strong> Enterprise customers (Ford, GE, American Express) built more instant trust than any line of copy.</li>
<li><strong>&ldquo;No bottle or delivery fees&rdquo;</strong> was the single strongest hook on the SEO landing page.</li>
<li><strong>The biggest drop-off wasn&rsquo;t visual. It was the pricing wall.</strong> Users wouldn&rsquo;t fill out a form with no idea whether the product fit their budget.</li>
</ul>
<p>A parallel survey of 100 office decision-makers confirmed the pattern: &ldquo;clean, safe water&rdquo; and &ldquo;no surprise fees&rdquo; outranked &ldquo;latest technology&rdquo; and &ldquo;market leader&rdquo; claims.</p>
<figure><img src="https://img.plasmic.app/img-optimizer/v1/img?src=b7982253b8dab9257ab2842d455b8308.png&amp;f=webp&amp;q=75" alt="Research findings on what office buyers need before reaching out" width="2440" height="1560">
<figcaption>What research said people actually needed before they&rsquo;d reach out.</figcaption>
</figure>
<h3>research, round two</h3>
<p>Once the homepage and landing page work was underway, a second round focused on the product quiz and recommendation flow. Users called the quiz a &ldquo;shepherd,&rdquo; welcome guidance through a complex product line. But the results page it led to was missing what they needed to decide: price ranges and review volume.</p>
<h3>hero test</h3>
<p>This one answered the audit directly. We tested putting product imagery back into the hero, and it won.</p>
<figure><img src="https://img.plasmic.app/img-optimizer/v1/img?src=a272e35398396190af887bb65a338d39.png&amp;f=webp&amp;q=75" alt="Homepage hero before and after the product-first test" width="2440" height="1336">
<figcaption>Before: the office, no product. After: the product, front and center.</figcaption>
</figure>
<h3>PDP</h3>
<p>Every change on the PDP mapped to a specific research finding:</p>
<ul>
<li><strong>Accordions in the hero</strong> condensed details the original page buried below the fold.</li>
<li><strong>An icon for every value prop</strong> added the fast-scan trust signals research showed were missing.</li>
<li><strong>Filter and qualifier specs</strong> gave the technical detail a considered purchase needs.</li>
<li><strong>A white-glove service module and step-by-step installation</strong> answered &ldquo;expert service&rdquo; and &ldquo;easy install,&rdquo; two of the survey&rsquo;s top priorities.</li>
<li><strong>A comparison table against bottled delivery</strong> gave users the comparison they wanted before they ever reached a form.</li>
</ul>
<figure><img src="https://img.plasmic.app/img-optimizer/v1/img?src=98ab2d9cf4f2fadcdb96f8f7fe7581a4.png&amp;f=webp&amp;q=75" alt="The original PDP template beside the shipped redesign" width="2440" height="1222">
<figcaption>The original PDP template (left, shown on the Q3) and the shipped redesign (right, shown on the Twist).</figcaption>
</figure>
<figure><img src="https://img.plasmic.app/img-optimizer/v1/img?src=f40c95af4524450f2a361e4d15fe984f.png&amp;f=webp&amp;q=75" alt="The installation module and the bottled-delivery comparison table" width="2440" height="1840">
<figcaption>The installation module and the bottled-delivery comparison, each built to answer a specific research finding.</figcaption>
</figure>
<h3>quiz &amp; recommendation flow</h3>
<p>This answered the &ldquo;shepherd, but incomplete&rdquo; finding. A scanning transition screen (&ldquo;Analyzing 50+ Quench models&hellip;&rdquo;) leaned into the guided feeling users already liked. The results page was rebuilt around a structured <strong>&ldquo;Ideal for:&rdquo;</strong> module, with icon-and-label tags for user count, dispensing type, and water type, replacing a dense spec block that was hard to scan.</p>
<figure><img src="https://img.plasmic.app/img-optimizer/v1/img?src=0fba061cab407977bdb616216fe430e4.png&amp;f=webp&amp;q=75" alt="Quiz transition screen reading Analyzing 50+ Quench models" width="2440" height="1240">
<figcaption>The scanning transition between the quiz and its results.</figcaption>
</figure>
<figure><img src="https://img.plasmic.app/img-optimizer/v1/img?src=27d1f46d0f4f4bb97b92b98449a9b8c5.png&amp;f=webp&amp;q=75" alt="Quiz results page before and after the Ideal for module" width="2440" height="1328">
<figcaption>Results page before and after: from a spec block to &ldquo;Ideal for:&rdquo; tags.</figcaption>
</figure>
<h3>cost savings calculator</h3>
<p>Built to take down the pricing wall entirely. Users drag a slider for their average daily users and instantly see what they&rsquo;d pay: Culligan vs. jug delivery vs. bottled water delivery vs. premium bottled water. No form required. The same number then drives a recommendation of specific products from the catalog.</p>
<figure><img src="https://img.plasmic.app/img-optimizer/v1/img?src=0e0efa4e482893112234f0f2e27f56ea.png&amp;f=webp&amp;q=75" alt="Cost savings calculator with a daily users slider and cost comparison" width="2440" height="1760">
<figcaption>Drag the slider and the cost comparison and product recommendations update together. No form, no wall.</figcaption>
</figure>
<h3>homepage</h3>
<p>The homepage was rebuilt around the same pricing transparency, and it now carries the most forward pricing message the account has shipped: the calculator embedded full-width, a persistent Culligan-vs-competitor pricing table, trust signals (&ldquo;140,000+ businesses trust Culligan Quench&rdquo;), certification badges, and a quiz CTA that routes undecided visitors into the guided flow instead of losing them.</p>
<figure><img src="https://img.plasmic.app/img-optimizer/v1/img?src=7b7207480bd044c60eb274380db12204.png&amp;f=webp&amp;q=75" alt="The rebuilt Culligan Quench homepage with the embedded calculator" width="2440" height="1800"></figure>

<p>Tinuiti&rsquo;s CRO team took over Culligan Quench&rsquo;s conversion testing from a previous agency. Across the homepage, PDP, product quiz, and a new cost-savings calculator, every change traced back to one question from research: how fast can a buyer trust us and see what it will cost?</p>
<h3>overview</h3>
<p>Culligan Quench sells office water systems: a considered B2B purchase that competes head-on with bottled delivery. Tinuiti already ran Quench&rsquo;s paid and SEO. The CRO team was cross-sold in to take over conversion testing from a previous agency.</p>
<p>This is an ongoing engagement, not a single redesign. It spans the homepage, PDP, product quiz, and a new cost-savings calculator.</p>
<p><strong>The starting point:</strong> the homepage led with service and relationships instead of the product, and no single page did the job of building trust fast.</p>

hello, my name is

steff bradley

archives

archives