Design System

Problem Statement

I joined a team with designs that worked but lacked cohesion. As the product and team grew, the gaps became clearer, so I proposed a design system to create a more unified experience.

Goals & Objectives

I aimed to create a scalable, reusable, and accessible design library. Beyond ensuring UI consistency across projects, keened to enhance collaboration among designers and streamline the handoff to developers.

Research Preparation

I explored how leading companies structure their design systems and studied popular UI kits to learn what makes a scalable, effective library. I also analyzed our most-used components to decide where to start building.

System Foundations

To build the components and elements, I’ve focused on establishing the backbone of the design system, such as color, typography, spacing, and radius. By mapping these elements into tokens and variables, we can ensure the components are designed in the future with a certain degree of uniformity while also containing flexibility. Both tokens and variables in the system can be used as the only ‘Bible’ across future projects.

Color

I began by developing the base color palette to establish the foundational colors, which were then organized into tokens and smaller groups for better scalability and maintenance.

Typography

To ensure the typography remains readable and adaptable across different scenarios or devices, I started by choosing a clean and versatile typeface that could fit a wide range of use cases. Rather than over-customizing too early, I focused on building a solid foundation that balances clarity and flexibility. From there, I defined key details such as font sizes, weights, and hierarchy levels to create a consistent typographic rhythm that can easily scale as the system grows.

Configurable & Customize

With Figma’s powerful component features, configuring and managing variations has become effortless. Designers can now easily tweak components and access the right variations through the panel. This approach also makes onboarding smoother, allowing new team members to quickly grasp how each component is structured and used.

Iteration & Testing

To validate the design system’s feasibility, I gradually integrated its components into real projects, using iterative testing to identify issues and refine variants. I collaborated closely with developers to ensure smooth integration and created detailed documentation to support adoption. Regular reviews, training sessions, and workshops helped align both designers and developers with the latest updates.