Apparell
Parelsito Design System
Redesign of a design system for a B2B music platform, including foundations, component library and documentation.
Role
UX/UI Designer
Year
2025
Overview
Parelsito is the design system of Apparell's WebApp, a B2B platform where musicians and record labels can track their product's sales and performance. Following a rebrand, I led a complete redesign of the system to align it with the new brand identity.
Context
One of the main problems with the previous version of Parelsito was that it wasn't a fully-fledged design system, but rather a loose collection of Figma components without clear structure, maintenance or even documentation.
Before starting any design work, it was essential to involve developers early on. Together, we aligned on using Vue as the framework, Storybook for component development, and Supernova for documentation. Components were designed in Figma first, then handed off to developers for implementation.
Foundations
With the workflow established, the next step was to build the foundations of the design system. Accesibility was a key consideration throughout, and all elements were structured around design tokens to ensure consistency across both design and development.
Components
The component library was built on top of the established foundations, with each component designed to be consistent, scalable and easy to implement. Close collaboration with developers was crucial during the process, ensuring that every component translated accurately from Figma into code.
The redesign of Parelsito resulted in a more efficient workflow for designers and developers, enabling new features to be built more quickly. The system was built to be flexible and evolve based on user needs, with components refined and adapted as the product grew and real usage patterns emerged. This created a unified visual language and reduced inconsistencies in the UI.
Conclusion
As this was my first design system project, there were some decisions that I would approach differently now. Early on, tokens were not always used semantically and some components had inconsistencies. Documentation on Supernova was not updated as regularly as I would have envisioned at the beginning.
These experiences were invaluable and helped me to better understand how design systems work, how important collaboration between designers and developers is and how essential documentation and maintenance are for a system to remain useful.