Tokenisation and design system development
We built the Apodienste design system to address the challenges of maintaining UI consistency, scalability, and efficient collaboration across teams. A key catalyst was a request to update the brand color, which exposed the limitations of our existing UI-kit. Moving to a fully tokenized design system enabled us to centralize design elements, streamline updates, and ensure all components adhered to a cohesive, scalable design language that supports Apodienste’s growth.
Challenges
Consistency
As the platform expanded, maintaining a cohesive look and feel became essential for reinforcing our brand identity and improving usability.
Inefficient Collaboration
With multiple designers and developers working together, a centralized design system was necessary to minimize miscommunication and ensure efficient handoffs.
Scalability
A design system would serve as a single source of truth, making it easier for designers and developers to work together efficiently.
Complex Updates
Apodienste’s expanding service offerings required a flexible design foundation that could scale without demanding a full redesign for each new feature.
Process
1. Researching leading design systems
To implement tokenization effectively, I researched industry-leading design systems and their approaches to color tokenization, theming, and component modularity.
Outcome: This research inspired our multi-layered token approach to support a dynamic and future-ready design system that could adapt quickly to updates without disrupting workflows.
2. Conducting an audit over existing interface and modules
We reviewed all interface elements, noting variations in color, typography, button styles, spacing, and other components. This audit helped us pinpoint repetitive elements and prioritize which components required standardization.
Outcome: A clear list of UI elements to standardize, which formed the basis for the design system components
3. Defining Tokens
We established tokens for each element, such as primary and secondary colors, font sizes, and padding values. These tokens would serve as the foundation for all visual styles in the platform, making it easy to apply changes across the entire system.
Outcome: A flexible and scalable token library that would allow for quick, consistent updates across the platform.
4. Building the component library
We constructed a library of core components (e.g., buttons, input fields, modals) with standardized styles, states, and behaviors. Each component was built to be modular and adaptable, allowing for consistent use in different contexts across the platform.
Outcome: Sets of reusable component library that would reduce design and development time for new features.
5. Implementation
After aligning on the benefits of tokenization, we handed off a JSON file with the new design tokens, enabling the development team to replace outdated tokens and update components efficiently. This streamlined the transition, ensuring consistency and setting a foundation for easier future updates across the platform.
Outcome: This reduced maintenance time and strengthened design-development collaboration, creating a scalable foundation for future growth.
Takeaways
Structuring the Color System & Establishing Clear Naming Conventions
Through the process and research, we identified how critical it is to structure color system based on the product needs and usages. Our color system was divided into 2 sections: primitives and system colors(here comes a diagram for colors). Moreover, an important aspect was the naming convention. Also, it was important to convince development team to follow design system because it was a big effort to start with but it eased the process in the future.
An intuitive naming convention was essential for scalability, making it easy for designers and developers to apply and maintain the system as the product evolved.
Aligning with the Development Team
Convincing the development team to adopt the design system required initial effort but proved essential. This alignment made future updates more efficient and established a smoother, collaborative workflow.
Result and Conclusion
The design system and tokenization efforts have established a strong foundation that supports ApoDienste’s ongoing growth. The structured color system, intuitive naming conventions, and close collaboration with developers have laid the groundwork for faster updates and easier scalability, ensuring the platform remains adaptable and cohesive as it evolves. This approach has proven that thoughtful planning and alignment with product needs can transform design challenges into sustainable, long-term solutions.