As design systems grow, companies need scalable solutions to support multiple brands, products, or platforms while maintaining efficiency and consistency. With Supernova, there are two primary approaches to structuring a multi-brand design system:
1. Single Design System with Brand Layers
Ideal for teams managing multiple brands, product areas, or platform variations within one shared system and documentation site.
2. Separate Design Systems for Each Brand, Product, or Platform
Designed for larger organizations needing distinct design systems, independent documentation sites, and governance models.
Each approach has unique benefits and trade-offs depending on how teams work, how design data is structured, and how documentation is consumed.
Understanding Supernova’s Core Structure
At the highest level, a SupernovaWorkspace serves as the home for your Design Systems. It’s where teams collaborate, manage Design Data, and publish Documentation. Within a Workspace, you can create and structure multiple design systems, each housing the key elements that bring your products to life—such as tokens, components, and assets. Each Design System can support one or multiple brands, platforms, or product lines, offering both flexibility and scalability.
Supernova Terms Table
To clarify key terminology, here’s how Supernova defines core concepts within its UI:
Workspace
The home where your organization’s team structure is defined and where one or multiple Design Systems live.
Design System
The central hub where you aggregate all your reusable components and design tokens from multiple Figma libraries and collaboratively develop guidelines for design, brand and development.
Each design system in Supernova corresponds to a single documentation website and serves as the source for exporting tokens and assets to code.
Design System Data
The tokens, components, assets, and fonts stored within a design system.
Data Source
Each design system’s data is set up using an external integration, such as Figma files, Tokens Studio, or the Figma Variables Sync plugin.
This integration serves as the foundation for building your documentation guidelines and exporting assets and tokens to code.
Documentation
The published knowledge base containing guidelines, usage instructions, and implementation details for the design system.
Brand
A structured folder within your data sources that allows differentiation between products, platforms or teams making it easier to manage, document, and export to code within a single Design System.
Theme
A set of overrides for token values, enabling brand-specific styling while maintaining a shared core system.
If you're using the Figma Variable Sync plugin as a data source, this is how Supernova maps Figma Modes.
Pipeline
A code pipeline that automatically watches for events in the design system, runs a specified exporter, and delivers the resulting code to your chosen destination.
Exporter
A package that transforms design system data into production code.
Now that you are familiar with Supernova concepts, let’s dive into the two different setup options and explore how they are structured within Supernova, with real-world use cases for each approach.