Overview to the design system
When we set out to build this design system, the goal was clear: bring consistency and order to a suite of 10 complex applications. It wasn’t just about creating reusable components; it was about unifying the entire experience for users and making things more efficient for the teams working behind the scenes.
Each app had its own quirks, and without a central system, things felt disconnected.
The design system became the solution—standardizing visual elements, reducing errors, and streamlining updates—ultimately transforming how we built and maintained these applications.
Problem
01
02
03
04
05
Research
We conducted extensive research into how reusable components and a unified design system could solve these problems. Our primary focus was to create a system that would be easy to implement across the different applications while ensuring consistency.
Solution
Atoms
Molecules
Organism
Templates
Pages
How the Design System Solves Problems
01
02
03
Design
We built a robust design system grounded in Atomic Design Principles. This approach allowed us to break down each application into its smallest elements
We standardized the Manrope font family across all applications, selecting specific sizes and weights to create a clear hierarchy. This choice ensures readability and brand consistency, providing a modern and approachable feel throughout the user interface.
A structured grid system, paired with consistent spacing rules, maintains visual order across our applications. This framework improves usability by creating a predictable and balanced layout.
Consistent shadow usage adds depth and hierarchy to our UI components. These subtle effects guide user focus and interactions, contributing to modern aesthetic that aligns with our overall design vision.
Iconography: We incorporated icons from Streamline and Ultimate Regular, selecting them for their clarity and alignment with our design aesthetic. These icons are used consistently throughout the suite, ensuring that visual communication is clear and intuitive.
The button components include Primary, Secondary, and Tertiary variants, each with states for Default, Hovered, Pressed, Disabled, and Destructive actions. These buttons are designed to be visually distinct and intuitive, ensuring users can easily identify their purpose. They are optimized for responsiveness, maintaining their usability and appearance across different breakpoints.
Our input fields come in Large, Medium, and Small sizes, each designed to be versatile and adaptable to different contexts. The input fields support various states, including Default, Default/Supportive Text, Warning, Error, Success, Selected, Hovered/Focused, and Disabled. These fields are optimized for responsiveness, ensuring they function and display consistently across all modules.
The input components, including Checkboxes, Radio Buttons, Toggles, and Switches. These inputs are consistent in appearance and behavior, providing clear feedback in different states, from selection to disabled modes. Designed with responsiveness in mind, these inputs perform seamlessly across all modules, ensuring a consistent user experience.
Atoms also includes Tooltips, Progress Indicators, Scrollbars, and Rating Stars and more other still in progress —each meticulously designed to enhance usability and maintain visual consistency across all modules.
The Cards component features both standard and data display designs, optimized for clear and organized information presentation. These cards maintain consistency in layout, icons, and typography, ensuring a cohesive look across all 10 modules. Their responsive design adapts seamlessly to any screen size, making them versatile and effective throughout the enterprise suite.
Table components are designed for efficient data management across the suite. The table headers feature states like Default, Hover, Selected, and Disabled, providing clarity during user interactions. The tables come in Small, Default, and Expanded sizes, accommodating various content types such as Checkboxes, Text fields, Icons, User and Admin info, Numbers, and Action buttons. Each element is responsive to different interaction states, ensuring a consistent and intuitive experience across all modules.
The Calendar components are designed for versatility, featuring master elements like buttons, tabs, and date cells in Small and Large sizes. The calendar supports Day, Week, Month, and Year views, with or without side filters, providing efficient date selection across all modules.
The design system also includes essential navigational and feedback elements: Steppers, Breadcrumbs, Tabs, Pagination, and Toast messages. These components are crafted for clarity and ease of use, ensuring smooth navigation.
The design system provides versatile Table layouts in Small, Default, and Expanded sizes. These layouts ensure that data is presented clearly and effectively, adapting to various content needs while maintaining consistency across the suite's applications.
The Nav Bar component is designed to provide intuitive navigation with both Default and Expanded views. It adapts seamlessly, ensuring easy access to key features while maintaining a consistent look
The design system includes a comprehensive set of Charts and Graphs: Column Chart, Stacked Column Chart, Bar Chart, Donut Chart, Line Chart, Pie Chart, and Bullseye Chart. These visual elements are designed to present data in a clear, engaging, and easily interpretable way.
Takeaways & Learnings
Building this design system was a journey filled with challenges, learning, and growth. It pushed us to rethink our approach to scalability, consistency, and collaboration.
01
02
03
04
The Conclusion
Building this design system for the enterprise web app suite was both a challenge and an incredible learning experience. Despite being new to this kind of large-scale system design, our team successfully overcame obstacles, created efficient workflows, and delivered a product that improved user experience, consistency, and development efficiency. This project not only enhanced our technical skills but also strengthened our collaborative approach, making us more effective as a team.
