Making a brand feel unified, cohesive, and harmonious while also leaving room for experimentation is a tough balancing act. It’s one of the most challenging aspects of a design system.
Graphic designer and Pentagram partner Paula Scher faced this challenge with the visual identity for the Public Theater in New York. As she explained in a talk at Beyond Tellerrand:
I began to realize that if you made everything the same, it was boring after the first year. If you changed it individually for each play, the theater lost recognizability. The thing to do, which I totally got for the first time after working there at this point for 17 years, is what they needed to have were seasons.
You could take the typography and the color system for the summer festival, the Shakespeare in the Park Festival, and you could begin to translate it into posters by flopping the colors, but using some of the same motifs, and you could create entire seasons out of the graphics. That would become its own standards manual where I have about six different people making these all year (http://bkaprt.com/eds/04-01/).
Scher’s strategy was to retain the Public Theater’s visual language every year, but to vary some of its elements (Fig 4.1–2). Colors would be swapped. Text would skew in different directions. New visual motifs would be introduced. The result is that each season coheres in its own way, but so does the identity of the Public Theater as a whole.
Even the most robust or thoroughly planned systems will need to account for variation at some point. As soon as you release a design system, people will ask you how to deviate from it, and you’ll want to be armed with persuasive answers. In this chapter, I’m going to talk about what variation means for a design system, how to know when you need it, and how to manage it in a scalable way.
We’ve spent most of this book talking about the importance of unity, cohesion, and harmony in a design system. So why are we talking about variation? Isn’t that at odds with all of the goals we’ve set until now?
Variation is a deviation from established patterns, and it can exist at every level of the system. At the component level, for instance, a team may discover that they need a component to behave in a slightly different way; maybe this particular component needs to appear without a photo, for example. At a design-language level, you may have a team that has a different audience, so they want to adjust their brand identity to serve that audience better. You can even have variation at the level of design principles: if a team is working on a product that is functionally different from your core product, they may need to adjust their principles to suit that context.
There are three kinds of deviations that come up in a design system:
We want to enable intentional, meaningful variation. To do this, we need to understand the needs and contexts for variation.
Every variation we add makes our design system more complicated. Therefore, we need to take care to find the right moments for variation. Three big contextual changes are served by variation: brand, audience, and environment.
If you’re creating a system for multiple brands, each with its own brand language, then your system needs to support variations to reflect those brands.
The key here is to find the common core elements and then set some criteria for how you should deviate. When we were creating the design system for our websites at Vox Media, we constantly debated which elements should feel more expressive. Should a footer be standardized, or should we allow for tons of customization? We went back to our core goals: our users were ultimately visiting our websites to consume editorial content. So the variations should be in service of the content, writing style, and tone of voice for each brand.
The newsletter modules across Vox Media brands were an example of unnecessary variation. They were consistent in functionality and layout, but had variations in type, color, and visual treatments like borders (Fig 4.3). There was quite a bit of custom design within a very small area: Curbed’s newsletter component had a skewed background, for example, while Eater’s had a background image. Because these modules were so consistent in their user goals, we decided to unify their design and create less variation (Fig 4.4).
The unified design cleaned up some technical debt. In the previous design, each newsletter module had CSS overrides to achieve distinct styling. Some modules even had overrides on the primary button color so it would work better with the background color. Little CSS overrides like this add up over time. Whenever we released a new change, we’d have to manually update the spots containing CSS overrides.
The streamlined design also placed a more appropriate emphasis on the newsletter module. While important, this module isn’t the star of the page. It doesn’t need loud backgrounds or fancy shapes to command attention, especially since it’s placed around article content. Variation in this module wasn’t necessary for expressing the brands.
On the other hand, consider the variation in Vox Media’s global header components. When we were redesigning the Verge, its editorial teams were vocal about wanting more latitude to art-direct the page, guide attention toward big features, and showcase custom illustrations. We addressed this by creating a masthead component (Fig 4.5) that sits on top of the global header on homepages. It contains a logo, tagline, date, and customizable background image. Though at the time this was a one-off component, we felt that the variation was valuable because it would strengthen the Verge’s brand voice.
The Verge team commissions or makes original art that changes throughout the day. The most exciting part is that they can use the masthead and a one-up hero when they drop a big feature and use these flexible components to art-direct the page (Fig 4.6). Soon after launch, the Verge masthead even got a Twitter fan account (@VergeTaglines) that tweets every time the image changes.
Though this component was built specifically for the Verge, it soon gained broader application with other brands that share Vox’s publishing platform, Chorus. The McElroy Family website, for example, needed to convey its sense of humor and Appalachian roots; the masthead component shines with an original illustration featuring an adorable squirrel (Fig 4.7).
The Chicago Sun-Times—another Chorus platform site—is very different in content, tone, and audience from The McElroy Family, but the masthead component is just as valuable in conveying the tone of the organization’s high-quality investigative journalism and breaking news coverage (Fig 4.8).
Why did the masthead variation work well while the newsletter variation didn’t? The variations on the newsletter design were purely visual. When we created them, we didn’t have a strategy for how variation should work; instead, we were looking for any opportunity to make the brands feel distinct. The masthead variation, by contrast, tied directly into the brand strategy. Even though it began as a one-off for the Verge, it was flexible and purposeful enough to migrate to other brands.
The next contextual variation comes from audience. If your products serve different audiences who all need different things, then your system may need to adapt to fit those needs.
A good example of this is Airbnb’s listing pages. In addition to their standard listings, they also have Airbnb Plus—one-of-a-kind, high quality rentals at higher price points. Audiences booking a Plus listing are probably looking for exceptional quality and attention to detail.
Both Airbnb’s standard listing page and Plus listing page are immediately recognizable as belonging to the same family because they use many consistent elements (Fig 4.9). They both use Airbnb’s custom font, Cereal. They both highlight photography. They both use many of the same components, like the date picker. The iconography is the same.
However, some of the design choices convey a different attitude. Airbnb Plus uses larger typography, airier vertical space, and a lighter weight of Cereal. It has a more understated color palette, with a deeper color on the call to action. These choices make Airbnb Plus feel like a more premium experience. You can see they’ve adjusted the density, weight, and scale levers to achieve a more elegant and sophisticated aesthetic.
The standard listing page, on the other hand, is more functional, with the booking module front and center. The Plus design pulls the density and weight levers in a lighter, airier direction. The standard listing page has less size contrast between elements, making it feel more functional.
Because they use the same core building blocks—the same typography, iconography, and components—both experiences feel like Airbnb. However, the variations in spacing, typographic weights, and color help distinguish the standard listing from the premium listing.
I’ve mainly been talking about adding variation to a system to allow for a range of content tones, but you may also need your system to scale based on environmental contexts. “Environment” in this context asks: Where will your products be used? Will that have an impact on the experience? Environments are the various constraints and pressures that surround and inform an experience. That can include lighting, ambient noise, passive or active engagement, expected focus level, or devices.
Shopify’s Polaris design system initially grew out of Shopify’s Store Management product. When the Shopify Retail team kicked off a project to design the next generation point-of-sale (POS) system, they realized that the patterns in Polaris didn’t exactly fit their needs. The POS system needed to work well in a retail space, often under bright lighting. The app needed to be used at arm’s length, twenty-four to thirty-six inches away from the merchant. And unlike the core admin, where the primary interaction is between the merchant and the UI, merchants using the POS system needed to prioritize their interactions with their customers instead of the UI. The Retail team wanted merchants to achieve an “eyes-closed” level of mastery over the UI so they could maintain eye contact with their customers.
The Retail team decided that the existing color palette, which only worked on a light background, would not be clear enough under the bright lights of a retail shop. The type scale was also too small to be used at arm’s length. And in order for merchants to use the POS system without breaking eye contact with customers, the buttons and other UI elements would need to be much larger.
The Retail team recognized that the current design system didn’t support a variety of environmental scenarios. But after talking with the Polaris team, they realized that other teams would benefit from the solutions they created. The Warehouse team, for example, was also developing an app that needed to be used at arm’s length under bright lights. This work inspired the Polaris team to create a dark mode for the system (Fig 4.10).
This feedback loop between product team and design system team is a great example of how to build the right variation into your system. Build your system around helping your users navigate your product more clearly and serving content needs and you’ll unlock scalable expression.
Now that we’ve looked at a few cases where variation works, let’s look at how we can make that variation happen in a scalable way.
Although the reasons we need variation in a system may differ, the way we achieve variation is the same. We can vary either the components or the visual language. Let’s look at both of these approaches in turn.
As we discussed in Chapter 3, components should be designed for flexibility. In his article “Pattern Variations,” Brad Frost writes:
At the heart of a good design system is a set of solid, flexible components that can be arranged to create cohesive, delightful user interfaces. An effective design system provides components that are robust, resilient, flexible, and adaptable (http://bkaprt.com/eds/04-04/).
There are three main ways you can modify components to express variation:
The Guardian uses a variety of card sizes to create hierarchy on the page and to help a reader gauge a story’s importance (Fig 4.11). Components, too, can contain visual variation to communicate a difference in tone. While the Guardian uses structure and style to indicate variation, it’s also important to note how much the content itself communicates that range. Sometimes the best strategy for supporting variation is to let the content speak.
Think of theming as a set of interconnected variables that allow you to represent a brand’s look and feel within your design system. Theming makes it possible to flexibly change the appearance of a product without changing the underlying foundation of components.
At Vox, theming allowed us to achieve a wide range of brand expression in our design system. Each of the components in the system was designed with a default theme to let the team focus on things like hierarchy, balance, and layout first. Later, each of Vox Media’s brands got its own theme with a custom color palette, typography, and spacing scale.
Theming let us express the visual language for all of our brands in a scalable way. It consisted of a few layers:
$text
.$text
the role of “primary text color.”$text
’s individual hex code could be #333333
. Theming works by assigning a token to every element in your UI. Tokens and roles don’t change, but values can be customized according to brand (Fig 4.12). For example, you could say that your primary text color will always use the $text
color token, which will keep your system aligned as you create new variations (Fig 4.13).
Token | Role | Light theme value | Dark theme value |
---|---|---|---|
$background |
Page background | #EEEEEE | #000000 |
$surface |
Component background | #FFFFFF | #152935 |
$text |
Primary text | #000000 | #FFFFFF |
$text-muted |
Muted text | #3E5269 | #DFE6EB |
$interactive-action |
Primary action | #3D70B2 | #5AAAFA |
$interactive-on-text |
Primary action text | #FFFFFF | #FFFFFF |
For theming to work, you need to give your tokens semantic rather than descriptive names. If your buttons have a background color of $color-blue
, you’ll run into trouble down the line if you have to create a theme or if your brand colors change.
Before you can begin creating themes, you need to determine an approach to your theming. What degree of theming are you going to allow? Let’s think back to the levers and dials from Chapter 3. Are you going to let people just turn a few dials or pull the big levers? There are two approaches you can take:
Color is the only dial you can successfully change without changing anything else. Unless you’re swapping out fonts that have exactly the same metrics, you’ll have to change spacing if fonts are altered (Fig 4.14).
We can use all of the foundations of creating a design language to create themes. Our trifecta of type, space, and color contains the most common elements to define for expressive themes.
If only theming type could be as simple as swapping in a different font and calling it a day! But because typefaces vary so wildly, it’s hard to change a font without making other significant changes to the design system. Fonts vary in optical sizing; even if two fonts are set at the same pixel value, an optically small typeface appears smaller than an optically large typeface. The optical sizing depends on each typeface’s physical characteristics. A font with a small x-height, for example, looks smaller than a font with a large x-height.
The other problem with theming type is that all fonts have different vertical metrics (http://bkaprt.com/eds/04-05/). Every font file contains mathematical instructions that describe how to space each character, including the amount of room a glyph should consume relative to its specified size and the amount of space around it. That’s a long-winded way of saying that fonts have different space built into them (Fig 4.15). You will be bewildered and astounded the first time you try to vertically align two fonts within one button component, I promise.
Theming type is challenging, but it’s not impossible. Here’s what I’ve learned about how to make it work.
The first thing you need to do is assign your type tokens and roles.
$font1
was for story titles and headings within the body of an article. $font2
was for the body copy. $font3
was for the page or section headings. $font4
was for metadata and UI copy like tags, captions, timestamps, and button text.44px
as its Size 8 and another could have 64px
, but the headline would always remain in proportion to the relative size of the other type on the page. Once you’ve assigned the type sizes to roles, you need to allow teams to customize those type sizes. You have two options here:
Earlier, I mentioned that the trickiest part of theming text is dealing with the variations in the space around the text. If you theme type, you also need to allow for the space around the type to be adjusted. At Vox, the way we solved this was by theming the space around the type.
You want space to be themed as a lever, not as dials. The global spacing in your design system should feel holistic. If you have really tight spacing in some components and really loose spacing in others, your pages will feel erratic.
A team might want to theme space for a few reasons:
Having a set of three density settings for your components could help people theme space in a way that feels consistent. Why three? You don’t want to build in too much variety. Having a compact space scale, default space scale, and loose space scale covers the most common variations.
Gmail’s density settings provide a good example (Fig 4.19). In this case, they give the end user the option to adjust the layout’s density. For your purposes, you may choose to build density settings into your components to allow internal teams to choose the density that works best for the experience they’re solving for.
Let’s look again at our general promotion module (Fig 4.20). First, we can decide the relationship of space between elements. In this case, we want a larger unit of space before and after the content. Within the content, we want to use a slightly smaller unit of space.
We can define the vertical space in a card by choosing a number from our space scale (Fig 4.21). Regardless of the actual size of the spacing unit, we know there will be more space above the headline and below the button. The card on the left uses the small space scale while the card on the right uses the large space scale. The card on the left is using the “Default” spacing scale, which means there will be 24px
around the content and 16px
between the content. Let’s say another team is using the design system, but they want to use the “Loose” space scale instead of “Default.” They can select that space scale globally, and the general promotion module will automatically use the pixel values from the “Loose” scale.
Size | Compact | Default | Loose |
---|---|---|---|
0 | 0 × 0 | 0 × 0 | 0 × 0 |
1 | 2 × 2 | 4 × 4 | 8 × 8 |
2 | 4 × 4 | 8 × 8 | 12 × 12 |
3 | 8 × 8 | 12 × 12 | 16 × 16 |
4 | 12 × 12 | 16 × 16 | 24 × 24 |
5 | 16 × 16 | 24 × 24 | 32 × 32 |
Color theming means changing the color values in an interface to match an individual brand’s design language. There are two approaches for color theming:
Theming only the foreground colors is much simpler, but also more limited. You would typically choose just a few areas where you’ll allow customization. In this case, you could say that $brand-01
will be customizable, but every other color will stay the same. Then, you would specify all of the areas that will use $brand-01
. This is the minimum amount of theming possible, and it’s good for when you want to give teams a small amount of customization—the variations will feel pretty similar across the board (Fig 4.22).
Theming both the background and foreground gets trickier. You’ll notice I talk a lot about reducing the number of choices teams need to make when deciding on theme values. There’s a good reason for my reluctance to open up a world of options when it comes to theming.
When we created our first color system at Vox Media, we allowed for many, many options. Practically every element of the page had a color variable associated with it (Fig 4.23). The navigation started with $nav-background-color
, $nav-foreground-color
. Okay, sensible enough—but it progressed. $nav-link-color
. $nav-link-color-hover
. Then, we got to our dropdowns: $nav-dropdown-bg-color
, $nav-dropdown-fg-color
, $nav-dropdown-link-color
, $nav-dropdown-link-hover-color
. Just remembering this makes me sweat. And these were only the color variables in the navigation. All in all, we ended up with almost three hundred different variables.
Our thinking was: “Let’s give designers control! They’re experts at choosing colors and will make much better choices than a machine.” In reality, though, this degree of choice was completely overwhelming. We ended up with lots of inconsistency, and a ton of visual QA tickets.
There’s a better way to theme colors: color groups.
The idea of color groups is that you define foreground colors based on their background colors. Then you apply a color group to a component. For example, instead of setting individual values for every single element in our navigation, we would assign it the “dark” color group.
#ffffff
. $primary-foreground
for the more prominent text, $secondary-foreground
for less prominent text, $accent
for supplementary text (like tags), and $link
for links.It makes much more sense to group colors than to define every color individually. The groupings help people think about color holistically when they create a theme, which leads to more consistency: a link color will always be the same when it’s on a dark background.
The color groups also mean you have one source of truth when it comes to testing the accessibility of your color palette. If your color groups are accessible, then the color on your site will also be accessible. If you have an inaccessible color combination, you can fix that in your color group so that it will permeate the entire site.
Color is a powerful tool when it comes to theming. But please—vary responsibly and don’t create three hundred customizable values for color.
Design systems shouldn’t be static—they should be able to flex and change over time. We are building design systems for products that need to change rapidly. To succeed, we need to account for change. Part of allowing for variation in a system is defining where change should happen most frequently.
In the book How Buildings Learn, Stewart Brand explains that different timescales can have an effect on a building:
Our basic argument is that there isn’t any such thing as a building. A building properly conceived is several layers of longevity of built components.
The layers Brand describes are site, structure, skin, services, space plan, and stuff, ordered by an increasing frequency of evolution. Site, the location of a building, never changes, while stuff—chairs, desks, phones, etc.—can change often.
Thinking of our design systems in terms of layers that change at different frequencies can help us support variation in a scalable way. For instance, changing your underlying brand principles would mean that every other part of your system would need to change, too. Changing your grid would impact layouts.
Design systems don’t need to stifle creativity or limit brand expression. You have a vast array of tools to express brand. Choose the ones that will serve your brand purpose best and focus on turning them into signature patterns.
Up to this point, we’ve focused on how to create a design system. However, we can’t see the benefits of the system until it’s integrated into real products. In the next chapter, we’ll look at how to use a design system.