Unifying Cymbiotika's Digital Experience
Cymbiotika was outgrowing its existing digital platforms. Border UX partnered with them to create a unified design system that streamlined their process, ensured product consistency, and improved team collaboration, all built on top of their existing Shopify platform.
The challenge
Cymbiotika, a rapidly expanding health and wellness brand, faced the typical pains of successful growth. As they scaled, their design assets became fragmented, and the translation of designs into existing Shopify tooling required a lot of manual rework. This resulted in lots of hurried and last-minute updates that hindered internal workflows. Designers often worked in silos and on a deadline, leading to repeated efforts, inconsistent styling, and slowed delivery times.
On the technical side, Cymbiotika's development team faced similar issues. The absence of a unified design system meant that quick fixes and one-off overrides piled up. This introduced inconsistencies in appearance and behavior. These issues not only slowed delivery but also buried developers in avoidable bugs. The dependence on Shopify's Liquid templating system, while functional for basic HTML, proved difficult to manage. The devs needed a modern, component-based architecture that supports code reuse, consistent styling, and long-term scalability.
Creating a unified
source of truth
Border UX partnered with Cymbiotika to develop a comprehensive solution that would unify their digital design and development process. The project focused on several key areas:
Creation of a Figma design system: Using Recursica as the foundation, the designers converted the existing designs and themes into tokens, semantic variables, and components for designers to use quickly.
Single technology stack: The team migrated front-end components to React, integrating it with Shopify’s Liquid engine.
Unified UI Kit: All reusable components and styles were centralized into a single npm module, ensuring every project drew from the same source of truth.
Figma synchronization with Recursica: Through the Recursica plugin, designers could adjust Figma variables and components, then sync those changes directly into the UI Kit repository. Once merged, every Cymbiotika project automatically inherited the updates.
This integration eliminated the friction between design and development. Developers no longer wasted cycles on pixel-perfect tweaks or minor color changes. Instead, designers pushed their updates directly into the shared repository via Recursica, effectively becoming first-class contributors to the development workflow. And because the Figma UI kit has all the needed components, product designers now generate full concepts much faster and with fewer exceptions.
The big cleanup
As part of the consulting, Border UX reviewed all of Cymbiotika's digital products to see what was working and what needed improvement. There were inconsistent colors and fonts, which they knew they had to fix. The team analyzed the code base, process, and workflow to better understand how product was managed in the past.
Another key aspect of the effort was mapping the current-state product design/development process against the ideal. By identifying gaps in quality control and approvals, Cymbiotika could greatly improve the speed with which new features and marketing initiatives launched.
The foundation
Recursica contains all the basic needs for a solid design system. Once auditing the current Cymbiotika components, the team customized the system with the following aspects:
Tokens: these help set primitive values for spacing, colors, and sizing.
Brand: the tokens are abstracted into themes, including colors and typography that can be swapped easily.
Icons: any icon system can be integrated into Recursica, including any custom icons.
UI kit: all the components needed to design the digital products in Figma.
This created a consistent definition for every element including colors, fonts, and spacing. They even built a new theme file for their seasonal promotions making it easy to change the website's look and feel for things like summer sales. Cymbiotika can now use dark mode for their mobile app, and light mode for their website.
Automation magic
This is where Recursica really stands out. Instead of designers manually handing off files to developers, the teams created a direct link between their design variables in Figma and the actual code. When a color was updated in Figma, it was automatically updated in the codebase. This saved a lot of time and created a new level of trust between the design and development teams. Fewer translation issues from design to dev. Simpler review of product by marketing. Quicker launch to generate more sales.
The gradual rollout
Border UX didn't introduce the entire new system at once. They started small, working on key pages and components in a dedicated sandbox environment. This allowed them to show the value of the new system and get everyone comfortable with the new process before fully launching it.
By bringing Cymbiotika along on the journey and training them as features were developed, there wasn't a big handoff at the end of the engagement. The team knew how to work and utilize the power of their new design system.
