Illustration of a person adding content to a web interface

Everything you need to know about content design systems (and how they differ from content style guides)

If you write for a living, you’re most likely familiar with content style guides. If you’re a UX writer or content designer, you may also come across a full-blown content design system. What’s the difference between the two, what are the benefits of each, and which one is right for you? Let’s find out!

Shortcuts – jump straight to:

What is a content style guide?

A content style guide is a document or site with guidelines, recommendations and best practices for everyone who creates content for a company, project or product.

The idea is to give all contributors a common reference guide to help them create consistent content that speaks the preferred language of the product and meets the intended business goals.

What does a content style guide contain?

A content style guide can grow into a pretty hefty document to include things like

  • Business, product and project goals
  • Target audience analysis and/or personas
  • Voice and tone
  • Style guidelines with details like date formats, numbers, punctuation, British/American/other English, abbreviations, title or sentence case
  • A glossary with preferred and banned terms and phrases
  • Accessibility and inclusion: advice about how to create inclusive, accessible content, how to deal with jargon
  • SEO guidelines and recommendations for keyword research
  • Guidelines for writing for different channels (for example newsletters, SoMe, blogs, editorial web content, microcopy)
  • Resources with links for more information
Two illustrations of Lisa Simpson's facial expressions, showing how small differences can make a big difference
Image from a webinar about content style guides with Atlassian’s Lead UX Writer Clara Sherley Appel, illustrating how small differences can make a big difference – and that’s exactly why it’s a good idea to document writing preferences in a style guide.

Examples of content style guides

There are tons of top-notch, publicly available content style guides out there. These for example:

  • Mailchimp – possibly the most celebrated style guide in the world
  • UK government – comprehensive guide that rose to fame after Sarah Winters coined the term content design and set out to transform the user experience on the site
  • Apple – Apple’s writing guidelines include an A-Z with style details, useful recommendations for accessible, inclusive writing and handy tips for writing copy that will be localized

You can see a full list of inspiring content style guide examples in this separate blog article.

Potential issues with content style guides

As great as content style guides may be, there are still a few potential challenges. 

  1. Have you ever tried introducing one to non-writers? I have, with minimal success. Style guides are often created by writers for writers. They don’t always resonate with other stakeholders.
  2. If they are created as a stand-alone document, they are not integrated in the company’s design system. This doesn’t help to encourage non-writers to use them.
  3. Even though they are full of detailed instructions and advice, they typically lack a components and/or pattern library with reusable content elements. This means that those who do use the style guide don’t necessarily save time.

Also, the term “content style guide” comes from the world of content marketing and copywriting. Adopted by UX writers and content designers, the traditional “tone of voice” swiftly became “voice and tone”. This better reflects copy written for a user journey that goes through different emotional states. Apart from that, they’re pretty similar to what you’ll find in a content marketing style guide.

But if UX writing and content design are really part of design, shouldn’t the style guide also be fully integrated in the design system? Yes please, that makes total sense! And this is exactly why many product teams now focus on developing a content design system, ideally integrated in the company design system.

What is a design system?

Before we dive into content design systems, let’s clarify what a design system is. Here’s the definition provided by Norman Nielsen group

“A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.” 

For many of us, the first thing that springs to mind when thinking of design systems is specs for color, typography, spacing and grids. But a design system can be much more systematic and methodical. Brad Frost for example has developed the chemistry-influenced atomic design approach, which is a way to move away from creating simple web pages to actual systems of components.

Atomic design includes five levels or stages:

  • Atoms (examples form a web interface would be a form label, input or button)
  • Molecules (groups of atoms)
  • Organisms (combinations of molecules)
  • Templates (wireframes with placeholder content)
  • Pages (wireframes with real content)

Perhaps the most obvious advantage of a design system is that both designers and non-designers have access to corporate design elements, making company communication more consistent.

Another benefit of a design system is that you don’t have to reinvent the wheel with every design. Instead you have a library of existing designs that you can reuse for your purpose. This is most definitely a welcome time-saver. And a positive side-effect of having more time is that the team can focus on more pressing tasks.

Far from every company has a design system, and not everyone needs one. Small teams may find other ways to synchronize their work, or use a mini version of a full-blown design system. But a company set on growth would be wise to keep a future design system in mind.

What is a content design system?

If we apply the main points of a design system to content, we get something a bit different than a regular style guide. To qualify as a content design system, it should:

  • Be more than a voice and tone, glossary and style recommendations
  • Include reusable content elements that can be used by writers and non-writers alike

Ryan Cordell hits the nail on the head in his article about the Deliveroo content design system

“When we say Content design system we mean a set of scenario-specific components, backed by research and agreed upon by the team, fully integrated into the design system our Product designers and Engineers use right now. Something that allows them to make solid content decisions without us.” 

So ideally, a content design system is included in the design system – not a separate, lonely document that only writers are familiar with.

Benefits of a content design system

The benefits of a content design system are the same as a regular design system. It aids consistency, saves times and frees up capacity for more complex problem solving. There’s also the added bonus of cementing content as a natural part of the design process 😍

Examples of content design systems

There are plenty of existing design systems that have started to integrate content out there. Here are a few you can check out:

Others fall somewhere right in between a content style guide and a content design system. Like the brilliant Intuit Quickbooks. It has a fab content section, but it’s separated from the design part, and the content pattern section doesn’t include any reusable components, as far as I can see. Still, definitely worth a look!

Content design systems in action

So what does it look like when design systems incorporate content? Let’s check out a few of our faves:

1. Hubspot’s Canvas

Hubspot’s Canvas design system has a wonderful mix of UI components, illustrations, guidelines and copy best practices and examples. Here’s a snapshot of a page about empty states in their pattern library:

A snapshot of Hubspot's empty state guidelines, including image and copy recommendations as well as links to visual component examples

The component links in the image go to visual/copy examples like this one:

A component example of an empty state in Hubspot’s Canvas design system, showing an illustration, a heading, and an explanatory piece of microcopy
A component example of an empty state in Hubspot’s Canvas design system, showing an illustration, a heading, and an explanatory piece of microcopy

2. Salesforce’s Lightning

Salesforce’s Lightning design system also provides copy recommendations. As you can see in the examples below, the illustrations themselves often lack copy examples, but they do provide thorough copy guidelines:

Visual examples of empty states in Salesforce’s Lightning design system, showing available options for illustrations, body text, headlines and a call to action
Visual examples of empty states in Salesforce’s Lightning design system, showing available options for illustrations, body text, headlines and a call to action.

Here are the accompanying copy guidelines:

Copy guidelines for empty states in Salesforce’s Lightning design system, including specific recommendations like “The headline should start with a verb”
Copy guidelines for empty states in Salesforce’s Lightning design system, including specific recommendations like “The headline should start with a verb”.

I love how specific these guidelines are, but it would be even better if the illustrations had real, best practice examples of copy.

3. Shopify’s Polaris

Shopify’s stellar design system Polaris has separate sections for content and design, but they also have a components section with info for developers, designers and content designers. Here’s a snapshot of the component library’s content guidelines for banner titles:

Content guidelines for banner titles in Shopify’s Polaris design system, including specific copy recommendations and a best practice example
Content guidelines for banner titles in Shopify’s Polaris design system, including specific copy recommendations and a best practice example.

Nice 👏👏👏

Potential issues with a content design system

Setting up and maintaining a fully integrated content design system is a mega effort for sure. It needs constant attention to stay relevant and useful. 

Do you need a content design system?

The short answer is that it depends. It may be overkill for smaller businesses. Some companies may be happy with a regular content style guide. Large corporations most definitely have a lot to gain from a content design system, especially one that’s a part of a wider design system.

Tips:

  • Start small! Building a style guide or system is a process. It will never be finished and that’s not the point either 🙂
  • If it feels like a mammoth task to start from scratch, you don’t have to. Start with an existing style guide or system you like and use that as your base, adapting it as needed.

Need more design system inspiration? You’ll find a few zillion in the Design systems gallery and UXPin’s design system repository Adele.

Join our FREE UX writing course

In this FREE industry-leading course, you’ll learn about:

  • UX writing processes 
  • Testing
  • Research
  • Best practices