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:
Instead, reality likely looks something more like this:
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.
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!
Multi-brand
Organizations like Marriott hotels have multiple brands in their portfolio, each targeting different audiences:
Those different audiences are served by experiences that showcase distinct brand identities, visual languages, and messaging.
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.
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!
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.
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).
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:
Or as an operating system preference using 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:
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.
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.
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?
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!