With the upcoming launch of the <a href="https://taikai.network/en/blog/grow-early-stage-project-taikai-garden?utm_source=taikai_blog&amp;utm_medium=article&amp;utm_campaign=journey-of-building-design-system" target="_blank">TAIKAI Garden</a>, it became clear we needed a unified design system at LayerX. With Bepro and TAIKAI already well-established, introducing the Garden required creating a seamless experience across all LayerX platforms. As a team of just two designers—<a href="https://www.linkedin.com/in/carolina-f-reis/" target="_blank">Carolina</a> and me, Rodrigo—we recognized that building a design system would be essential to tie everything together, streamline development, enhance collaboration, and set the stage for LayerX’s future growth. In this article, I share insights into our creative process, how we approached building the design system, the challenges we faced, and the solutions we developed to ensure a cohesive and scalable design across all LayerX platforms. <img src="https://taikai.azureedge.net/uM3fBMcILmFd2rdfO1NgZeb4smAOUyXL3pS0a2BngOY/rs:fit:800:0:0/aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3RhaWthaS1zdG9yYWdlL2ltYWdlcy84NWUxNmNmMC05MTI3LTExZWYtYTJiYi1iOWE4ZGRlODk0NWFpbWFnZS5wbmc" class="fr-fic fr-dib" /><h3> </h3><h3>What is a Design System?</h3>A design system is more than just a collection of components—it’s a blueprint that establishes consistency across products while streamlining the design-to-development workflow. As we embarked on designing the Garden, we realized that having a solid design system would ensure that all of our products, new and existing, felt cohesive under the LayerX brand.<h4>Key components of a Design System:</h4><ul><li>Reusable components: Buttons, forms, and layouts shared across products.</li><li>Design tokens: Variables like colors, typography, and spacing that ensure uniformity.</li><li>Guidelines: Consistent design principles that guide both designers and developers.</li><li>Documentation: A single source of truth that helps the entire team stay aligned.</li></ul> <img src="https://taikai.azureedge.net/rfsxfhb9h8vg8YvIMOPAW5-6_3OUHC-rvdRrGxxL8z8/rs:fit:800:0:0/aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3RhaWthaS1zdG9yYWdlL2ltYWdlcy9kMDljNDhmMC05MTI3LTExZWYtYmU3OS1mNzJlODQwMTk3YTBqb3VybmV5IGRlc2lnbiBzeXN0ZW0gMS5wbmc" class="fr-fic fr-dib" /> The TAIKAI Garden marked a turning point in how we approached product design. Without a design system, keeping the look and feel consistent across multiple products would have been a monumental task, especially as we continue to scale.<blockquote>New to the TAIKAI Garden? Here’s a <a href="https://taikai.network/en/blog/taikai-garden-whitepaper-snapshot" target="_blank">Snapshot Report</a> to keep up to speed.</blockquote> <h3>What sparked the need for a new Design System</h3>Before the TAIKAI Garden, we had two products at LayerX —<a href="https://bepro.network/?utm_source=taikai_blog&amp;utm_medium=article&amp;utm_campaign=journey-of-building-design-system" target="_blank">Bepro</a> and <a href="https://taikai.network/?utm_source=taikai_blog&amp;utm_medium=article&amp;utm_campaign=journey-of-building-design-system" target="_blank">TAIKAI</a>—that had developed their own unique design languages over time. With the addition of the Garden to our products, it became clear that we needed a unified framework to ensure brand consistency across all three platforms. <h4>The drivers of the new Design System</h4><ul><li>Cohesion: Our 3 products needed to feel like they are part of the LayerX family.</li><li>Efficiency: Building a new product while maintaining existing ones requires a streamlined design and development process.</li><li>Scalability: We needed a system that would support future products and features without adding complexity.</li></ul>By building a design system, we ensured that Garden’s design would be in harmony with Bepro and TAIKAI while establishing a foundation for future LayerX products. <h3>Merging 3 design languages into 1</h3>One of our biggest challenges was merging the different design languages of Bepro, TAIKAI, and the Garden into a unified system. Even though they might target different audiences and serve different purposes, they need to visually align with each other. But how did we tackle this?1- Identify common elements: We pinpointed the design elements that could be shared across all products, such as button styles and typography.2- Preserve uniqueness: While our products shared some core components, we also made sure to preserve the distinct identity of each product, such as their brand-specific colors and themes.3- Introduce new patterns: To tie everything together, we introduced new design patterns that worked across the LayerX ecosystem.This process allowed us to create a consistent user experience while still respecting the unique features of Garden and the existing products.<iframe src="https://www.youtube.com/embed/CfyEyioI68s?&amp;feature=youtu.be&amp;wmode=opaque&amp;rel=0" frameborder="0" allowfullscreen class="fr-draggable"></iframe> <h3>Design Tokens: The foundation of consistency</h3>When we started building our Design System and the TAIKAI Garden, we quickly realized that design tokens would be crucial to maintaining consistency across products. Design tokens are reusable variables that manage elements like colors, fonts, and spacing, allowing us to create scalable designs that can be easily updated. These allow:<ul><li>Cross-platform consistency: By using the same tokens across all products, we ensured that changes in one place would automatically reflect everywhere.</li><li>Efficiency: With tokens, updating our product design became simpler—if a color or spacing needed adjustment, we only had to change it once.</li><li>Scalability: As LayerX grows, design tokens allow us to quickly adapt new products or features without starting from scratch.</li></ul>For example, Garden’s primary color differs from Bepro’s or TAIKAI’s, but thanks to tokens, the underlying structure remains the same. This consistency sped up the design and development process across the board.<img src="https://taikai.azureedge.net/wBlT_4NodFkZuILTP6iOAsnSvDsctlyTSD_xx9cRdkI/rs:fit:800:0:0/aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3RhaWthaS1zdG9yYWdlL2ltYWdlcy83M2Q4Y2YxMC05MTI5LTExZWYtYTJiYi1iOWE4ZGRlODk0NWFpbWFnZS5wbmc" class="fr-fic fr-dib" /><h3> </h3><h3>Building the future: Documentation and collaboration</h3>Once our design system began to take shape, we focused on documenting everything—from component guidelines to design principles. We used <a href="https://zeroheight.com/" target="_blank">Zeroheight</a> to create a living, breathing document that would be accessible to both designers and developers.This approach provides clarity by offering consistent guidelines for both developers and designers. It speeds up development by reducing the need for clarifications and revisions, and ensures that as the system evolves, everyone remains on the same page. <img src="https://taikai.azureedge.net/lcpAj0ULGAtaP0Y-A9cA4imZYXvWWwwr2wmTvbsGR7E/rs:fit:800:0:0/aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3RhaWthaS1zdG9yYWdlL2ltYWdlcy9hMWFlNWMyMC05MTI5LTExZWYtYmU3OS1mNzJlODQwMTk3YTBDbGVhblNob3QgMjAyNC0xMC0yMiBhdCAwOS41NS4xMEAyeC5wbmc" class="fr-fic fr-dib" /> <h3>Lessons learned: Roadblocks and adjustments</h3>Building a design system is never a straightforward process, and we faced numerous challenges along the way.<ul><li>Time constraints: Balancing the creation of the design system while simultaneously designing new products like Garden was difficult with only two designers.</li><li>Merging design languages: Integrating Bepro’s and TAIKAI’s designs into one system required careful thought and compromise.</li><li>Token naming: The initial token structure was too simplistic, forcing us to revisit and refine our naming conventions.</li></ul>However, through these challenges, we learned the importance of flexibility. A design system is a living entity that evolves with your products. It’s never “complete,” and being open to change is key to its long-term success. <h3>The Future of LayerX Design</h3>Our design system is already reshaping how we work at LayerX. With a strong foundation in place, we’re now able to develop faster, ensure better consistency across products, and reduce the workload on both designers and developers.<h4>What the future holds:</h4><ul><li>Open-sourcing the Design System: We plan to open-source our design system, allowing our community to contribute and benefit from it.</li><li>Scalability: As LayerX continues to grow, the design system will scale with it, providing the flexibility we need to expand seamlessly.</li><li>Efficiency: Our system allows us to launch new features and products more quickly.</li></ul><h4> </h4><h3>Key takeaways for future Design System creators</h3>For those starting their design system journey, here are some tips we gathered along the way:<h4>Where to start</h4><ul><li>Research: Understand existing design systems and gather resources.</li><li>Auditing: Conduct thorough audits of your current design language.</li><li>Documentation: Establish clear guidelines from the start.</li><li>Design Tokens</li><li>Embrace tokens early: They’ll save you time and ensure consistency.</li><li>Standardize: Create a solid naming convention that can scale.</li><li>Collaboration: Ensure both designers and developers work from the same set of standards.</li></ul>Ultimately, the most important lesson we learned is that a design system is never “finished.” It evolves with your product, and keeping it flexible is the key to long-term success. This journey has been transformative for us. We’re excited about the future of our design system and how it will shape the TAIKAI Garden and its features as we keep moving forward. Stay tuned for the launch of both Garden and our Design System, and we look forward to seeing how our community will contribute! <h3>About the TAIKAI Garden</h3>TAIKAI Garden is a product extension of <a href="https://taikai.network/" target="_blank">TAIKAI</a> that redefines the innovation landscape’s status quo by connecting innovators to an inclusive and collaborative environment. Designed on an incentive framework, the ecosystem answers the need for sustained and democratized access to support aspiring innovators turn their ideas into impactful businesses. We invite you to explore the <a href="https://storage.googleapis.com/taikai-storage/landing/product/TAIKAI_Garden_Whitepaper_v1.1_Dec_2023.pdf" target="_blank">TAIKAI Garden Whitepaper</a> where you can find in-depth information about the ecosystem goals, dynamics, and the benefits your project can reap by joining the TAIKAI Garden.

This is how we came up with a new design system for the TAIKAI Garden to ensure consistency, scalability, and seamless integration across all LayerX platforms.

TAIKAI Garden: The Journey of Building a Design System

Related Posts

TAIKAI Garden: Behind-the-scenes look at its current development state

The TAIKAI Garden Story: A Tale of Flourishing Innovation

TAIKAI Garden: Driving early-stage growth and web3 innovation

Subscribe to our newsletter

Products

Community

Company

Help