A set of standard guidelines that govern the use of reusable elements to construct various applications is known as a design system, which is essential for achieving consistency, efficiency, and scalability in design. To address the challenge of disparate branding identities with individual teams creating unique UI components, modules, and standards for both internal and external agencies, I developed the Advantage Pharma Design System to provide a cohesive framework.
Spacing and grid systems are fundamental to a design system and often neglected in visual design, despite their significant impact on the overall aesthetics. In this project, I utilized an 8pt grid system with a 12-column grid and an 8px baseline grid.
Additionally, I incorporated a rem-based spacing guide that aligns with the 8px grid. My choice of an 8pt system was motivated by the desire for greater responsiveness, as most screen sizes are divisible by 8 on at least one axis. This approach is critical in minimizing anti-aliasing and achieving optimal design results.
To establish consistency across Advantage pharma web and mobile , I opted for a universal font, my choice was LATO due to its geometric letter shapes and character spacing, which perfectly aligned with the system's objectives. Its versatility was also a plus, with various weight variations that made it suitable for both headings and body text. Lato was also the preferred font for the mobile responsive and web.
To enhance the user experience and minimize cognitive load, I opted for the material design line icon library in the Advantage Pharma design system. The library's simplicity and informative nature were key factors in my decision, as they complemented the overall visual language of the system. My priority was to ensure that users could quickly understand the icons' meanings, which is why I emphasized simplicity.
When creating a design system, it is crucial to convey information hierarchy, interactive states, and distinguish between elements. To achieve this, I carefully selected and assigned meanings to each color in the **Advantage Pharma design system.**
In this system, every color plays a specific role and holds a particular meaning based on its function within the interface. This intentional approach simplifies future modifications and customizations while extending the color system's functionality to multiple touchpoints.
The most common being default, hover, active, and disabled. You will also occasionally see a loading state. I decided to use all four of those states in the design system along with 5 different button types. Those types are Primary, Secondary, Tertiary, outline green and outline white . Each of which has an icon version associated with it. You can see some of the buttons in a few of the different states below
Design system components are typically complex, and the examples showcased here only represent a small portion of the components designed for the Advantage Pharma system. Below are a few additional components that I've created to help Advantage Pharma better serve their web and mobile marketplaces.
Valuable lessons & Results
Design systems are constantly evolving in their complexity and uniqueness. The presentation I provided only represents a fraction of what goes into a complete system. This also means that the system is a work in progress. However, we already have a set of basic components ready, which has been a game-changer for our team in terms of efficiency, consistency, and standardization
Our team intends to accomplish the following next steps:
1. Expand our component library and include design token.
2. Incorporate sections on brand, illustrations, and animation into the design system.
3. Develop processes for testing the components for compliance with guidelines and accessibility standards.