Content Guidelines in your Design System
Luke Murphy
A design system is a way to collect and convey any repeatable components, elements and patterns that apply to your product. However, design systems tend to focus on the visual aspects of a product and can often overlook the content and copy that goes into those designs. Content is at the heart of everything we create, without words, our users would be left not knowing what they’re doing, what they’re looking at, or where to go next. The copy we write is a vital part of the experience of the product and, if not included in a design system, is a missed opportunity to ensure your brand is conveyed the right way.
Designs will never exist without copy and copy will never exist without designs, so it makes sense to have them in the same guide. This is especially important if you have few or even no copywriters on your team to run your copy past. Guidelines can help ensure consistency and when they are always in front of you in the design system you use every day, they are more likely to be kept in the forefront of your mind.
So how exactly do you go about adding content and copy guides to your design system?
Steps to creating your own copy guidelines
Understanding your audience
Before you can make a decision on your copy and writing style you need to understand your audience, who are you writing for? This will greatly influence things like tone of voice and even the choice of words you use. A corporate audience will require something more formal, a younger audience likely wants something friendly but straight to the point. You can’t use the same style for both audiences so the first step in creating your guide is figuring out who you are writing for.
Deciding on a tone of voice
Your tone of voice is how your business’s personality is conveyed through words, whether they are spoken or written. It’s the language and flows you use to convey messages. The tone of your copy can be set by deciding on which adjectives you want people to associate with your brand, this could be funny, concise, friendly, open, stern, businesslike or many more. You will want to match your tone of voice to your audience so hopefully, you will have already figured that out in the first step.
Sprout Social’s Seeds Design System has a great example of in depth tone of voice guidelines, where they differentiate by audience and content type
If you are a fun new startup with a cool app idea, you might want your tone of voice to be friendly, casual, and even a little silly. Whereas if your audience is Enterprise C-Suite people, you might want to appear more formal and dignified. The tone of voice you choose can dictate what words you might use or what capitalization style you pick so you will want to spend time on your tone of voice and make sure you have buy-in from the marketing team as well as the wider org before making a final decision.
Outlining commonly used words
This may seem a bit much to add to a design system at first, but the more you think about it the clearer it will become. In your design, there will be commonly used words to indicate actions a user can take, things like contact, download, delete and share. If you don’t have an outline on what words you should use throughout your designs to indicate these actions it can be easy to create small inconsistencies across your product.
Having a centralized repository outlining these common words can ensure consistency across your product and help your users find the action they are looking for without being confused.
Adding microcopy and UX copy guidelines
Microcopy is the small snippets of text within your product. Usually limited to a sentence, some examples of these would be warning messages or tooltips. Applying your tone of voice in such a small snippet of text can be hard, but these must align with the rest of your copy. As they usually convey important information to your users, some attention should be given to ensuring the copy is clear, concise and informative.
Shopify’s Polaris has a great example of UX copy guidelines (in this instance, referred to as ‘Product content’
Microcopy within a product falls under the umbrella of UX copy. When thinking of how you can add UX copy guidelines to your design system you may want to consider creating basic principles that people can start from rather than defining rigid guidelines which may be restrictive. As examples, Shopify have a great ‘Product Content’ area in Polaris, and Bill.com have more extensive guidelines in their content style guide
Words admin
Choosing a capitalization style
Depending on the tone of voice you go with this may already be decided for you as different capitalization styles come with different tones associated with them. Title case is where you capitalize all words in a sentence barring any minor words with three letters or less. Sentence case is where you capitalize only the first letter and any proper nouns in that sentence.
Generally speaking, if you are going for a more formal tone of voice you would use Title Case. Sentence case, on the other hand, is generally more relaxed and follows a more casual tone of voice. Using sentence case can make your brand feel more human and approachable.
Formatting for dates, numbers and currency
In the same section that you outline commonly used words, you may also want to include guidelines for formatting a range of different content items like dates, currencies, temperature and time. Adding these to your guidelines will help you consider things like string length when creating your designs. Different currencies have different requirements around decimal places, times can be in 24hr or 12hr formats, and each will affect the length of your written content.
Show me the goods
Want some inspiration? Luckily, there are some great examples of content and copy guidelines out there in publicly accessible Design System sites on the web:
- Microsoft has a full copy guideline section outlining capitalization style, how to handle numbers, common grammar styles and much more.
- Google’s material design system has a section on writing under their communication guidelines.
- Shopify’s design system Polaris has a comprehensive guide on writing copy that includes tone of voice, grammar guidelines and vocabulary sections.
Hopefully, this guide will help you on your way to adding copy guidelines to your design system so we can make all our products a delight to read as well as look at.