"Whatever"
Building the design system for Brella's end user experience.
Design systems are the backbone of a proper design and development process. At Brella, I inherited and evolved the design system that powers the entire user-facing design experience. Born out of a need for consistency and efficiency, this is a blend of legacy and innovation, addressing unique challenges like managing 14 colour themes and balancing light and dark modes at the same time.
Project type
Creating the design system
Expertise
Design systems
DesignOps
Team education
Year
2024 / 5 months
Role
Sr. Product Designer
Before diving into the details I want to recognise the remarkable work of my predecessor, Raunaq, who initiated this design system with Tokens Studio. At the time, Figma Variables weren’t available, and Tokens Studio provided an excellent starting point. It enabled creating a style library accessible to developers via GitHub, laying a strong foundation for what would become “Whatever.”
The name “Whatever” might sound a bit unusual, but here’s the long story short: I spent quite a bit of time trying to come up with a name for this design system, and it ended up taking longer than expected. In the meantime, I named the file “Whatever” and it just stuck.
Challenges
Lack of a team-level library
The design tokens and styles were isolated in separate files, which created a fragmented experience for the team. Designers had to manually copy and paste values from one file to another, which was not only time-consuming but also prone to human error.
Design tokens isolated
With Tokens Studio, design tokens were stored in separate files, making it difficult to manage and scale. Each token had to be updated individually in its own file, which wasn’t ideal when changes needed to be made across multiple components or styles.
Limited support for light/dark modes
Event schedules typically include various elements to organise and arrange content. We recognised that a good event schedule should offer flexibility, allowing event organisers to tailor it to their needs.
Cumbersome updates
Updating design tokens and styles using Tokens Studio was a painful process. Every time we make an update all existing styles in Figma frames were broken.
Approach
When I took over, I sought a more robust and efficient solution. Figma’s newly introduced Variables feature offered a promising alternative for managing design tokens. However, there was a catch: syncing Figma Variables with GitHub required the Enterprise plan—an unaffordable jump for a small business like Brella, with a €50 per seat price difference from the Professional plan.
This challenge led me to a hybrid solution. While this approach required manual syncing, it was the most cost-effective and practical solution for Brella.
Design team
Use Figma Variables for ease of design and quick updates.
Development
Retain Tokens Studio for generating GitHub accessible tokens.
Structure
Maintenance
This workflow ensures that both teams work seamlessly, even with the limitations of a hybrid system. Additionally, I serve as the layer of quality assurance to prevent any mistakes or errors.
The “Whatever” design system is the intellectual property of Brella. While I contributed to its creation and development, the design system itself remains a product of Brella Oy. All brand and product names, logos, and trademarks are the property of their respective owners.
Cover image template from Mockup-Design.