Isora – SaaS Web App Design System
Drop us a line✍️
Welcome to the heart of Isora GRC’s product transformation: its design system. Serving as the foundation of the platform, the design system ensures visual consistency, functional reliability, and a seamless user experience across every interaction. It was built to unify the product’s complex structure while enabling rapid iteration and delivery of new features.
A well-constructed design system not only supports a cohesive user interface but also accelerates time-to-market, empowering teams to innovate faster without sacrificing quality. Dive into the story behind how we built a design system that’s both robust and scalable, perfectly aligned with Isora GRC’s needs.
Explore more👇
Once the design direction was finalized, we laid the groundwork for the design system by defining the product’s color framework. This began with identifying all the base colors to be used across the platform, which were then expanded into comprehensive palettes by creating additional shades for each color. These shades formed the basis for systematic color selection, especially when designing various states for UI elements.
To future-proof the design system, each palette was given neutral, abstract names rather than being tied to specific colors. For example, instead of naming a palette “Blue,” it might be labeled “Berlin.” This abstraction ensures the system remains adaptable — if the brand’s primary color shifts from blue to green in the future, the design system can seamlessly accommodate the change with minimal disruption.
After defining the base palettes, we transitioned to tokenizing colors, bridging abstract schemes with their application in UI components. Our naming system, inspired by Asana and adapted to the project’s needs, ensured clarity and scalability. Each token includes type (e.g., surface, text), component (e.g., button, input), prominence (e.g., strong, weak, danger, success), and interaction (e.g., hover, focus). For instance, a token like surface-button-danger-idle instantly communicates its role and context, simplifying usage and updates.
Tokenization also supports seamless integration of multiple color modes. For this project, we introduced a High Contrast mode adhering to AAA-level WCAG standards, ensuring optimal text contrast for accessibility. By assigning tokens to reference different primitive colors for each mode, we could quickly adapt the UI without changing the core palette or design structure. This approach not only maintained consistency across the product but also enabled rapid implementation of accessible and customizable color schemes, making the system future-proof and versatile.
Beyond colors, we applied tokenization to every possible design variable, including spacing, border radii, shadows, and effects. These tokens were embedded at the component level, forming a structured foundation for layouts and ensuring consistency across the product.
To further enhance collaboration with developers, we standardized all size-related tokens, such as spacing and radii, in REM units. This practice eliminates the need for additional calculations, enabling developers to apply design values directly and accurately. Using REM also ensures scalability and accessibility, as it allows the interface to respond proportionally to root font size changes, supporting features like user-defined font scaling for better accessibility.
Every design element, from buttons and inputs to typography styles, was crafted for reusability. These atoms were combined into molecules, such as form fields and dropdown menus, and further scaled into organisms like entire forms or cards.
By leveraging this modular system, we not only streamlined the creation process but also ensured scalability. As the product grew, existing components could be adapted or extended to meet new requirements without disrupting the overall design. This approach maintained consistency, reduced redundancies, and allowed the team to respond to evolving needs with efficiency and precision.
In the context of atomic component design, the Slot Component emerged as a key solution for maintaining consistency and flexibility. Acting as a high-level template, it provided a standardized structure and layout for elements that shared similar frameworks. Instead of duplicating efforts to create hundreds of near-identical components, the Slot Component ensured a unified approach while allowing variations through customizable content areas.
The flexibility of the Slot Component lay in its ability to adapt its content dynamically. By swapping out specific slots with tailored elements, we could meet diverse requirements without altering the underlying structure. This approach not only reduced redundancy but also streamlined development and ensured that design consistency was preserved across the product, even as it scaled.
Creating components in the design phase is only part of the equation; the true value lies in having fully developed components ready for implementation. A cornerstone of successful component delivery to development is thorough documentation. Each component is meticulously documented, detailing its composition from child components (atoms), all possible states, and a clear layout that illustrates its architecture. This level of transparency ensures that developers can accurately translate components into code and work seamlessly with them in their environment.
To achieve this, our team utilized Storybook, a powerful tool for building and testing components in isolation. Storybook serves as a mirror of the design system in Figma, providing a ready-to-use library of components that developers can integrate directly into the codebase. This approach not only guarantees consistency between design and development but also significantly accelerates time-to-market by enabling rapid reuse and deployment of prebuilt components.
The creation and implementation of a robust design system were transformative for the Isora GRC project. By focusing on comprehensive tokenization, an atomic approach to component design, and seamless integration with development tools like Storybook, we built a foundation that ensured consistency, scalability, and efficiency across the product.
Midway through the project, with the design system nearly complete (about 90%), we began to see the tangible benefits of our approach. Time-to-market for new features decreased by 50%, enabling us to deliver updates and enhancements twice as fast as would have been possible without a well-structured and documented design system. This case underscores the power of a thoughtfully built design system to drive both design and development efficiency.
👉 Visit our website to see more! phenomenon.com
📮Drop us a few lines at [email protected]
