Canon Design System
Spotify
Summary
Building upon Material UI (MUI), we created a new design system for Spotify’s B2B products. This design system is used in 4 new products, enabled a successful beta launch with 3,000+ sign-ups and ~$1M+ worth of annual revenue.
Role: Design System Designer (UI component & patterns)
Background
In H2 2023, Spotify started to offer commercial Developer Experience (DevX) tools that are built on top of Backstage, an open-source DevX platform.
To maintain compatibility with the platform’s existing front-end and still achieve the Spotify look & brand, we developed a “theme” for Material UI that echoes Spotify’s consumer app’s Design System.
Design Outcomes
Atomic Components & Usage Guidelines
We created a new design system, hosting both Material UI and Spotify design styles. It includes a streamlined selection of atomic components and usage guidelines for Designers.
Flexible Theming
By building on top Material UI using variables, modes, and variants, the Design System allows designers to easily switch between plain Material and Spotify theme. Existing internal tools can be translated easily to the new look & feel.
Impact
3000+
Sign-ups for the first product launch with the new design system
4
New products using the new design system
