Plum Design System

Overview

Plum is a comprehensive and scalable Design System initiated in January 2023, developed internally for Quorum’s products. Before Plum, Quorum’s products relied on disparate UI patterns and lacked a single source of truth for interface development. Plum was initiated to solve this gap.

The goal was to unify and streamline Quorum’s interface design, enhancing usability and ensuring a consistent, high-quality user experience across all platforms.

My role

I joined Plum from day one, where I led the design efforts for more than 2 years and did a minor front-end role. The Design System Governance Group began researching front-end frameworks, helping the team decide on React and TypeScript for scalable implementation.

Over this period, many members from Design, Product, and Engineering had participated in the project, including a multi-disciplinary team of:

Design

Our design approach in Figma is building flexible components using auto-layout, variants, and smart animate. This allowed us to prototype quickly, gather feedback early, and ensure visual consistency from the start.

Switch component in Figma

Plum’s architecture

By taking advantage of Figma variants, our components were built having in mind all the use case scenarios, being flexible and adaptable to meet the most demanding needs.

Button variants overview in Figma

Button variants configuration

Documentation

As the Design System started to gain shape, having a solid Figma library and code being built, we started to plan to make the system accessible and understandable for all teams. So, we decided to document it in ZeroHeight moving forward. The documentation provides a holistic approach starting with the foundation guidelines on typography, colors, spacing, and sizing, with their respective tokens. It goes deeper into each component from design anatomy, content copywriting, and accessibility requirements.

Drawer component in ZeroHeight

Each component page in the documentation lists 3 basic principles:

• Design: details the anatomy of each element, listing its types, grouping, behaviors, guidelines for “dos” and “dont’s”, and more
• Content: best practices for good copywriting for labels, paragraphs, and general interface text content
• Accessibility: requirements for color contrast, keyboard navigation, labeling

Code

Our front-end team implemented it in code using React and TypeScript, ensuring strong typing, reusable logic, and modern frontend architecture. This stack is very popular nowadays, which makes the work easy for current and new Software Engineers. Here’s a simplified example of a component in code:

The development process with code was followed closely by the design team using Storybook to view the actual implementation. With this tool, we could test visuals, behaviors, and accessibility, and with that, we could refine before pushing them to GitHub and production.

Takeaways

Implementing Plum has led to measurable improvements across the product development lifecycle:

• Time saving: Developers can skip redundant UI work by pulling from a pre-built, battle-tested library, saving hours or even days per feature.

• Consistency: Designers and Developers work from a single source of truth, reducing visual and behavioral inconsistencies across products.

• Scalability: As the platform grows, Plum allows for rapid iteration without reinventing the wheel.

• Collaboration: Shared documentation and design assets create a common language across design, product, and engineering teams.

In short, Plum not only accelerates development but also ensures a polished, cohesive user experience in Quorum products.

I continue to maintain and evolve Plum with the team as we expand the design language across new product features and updates. It is a project that I could build a strong relationship with other teams, mentor new Designers in the process, and bring to life a well-crafted Design System that brings to products the identity of Quorum.