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 company rebrand, I led a complete redesign of the system to align it with the new brand identity.
Context
One of the main issues 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 or documentation. The company rebrand created the best opportunity to fix this from the ground up.
Before starting any design work, it was essential to involve developers early on. Together we aligned on using Vue as the framework and agreed on Storybook 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. Accessibility 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 system was designed to be flexible and evolve based on user needs, with components being refined and adapted as the product grew and real usage patterns emerged.
Results
The redesign of Parelsito resulted in a more efficient workflow for designers and developers, enabling new features to be built more quickly. Furthermore, it created a unified visual language and reduced inconsistencies in the UI, establishing a solid foundation for the product to scale.
Conclusion
As this was my first design system, there were some decisions that I would approach differently today. 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 liked.
These experiences were invaluable and helped me 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 over time.