The “Whatever” design system

```
Project - Build the design system
```
```
Project Type  - DesignOps
```
```
Duration - 3 months (2024)
```
```
Role - Senior Product Designer
```

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.

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

The design system’s structure is one of its standout features, built for flexibility and ease of maintenance:

Base set

At the core of the system lies a base set of tokens—these include fundamental elements like spacing, base colours, typography, and shadows.

System colours

Derived from the base set, system colours are logical mappings (e.g., primary, secondary, background, surface) that guide usage in light and dark themes.

Derived tokens

Every other token references the base set or system colours. This hierarchical setup ensures changes cascade seamlessly.

Ease of updates

Changes at the base level propagate automatically, eliminating repetitive updates across multiple files.

Consistency

All derived elements stay aligned, reducing the risk of mismatched styles.

Scalability

Adding new themes or components becomes a breeze, as the foundational logic remains intact.

Maintenance cycle

The design team aligns on changes through dedicated sessions.
Updates are first implemented in Figma Variables for testing.
Approved changes are replicated in Tokens Studio, pushed to GitHub, and a pull request is created for engineers.

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.