Reusable pieces of content to establish thoughtful, scalable, and consistent language
UI text patterns are our building blocks of writing. They’re not attached to one component but appear across all experiences. Text patterns are distinct from each other. The differences between them are a matter of purpose, length, information architecture, and user perception.
With text patterns defined, we don’t have to reinvent the wheel every time we’re about to design another piece of content. Instead, we have a scalable solution that speeds up our writing process. But text patterns don’t only enable faster design—they improve internal communication, too. When we all know what’s a label and how it’s different from a description, we avoid misunderstandings and work efficiently.
The purpose of a particular text pattern is always the same, but its content can differ. A heading can be conversational (onboarding flows, product announcements) or succinct, for example, when we need to guide people through a multi-step journey. In both cases, a heading emphasizes the essential information in the hierarchy. But knowing people’s state of mind, scenario, and the way people read online, we can apply tone and style that will help them accomplish their goals.
Component-specific guidelines will be included in the component documentation.
Headings indicate the highest levels of the information hierarchy, from most to least important.
How-to: Accessible heading structure - The A11Y Project
Headings are the backbone of the content of a page. A visitor should be able to scan or navigate a webpage using headings to get a good impression of its content.
A text providing the necessary context and explanation. It communicates additional information to help people progress and make a decision.
Label is a text that indicates or briefly describes the smallest elements in the experience: icons, categories, numbers, status, etc. It provides information to help people understand the experience in detail.
Button label is an interactive text that indicates the action people perform.
Its purpose is to make people understand what happens when they perform an action.
Content: One to three words, noun + verb combination, reduced punctuation, for example: Complete order.
Link text allows people to go to a different place. It indicates the place where people will be taken to.
Content: Short sentences, for example: Learn how to use Clips.
The concept of text patterns is influenced by Torrey Podmajersky’s Strategic Writing for UX, a book where Torrey gives guidance on how to design consistent content. For us, text patterns also became a tangible way to structure and organize the documentation. We want to thank Torrey for the inspiration.