PixieBrix Design System Development

A design system is a collection of reusable foundation elements and user interface components guided by clear standards, assembled to build a user interface.

The PixieBrix Design System - PBDS project is focused on building and managing a scalable and consistent design system for PixieBrix to power six web applications.

The design system was developed to achieve consistency, modularity, and scalability.

As digital products become more complex, it is necessary to address operational gaps to provide efficient workflows, improve design output, and enable the product and company to scale.

Atomic Design is a methodology for crafting an effective Design System to build consistent & modular interfaces.
Atomic Design - Brad Frost

Do you remember the idea of "divide and conquer"? The Atomic design principle uses this concept in design by breaking a complex interface or graphic into its simplest parts until it cannot be broken down any further. This method helps keep a consistent brand across products, makes it easier to go from design to development, and speeds up production time.

Survey - existing system

The first approach of the PBDS project was to survey the various design tokens, foundation elements, and assets currently being used in the application. This involved examining the inconsistencies in color, spacing, typography, and grids, which were the core building blocks of the design system. By performing this survey, I designer was able to synthesize their findings and address the issues that needed to be resolved. This initial step helped lay the foundation for the rest of the design system development process.

‍

Define - changes to be made

After identifying the inconsistent tokens, the next step in improving the design system was to categorize the majority of the UI elements. This involved creating a comprehensive list of all the UI components used in the application and grouping them based on their similarities and differences. By doing this, we were able to identify patterns and redundancies in the design, which allowed us to streamline the UI and create a more cohesive and consistent experience for the user.

‍

Implement - changes in phases

The implementation phase was divided into several stages. Using the Atomic Design Principle, I began by mapping the existing design tokens identified in the survey with defined tokens for colors, spacing, typography, and grids to create a foundation for the other levels.

For color and typography, some tokens were kept the same, but additional weights and variants were introduced for a more robust system. An 8pt grid system was also introduced to keep the element layout consistent. Components were built with abstraction in mind, where individual elements (atoms and molecules) were designed from the ground up to be modular.

‍

Foundation definition

The PBDS project placed great emphasis on creating a consistent and cohesive design system, and one of the key aspects was the color palette. While some of the existing color tokens were retained, additional weights and variants were introduced to create a more robust system. This allowed for greater versatility in designing interfaces, as designers could select from a wider range of colors to create the desired aesthetic.

The design system already used a late version of the Font Awesome Library, but the team found the need for more icons that were unavailable. They decided to use the free Material icon set with the hope of phasing out the initial icon set for a more robust one.

‍

Another important aspect of the design system was the grid system. An 8pt grid system was introduced, which helped maintain consistent spacing and alignment between elements. This grid system served as a framework for designing the layout of the interface, ensuring that every element was in the right place and maintaining visual harmony throughout the design.

Finally, typography was also a critical element of the design system. Like with color, the project retained some existing typography tokens while introducing additional weights and variants for greater flexibility. This allowed designers to select from a wider range of font styles and weights to create the desired hierarchy and emphasis within the interface.

‍

Naming Tokens

‍

‍

Building UI Components

With the foundation tokens in place, I began working on the most used UI element. The Button component was built using the foundation tokens established in the design system. With the foundation tokens in place, the designer worked on designing various styles, sizes, states, and other properties for the Button component. This ensured that the Buttons were consistent across the application and adhered to the design principles established in the design system.

By building the Button using the foundation tokens, I was able to create a modular and scalable component that could be easily customized and adapted to different use cases. I designed various styles, sizes, states, and other properties for the buttons.

With the foundation tokens established, I worked my way down the list of components from the initial survey to rebuild old components and build new ones as required.

Test & Document

For each slice of task on the design system, I followed up with a test where the new token and element are reviewed and tested to meet accessibility marks. I also ensured the system was documented, giving room for future improvement.