Note: This post is adapted from our new online course, Subatomic: The Complete Guide To Design Tokens. Our comprehensive course delivers over 13 hours of video, enterprise-grade token architecture for both Figma & code, hundreds of resources, a certificate of completion, and a whole lot more. You can order the course here!

“DeSiGn SyStEmS KiLl CrEaTiViTy.” “DeSiGn SyStEmS MaKe EvErYtThInG lOoK tHe SaMe.” If I had a nickel for every time I heard that sentiment expressed over the years, I’d be writing this from a fancy beach-front bungalow.

Of course, there’s a grain of truth to these cantankerous statements. Like all things in life, there are tradeoffs that come with working with a design system. Compared to the freedom of a blank canvas, design systems do indeed introduce constraints. In exchange for relinquishing complete creative control, teams wielding design systems receive a slew of benefits: more cohesive user experiences, higher-quality products, increased velocity, a shared language between collaborators, a future-friendly foundation to build upon, materials to innovate, and more time & headspace to focus on more worthwhile tasks than rebuilding the card for the umpteenth time.

BUT! The grain of truth in these statements remains. An organization’s digital product landscape doesn’t look like this:

A grid of orange circles that each have a label that says "product" on it

Instead, reality likely looks something more like this:

An assortment of circles with the label 'product'. Each circle is a different size, color, and has different typography styles

Organizations need to support many digital products, websites, apps, and software of all shapes and sizes. Each and every product has its own unique goals, users, constraints, opportunities, and design needs.

Digital makers are under an immense amount of pressure to deliver more things to more people, to do it quickly, and to maintain exceptional quality. And of course, the digital landscape is growing larger, more diverse, and harder to grasp by the minute. No pressure or anything!

That’s why we find ourselves in a bind, needing two competing things at once. We simultaneously need the efficiency, quality, & scale that design systems provide AND the flexibility and agency to meet each product’s unique needs. The question becomes: can we reap the benefits of using shared systems without forcing everything to look the same?

The Multi-All-The-Things Organization

For over 12 years, we’ve had the privilege and pleasure of helping a multitude of organizations wrestle with this dynamic and create/evolve design systems to power their multi-product, multi-brand, multi-framework, multi-platform, multi-generational, multinational, multimodal, etc organizations. We lovingly refer to them as “Multi-All-The-Things” organizations.

Multi-all-the-things: products, brands, frameworks, platforms, redesigns, rebrands, product families, color modes, subbrands, whitelabeling, campaigns

Every organization has to navigate its own unique Multi-All-The-Things landscape, which can take many forms.

Multi-product

The overwhelming majority of organizations need to support two or more digital products with their design system. This is the quintessential design system use case: design and build multiple products using the same building blocks. In fact, we collaborated with Caterpillar on their multi-product design system named Blocks!

A collection of various websites operated by Caterpillar

Caterpillar maintains a multitude of websites: cat.com, a parts e-commerce store, a careers page, find a dealer, and a whole lot more. Their Blocks design system helps them deliver quality at scale.

Multi-brand

Organizations like Marriott hotels have multiple brands in their portfolio, each targeting different audiences:

Logo wall of Marriott hotel properties, organized by tier: Luxury, Premium, Select, and Longer

Those different audiences are served by experiences that showcase distinct brand identities, visual languages, and messaging.

A cross-section of several Marriott-owned hotel brand websites

Sub-brands

Companies like Apple have a slew of sub-brands (iPhone! Apple Music! MacBook! etc) that both inherit from the parent brand but also have their own distinct qualities.

We worked with DotDash Merideth to create a suite of digital properties that included the health website Verywell. They’ve since grown the property into multiple sub brands Verywell Health, Verywell Fit, and Verywell Mind, which are differentiated by unique colors and iconography.

Verywell Health, Verywell Fit, and Verywell Mind websites displayed next to each other

Rebrands, refreshes, and redesigns

Organizations can’t help themselves but to overhaul their brand/visual language from time to time, which can take the form of tiny tweaks to burn-it-all-down total transformation. If the redesign isn’t currently in progress, I promise you it’s coming!

Prior Verizon website design featuring black, white, and subtle red accents, and an updated website that features bright yellows and reds

Telecom company Verizon updated their website from a predominantly black-and-white design to a bright yellow-and-red design.

It’s often necessary to support both existing “legacy” designs while rolling out the new “next-gen, v2, new-and-shiny” designs. Tricky!

White-labeling & campaigns

Some organizations (think SaaS companies) need customers to insert their own branding and customize the interface. For instance, Blend creates software that handles the gnarly process of applying for a mortgage, and provides that software to banks. White-labeling ensures the experience feels like the bank’s — not Blend’s — so users (people actually applying for a mortgage) trust they’re dealing with their financial institution.

A sample of Blend's UI with different white-labeled color themes and logos applied

In addition to white-labeling, other organizations (think e-commerce) need to customize UIs to support seasonal and one-off campaigns (e.g. orange and black buttons for a Halloween theme).

Multi-product families

Many organizations support both marketing experiences (with big typography, chunky cards, and all the marketing fixings) and more utilitarian, functional enterprise software (with dense data tables, modals on modals, and other capital-E Enterprise qualities).

A side-by-side comparison between Salesforce.com and Salesforce enterprise software

Salesforce.com features all of the hallmark qualities of a marketing website: big typography, plenty of whitespace, chunky cards, and even illustrations. This is a fundamentally different experience than Salesforce’s software, which features dense data tables, modals upon modals, and complex forms.

Multiple color modes

All design systems need to tackle the inverted/knockout color use case in order to ensure text, icons, and components can sit against a dark background:

Other Multi-All-The-Things organizations need to go further and support multiple color modes, either surfacing them as a user preference like GitHub:

GitHub's theme preference page, showing various options for light and dark mode

Or as an operating system preference using [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query like on our pal Dave Rupert‘s website:

Or a combination of both OS-level color mode support and user preference, as demonstrated by the fantastic Piccalilli website:

A side-by-side of Piccalilli's website with dark and light mode applied

Multi-framework

There are many many many ways to build a website. Many organizations support a dizzying array of web tech stacks, frameworks, and systems: React! Angular! Vue! Svelte! Drupal! WordPress! AEM! Crusty old stuff! Even if things look identical from a user perspective, they could be constructed using wildly different technologies under the hood.

A number of varied circles with different technology logos (React, Angular, WordPress, Vue, etc) inside them

Here’s the rub: users don’t care that the homepage is powered by WordPress and the checkout is powered by Next.js; they just want an easy-to-use, cohesive experience.

Multi-platform

Many organizations’ technology diversity extends beyond the web and into native/hybrid mobile experiences, kiosks, PoS systems, dashboards, and a whole lot more.

Screenshots of Target's website, iOS, Android, and Kiosk experiences

Target supports websites, a native iOS app, native Android app, point-of-sale applications, dashboards, digital signage, and many other types of software platforms

Shared systems + flexible expression FTW

WHEW, that’s a lot of diversity! Each Multi-All-The-Things organization is playing a unique game of three-dimensional chess, so the very legit question becomes: can we meet the needs of wildly-diverse Multi-All-The-Things organizations while also benefitting from shared systems?

A bubble that says "design system" with a question mark next to a

The answer is yes! But it requires taking a more nuanced view of design systems.

The first thing to understand is that it would be a disaster if ALL user interface at an organization originated from a single design system. Instead, an organization’s design system ecosystem can establish a tiered layer-cake architecture that promotes both shared infrastructure/systems as well as flexibility/autonomy.

Design tokens are another critical ingredient for helping Multi-All-The-Things organizations create themeable design systems to serve their diverse digital landscapes. Each digital product has unique goals, users, and design needs, so systems need to be architected to serve each product’s unique needs.

Design tokens variabilize style properties like color, typography, border, shadows, and more to unlock the ability to serve different aesthetic experiences to different products. These design token systems allow organizations to accommodate their myriad products, brands, modes, product families, design generations, frameworks, platforms and more. All without having to sacrifice the benefits that come from working with shared design systems!

I could go on and on about design tokens, and in fact we do in our new online course, Subatomic: The Complete Guide To Design Tokens! The course provides over 13 hours of in-depth videos, Figma & code sample token architecture, naming & governance workflows, a certificate of completion, and a whole lot more to help you master the art of design tokens. If you want to master design tokens to serve your Multi-All-The-Things organization, we hope you’ll check out our course!