Multi-brand design systems

Multi-brand design systems in Supernova

Supernova gives you the freedom to create a design system that encompasses all brands of a company. In a Supernova design system, you can create brands that may share some similar tokens, components or assets, which which could be styled independently.

With the documentation editor, you can access design system content from all brands and document them side by side in one website.

D — Brand dropdown

Enable a multi-brand design system

Multi-brand design systems are enabled by default on the Team and Company plans. Every design system starts with a default brand, and must have at least one brand. This brand can be renamed if desired.

If you have a design system already and would like to enable multi-brand, your existing design system content will become the first brand.

Disable a multi-brand design system

1. In design system settings, click Brands.
2. Click the Brands enabled toggle in the top right corner to turn it off.

Enable a multi-brand design system

Create a new brand

Create a new brand

1. Click the brands dropdown and select + New brand, or from the brand settings page click + New.
2. Enter the name and description (optional) for the new brand.
3. Click Confirm.

Creating a new brand

Delete a brand

1. In the brands dropdown select Edit brands, or go to Brands in design system settings.
2. Hover over the brand you would like to delete and click Delete.
3. In the delete brand dialog, click Confirm.

Edit brands

1. In the brands dropdown select Edit brands, or go to Brands in design system settings.
2. Hover over the brand to edit and click Edit.
3. Change the name or description and click Confirm.

Editing a brand

Switch between brands

1. Click to open the brand dropdown.
2. Select a brand.
3. Supernova will show the design system content associated with this brand.

Switch between brands

Create branded design system content

1. Click to open the brand dropdown.
2. Select a brand.
3. If this is a new brand, or if the brand is empty, you can import content from a data source.

Branded documentation blocks

When brands are enabled, blocks that use information from your design system (i.e. tokens, components, assets) will have an extra selection option. Each token block can be changed to show information from a chosen brand.

If you switch between brands with tokens already selected, matching tokens will be kept in the block. Otherwise, if they don't have a corresponding match, they will be removed.

Changing the brand for a token block