Centralised Library Approach for 40 Products


  • Design System Infrastructure
  • Figma Component Design
  • Product Ownership
  • QA Testing
  • Design System documentation
  • Design System Adoption and Education
  • UX Patterns Documentation
  • Visualisation Library


  • StorybookStorybook
  • ChromaticChromatic
  • GithubGithub
  • FigmaFigma
  • SupernovaSupernova
  • ZeroheightZeroheight
  • AngularAngular
  • ReactReact
  • TailwindTailwind


  • SaaS
  • B2B
  • Engineering
  • Retail / CPG
  • Financial Services
  • Industrial
  • Media
  • Enterprise IT


  • Fully operational and fully functional design system

Project Length

  • 1+ years


Design System Manager

SymphonyAI is a leading enterprise SaaS company for retail/CPG, financial services, media, and enterprise IT. Leveraging cutting-edge artificial intelligence, SymphonyAI drives innovation, efficiency, and growth across these sectors. Specializing in applying AI technologies, the company addresses complex challenges, offering clients strategic advantages in competitive markets. This approach not only enhances operational efficiencies but also fuels future advancements within the Retail/CPG, Financial Services, Industrial, Media, and Enterprise IT sectors. With a commitment to driving transformational outcomes, SymphonyAI empowers businesses to thrive in the age of AI.

UI Components
Project overview

Full migration towards a centralized library

A unified centralized library offers numerous benefits for companies with multiple products, ranging from improved efficiency and scalability to an enhanced and consistent user experience and brand differentiation.

Visual Consistency
Consistency in visual design elements improves brand recognition and the overall user experience.
Development Efficiency
No more duplication of work. Reusing components from the library accelerates development speed and time-to-market for new features and products.
Cost Savings
Reducing manual effort, minimizing rework, and optimizing workflows leads to cost savings. Solid design and development processes allow for better resource utilization.
Scalability and Adaptability
A design system provides a scalable foundation for the product, making it easier to adapt to new business requirements while ensuring consistency.
Decreased Maintenance with Consolidated Tools
After the migration process, the old library will be deprecated to save resources, reduce maintenance needs and cognitive load for design system users.
Enhanced User Experience
The new design system ensures a cohesive and well tested user experience across all products. This contributes to improved usability, accessibility, and user satisfaction.
Dashboard Overview

How Can We Centralize All Assets?

Since there is no one tool to centralize everything from design to development, we had to figure out how to link all parts of the design system and where to centralize all assets.


Single Source of Truth and a Clear Structure

We decided to use Supernova as a central source of truth where all assets are linked.

The design library is housed in Figma, while Supernova is used as a token storage and exporter. GitHub serves as a repository for component libraries and variables.

Central Design System Model


Creating an Accessible Color System

Creating an accessible color system that would be flexible for different theme options and at the same time support light and dark modes was a challenging task.


Manual Tweaks to the Initial Palette

We created a primary color palette based on our brand colors. To meet accessibility standards, we slightly adjusted some of the brand colors.

Following the initial palette creation, we manually updated the shades to maintain a consistent color contrast across the brands.

By ensuring that the first five shades in the palettes were accessible with white text and the next five with dark text, we were able to switch between brand themes while preserving an accessible contrast level.

Color Scheme

Dark UI vs Light UI

Ownership and Control over Styling

How can we manage, maintain and execute the transition from design to code?


A Centralized Token Approach

We made a simple token system, using clear names that everyone can understand and work with across different divisions. We use the Supernova Design System tool to keep and share these tokens in many formats and to document design decisions. Using Supernova simplifies component styling and speeds up development.

Token workflow within CDS

Token Naming

Components and Documentation

Our goal was to create highly sophisticated Figma components, align naming across design and code and create comprehensive documentation for design and development.


Establishing Solid Ground Rules

We created an industry standard UI kit that is flexible, organized and presented in a way that makes it easy for both new and highly experienced designers to understand and use.

Clear guidelines, with lots of examples, covering all known use cases were created to ensure high adoption. We also created specifications covering everything that is needed for styling and development. Explanations were added for the most important patterns related to digital product design.

We also covered navigation patterns, messaging, button placement, inline editing, advanced filtering and more.

CDS Guidelines

How Can We Engage CDS Users?

It was important to not only get product teams to use the central design system, but also actively contribute to it. We wanted people on the front lines that actively work with the design system to provide feedback and help us drive improvements.


A Structured Contribution Process

Establishing a structured workflow for the contribution process enables team members to effectively propose, develop, review, and integrate new features, such as components, patterns, and guidelines. By facilitating collaboration and iteration among designers, developers, and other team members, this process ensures the continuous improvement and alignment of the design system with the organization's evolving needs, ultimately enhancing its relevance and utility.

Contribution Goal

Token Naming

Ensuring High Quality of UI Components

Without a systematic approach to UI component implementation QA on a library level, there is a risk of inconsistencies, errors, and subpar performance in the user interface components within the UI library, potentially leading to a negative experience for developers and end-users alike.


Component-Level Testing

Implementing a structured QA process for UI component implementation on a library level ensures thorough testing of individual components, their integration, and overall behavior within the library. This approach guarantees that the UI components meet high standards of correctness, reliability, performance, and usability. This enhances the overall quality of the library, fostering a positive experience for developers who utilize it.

Functional QA
Visual QA
The Results

Impact Made

Delivery Speed
  • 3x increased design delivery
  • 30% increased code delivery
Design & Experience
  • Consistent design language across products
  • Improved UI and experience across all projects
  • Streamlined process with fewer dependencies
  • Increased quality of delivery
  • Decreased discrepancies between design and code
  • Decreased QA testing time
Collaboration & Focus
  • Improved rapid prototyping and collaboration between designers and product owners/managers
  • More focus on conceptualization, innovation and research

Our clients' success stories speak volumes about our impact

“Motiff has been a great strategic design partner, as we evolved our company onto a design system their knowledge, and expertise has proved invaluable. With capabilities across a variety of UX disciplines, we can conveniently utilize Motiff’s team as our needs evolve and grow. We look to maintain a long-term relationship with them to always be ready for highly detailed and polished design activities as well as development and management.”

SymphoniAI Logo Jonathan Carpenter
Head of UX at SymphonyAI