Pattern or Element Name Goes Here

In this box, provide a brief description or basic definition of the standard, element or interaction. This should be 2-3 sentences at most.

Visual example of the element:

What problem does this element or pattern solve?
While this question may seem self-evident, it is important to clarify the precise problem a particular standard is meant to solve. This tells user when the pattern should be used, as well as when it should be avoided.


Don't assume your users automatically understand the precise purpose of each element or standard, nor that they will immediately recognize when one standard should be selected over another. Clearly stating the purpose and function of every element is important.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:

It is always advisable to provide a link showing the standard actually being used on your live site. Presenting the element in context will normally clarify any ambiguity regarding its purpose.

Detailed specifications

This area contains the information that many people consider the primary purpose of any UX Style Framework: the detailed specifications for a particular standard. Depending on context, this information could include sizes, interactions, colors, fonts, spacing, states, or any other details necessary to fully define the standard. It should also include information on business, legal, or regulatory restrictions that impact the standard.

This particular section may vary greatly in length from page to page, as some elements will need only a few lines of copy, while other may include charts, images, and even clickable samples.

Location of assets to build this element or pattern
Location of UX or visual design assets

In order to construct a standard, the UX and design teams may need links to wireframe components, templates, color swatch libraries, or other files. In this area, teams can add a description of the asset along with a link to its location so others can find it quickly.

Location of development code repository

Use this section to include descriptions and links to code assets. This will allow presentation layer developers to easily locate any HTML, CSS, Javascript or other production-ready code for this particular standard within your development code repository.

Additional details
Information on research, user testing, or usability reports:

In this area, you should provide links to past usability test results, customer surveys, specific market research, and any other sources which verify that this particular standard is superior to other tested solutions.

This element or pattern may also be known as:
To promote a consistent vocabulary within the organization, this area will present the alternative names or terms used to describe this particular standard. For example, the terms "modal", "lightbox" and "overlay" are often used to describe the same interaction. Alternative names are also important to ensure this pattern displays in the Style Framework's internal search engine results when one of these alternative names is entered.
Related elements within this Style Framework:

When designing complex modules or new interfaces, this section will help users find all the components or interactions related to this standard. For example, let’s assume the user wants to create a search form, they may also need to see the standards for “auto-suggest” or “ghost text.”  Ideally, you will provide direct internal links to those related standards as well.

Owners and governance
UX or design 0wner
Enter the name of the pattern's UX Owner
Business or marketing owner
Enter the name of the pattern's Business or Marketing owner
Development owner
Enter the name of the pattern's Development or IT owner

Other information
Please include any other relevant information about this element or pattern:
And finally, this area is included for other information the owners believe might be relevant, yet which does not fall neatly into any of the categories above. Most of the time, it will read “Not Applicable” but it is included in case it is needed.

IMPORTANT: Do not leave any fields blank. If a particular field is not applicable or still being researched, add a few words letting the user know.

Comments & Questions

One Comment

  1. The commentary section allows anyone with a username to leave comments or ask questions about an existing standard. It also permits anyone to provide links or other information about a new or emerging standard that might replace this. Upon hitting “Post Comment”, an email will be sent to the three owners (UX, Dev, Business) for this standard. They can then respond to the comment, and begin tests, processes for updating, or any other action they deem valuable.

    Because there are three owners, one person or department does not have final say on a standard if other stakeholders feel differently. By using a common Comment and Reply format, all conversations about the standard are transparent, and all owners are notified each time there is a new comment. This ensures that no decision regarding a standard can be made flippantly, or without the knowledge of multiple people.

Leave a Reply