Real-World Examples of Structuring Separate Design Systems

Quick Recap 

Before we dive into structural examples, let’s do a quick recap of what Setup 2 involves—and why it's a strong starting point for many teams.

Setup 2 is ideal for teams that need greater separation, governance, or autonomy across different brands, products, or platforms. Instead of grouping everything under one design system, this setup creates separate design systems, each with its own documentation website, contributors, and workflows.

Each design system can serve a specific purpose—whether it's a brand, a product vertical, a platform, or even a version of your system—and can be managed by a dedicated team.

📌 Best for: 

Large organizations, distributed teams, or product ecosystems where contributors require autonomy, and documentation needs to be targeted.

Summary of Key Benefits of Setup 2:

• Multiple documentation websites: One per design system, allowing for targeted content.
• Independent governance: Different teams can manage their design systems without overlap.
• Isolated code automation: Set up custom pipelines per system.
• Precise access control: Tailor permissions at the design system level.

Every organization structures its design system differently based on team size, product complexity, and governance needs. Here are three real-world ways teams are structuring their systems using Setup 2: Separate Design Systems.

1. Multiple Brands, Different Design Systems

Organizations managing multiple brands under one corporate umbrella that need distinct documentation sites due to differing audiences, design components, and use cases.

👀 Supernova Customer Example:

KLM & Air France Design System

• The KLM Design System serves both KLM and Air France, two airline brands under the same parent company.
•  While both brands share core design principles, their physical design components, UI patterns, and branding elements differ.
• Instead of housing both brands in a single documentation site, they use separate design systems, each with its own dedicated documentation website.

✅ Why this setup works:

✔ Provides a customized experience for each brand’s design & development teams.

✔ Maintains brand consistency while allowing for brand-specific design evolutions.

✔ Enables separate governance models, ensuring that each airline can iterate independently while still aligning with the core system.

💡 Pro Tip:

This approach is also great when design languages or business goals differ significantly across brands.

2. Product Verticals or Teams

Companies managing multiple product lines that require separate documentation websites to serve distinct audiences while maintaining a shared foundation.

👀 Supernova Customer Example:

Grupo SBF – Nike Brazil & Spoint & Centauro

• Grupo SBF operates multiple sportswear and retail brands, including Nike Brazil and Spoint.
• They use separate design systems in Supernova, each with its own documentation website, ensuring that each brand’s unique requirements are addressed.
• This structure allows them to tailor design system guidance specific to the branding, UX, and technical needs of each vertical.

✅ Why this setup works:

✔ Keeps brand-specific documentation focused without mixing unrelated content.

✔ Ensures teams working on different product lines have dedicated reference materials.

✔ Still enables a centralized core system for shared tokens, components, and principles.

3. Platforms or Product Areas

Teams that manage multi-platform products (iOS, Android, Web, Dashboard, etc.) or different product areas within the same company that evolve at different speeds.

👀 Supernova Customer Examples:

CBS Sports & CBS Sports App

• The CBS Playbook team manages CBS Sports and CBS Sports App using separate design systems.
• Their sports content, UI components, and design guidelines differ significantly across products.
• Instead of maintaining one complex documentation site, they opted for distinct documentation websites with multi-design system navigation to connect them when needed.

Automotive Industry Design System Example

• An automotive company structured its design system documentation by platform, with separate sites for Web, iOS, Android, and Dashboard interfaces.
• Each platform has unique UI patterns, accessibility considerations, and technical constraints, making this separation crucial.
• Different teams own different platforms, each operating at different development speeds, requiring independent documentation.

4. Legacy Versions or System Versions

Some teams use separate design systems to manage legacy or versioned systems. For example, the Flare DS team (example below) maintains different Supernova design systems for major versions of their product. This is also a technique used by large teams like IBM Carbon, to provide clear documentation and export options for v10, v11, etc.

👀 Supernova Customer Example:

Flare Design System

• Flare DS adopted a multi-design system navigation approach to document different major versions of its system.
• Instead of maintaining one evolving documentation site, they create a new design system for each major version while still making previous versions accessible.
• This method is similar to IBM Carbon Design, which provides structured versioning while allowing teams to continue referencing older iterations as needed.

✅ Why this setup works:

✔ Enables platform-specific best practices without cluttering a single documentation site.

✔ Allows teams working on different platforms to move at their own pace while still aligning to shared principles.

✔ Ensures legacy versions remain available while teams adopt newer iterations at their own speed

‍

💡 Curious how others are doing it?

Check out our FigJam board showcasing how organizations across sectors like mobility, SaaS, and retail manage multiple design systems to create targeted documentation and contributor workflows.

You can duplicate the board as a starting point to plan your own multi-system strategy—and get inspired by how other teams structure access, governance, and scaling.

‍

➡ What’s Next?

In the next section, we’ll walk through exactly how to configure multi-design system navigation in Supernova—so you can create a seamless browsing experience across all your documentation sites.