Supernova design system

Overview

Supernova is Matterport's design system. What initially started as the cleanup and reorganization of a couple of antiquated component libraries turned into a journey to develop a system of reusable styles, components, and patterns for all web products at Matterport.

The Supernova effort was comprised of anywhere from three to five engineers and one designer dedicating any free time they might have, and myself. Given these constraints, we figured the greatest bang for our buck would be designing and building a base or fundamentals component library — you know the kind: buttons, form fields, tab bars, dividers, and anything else essential that all designers would benefit from sharing.

Matterport had gone through a small brand refresh about a year or two before I joined. As part of that work, a type scale and color palette were already in place. For Supernova, we took these styles, solidified a few other visual design fundamentals (elevation, shape, spacing), and organized them into a library called Foundations. Working with engineering, we also tokenized these styles so designers could easily refer to them when handing off designs to engineers.

Working with a designer external to Matterport, we created a new product iconography system along with guidelines for how designers might create their own icons to fit within the system.

And finally, in an effort to make some of this work easily accessible and more visible, we hosted our components on Storybook. Here, people can interact with the actual, final versions of the components.

Update

Without a dedicated team, design systems are always going to be uphill battles. They are products, and, in theory, their development should work like a product team. At the beginning of 2023, due to limited resources, the company needed to tighten the belt on certain initiatives. While this was a bit sad, I'd like to write a little about what I would do should we have the opportunity to revive this effort — coming soon.